feat: integrate column-option into column

core/api.txt

@@ -917,7 +917,7 @@ ion-picker-column,prop,items,PickerColumnItem[],[],false,false
 ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
 ion-picker-column,prop,value,number | string | undefined,undefined,false,false
 ion-picker-column,method,setFocus,setFocus() => Promise<void>
-ion-picker-column,event,ionChange,PickerColumnItem,true
+ion-picker-column,event,ionChange,{ value: string | number | undefined; },true
 
 ion-picker-column-option,shadow
 ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true

core/src/components.d.ts

@@ -1976,7 +1976,7 @@ export namespace Components {
           * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
          */
         "numericInput": boolean;
-        "scrollActiveItemIntoView": () => Promise<void>;
+        "scrollActiveItemIntoView": (smooth?: boolean) => Promise<void>;
         /**
           * Sets focus on the scrollable container within the picker column. Use this method instead of the global `pickerColumn.focus()`.
          */
@@ -4055,7 +4055,7 @@ declare global {
         new (): HTMLIonPickerElement;
     };
     interface HTMLIonPickerColumnElementEventMap {
-        "ionChange": PickerColumnItem;
+        "ionChange": { value: string | number | undefined };
     }
     interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6635,7 +6635,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: IonPickerColumnCustomEvent<PickerColumnItem>) => void;
+        "onIonChange"?: (event: IonPickerColumnCustomEvent<{ value: string | number | undefined }>) => void;
         /**
           * The selected option in the picker.
          */

core/src/components/datetime/datetime.tsx

