refactor(types): remove overlay attribute interfaces (#26181)

BREAKING CHANGE:

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

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`.
 
+<h2 id="version-7x-types">Types</h2>
+
+<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
+
+`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
+
 <h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
 
 <h4 id="version-7x-react">React</h4>

angular/src/index.ts

@@ -75,8 +75,6 @@ export {
   ActionSheetButton,
   AlertOptions,
   AlertInput,
-  AlertTextareaAttributes,
-  AlertInputAttributes,
   AlertButton,
   BackButtonEvent,
   CheckboxCustomEvent,

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
          */

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<T = any> {
   text?: string;
   role?: 'cancel' | 'destructive' | 'selected' | string;

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.

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 {

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) => {

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 };

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.

core/src/components/modal/modal-interface.ts

@@ -14,7 +14,7 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> {
   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.
  */

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.

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;

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.

core/src/components/popover/popover-interface.ts

@@ -25,7 +25,7 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
-  htmlAttributes?: PopoverAttributes;
+  htmlAttributes?: { [key: string]: any };
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
@@ -41,11 +41,6 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
   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';

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

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;

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.

packages/react/src/components/index.ts

@@ -35,8 +35,6 @@ export {
 
   AlertOptions,
   AlertInput,
-  AlertTextareaAttributes,
-  AlertInputAttributes,
   AlertButton,
 
   BackButtonEvent,

packages/vue/src/index.ts

@@ -69,8 +69,6 @@ export {
 
   AlertOptions,
   AlertInput,
-  AlertTextareaAttributes,
-  AlertInputAttributes,
   AlertButton,
 
   BackButtonEvent,