@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/components/client/Input/Input.tsx

@@ -0,0 +1,323 @@
+/* eslint-disable react/no-multi-comp */
+import type {
+  IconPropsWithSVGProps,
+  MotionVariant,
+  UniversalIconProps,
+  UniversalInputProps,
+} from '@yahoo/uds/tokens';
+import { isFunction } from 'lodash';
+import type { HTMLMotionProps } from 'motion/react';
+import { useReducedMotion } from 'motion/react';
+import type { ChangeEvent, InputHTMLAttributes } from 'react';
+import { forwardRef, memo, useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
+
+import { cx, getStyles } from '../../../styles/styler';
+import type { BoxProps } from '../../Box';
+import { Box } from '../../Box';
+import { HStack } from '../../HStack';
+import { IconSlot } from '../../IconSlot';
+import { VStack } from '../../VStack';
+import { AnimateHeightChange } from '../AnimateHeightChange';
+import { InputHelpTextInternal } from './InputHelpTextInternal';
+
+type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
+
+type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
+
+// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+
+interface InputProps extends NativeInputProps, UniversalInputProps {
+  /** The type of the input element. Reduced set of options from the HTML input type attribute.
+   * @default 'text'
+   */
+  type?: Exclude<
+    NativeInputProps['type'],
+    'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'
+  >;
+
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
+    inputWrapper?: Partial<BoxProps & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+
+type InputChangeEvent = ChangeEvent<HTMLInputElement>;
+
+type HelpTextContentProps = Pick<InputProps, 'helpText' | 'helperTextIcon'> &
+  BoxProps & {
+    size?: InputProps['size'];
+    isFilled?: boolean;
+  };
+
+// eslint-disable-next-line react/display-name
+const HelpTextContent = memo(function HelpTextContentOriginal({
+  helpText,
+  helperTextIcon,
+  spacingStart,
+  spacingTop,
+  size,
+  isFilled,
+  ...rest
+}: HelpTextContentProps) {
+  if (!helpText) {
+    return null;
+  }
+
+  return (
+    <Box spacingTop={spacingTop} spacingStart={spacingStart} {...rest}>
+      <InputHelpTextInternal startIcon={helperTextIcon} size={size} isFilled={isFilled}>
+        {isFunction(helpText) ? helpText() : helpText}
+      </InputHelpTextInternal>
+    </Box>
+  );
+});
+
+interface StartIconProps {
+  icon: InputProps['startIcon'];
+  className?: string;
+  iconProps?: Partial<UniversalIconProps>;
+}
+
+// eslint-disable-next-line react/display-name
+const StartIcon = memo(function StartIcon({ icon, className, iconProps }: StartIconProps) {
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <IconSlot icon={icon} iconProps={{ variant: 'outline', ...iconProps }} className={className} />
+  );
+});
+
+interface EndIconProps {
+  icon: InputProps['endIcon'];
+  className?: string;
+  iconProps?: Partial<UniversalIconProps>;
+}
+
+// eslint-disable-next-line react/display-name
+const EndIcon = memo(function EndIcon({ icon, className, iconProps }: EndIconProps) {
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <IconSlot
+      icon={icon}
+      iconProps={{
+        variant: 'outline',
+        ...iconProps,
+      }}
+      className={className}
+    />
+  );
+});
+
+/**
+ * **📦 An input that allows users to enter text and collect data.**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+ *
+ * @usage
+ * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
+ * - Search Bars: Allowing users to enter search queries to find content.
+ * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
+ * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Input } from "@yahoo/uds";
+ *
+ * <Input label="Name" placeholder="Enter your name" required />
+ *```
+ *
+ * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
+ **/
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    id,
+    label,
+    type = 'text',
+    size = 'md',
+    startIcon,
+    endIcon,
+    helpText,
+    helperTextIcon,
+    hasError,
+    width: containerWidth = 'full',
+    defaultValue,
+    required,
+    readOnly,
+    disabled,
+    reduceMotion: forceReduceMotion,
+    onChange,
+    slotProps,
+    className, // extract it from otherProps
+    ...otherProps
+  }: InputProps,
+  forwardedRef,
+) {
+  const generatedId = useId();
+  const uid = id ?? `uds-input-${generatedId}`;
+  const helpTextId = `uds-input-${uid}-help-text`;
+
+  const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
+  const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
+
+  const ref = useRef<HTMLInputElement>(null);
+  useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement);
+
+  const [value, setValue] = useState(defaultValue ?? '');
+
+  const handleChange = useCallback(
+    (e: InputChangeEvent) => {
+      setValue(e.target.value);
+      onChange?.(e);
+    },
+    [onChange],
+  );
+
+  // Motion
+  const prefersReducedMotion = useReducedMotion();
+  const layoutVariant: MotionVariant = prefersReducedMotion ? 'smooth' : 'bouncy';
+  const reduceMotion = forceReduceMotion ? 'always' : 'user';
+
+  // Internal "states".
+  const isInteractive = !readOnly && !disabled;
+
+  const classNames = {
+    root: getStyles({
+      inputSizeRoot: size,
+      inputVariantRoot: 'default',
+      inputVariantValueRoot: !value ? 'empty' : 'filled',
+      className: cx([className, disabled ? 'opacity-50' : '']),
+    }),
+
+    inputWrapper: cx(
+      getStyles({
+        inputSizeInputWrapper: size,
+        inputVariantInputWrapper: 'default',
+        inputVariantValueInputWrapper: !value ? 'empty' : 'filled',
+      }),
+      'min-w-[200px]',
+      inputWrapperClassName,
+    ),
+
+    input: getStyles({
+      inputSizeInput: size,
+      inputVariantInput: 'default',
+      inputVariantValueInput: !value ? 'empty' : 'filled',
+      inputVariantInputPlaceholder: 'default',
+      inputVariantValueInputPlaceholder: !value ? 'empty' : 'filled',
+
+      className: cx(
+        'grow',
+        'uds-hit-target', // Minimum hit target of 44px
+        'bg-clip-text', // Remove auto-fill background color
+        'focus:outline-none',
+        // Readonly & disabled styles.
+        isInteractive ? 'cursor-text' : 'cursor-not-allowed',
+        // User overrides
+        inputClassName,
+      ),
+    }),
+    label: cx(
+      getStyles({
+        inputSizeLabel: size,
+        inputVariantLabel: 'default',
+        inputVariantValueLabel: !value ? 'empty' : 'filled',
+      }),
+    ),
+    labelRequired: getStyles({
+      inputVariantLabelRequired: 'default',
+      inputVariantValueLabelRequired: !value ? 'empty' : 'filled',
+    }),
+    startIcon: getStyles({
+      inputSizeStartIcon: size,
+      inputVariantStartIcon: 'default',
+      inputVariantValueStartIcon: !value ? 'empty' : 'filled',
+    }),
+    endIcon: getStyles({
+      inputSizeEndIcon: size,
+      inputVariantEndIcon: 'default',
+      inputVariantValueEndIcon: !value ? 'empty' : 'filled',
+    }),
+  };
+
+  return (
+    <VStack width={containerWidth} className={classNames.root}>
+      {label && (
+        <Box spacingBottom="2" columnGap="0.5" alignItems="flex-end" className={classNames.label}>
+          <label htmlFor={uid}>{isFunction(label) ? label() : label}</label>
+          {required && <span className={classNames.labelRequired}>*</span>}
+        </Box>
+      )}
+
+      <Box
+        position="relative"
+        alignItems="center"
+        {...inputWrapperProps}
+        className={classNames.inputWrapper}
+      >
+        <StartIcon
+          icon={startIcon}
+          className={classNames.startIcon}
+          iconProps={slotProps?.startIcon}
+        />
+
+        <input
+          ref={ref}
+          id={uid}
+          type={type}
+          value={value}
+          required={required}
+          readOnly={readOnly}
+          disabled={disabled}
+          aria-describedby={helpTextId}
+          aria-invalid={hasError}
+          onChange={handleChange}
+          className={classNames.input}
+          {...otherProps}
+          {...inputProps}
+        />
+
+        {/* Do not render the root element if endIcon is not present.
+        https://ouryahoo.atlassian.net/browse/UD-1447 */}
+        {endIcon && (
+          <HStack alignItems="center" gap="1">
+            <EndIcon icon={endIcon} className={classNames.endIcon} iconProps={slotProps?.endIcon} />
+          </HStack>
+        )}
+      </Box>
+
+      <AnimateHeightChange reduceMotion={reduceMotion} layoutVariant={layoutVariant}>
+        <HelpTextContent
+          id={helpTextId}
+          helpText={helpText}
+          spacingTop="2"
+          size={size}
+          isFilled={!!value}
+          helperTextIcon={helperTextIcon}
+        />
+      </AnimateHeightChange>
+    </VStack>
+  );
+});
+
+// Need to re-set this because of the forwardRef wrapper
+Input.displayName = 'Input';
+
+export { Input, type InputProps };

