@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

package/src/components/Input/Input.tsx

@@ -2,9 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef, useCallback } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   DescriptionAndValidation as DescriptionAndValidationPrimitive,
@@ -28,59 +39,173 @@ import {
   useInputContext,
 } from '@dxos/react-input';
 import { mx } from '@dxos/ui-theme';
-import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/ui-types';
+import { type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon } from '../Icon';
+import {
+  SegmentedDate,
+  type SegmentedDateProps,
+  SegmentedDateTime,
+  type SegmentedDateTimeProps,
+  SegmentedTime,
+  type SegmentedTimeProps,
+} from './SegmentedInput';
 
 type InputVariant = 'default' | 'subdued';
 
 type InputSharedProps = Partial<{ density: Density; elevation: Elevation; variant: InputVariant }>;
 
+//
+// Trigger context — lets a sibling `Input.TriggerIcon` open a picker registered by a field inside
+// the same `Input.Root`. Each registered handler is keyed; the most recent registration wins.
+//
+
+type InputTriggerHandler = () => void;
+
+type InputTriggerContextValue = {
+  registerTrigger: (handler: InputTriggerHandler) => () => void;
+  trigger: () => void;
+  hasTrigger: boolean;
+};
+
+const InputTriggerContext = createContext<InputTriggerContextValue | undefined>(undefined);
+
+/**
+ * Field hook. Pass an opener function; while the field is mounted, an `Input.TriggerIcon`
+ * sibling will call this opener on press. Returns a no-op when used outside `Input.Root`.
+ */
+const useInputTrigger = (handler: InputTriggerHandler | undefined) => {
+  const ctx = useContext(InputTriggerContext);
+  useEffect(() => {
+    if (!ctx || !handler) {
+      return;
+    }
+    return ctx.registerTrigger(handler);
+  }, [ctx, handler]);
+};
+
+//
+// Root — wraps the @dxos/react-input primitive root with the trigger registry.
+//
+
+const Root = (props: InputRootProps) => {
+  const handlerRef = useRef<InputTriggerHandler | null>(null);
+  const [hasTrigger, setHasTrigger] = useState(false);
+
+  const registerTrigger = useCallback((handler: InputTriggerHandler) => {
+    handlerRef.current = handler;
+    setHasTrigger(true);
+    return () => {
+      if (handlerRef.current === handler) {
+        handlerRef.current = null;
+        setHasTrigger(false);
+      }
+    };
+  }, []);
+
+  const trigger = useCallback(() => {
+    handlerRef.current?.();
+  }, []);
+
+  const value = useMemo(() => ({ registerTrigger, trigger, hasTrigger }), [registerTrigger, trigger, hasTrigger]);
+
+  return (
+    <InputTriggerContext.Provider value={value}>
+      <InputRoot {...props} />
+    </InputTriggerContext.Provider>
+  );
+};
+
+Root.displayName = 'Input.Root';
+
+//
+// TriggerIcon — sibling button that opens the picker of the registered field. Renders nothing
+// when no field in the surrounding `Input.Root` has registered an opener.
+//
+
+type TriggerIconProps = ThemedClassName<
+  Omit<ComponentPropsWithRef<'button'>, 'children' | 'onClick'> & {
+    icon?: string;
+  }
+>;
+
+const TriggerIcon = forwardRef<HTMLButtonElement, TriggerIconProps>(
+  ({ classNames, icon = 'ph--calendar--regular', 'aria-label': ariaLabel, ...props }, forwardedRef) => {
+    const ctx = useContext(InputTriggerContext);
+    const { tx } = useThemeContext();
+    if (!ctx?.hasTrigger) {
+      return null;
+    }
+
+    return (
+      <button
+        type='button'
+        ref={forwardedRef}
+        aria-label={ariaLabel ?? 'Open picker'}
+        {...props}
+        onClick={ctx.trigger}
+        className={tx('input.triggerIcon', {}, classNames) ?? undefined}
+      >
+        <Icon size={4} icon={icon} />
+      </button>
+    );
+  },
+);
+
+TriggerIcon.displayName = 'Input.TriggerIcon';
+
+//
+// Label
+//
+
 type LabelProps = ThemedClassName<LabelPrimitiveProps> & { srOnly?: boolean };
 
