refactor(many): add internal type

Author: thetaPC

core/src/components/action-sheet/action-sheet-interface.ts

@@ -14,7 +14,7 @@ export interface ActionSheetOptions extends OverlayOptions {
 }
 
 export interface ActionSheetButton<T = any> {
-  text?: string | HTMLElement;
+  text?: string;
   role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
@@ -30,7 +30,4 @@ export interface ActionSheetButton<T = any> {
    * users to dismiss the action sheet.
    */
   disabled?: boolean;
-  startContent?: HTMLElement;
-  endContent?: HTMLElement;
-  description?: string;
 }

core/src/components/action-sheet/action-sheet.tsx

@@ -22,6 +22,7 @@ import { getClassMap } from '@utils/theme';
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
+import type { SelectActionSheetButton } from '../select/select-interface';
 
 import type { ActionSheetButton } from './action-sheet-interface';
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -560,12 +561,19 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
       }
 
+      /**
+       * Cast to `SelectActionSheetButton` to access rich content
+       * fields (`startContent`, `endContent`, `description`)
+       * that are passed through from `ion-select` but not
+       * part of the public `ActionSheetButton` interface.
+       */
+      const richButton = b as SelectActionSheetButton;
       const optionLabelOptions = {
         id: buttonId,
-        label: b.text,
-        startContent: b.startContent,
-        endContent: b.endContent,
-        description: b.description,
+        label: richButton.text,
+        startContent: richButton.startContent,
+        endContent: richButton.endContent,
+        description: richButton.description,
       };
 
       return (

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

@@ -25,7 +25,7 @@ export interface AlertInput {
   /**
    * The label text to display next to the input, if the input type is `radio` or `checkbox`.
    */
-  label?: string | HTMLElement;
+  label?: string;
   checked?: boolean;
   disabled?: boolean;
   id?: string;
@@ -35,9 +35,6 @@ export interface AlertInput {
   cssClass?: string | string[];
   attributes?: { [key: string]: any };
   tabindex?: number;
-  startContent?: HTMLElement;
-  endContent?: HTMLElement;
-  description?: string;
 }
 
 type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };

core/src/components/alert/alert.tsx

@@ -27,6 +27,7 @@ import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
+import type { SelectAlertInput } from '../select/select-interface';
 
 import type { AlertButton, AlertInput } from './alert-interface';
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -330,28 +331,20 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
 
     this.inputType = inputTypes.values().next().value;
-    this.processedInputs = inputs.map(
-      (i, index) =>
-        ({
-          type: i.type || 'text',
-          name: i.name || `${index}`,
-          placeholder: i.placeholder || '',
-          value: i.value,
-          label: i.label,
-          checked: !!i.checked,
-          disabled: !!i.disabled,
-          id: i.id || `alert-input-${this.overlayIndex}-${index}`,
-          handler: i.handler,
-          min: i.min,
-          max: i.max,
-          cssClass: i.cssClass ?? '',
-          attributes: i.attributes || {},
-          tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
-          startContent: i.startContent,
-          endContent: i.endContent,
-          description: i.description,
-        } as AlertInput)
-    );
+    this.processedInputs = inputs.map((i, index) => {
+      return {
+        ...i,
+        type: i.type || 'text',
+        name: i.name || `${index}`,
+        placeholder: i.placeholder || '',
+        checked: !!i.checked,
+        disabled: !!i.disabled,
+        id: i.id || `alert-input-${this.overlayIndex}-${index}`,
+        cssClass: i.cssClass ?? '',
+        attributes: i.attributes || {},
+        tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+      } as AlertInput;
+    });
   }
 
   connectedCallback() {
@@ -574,12 +567,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
     return (
       <div class="alert-checkbox-group">
         {inputs.map((i) => {
+          /**
+           * Cast to `SelectAlertInput` to access rich content
+           * fields (`startContent`, `endContent`, `description`)
+           * that are passed through from `ion-select` but not
+           * part of the public `AlertInput` interface.
+           */
+          const richInput = i as SelectAlertInput;
           const optionLabelOptions = {
-            id: i.id!,
-            label: i.label,
-            startContent: i.startContent,
-            endContent: i.endContent,
-            description: i.description,
+            id: richInput.id!,
+            label: richInput.label,
+            startContent: richInput.startContent,
+            endContent: richInput.endContent,
+            description: richInput.description,
           };
 
           return (
@@ -624,12 +624,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
     return (
       <div class="alert-radio-group" role="radiogroup" aria-activedescendant={this.activeId}>
         {inputs.map((i) => {
+          /**
+           * Cast to `SelectAlertInput` to access rich content
+           * fields (`startContent`, `endContent`, `description`)
+           * that are passed through from `ion-select` but not
+           * part of the public `AlertInput` interface.
+           */
+          const richInput = i as SelectAlertInput;
           const optionLabelOptions = {
-            id: i.id!,
-            label: i.label,
-            startContent: i.startContent,
-            endContent: i.endContent,
-            description: i.description,
+            id: richInput.id!,
+            label: richInput.label,
+            startContent: richInput.startContent,
+            endContent: richInput.endContent,
+            description: richInput.description,
           };
 
           return (

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

@@ -1,11 +1,8 @@
 export interface SelectModalOption {
-  text: string | HTMLElement;
+  text: string;
   value: string;
   disabled: boolean;
   checked: boolean;
   cssClass?: string | string[];
   handler?: (value: any) => boolean | void | { [key: string]: any };
-  startContent?: HTMLElement;
-  endContent?: HTMLElement;
-  description?: string;
 }

core/src/components/select-modal/select-modal.tsx

@@ -7,6 +7,7 @@ import { getClassMap, hostContext } from '@utils/theme';
 
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
+import type { SelectOverlayOption } from '../select/select-interface';
 
 import type { SelectModalOption } from './select-modal-interface';
 
@@ -94,12 +95,19 @@ export class SelectModal implements ComponentInterface {
     return (
       <ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
         {this.options.map((option, index) => {
+          /**
+           * Cast to `SelectOverlayOption` to access rich content
+           * fields (`startContent`, `endContent`, `description`)
+           * that are passed through from `ion-select` but not
+           * part of the public `SelectModalOption` interface.
+           */
+          const richOption = option as SelectOverlayOption;
           const optionLabelOptions = {
             id: `modal-option-${index}`,
-            label: option.text,
-            startContent: option.startContent,
-            endContent: option.endContent,
-            description: option.description,
+            label: richOption.text,
+            startContent: richOption.startContent,
+            endContent: richOption.endContent,
+            description: richOption.description,
           };
 
           return (
@@ -139,12 +147,19 @@ export class SelectModal implements ComponentInterface {
 
   private renderCheckboxOptions() {
     return this.options.map((option, index) => {
+      /**
+       * Cast to `SelectOverlayOption` to access rich content
+       * fields (`startContent`, `endContent`, `description`)
+       * that are passed through from `ion-select` but not
+       * part of the public `SelectModalOption` interface.
+       */
+      const richOption = option as SelectOverlayOption;
       const optionLabelOptions = {
         id: `modal-option-${index}`,
-        label: option.text,
-        startContent: option.startContent,
-        endContent: option.endContent,
-        description: option.description,
+        label: richOption.text,
+        startContent: richOption.startContent,
+        endContent: richOption.endContent,
+        description: richOption.description,
       };
 
       return (

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

@@ -1,11 +1,8 @@
 export interface SelectPopoverOption {
-  text: string | HTMLElement;
+  text: string;
   value: string;
   disabled: boolean;
   checked: boolean;
   cssClass?: string | string[];
   handler?: (value: any) => boolean | void | { [key: string]: any };
-  startContent?: HTMLElement;
-  endContent?: HTMLElement;
-  description?: string;
 }

core/src/components/select-popover/select-popover.tsx

@@ -7,6 +7,7 @@ import { getClassMap } from '@utils/theme';
 import { getIonTheme } from '../../global/ionic-global';
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
+import type { SelectOverlayOption } from '../select/select-interface';
 
 import type { SelectPopoverOption } from './select-popover-interface';
 
@@ -121,12 +122,19 @@ export class SelectPopover implements ComponentInterface {
 
   renderCheckboxOptions(options: SelectPopoverOption[]) {
     return options.map((option, index) => {
+      /**
+       * Cast to `SelectOverlayOption` to access rich content
+       * fields (`startContent`, `endContent`, `description`)
+       * that are passed through from `ion-select` but not
+       * part of the public `SelectPopoverOption` interface.
+       */
+      const richOption = option as SelectOverlayOption;
       const optionLabelOptions = {
         id: `popover-option-${index}`,
-        label: option.text,
-        startContent: option.startContent,
-        endContent: option.endContent,
-        description: option.description,
+        label: richOption.text,
+        startContent: richOption.startContent,
+        endContent: richOption.endContent,
+        description: richOption.description,
       };
 
       return (
@@ -163,12 +171,19 @@ export class SelectPopover implements ComponentInterface {
     return (
       <ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
         {options.map((option, index) => {
+          /**
+           * Cast to `SelectOverlayOption` to access rich content
+           * fields (`startContent`, `endContent`, `description`)
+           * that are passed through from `ion-select` but not
+           * part of the public `SelectPopoverOption` interface.
+           */
+          const richOption = option as SelectOverlayOption;
           const optionLabelOptions = {
             id: `popover-option-${index}`,
-            label: option.text,
-            startContent: option.startContent,
-            endContent: option.endContent,
-            description: option.description,
+            label: richOption.text,
+            startContent: richOption.startContent,
+            endContent: richOption.endContent,
+            description: richOption.description,
           };
 
           return (

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

@@ -1,3 +1,7 @@
+import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
+import type { AlertInput } from '../alert/alert-interface';
+import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
+
 export type SelectInterface = 'action-sheet' | 'popover' | 'alert' | 'modal';
 
 export type SelectCompareFn = (currentValue: any, compareValue: any) => boolean;
@@ -10,3 +14,24 @@ export interface SelectCustomEvent<T = any> extends CustomEvent {
   detail: SelectChangeEventDetail<T>;
   target: HTMLIonSelectElement;
 }
+
+export interface SelectActionSheetButton extends Omit<ActionSheetButton, 'text'> {
+  text?: string | HTMLElement;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
+}
+
+export interface SelectAlertInput extends Omit<AlertInput, 'label'> {
+  label?: string | HTMLElement;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
+}
+
+export interface SelectOverlayOption extends Omit<SelectPopoverOption, 'text'> {
+  text?: string | HTMLElement;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
+}

core/src/components/select/select.tsx

@@ -26,11 +26,15 @@ import type {
   StyleEventDetail,
   ModalOptions,
 } from '../../interface';
-import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
-import type { AlertInput } from '../alert/alert-interface';
-import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
 
-import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from './select-interface';
+import type {
+  SelectChangeEventDetail,
+  SelectInterface,
+  SelectCompareFn,
+  SelectActionSheetButton,
+  SelectAlertInput,
+  SelectOverlayOption,
+} from './select-interface';
 
 // TODO(FW-2832): types
 
@@ -568,7 +572,7 @@ export class Select implements ComponentInterface {
     }
   }
 
-  private createActionSheetButtons(data: HTMLIonSelectOptionElement[], selectValue: any): ActionSheetButton[] {
+  private createActionSheetButtons(data: HTMLIonSelectOptionElement[], selectValue: any): SelectActionSheetButton[] {
     const actionSheetButtons = data.map((option) => {
       const value = getOptionValue(option);
 
@@ -598,7 +602,7 @@ export class Select implements ComponentInterface {
         startContent: startContent ?? undefined,
         endContent: endContent ?? undefined,
         description: option.description,
-      } as ActionSheetButton;
+      } as SelectActionSheetButton;
     });
 
     // Add "cancel" button
@@ -617,7 +621,7 @@ export class Select implements ComponentInterface {
     data: HTMLIonSelectOptionElement[],
     inputType: 'checkbox' | 'radio',
     selectValue: any
-  ): AlertInput[] {
+  ): SelectAlertInput[] {
     const alertInputs = data.map((option) => {
       const value = getOptionValue(option);
 
@@ -648,7 +652,7 @@ export class Select implements ComponentInterface {
     return alertInputs;
   }
 
-  private createOverlaySelectOptions(data: HTMLIonSelectOptionElement[], selectValue: any): SelectPopoverOption[] {
+  private createOverlaySelectOptions(data: HTMLIonSelectOptionElement[], selectValue: any): SelectOverlayOption[] {
     const popoverOptions = data.map((option) => {
       const value = getOptionValue(option);