Extract PlainDateSegments into component

Author: connor-baer

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -60,10 +60,10 @@ import { applyMultipleRefs } from '../../util/refs.js';
 import { changeInputValue } from '../../util/input-value.js';
 
 import { Dialog } from './components/Dialog.js';
-import { DateSegment } from './components/DateSegment.js';
+import { PlainDateSegments } from './components/PlainDateSegments.js';
 import { usePlainDateState } from './hooks/usePlainDateState.js';
 import { useSegmentFocus } from './hooks/useSegmentFocus.js';
-import { getCalendarButtonLabel, getDateSegments } from './DateInputService.js';
+import { getCalendarButtonLabel, getDateParts } from './DateInputService.js';
 import classes from './DateInput.module.css';
 import { translations } from './translations/index.js';
 
@@ -315,7 +315,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
 
     const dialogStyles = isMobile ? mobileStyles : floatingStyles;
 
-    const segments = getDateSegments(locale);
+    const parts = getDateParts(locale);
     const calendarButtonLabel = getCalendarButtonLabel(
       openCalendarButtonLabel,
       state.date,
@@ -371,68 +371,20 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
                 readOnly && classes.readonly,
               )}
             >
-              {segments.map((segment, index) => {
-                const segmentProps = {
-                  required,
-                  invalid,
-                  disabled,
-                  readOnly,
-                  focus,
-                  // Only the first segment should be associated with the validation hint to reduce verbosity.
-                  'aria-describedby': index === 0 ? descriptionIds : undefined,
-                };
-                switch (segment.type) {
-                  case 'year':
-                    return (
-                      <DateSegment
-                        key={segment.type}
-                        aria-label={yearInputLabel}
-                        autoComplete={
-                          autoComplete === 'bday' ? 'bday-year' : undefined
-                        }
-                        {...segmentProps}
-                        {...state.props.year}
-                      />
-                    );
-                  case 'month':
-                    return (
-                      <DateSegment
-                        key={segment.type}
-                        aria-label={monthInputLabel}
-                        autoComplete={
-                          autoComplete === 'bday' ? 'bday-month' : undefined
-                        }
-                        {...segmentProps}
-                        {...state.props.month}
-                      />
-                    );
-                  case 'day':
-                    return (
-                      <DateSegment
-                        key={segment.type}
-                        aria-label={dayInputLabel}
-                        autoComplete={
-                          autoComplete === 'bday' ? 'bday-day' : undefined
-                        }
-                        {...segmentProps}
-                        {...state.props.day}
-                      />
-                    );
-                  case 'literal':
-                    return (
-                      <div
-                        // biome-ignore lint/suspicious/noArrayIndexKey: The order of the literals is static
-                        key={segment.type + index}
-                        className={classes.literal}
-                        aria-hidden="true"
-                      >
-                        {segment.value}
-                      </div>
-                    );
-                  default:
-                    return null;
-                }
-              })}
+              <PlainDateSegments
+                parts={parts}
+                state={state}
+                focus={focus}
+                yearInputLabel={yearInputLabel}
+                monthInputLabel={monthInputLabel}
+                dayInputLabel={dayInputLabel}
+                aria-describedby={descriptionIds}
+                required={required}
+                invalid={invalid}
+                disabled={disabled}
+                readOnly={readOnly}
+                autoComplete={autoComplete}
+              />
             </div>
             <IconButton
               ref={calendarButtonRef}

packages/circuit-ui/components/DateInput/DateInputService.spec.ts

@@ -16,17 +16,17 @@
 import { describe, expect, it } from 'vitest';
 import { Temporal } from 'temporal-polyfill';
 