package/src/components/client/Input/InputHelpText.tsx

@@ -0,0 +1,52 @@
+import { getStyles } from '../../../styles/styler';
+import { Box } from '../../Box';
+import type { InputHelpTextInternalProps } from './InputHelpTextInternal';
+import { InputHelpTextInternal } from './InputHelpTextInternal';
+
+type InputHelpTextProps = InputHelpTextInternalProps;
+
+/**
+ * **📦 A component that displays helper text for input fields.**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A component that displays helper text for input fields.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+ *
+ * @usage
+ * - Help text that isn't tied to a specific Input.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { InputHelpText } from "@yahoo/uds";
+ *
+ * <InputHelpText>
+ *   This is some helper text for the input field.
+ * </InputHelpText>
+ *```
+ *
+ * @related [Input](https://uds.build/docs/components/input).
+ **/
+const InputHelpText = ({ size = 'md', isFilled, ...props }: InputHelpTextProps) => {
+  const classNames = {
+    root: getStyles({
+      inputSizeRoot: size,
+      inputVariantRoot: 'default',
+      inputVariantValueRoot: !isFilled ? 'empty' : 'filled',
+    }),
+  };
+
+  return (
+    <Box asChild spacingTop="2" className={classNames.root}>
+      <InputHelpTextInternal size={size} isFilled={isFilled} {...props} />
+    </Box>
+  );
+};
+
+InputHelpText.displayName = 'InputHelpText';
+
+export { InputHelpText, type InputHelpTextProps };

