[LG-5532] feat(time-input): Segment state

packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts

@@ -54,8 +54,12 @@ export const useDateSegments = (
       (isNull(date) || isUndefined(date)) && isValidDate(prevDate);
 
     if (hasDateValueChanged || hasDateBeenCleared) {
+      // This returns a new state object with the updated segments from the new date
       const newSegments = getFormattedSegmentsFromDate(date);
+      // Pass the new state and a copy of the previous state to the callback
       onUpdate?.(newSegments, { ...segments });
+      // This updates all segments in the internal state of the hook
+      // This internally invokes `dateSegmentsReducer` and passes `updateObject` as the second argument. `segments` is the first argument. This updates the internal state of the hook.
       dispatch(newSegments);
     }
   }, [date, onUpdate, prevDate, segments]);
@@ -69,8 +73,11 @@ export const useDateSegments = (
     // finally, commit the new state
 
     const updateObject = { [segment]: value };
+    // This returns a new state object with the updated segment
     const nextState = dateSegmentsReducer(segments, updateObject);
+    // Pass the new state and a copy of the previous state to the callback
     onUpdate?.(nextState, { ...segments }, segment);
+    // This internally invokes `dateSegmentsReducer` and passes `updateObject` as the second argument. `segments` is the first argument. This updates the internal state of the hook.
     dispatch(updateObject);
   };
 

packages/date-utils/src/index.ts

@@ -31,6 +31,7 @@ export { maxDate } from './maxDate';
 export { minDate } from './minDate';
 export { newTZDate } from './newTZDate';
 export { newUTC } from './newUTC';
+export { newUTCFromTimeZone } from './newUTCFromTimeZone';
 export { setToUTCMidnight } from './setToUTCMidnight';
 export { setUTCDate } from './setUTCDate';
 export { setUTCMonth } from './setUTCMonth';

packages/date-utils/src/newUTCFromTimeZone/index.ts

@@ -0,0 +1 @@
+export { newUTCFromTimeZone } from './newUTCFromTimeZone';

packages/date-utils/src/newUTCFromTimeZone/newUTCFromTimeZone.spec.ts

@@ -0,0 +1,54 @@
+import { newUTCFromTimeZone } from './newUTCFromTimeZone';
+
+describe('packages/date-utils/newUTCFromTimeZone', () => {
+  describe('UTC', () => {
+    test('creates a new UTC date from a given time zone', () => {
+      const date = newUTCFromTimeZone({
+        year: '2026',
+        month: '02',
+        day: '20',
+        hour: '23',
+        minute: '00',
+        second: '00',
+        timeZone: 'UTC',
+      });
+
+      // February 20, 2026 11:00:00 PM/23:00:00 in UTC is February 20, 2026 23:00:00 UTC
+      expect(date).toEqual(new Date('2026-02-20T23:00:00Z'));
+    });
+  });
+
+  describe('America/New_York', () => {
+    test('creates a new UTC date from a given time zone', () => {
+      const date = newUTCFromTimeZone({
+        year: '2026',
+        month: '02',
+        day: '20',
+        hour: '23',
+        minute: '00',
+        second: '00',
+        timeZone: 'America/New_York',
+      });
+
+      // February 20, 2026 11:00:00 PM/23:00:00 in America/New_York is February 21, 2026 04:00:00 UTC (UTC-5 hours)
+      expect(date).toEqual(new Date('2026-02-21T04:00:00Z'));
+    });
+  });
+
+  describe('Pacific/Kiritimati', () => {
+    test('creates a new UTC date from a given time zone', () => {
+      const date = newUTCFromTimeZone({
+        year: '2026',
+        month: '02',
+        day: '20',
+        hour: '23',
+        minute: '00',
+        second: '00',
+        timeZone: 'Pacific/Kiritimati',
+      });
+
+      // February 20, 2026 11:00:00 PM/23:00:00 in Pacific/Kiritimati is February 20, 2026 09:00:00 UTC (UTC+14 hours)
+      expect(date).toEqual(new Date('2026-02-20T09:00:00Z'));
+    });
+  });
+});

packages/date-utils/src/newUTCFromTimeZone/newUTCFromTimeZone.ts