-const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+const Label = forwardRef<HTMLLabelElement, LabelProps>(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <LabelPrimitive {...props} className={tx('input.label', 'input__label', { srOnly }, classNames)} ref={forwardedRef}>
+    <LabelPrimitive {...props} className={tx('input.label', { srOnly }, classNames)} ref={forwardedRef}>
       {children}
     </LabelPrimitive>
   );
 });
 
+Label.displayName = 'Input.Label';
+
+//
+// Description
+//
+
 type DescriptionProps = ThemedClassName<DescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DescriptionPrimitive
-        {...props}
-        className={tx('input.description', 'input__description', { srOnly }, classNames)}
-        ref={forwardedRef}
-      >
+      <DescriptionPrimitive {...props} className={tx('input.description', { srOnly }, classNames)} ref={forwardedRef}>
         {children}
       </DescriptionPrimitive>
     );
   },
 );
 
+Description.displayName = 'Input.Description';
+
+//
+// Validation
+//
+
 type ValidationProps = ThemedClassName<ValidationPrimitiveProps> & { srOnly?: boolean };
 
 const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>>(
-  ({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
     return (
       <ValidationPrimitive
         {...props}
-        className={tx(
-          'input.validation',
-          `input__validation-message input__validation-message--${validationValence}`,
-          { srOnly, validationValence },
-          classNames,
-        )}
+        className={tx('input.validation', { srOnly, validationValence }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -89,15 +214,21 @@ const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>
   },
 );
 
+Validation.displayName = 'Input.Validation';
+
+//
+// DescriptionAndValidation
+//
+
 type DescriptionAndValidationProps = ThemedClassName<DescriptionAndValidationPrimitiveProps> & { srOnly?: boolean };
 
 const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <DescriptionAndValidationPrimitive
         {...props}
-        className={tx('input.descriptionAndValidation', 'input__description-and-validation', { srOnly }, classNames)}
+        className={tx('input.descriptionAndValidation', { srOnly }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -106,60 +237,41 @@ const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAnd
   },
 );
 
-type PinInputProps = InputSharedProps &
-  Omit<PinInputPrimitiveProps, 'segmentClassName' | 'inputClassName'> & {
-    segmentClassName?: ClassNameValue;
-    inputClassName?: ClassNameValue;
-  };
+DescriptionAndValidation.displayName = 'Input.DescriptionAndValidation';
+
+//
+// PinInput
+//
+
+type PinInputProps = ThemedClassName<InputSharedProps & Omit<PinInputPrimitiveProps, 'className' | 'segmentClassName'>>;
 
 const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
-  (
-    {
-      density: propsDensity,
-      elevation: propsElevation,
-      segmentClassName: propsSegmentClassName,
-      inputClassName,
-      ...props
-    },
-    forwardedRef,
-  ) => {
+  ({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
 
-    const segmentClassName = useCallback(
-      ({ focused, validationValence }: Parameters<Exclude<PinInputPrimitiveProps['segmentClassName'], undefined>>[0]) =>
-        tx(
-          'input.input',
-          'input--pin-segment',
-          {
-            variant: 'static',
-            focused,
-            disabled: props.disabled,
-            density,
-            elevation,
-            validationValence,
-          },
-          propsSegmentClassName,
-        ),
-      [tx, props.disabled, elevation, propsElevation, density],
-    );
     return (
       <PinInputPrimitive
         {...{
           ...props,
-          segmentClassName,
           ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
         }}
-        inputClassName={tx('input.inputWithSegments', 'input input--pin', { disabled: props.disabled }, inputClassName)}
+        className={tx('input.inputWithSegments', { disabled: props.disabled }, classNames) || ''}
+        segmentClassName={tx('input.segment', { disabled: props.disabled, density, elevation }) || ''}
         ref={forwardedRef}
       />
     );
   },
 );
 
+PinInput.displayName = 'Input.PinInput';
+
+//
+// TextInput
 // TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
+//
 
 type AutoFillProps = {
   noAutoFill?: boolean;
@@ -169,17 +281,15 @@ type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
   (
-    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    { __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props },
     forwardedRef,
   ) => {
     const { hasIosKeyboard } = useThemeContext();
-    const themeContextValue = useThemeContext();
-    const density = useDensityContext(propsDensity);
-    const elevation = useElevationContext(propsElevation);
+    const { tx } = useThemeContext();
+    const density = useDensityContext(densityProp);
+    const elevation = useElevationContext(elevationProp);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
 
-    const { tx } = themeContextValue;
-
     return (
       <TextInputPrimitive
         {...props}
@@ -187,7 +297,6 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
         {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
-          'input',
           {
             variant,
             disabled: props.disabled,
@@ -204,6 +313,30 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
   },
 );
 
+TextInput.displayName = 'Input.TextInput';
+
+//
+// Date / Time / DateTime — segmented react-aria-components fields with locale-aware ordering,
+// spinbutton semantics, and immutable separators. ISO string API:
+//   - Date     `YYYY-MM-DD`
+//   - Time     `HH:mm`
+//   - DateTime `YYYY-MM-DDTHH:mm`
+// Pair `Input.Date` or `Input.DateTime` with a sibling `Input.TriggerIcon` inside an
+// `Input.Root` to expose a calendar popover; `Input.Time` has no picker.
+//
+
+const Time = SegmentedTime;
+const Date_ = SegmentedDate;
+const DateTime = SegmentedDateTime;
+
+type TimeProps = SegmentedTimeProps;
+type DateInputProps = SegmentedDateProps;
+type DateTimeInputProps = SegmentedDateTimeProps;
+
+//
+// TextArea
+//
+
 type TextAreaProps = InputSharedProps & ThemedClassName<TextAreaPrimitiveProps>;
 
 const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>>(
@@ -218,8 +351,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
       <TextAreaPrimitive
         {...props}
         className={tx(
-          'input.input',
-          'input--text-area',
+          'input.textArea',
           {
             variant,
             disabled: props.disabled,
@@ -227,7 +359,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
             elevation,
             validationValence,
           },
-          '-mbe-labelSpacingBlock',
           classNames,
         )}
         {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
@@ -237,7 +368,13 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
   },
 );
 
-type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & {
+TextArea.displayName = 'Input.TextArea';
+
+//
+// Checkbox
+//
+
+type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitive.CheckboxProps, 'children'>> & {
   size?: Size;
 };
 
@@ -248,11 +385,11 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   (
     {
       __inputScope,
+      classNames,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
       size,
-      classNames,
       ...props
     },
     forwardedRef,
@@ -266,7 +403,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
     const { tx } = useThemeContext();
 
     return (
-      <CheckboxPrimitive
+      <CheckboxPrimitive.Root
         {...{
           ...props,
           checked,
@@ -277,19 +414,25 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
             'aria-invalid': 'true' as const,
             'aria-errormessage': errorMessageId,
           }),
-          className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
+          className: tx('input.checkbox', { size }, 'shrink-0', classNames),
         }}
         ref={forwardedRef}
       >
         <Icon
           icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
-          classNames={tx('input.checkboxIndicator', 'input--checkbox__indicator', { size, checked })}
+          classNames={tx('input.checkboxIndicator', { size, checked })}
         />
-      </CheckboxPrimitive>
+      </CheckboxPrimitive.Root>
     );
   },
 );
 
+Checkbox.displayName = 'Input.Checkbox';
+
+//
+// Switch
+//
+
 type SwitchProps = ThemedClassName<
   Omit<ComponentPropsWithRef<'input'>, 'children' | 'onChange'> & { onCheckedChange?: (checked: boolean) => void }
 >;
@@ -298,10 +441,10 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   (
     {
       __inputScope,
+      classNames,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
-      classNames,
       ...props
     },
     forwardedRef,
@@ -335,11 +478,21 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   },
 );
 
+Switch.displayName = 'Input.Switch';
+
+//
+// Input
+//
+
 export const Input = {
-  Root: InputRoot,
+  Root,
+  TriggerIcon,
   PinInput,
   TextInput,
   TextArea,
+  Time,
+  Date: Date_,
+  DateTime,
   Checkbox,
   Switch,
   Label,
@@ -348,6 +501,8 @@ export const Input = {
   DescriptionAndValidation,
 };
 
+export { useInputTrigger };
+
 export type {
   InputVariant,
   InputRootProps,
@@ -355,6 +510,9 @@ export type {
   PinInputProps,
   TextInputProps,
   TextAreaProps,
+  TimeProps,
+  DateInputProps,
+  DateTimeInputProps,
   CheckboxProps,
   SwitchProps,
   LabelProps,