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.

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.