@@ -1617,7 +1617,6 @@ export class Datetime implements ComponentInterface {
         class="date-column"
         color={this.color}
         disabled={disabled}
-        items={items}
         value={todayString}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
@@ -1647,7 +1646,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {items.map((item) => (
+          <ion-picker-column-option
+            part={item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={item.value}
+            disabled={item.disabled}
+            value={item.value}
+          >
+            {item.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
 
@@ -1731,14 +1741,14 @@ export class Datetime implements ComponentInterface {
     const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
+    const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
 
     return (
       <ion-picker-column
         class="day-column"
         color={this.color}
         disabled={disabled}
-        items={days}
-        value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
+        value={pickerColumnValue}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
           // Due to a Safari 14 issue we need to destroy
@@ -1764,7 +1774,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {days.map((day) => (
+          <ion-picker-column-option
+            part={day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={day.value}
+            disabled={day.disabled}
+            value={day.value}
+          >
+            {day.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
 
@@ -1782,7 +1803,6 @@ export class Datetime implements ComponentInterface {
         class="month-column"
         color={this.color}
         disabled={disabled}
-        items={months}
         value={workingParts.month}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
@@ -1809,7 +1829,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {months.map((month) => (
+          <ion-picker-column-option
+            part={month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={month.value}
+            disabled={month.disabled}
+            value={month.value}
+          >
+            {month.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
   private renderYearPickerColumn(years: PickerColumnItem[]) {
@@ -1826,7 +1857,6 @@ export class Datetime implements ComponentInterface {
         class="year-column"
         color={this.color}
         disabled={disabled}
-        items={years}
         value={workingParts.year}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
@@ -1853,7 +1883,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {years.map((year) => (
+          <ion-picker-column-option
+            part={year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={year.value}
+            disabled={year.disabled}
+            value={year.value}
+          >
+            {year.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
   private renderTimePickerColumns(forcePresentation: string) {
@@ -1901,7 +1942,6 @@ export class Datetime implements ComponentInterface {
         color={this.color}
         disabled={disabled}
         value={activePart.hour}
-        items={hoursData}
         numericInput
         onIonChange={(ev: CustomEvent) => {
           this.setWorkingParts({
@@ -1916,7 +1956,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {hoursData.map((hour) => (
+          <ion-picker-column-option
+            part={hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={hour.value}
+            disabled={hour.disabled}
+            value={hour.value}
+          >
+            {hour.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
   private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
@@ -1930,7 +1981,6 @@ export class Datetime implements ComponentInterface {
         color={this.color}
         disabled={disabled}
         value={activePart.minute}
-        items={minutesData}
         numericInput
         onIonChange={(ev: CustomEvent) => {
           this.setWorkingParts({
@@ -1945,7 +1995,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {minutesData.map((minute) => (
+          <ion-picker-column-option
+            part={minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={minute.value}
+            disabled={minute.disabled}
+            value={minute.value}
+          >
+            {minute.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
   private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
@@ -1963,7 +2024,6 @@ export class Datetime implements ComponentInterface {
         color={this.color}
         disabled={disabled}
         value={activePart.ampm}
-        items={dayPeriodData}
         onIonChange={(ev: CustomEvent) => {
           const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
 
@@ -1981,7 +2041,20 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column>
+      >
+        {dayPeriodData.map((dayPeriod) => (
+          <ion-picker-column-option
+            part={
+              dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART
+            }
+            key={dayPeriod.value}
+            disabled={dayPeriod.disabled}
+            value={dayPeriod.value}
+          >
+            {dayPeriod.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
 
@@ -2529,3 +2602,5 @@ export class Datetime implements ComponentInterface {
 }
 
 let datetimeIds = 0;
+const WHEEL_ITEM_PART = 'wheel-item';
+const WHEEL_ITEM_ACTIVE_PART = `active`;

core/src/components/datetime/test/custom/index.html

@@ -68,12 +68,12 @@
       }
 
       .custom-grid-wheel::part(wheel-item),
-      ion-picker-column::part(wheel-item) {
+      ion-picker-column-option {
         color: rgb(255, 134, 154);
       }
 
       .custom-grid-wheel::part(wheel-item active),
-      ion-picker-column::part(wheel-item active) {
+      ion-picker-column-option.option-active {
         color: rgb(128, 30, 171);
       }
 

core/src/components/datetime/test/datetime.e2e.ts

@@ -18,7 +18,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       page,
     }) => {
       const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
-      const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+      const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
 
       await expect(monthYearToggle).toContainText('January 2022');
 
@@ -34,7 +34,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
     test('should adjust the selected day when moving to a month with a different number of days', async ({ page }) => {
       const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
-      const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+      const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
       const datetime = page.locator('ion-datetime');
       const ionChange = await page.spyOnEvent('ionChange');
 

core/src/components/datetime/test/locale/datetime.e2e.ts

@@ -107,14 +107,13 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test('should correctly localize year column data', async ({ page }) => {
       await page.setContent(
         `
-        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
+        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01" max="2022" min="2022"></ion-datetime>
       `,
         config
       );
       await page.waitForSelector('.datetime-ready');
 
-      const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
-
+      const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0);
       await expect(datetimeYear).toHaveText('٢٠٢٢');
     });
   });

core/src/components/datetime/test/minmax/datetime.e2e.ts

@@ -109,8 +109,8 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         await page.click('.time-body');
         await ionPopoverDidPresent.next();
 
-        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
-        const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) .picker-item:not(.picker-item-empty)');
+        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) ion-picker-column-option');
+        const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) ion-picker-column-option');
 
         expect(await hours.count()).toBe(12);
         expect(await minutes.count()).toBe(60);
@@ -214,9 +214,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         config
       );
 
-      const hourPickerItems = page.locator(
-        'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'
-      );
+      const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type ion-picker-column-option');
       await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']);
     });
 
@@ -238,9 +236,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         config
       );
 
-      const hourPickerItems = page.locator(
-        'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'
-      );
+      const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type ion-picker-column-option');
       await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
     });
 
@@ -304,7 +300,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         );
 
         const datetime = page.locator('ion-datetime');
-        const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+        const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
         const ionChange = await page.spyOnEvent('ionChange');
 
         await page.waitForSelector('.datetime-ready');
@@ -356,7 +352,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
         await ionPopoverDidPresent.next();
 
-        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
+        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) ion-picker-column-option');
 
         await expect(await hours.count()).toBe(4);
       });