-import { getCalendarButtonLabel, getDateSegments } from './DateInputService.js';
+import { getCalendarButtonLabel, getDateParts } from './DateInputService.js';
 
 describe('DateInputService', () => {
-  describe('getDateSegments', () => {
+  describe('getDateParts', () => {
     it.each([
       // locale, year, month, day
       ['en-US', [4, 0, 2]],
       ['de-DE', [4, 2, 0]],
       ['pt-BR', [4, 2, 0]],
     ])('should order the segments for the %s locale', (locale, indices) => {
-      const actual = getDateSegments(locale);
+      const actual = getDateParts(locale);
       const year = actual.findIndex(({ type }) => type === 'year');
       const month = actual.findIndex(({ type }) => type === 'month');
       const day = actual.findIndex(({ type }) => type === 'day');
@@ -39,7 +39,7 @@ describe('DateInputService', () => {
       ['de-DE', '.'],
       ['pt-BR', '/'],
     ])('should return the literal for the %s locale', (locale, literal) => {
-      const actual = getDateSegments(locale);
+      const actual = getDateParts(locale);
       const literalSegment = actual.find(({ type }) => type === 'literal');
       expect(literalSegment?.value).toBe(literal);
     });

packages/circuit-ui/components/DateInput/DateInputService.ts

@@ -20,7 +20,26 @@ import type { Locale } from '../../util/i18n.js';
 
 const TEST_VALUE = new Temporal.PlainDate(2024, 3, 8);
 
-export function getDateSegments(locale?: Locale) {
+export type DatePart =
+  | { type: 'literal'; value: string }
+  | {
+      type:
+        | 'day'
+        | 'dayPeriod'
+        | 'era'
+        | 'hour'
+        | 'minute'
+        | 'month'
+        | 'second'
+        | 'timeZoneName'
+        | 'weekday'
+        | 'year'
+        | 'unknown'
+        | 'date';
+      value?: never;
+    };
+
+export function getDateParts(locale?: Locale): DatePart[] {
   const parts = formatDateTimeToParts(TEST_VALUE, locale);
   return parts.map(({ type, value }) =>
     type === 'literal' ? { type, value } : { type },

packages/circuit-ui/components/DateInput/components/PlainDateSegments.tsx

@@ -0,0 +1,101 @@
+/**
+ * Copyright 2024, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DatePart } from '../DateInputService.js';
+import type { PlainDateState } from '../hooks/usePlainDateState.js';
+import classes from '../DateInput.module.css';
+
+import { DateSegment, type DateSegmentProps } from './DateSegment.js';
+
+export interface PlainDateSegmentsProps
+  extends Pick<
+    DateSegmentProps,
+    | 'focus'
+    | 'required'
+    | 'invalid'
+    | 'disabled'
+    | 'readOnly'
+    | 'aria-describedby'
+  > {
+  parts: DatePart[];
+  state: PlainDateState;
+  yearInputLabel: string;
+  monthInputLabel: string;
+  dayInputLabel: string;
+  autoComplete?: 'bday';
+}
+
+export function PlainDateSegments({
+  parts,
+  state,
+  yearInputLabel,
+  monthInputLabel,
+  dayInputLabel,
+  'aria-describedby': descriptionId,
+  autoComplete,
+  ...props
+}: PlainDateSegmentsProps) {
+  return parts.map((part, index) => {
+    switch (part.type) {
+      case 'year':
+        return (
+          <DateSegment
+            key={part.type}
+            aria-label={yearInputLabel}
+            // Only associate the first segment with the validation hint to reduce verbosity
+            aria-describedby={index === 0 ? descriptionId : undefined}
+            autoComplete={autoComplete === 'bday' ? 'bday-year' : undefined}
+            {...props}
+            {...state.props.year}
+          />
+        );
+      case 'month':
+        return (
+          <DateSegment
+            key={part.type}
+            aria-label={monthInputLabel}
+            aria-describedby={index === 0 ? descriptionId : undefined}
+            autoComplete={autoComplete === 'bday' ? 'bday-month' : undefined}
+            {...props}
+            {...state.props.month}
+          />
+        );
+      case 'day':
+        return (
+          <DateSegment
+            key={part.type}
+            aria-label={dayInputLabel}
+            aria-describedby={index === 0 ? descriptionId : undefined}
+            autoComplete={autoComplete === 'bday' ? 'bday-day' : undefined}
+            {...props}
+            {...state.props.day}
+          />
+        );
+      case 'literal':
+        return (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: The order of the literals is static
+            key={part.type + index}
+            className={classes.literal}
+            aria-hidden="true"
+          >
+            {part.value}
+          </div>
+        );
+      default:
+        return null;
+    }
+  });
+}