@@ -0,0 +1,50 @@
+import { zonedTimeToUtc } from 'date-fns-tz';
+
+/**
+ * Creates a new UTC date from a given time zone.
+ * This takes the local date created above and converts it to UTC using the `zonedTimeToUtc` helper function.
+ *
+ * @param year - The year
+ * @param month - The month (1-12)
+ * @param day - The day
+ * @param hour - The hour in 24 hour format
+ * @param minute - The minute
+ * @param second - The second
+ * @param timeZone - The time zone
+ * @returns The new UTC date
+ *
+ * @example
+ * ```js
+ * // February 20, 2026 11:00:00 PM/23:00:00 in America/New_York is February 21, 2026 04:00:00 UTC
+ * newUTCFromTimeZone({ year: '2026', month: '02', day: '20', hour: '11', minute: '00', second: '00', timeZone: 'America/New_York' });
+ * // returns new Date('2026-02-21T04:00:00Z')
+ * ```
+ */
+export const newUTCFromTimeZone = ({
+  year,
+  month,
+  day,
+  hour,
+  minute,
+  second,
+  timeZone,
+}: {
+  year: string;
+  month: string;
+  day: string;
+  hour: string;
+  minute: string;
+  second: string;
+  timeZone: string;
+}) => {
+  const newDate = new Date(
+    Number(year),
+    Number(month) - 1,
+    Number(day),
+    Number(hour),
+    Number(minute),
+    Number(second),
+  );
+
+  return zonedTimeToUtc(newDate, timeZone);
+};

packages/time-input/package.json

@@ -34,6 +34,7 @@
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/form-field": "workspace:^",
     "@leafygreen-ui/hooks": "workspace:^",
+    "@leafygreen-ui/input-box": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/select": "workspace:^",

packages/time-input/src/Context/TimeInputDisplayContext/TimeInputDisplayContext.tsx

@@ -5,6 +5,10 @@ import React, {
   useState,
 } from 'react';
 import defaults from 'lodash/defaults';