package/src/components/client/Input/InputHelpTextInternal.tsx

@@ -0,0 +1,81 @@
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+import { cx, getStyles } from '../../../styles/styler';
+import type { UniversalIconSlot } from '../../../tokens';
+import { HStack } from '../../HStack';
+import type { IconProps } from '../../Icon';
+import { IconSlot } from '../../IconSlot';
+import type { InputProps } from './Input';
+
+interface InputHelpTextInternalProps extends PropsWithChildren {
+  /** Icon to render at the start of the content */
+  startIcon?: UniversalIconSlot;
+  /** Icon to render at the end of the content */
+  endIcon?: UniversalIconSlot;
+  /**
+   * Props to pass to the start/end icon. If color is not provided, the icons
+   * will inherit the color from the `color` prop.
+   */
+  iconProps?: Pick<IconProps, 'color' | 'size' | 'variant'>;
+  size?: InputProps['size'];
+  isFilled?: boolean;
+}
+
+function InputHelpTextInternal({
+  startIcon,
+  endIcon,
+  iconProps,
+  children,
+  size,
+  isFilled,
+  ...rest
+}: InputHelpTextInternalProps) {
+  const defaultIconProps = {
+    variant: 'outline',
+  } satisfies InputHelpTextInternalProps['iconProps'];
+
+  const classNames = {
+    helperText: cx(
+      getStyles({
+        inputSizeHelperText: size,
+        inputVariantHelperText: 'default',
+        inputVariantValueHelperText: !isFilled ? 'empty' : 'filled',
+      }),
+    ),
+    helperIcon: getStyles({
+      inputSizeHelperIcon: size,
+      inputVariantHelperIcon: 'default',
+      inputVariantValueHelperIcon: !isFilled ? 'empty' : 'filled',
+    }),
+  };
+
+  const props = { ...defaultIconProps, ...iconProps };
+  return (
+    <HStack gap="1" alignItems="center" {...rest}>
+      {startIcon && (
+        <IconSlot
+          icon={startIcon}
+          {...props}
+          iconProps={iconProps}
+          className={classNames.helperIcon}
+        />
+      )}
+      <span className={classNames.helperText}>{children}</span>
+      {endIcon && (
+        <IconSlot
+          icon={endIcon}
+          {...props}
+          iconProps={iconProps}
+          className={classNames.helperIcon}
+        />
+      )}
+    </HStack>
+  );
+}
+
+InputHelpTextInternal.displayName = 'InputHelpTextInternal';
+
+const InputHelpTextInternalMemo = memo(InputHelpTextInternal);
+
+export { InputHelpTextInternalMemo as InputHelpTextInternal, type InputHelpTextInternalProps };

package/src/components/client/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input, type InputProps } from './Input';
+export { InputHelpText, type InputHelpTextProps } from './InputHelpText';