diff --git a/BREAKING.md b/BREAKING.md index e0c1544c13..821ad7f28b 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -29,6 +29,8 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Textarea](#version-7x-textarea) - [Toggle](#version-7x-toggle) - [Virtual Scroll](#version-7x-virtual-scroll) +- [Types](#version-7x-types) + - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces) - [JavaScript Frameworks](#version-7x-javascript-frameworks) - [React](#version-7x-react) - [Vue](#version-7x-vue) @@ -182,6 +184,12 @@ Developers using the component will need to migrate to a virtual scroll solution Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`. +

Types

+ +

Overlay Attribute Interfaces

+ +`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead. +

JavaScript Frameworks

React

diff --git a/angular/src/index.ts b/angular/src/index.ts index 38ba6c1c72..7c00685f72 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -75,8 +75,6 @@ export { ActionSheetButton, AlertOptions, AlertInput, - AlertTextareaAttributes, - AlertInputAttributes, AlertButton, BackButtonEvent, CheckboxCustomEvent, diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 32b65254ec..27d3d7405e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -5,16 +5,14 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, FrameworkDelegate, InputChangeEventDetail, InputInputEventDetail, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, TitleSelectedDatesFormatter, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface"; +import { AccordionGroupChangeEventDetail, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, FrameworkDelegate, InputChangeEventDetail, InputInputEventDetail, ItemReorderEventDetail, MenuChangeEventDetail, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, TitleSelectedDatesFormatter, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface"; import { IonicSafeString } from "./utils/sanitization"; -import { AlertAttributes } from "./components/alert/alert-interface"; import { CounterFormatter } from "./components/item/item-interface"; import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces"; import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces"; import { PinFormatter } from "./components/range/range-interface"; import { NavigationHookCallback } from "./components/route/route-interface"; import { SelectCompareFn } from "./components/select/select-interface"; -import { ToastAttributes } from "./components/toast/toast-interface"; export namespace Components { interface IonAccordion { /** @@ -111,7 +109,7 @@ export namespace Components { /** * Additional attributes to pass to the action sheet. */ - "htmlAttributes"?: ActionSheetAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @@ -180,7 +178,7 @@ export namespace Components { /** * Additional attributes to pass to the alert. */ - "htmlAttributes"?: AlertAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * Array of input to show in the alert. */ @@ -1404,7 +1402,7 @@ export namespace Components { /** * Additional attributes to pass to the loader. */ - "htmlAttributes"?: LoadingAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code. */ @@ -1605,7 +1603,7 @@ export namespace Components { /** * Additional attributes to pass to the modal. */ - "htmlAttributes"?: ModalAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. */ @@ -1853,7 +1851,7 @@ export namespace Components { /** * Additional attributes to pass to the picker. */ - "htmlAttributes"?: PickerAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @@ -1977,7 +1975,7 @@ export namespace Components { /** * Additional attributes to pass to the popover. */ - "htmlAttributes"?: PopoverAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. */ @@ -2862,7 +2860,7 @@ export namespace Components { /** * Additional attributes to pass to the toast. */ - "htmlAttributes"?: ToastAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons */ @@ -3864,7 +3862,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the action sheet. */ - "htmlAttributes"?: ActionSheetAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @@ -3931,7 +3929,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the alert. */ - "htmlAttributes"?: AlertAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * Array of input to show in the alert. */ @@ -5206,7 +5204,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the loader. */ - "htmlAttributes"?: LoadingAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code. */ @@ -5413,7 +5411,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the modal. */ - "htmlAttributes"?: ModalAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. */ @@ -5583,7 +5581,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the picker. */ - "htmlAttributes"?: PickerAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @@ -5707,7 +5705,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the popover. */ - "htmlAttributes"?: PopoverAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. */ @@ -6708,7 +6706,7 @@ declare namespace LocalJSX { /** * Additional attributes to pass to the toast. */ - "htmlAttributes"?: ToastAttributes; + "htmlAttributes"?: { [key: string]: any }; /** * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons */ diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 55c72eb01c..9428b59b01 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -11,17 +11,12 @@ export interface ActionSheetOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: ActionSheetAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type ActionSheetAttributes = { [key: string]: any }; - export interface ActionSheetButton { text?: string; role?: 'cancel' | 'destructive' | 'selected' | string; diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 5c1dcc2661..d487f55e9d 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -3,7 +3,6 @@ import { Component, Element, Event, Host, Method, Prop, h, readTask } from '@ste import { getIonMode } from '../../global/ionic-global'; import type { - ActionSheetAttributes, ActionSheetButton, AnimationBuilder, CssClassMap, @@ -100,7 +99,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the action sheet. */ - @Prop() htmlAttributes?: ActionSheetAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * Emitted after the alert has presented. diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index 7dfe782bb3..97a924eb67 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -11,7 +11,7 @@ export interface AlertOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; - htmlAttributes?: AlertAttributes; + htmlAttributes?: { [key: string]: any }; mode?: Mode; keyboardClose?: boolean; @@ -21,11 +21,6 @@ export interface AlertOptions { leaveAnimation?: AnimationBuilder; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type AlertAttributes = { [key: string]: any }; - export interface AlertInput { type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; name?: string; @@ -39,20 +34,10 @@ export interface AlertInput { min?: string | number; max?: string | number; cssClass?: string | string[]; - attributes?: AlertInputAttributes | AlertTextareaAttributes; + attributes?: { [key: string]: any }; tabindex?: number; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type AlertTextareaAttributes = { [key: string]: any }; - -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type AlertInputAttributes = { [key: string]: any }; - type AlertButtonOverlayHandler = boolean | void | { [key: string]: any }; export interface AlertButton { diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 9f1cbc4d6c..b4a17d6001 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -5,8 +5,6 @@ import { getIonMode } from '../../global/ionic-global'; import type { AlertButton, AlertInput, - AlertInputAttributes, - AlertTextareaAttributes, AnimationBuilder, CssClassMap, OverlayEventDetail, @@ -19,7 +17,6 @@ import type { IonicSafeString } from '../../utils/sanitization'; import { sanitizeDOMString } from '../../utils/sanitization'; import { getClassMap } from '../../utils/theme'; -import type { AlertAttributes } from './alert-interface'; import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; import { mdEnterAnimation } from './animations/md.enter'; @@ -124,7 +121,7 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the alert. */ - @Prop() htmlAttributes?: AlertAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * Emitted after the alert has presented. @@ -499,7 +496,7 @@ export class Alert implements ComponentInterface, OverlayInterface { value={i.value} id={i.id} tabIndex={i.tabindex} - {...(i.attributes as AlertTextareaAttributes)} + {...(i.attributes as { [key: string]: any })} disabled={i.attributes?.disabled ?? i.disabled} class={inputClass(i)} onInput={(e) => { @@ -522,7 +519,7 @@ export class Alert implements ComponentInterface, OverlayInterface { value={i.value} id={i.id} tabIndex={i.tabindex} - {...(i.attributes as AlertInputAttributes)} + {...(i.attributes as { [key: string]: any })} disabled={i.attributes?.disabled ?? i.disabled} class={inputClass(i)} onInput={(e) => { diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts index ed76940e29..b96176583d 100644 --- a/core/src/components/loading/loading-interface.ts +++ b/core/src/components/loading/loading-interface.ts @@ -13,13 +13,8 @@ export interface LoadingOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: LoadingAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } - -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type LoadingAttributes = { [key: string]: any }; diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index 65c70797f7..c049a0ea07 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -6,7 +6,6 @@ import { getIonMode } from '../../global/ionic-global'; import type { AnimationBuilder, FrameworkDelegate, - LoadingAttributes, OverlayEventDetail, OverlayInterface, SpinnerTypes, @@ -122,7 +121,7 @@ export class Loading implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the loader. */ - @Prop() htmlAttributes?: LoadingAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * If `true`, the loading indicator will open. If `false`, the loading indicator will close. diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts index 354e41680a..6514fcbec9 100644 --- a/core/src/components/modal/modal-interface.ts +++ b/core/src/components/modal/modal-interface.ts @@ -14,7 +14,7 @@ export interface ModalOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: ModalAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; @@ -40,11 +40,6 @@ export interface ModalCustomEvent extends CustomEvent { target: HTMLIonModalElement; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type ModalAttributes = { [key: string]: any }; - /** * The behavior setting for modals when the handle is pressed. */ diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 784d2a7ef2..b5909c126b 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -10,7 +10,6 @@ import type { ComponentRef, FrameworkDelegate, Gesture, - ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, OverlayEventDetail, @@ -202,7 +201,7 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the modal. */ - @Prop() htmlAttributes?: ModalAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * If `true`, the modal will open. If `false`, the modal will close. diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts index 649e3dbecb..f3b841bab4 100644 --- a/core/src/components/picker/picker-interface.ts +++ b/core/src/components/picker/picker-interface.ts @@ -11,17 +11,12 @@ export interface PickerOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: PickerAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type PickerAttributes = { [key: string]: any }; - export interface PickerButton { text?: string; role?: string; diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 1fd57c4e29..58130a4f0a 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -7,7 +7,6 @@ import type { CssClassMap, OverlayEventDetail, OverlayInterface, - PickerAttributes, PickerButton, PickerColumn, } from '../../interface'; @@ -93,7 +92,7 @@ export class Picker implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the picker. */ - @Prop() htmlAttributes?: PickerAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * Emitted after the picker has presented. diff --git a/core/src/components/popover/popover-interface.ts b/core/src/components/popover/popover-interface.ts index a70691b9c7..b0bec79aa4 100644 --- a/core/src/components/popover/popover-interface.ts +++ b/core/src/components/popover/popover-interface.ts @@ -25,7 +25,7 @@ export interface PopoverOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: PopoverAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; @@ -41,11 +41,6 @@ export interface PopoverOptions { triggerAction?: string; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type PopoverAttributes = { [key: string]: any }; - export type PopoverSize = 'cover' | 'auto'; export type TriggerAction = 'click' | 'hover' | 'context-menu'; diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index e9d6bacfc9..ec96e4efba 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -8,7 +8,6 @@ import type { ComponentRef, FrameworkDelegate, OverlayEventDetail, - PopoverAttributes, PopoverInterface, PopoverSize, PositionAlign, @@ -150,7 +149,7 @@ export class Popover implements ComponentInterface, PopoverInterface { /** * Additional attributes to pass to the popover. */ - @Prop() htmlAttributes?: PopoverAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * Describes what kind of interaction with the trigger that diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 64ce592051..6c9239a30e 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -11,7 +11,7 @@ export interface ToastOptions { translucent?: boolean; animated?: boolean; icon?: string; - htmlAttributes?: ToastAttributes; + htmlAttributes?: { [key: string]: any }; color?: Color; mode?: Mode; @@ -22,11 +22,6 @@ export interface ToastOptions { leaveAnimation?: AnimationBuilder; } -/** - * @deprecated - Use { [key: string]: any } directly instead. - */ -export type ToastAttributes = { [key: string]: any }; - export interface ToastButton { text?: string; icon?: string; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index efb6e29a11..157d7b7814 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -19,7 +19,6 @@ import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; import { mdEnterAnimation } from './animations/md.enter'; import { mdLeaveAnimation } from './animations/md.leave'; -import type { ToastAttributes } from './toast-interface'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. @@ -125,7 +124,7 @@ export class Toast implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the toast. */ - @Prop() htmlAttributes?: ToastAttributes; + @Prop() htmlAttributes?: { [key: string]: any }; /** * Emitted after the toast has presented. diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 3f0e1156ec..f3685072fc 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -35,8 +35,6 @@ export { AlertOptions, AlertInput, - AlertTextareaAttributes, - AlertInputAttributes, AlertButton, BackButtonEvent, diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index a7682b017c..0fbbf3980b 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -69,8 +69,6 @@ export { AlertOptions, AlertInput, - AlertTextareaAttributes, - AlertInputAttributes, AlertButton, BackButtonEvent,