+import defaultTo from 'lodash/defaultTo';
+
+import { hasDayPeriod } from '../../utils';
+import { getFormatParts } from '../../utils/getFormatParts/getFormatParts';
 
 import {
   TimeInputDisplayContextProps,
@@ -37,7 +41,27 @@ export const TimeInputDisplayProvider = ({
     ...defaults(rest, defaultTimeInputDisplayContext),
   };
 
-  // TODO: min, max helpers
+  /**
+   * Determines if the input should show a select for the day period (AM/PM)
+   */
+  const is12HourFormat = !!hasDayPeriod(providerValue.locale);
+
+  /**
+   * Only used to track the presentation format of the segments, not the value itself
+   */
+  const formatParts = getFormatParts({
+    showSeconds: providerValue.showSeconds,
+  });
+
+  /**
+   * Gets the time zone from the provider value or the browser's default
+   */
+  const timeZone = defaultTo(
+    providerValue.timeZone,
+    Intl.DateTimeFormat().resolvedOptions().timeZone,
+  );
+
+  // TODO: min, max helpers will be in a future PR
 
   return (
     <TimeInputDisplayContext.Provider
@@ -48,6 +72,9 @@ export const TimeInputDisplayProvider = ({
         ariaLabelledbyProp,
         isDirty,
         setIsDirty,
+        is12HourFormat,
+        formatParts,
+        timeZone,
       }}
     >
       {children}

packages/time-input/src/Context/TimeInputDisplayContext/TimeInputDisplayContext.types.ts

@@ -4,6 +4,7 @@ import { AriaLabelPropsWithLabel } from '@leafygreen-ui/a11y';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 
 import { DisplayTimeInputProps } from '../../TimeInput/TimeInput.types';
+import { GetLgIdsReturnType } from '../../utils/getLgIds';
 
 type AriaLabelKeys = keyof AriaLabelPropsWithLabel;
 type AriaLabelKeysWithoutLabel = Exclude<AriaLabelKeys, 'label'>;
@@ -38,6 +39,24 @@ export type TimeInputDisplayContextProps = Omit<
    * Setter for whether the input has been interacted with
    */
   setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /**
+   * Whether the time input is in 12-hour format. Helps determine if the AM/PM select should be shown.
+   *
+   * @default false
+   */
+  is12HourFormat: boolean;
+
+  /**
+   * An array of {@link Intl.DateTimeFormatPart},
+   * used to determine the order of segments in the input
+   */
+  formatParts?: Array<Intl.DateTimeFormatPart>;
+
+  /**
+   * LGIDs for the code snippet.
+   */
+  lgIds: GetLgIdsReturnType;
 };
 
 /**
@@ -62,4 +81,9 @@ export type TimeInputDisplayProviderProps = Omit<
    * The aria-labelledby prop
    */
   'aria-labelledby'?: string;
+
+  /**
+   * LGIDs for the code snippet.
+   */
+  lgIds?: GetLgIdsReturnType;
 };

packages/time-input/src/Context/TimeInputDisplayContext/TimePickerDisplayContext.utils.ts

@@ -6,13 +6,17 @@ import {
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
 import { Size } from '../../TimeInput/TimeInput.types';
+import { getLgIds } from '../../utils/getLgIds';
 
 import {
   TimeInputDisplayContextProps,
   TimeInputDisplayProviderProps,
 } from './TimeInputDisplayContext.types';
 
-export type DisplayContextPropKeys = keyof TimeInputDisplayProviderProps;
+export type DisplayContextPropKeys = Exclude<
+  keyof TimeInputDisplayProviderProps,
+  'lgIds'
+>;
 
 /**
  * Props names that that are added to the context and used to pick and omit props
@@ -31,6 +35,7 @@ export const displayContextPropNames: Array<DisplayContextPropKeys> = [
   'size',
   'errorMessage',
   'state',
+  'showSeconds',
 ];
 
 /**
@@ -51,4 +56,7 @@ export const defaultTimeInputDisplayContext: TimeInputDisplayContextProps = {
   errorMessage: '',
   isDirty: false,
   setIsDirty: () => {},
+  is12HourFormat: false,
+  showSeconds: true,
+  lgIds: getLgIds(),
 };

packages/time-input/src/TimeFormField/TimeFormField/TimeFormField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { FormField } from '@leafygreen-ui/form-field';
+
+import { useTimeInputDisplayContext } from '../../Context/TimeInputDisplayContext';
+
+import { TimeFormFieldProps } from './TimeFormField.types';
+
+/**
+ * A wrapper around `FormField` that sets the relevant
+ * attributes, and styling
+ */
+export const TimeFormField = React.forwardRef<
+  HTMLDivElement,
+  TimeFormFieldProps
+>(({ children, ...rest }: TimeFormFieldProps, fwdRef) => {
+  const {
+    label,
+    description,
+    // stateNotification: { state, message: errorMessage },
+    disabled,
+    size,
+  } = useTimeInputDisplayContext();
+
+  return (
+    <FormField
+      label={label}
+      description={description}
+      disabled={disabled}
+      // state={state}
+      // errorMessage={errorMessage}
+      size={size}
+      ref={fwdRef}
+      {...rest}
+    >
+      {children}
+    </FormField>
+  );
+});
+
+TimeFormField.displayName = 'TimeFormField';

packages/time-input/src/TimeFormField/TimeFormField/TimeFormField.types.ts

@@ -0,0 +1,5 @@
+import { FormFieldProps } from '@leafygreen-ui/form-field';
+
+export type TimeFormFieldProps = React.ComponentPropsWithoutRef<'div'> & {
+  children: FormFieldProps['children'];
+};

packages/time-input/src/TimeFormField/TimeFormFieldInputContainer/TimeFormFieldInputContainer.styles.ts

@@ -0,0 +1,22 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+
+const selectStyles = css`
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+
+const baseStyles = css`
+  &:hover,
+  &:focus-within {
+    z-index: 1;
+  }
+`;
+
+export const getContainerStyles = ({
+  is12HourFormat,
+}: {
+  is12HourFormat: boolean;
+}) =>
+  cx(baseStyles, {
+    [selectStyles]: is12HourFormat,
+  });

packages/time-input/src/TimeFormField/TimeFormFieldInputContainer/TimeFormFieldInputContainer.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { FormFieldInputContainer } from '@leafygreen-ui/form-field';
+
+import { useTimeInputDisplayContext } from '../../Context/TimeInputDisplayContext';
+
+import { getContainerStyles } from './TimeFormFieldInputContainer.styles';
+import { TimeFormFieldInputContainerProps } from './TimeFormFieldInputContainer.types';
+
+/**
+ * A wrapper around `FormField` that sets the relevant
+ * attributes, and styling
+ */
+export const TimeFormFieldInputContainer = React.forwardRef<
+  HTMLDivElement,
+  TimeFormFieldInputContainerProps
+>(({ children, onInputClick }: TimeFormFieldInputContainerProps, fwdRef) => {
+  const { label, ariaLabelProp, ariaLabelledbyProp, is12HourFormat } =
+    useTimeInputDisplayContext();
+
+  return (
+    <FormFieldInputContainer
+      ref={fwdRef}
+      role="combobox"
+      tabIndex={-1}
+      aria-label={!label && ariaLabelProp ? ariaLabelProp : undefined}
+      aria-labelledby={
+        !label && !ariaLabelProp && ariaLabelledbyProp
+          ? ariaLabelledbyProp
+          : undefined
+      }
+      onClick={onInputClick}
+      className={getContainerStyles({ is12HourFormat })}
+    >
+      {children}
+    </FormFieldInputContainer>
+  );
+});
+
+TimeFormFieldInputContainer.displayName = 'TimeFormFieldInputContainer';

packages/time-input/src/TimeFormField/TimeFormFieldInputContainer/TimeFormFieldInputContainer.types.ts

@@ -0,0 +1,7 @@
+import { FormFieldProps } from '@leafygreen-ui/form-field';
+
+export type TimeFormFieldInputContainerProps =
+  React.ComponentPropsWithoutRef<'div'> & {
+    children: FormFieldProps['children'];
+    onInputClick?: React.MouseEventHandler<HTMLDivElement>;
+  };

packages/time-input/src/TimeFormField/index.ts

@@ -0,0 +1,2 @@
+export { TimeFormField } from './TimeFormField/TimeFormField';
+export { TimeFormFieldInputContainer } from './TimeFormFieldInputContainer/TimeFormFieldInputContainer';