@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/components/client/Chip/Chip.tsx

@@ -1,81 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import type { UniversalChipProps } from '../../../tokens';
-import type { ChipBaseProps } from './ChipBase';
-import { ChipButton } from './ChipButton';
-import { ChipDismissible } from './ChipDismissible';
-import type { ChipLinkProps } from './ChipLink';
-import { ChipLink } from './ChipLink';
-import { ChipToggle } from './ChipToggle';
-
-type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
-
-interface ChipProps extends UniversalChipProps, HtmlDivProps {
-  slotProps?: ChipBaseProps['slotProps'] & {
-    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
-  };
-}
-
-/**
- * **⚙️️ A chip.
- *
- * @componentType Client component
- *
- * @description
- * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Chip } from "@yahoo/uds";
- *
- * <Chip>Label</Chip>
- *```
- *
- * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
- **/
-const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
-  { onClick, href, linkProps, onDismiss, onToggle, isToggled, slotProps, ...rest }: ChipProps,
-  ref,
-) {
-  const { anchor: anchorProps, ...restSlotProps } = slotProps ?? {};
-
-  if (onDismiss) {
-    return <ChipDismissible ref={ref} onDismiss={onDismiss} slotProps={restSlotProps} {...rest} />;
-  }
-
-  if (onToggle) {
-    return (
-      <ChipToggle
-        ref={ref}
-        onToggle={onToggle}
-        isToggled={isToggled}
-        slotProps={restSlotProps}
-        {...rest}
-      />
-    );
-  }
-
-  if (href) {
-    return (
-      <ChipLink
-        ref={ref as React.ForwardedRef<HTMLAnchorElement>}
-        href={href}
-        slotProps={restSlotProps}
-        {...(rest as ChipLinkProps)}
-        {...linkProps}
-        {...anchorProps}
-      />
-    );
-  }
-
-  return <ChipButton ref={ref} onClick={onClick} slotProps={restSlotProps} {...rest} />;
-});
-
-// Need to re-set this because of the forwardRef wrapper
-Chip.displayName = 'Chip';
-
-export { Chip, type ChipProps };

package/src/components/client/Chip/ChipBase.tsx

@@ -1,151 +0,0 @@
-import { useReducedMotion } from 'motion/react';
-import React, { forwardRef, useMemo } from 'react';
-
-import { cx, getStyles } from '../../../styles/styler';
-import type {
-  ChipSize,
-  ChipVariant,
-  IconPropsWithSVGProps,
-  UniversalChipBaseProps,
-} from '../../../tokens';
-import { HStack } from '../../HStack';
-import { IconSlot } from '../../IconSlot';
-import type { TextProps } from '../../Text';
-import { Text } from '../../Text';
-
-type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
-
-// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-
-interface ChipBaseProps extends HtmlDivProps, Omit<UniversalChipBaseProps, 'variant'> {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-    text?: Partial<TextProps & DataAttributes>;
-  };
-}
-
-const SIZE_DEFAULT: ChipSize = 'md';
-const VARIANT_DEFAULT: ChipVariant = 'primary';
-const MAX_WIDTH_DEFAULT = 200;
-
-const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function ChipBase(
-  {
-    size = SIZE_DEFAULT,
-    minWidth,
-    maxWidth = MAX_WIDTH_DEFAULT,
-    startIcon,
-    endIcon,
-    as: As = 'div',
-    reduceMotion: forceReduceMotion,
-    disabled = false,
-    className,
-    slotProps,
-    children,
-    ...rest
-  }: ChipBaseProps,
-  ref,
-) {
-  // Motion
-  const prefersReducedMotion = useReducedMotion();
-  const cssAnimationDuration =
-    prefersReducedMotion || forceReduceMotion ? 'duration-0' : 'duration-120';
-
-  const { className: textClassName, ...textProps } = slotProps?.text ?? {};
-  const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
-  const { className: endIconClassName, ...endIconProps } = slotProps?.endIcon ?? {};
-
-  /**
-   * Styles
-   */
-  const classNames = useMemo(
-    () => ({
-      root: getStyles({
-        chipSizeRoot: size,
-
-        className: cx(
-          {
-            'pointer-events-none': disabled,
-            'cursor-default': disabled,
-            'opacity-50': disabled,
-          },
-
-          // Layout
-          'inline-flex',
-          'items-center',
-
-          // focus state
-          'focus-visible:-outline-offset-2',
-          'uds-ring',
-
-          // Animations
-          cssAnimationDuration,
-          'transition-[background-color,outline-color,box-shadow]',
-
-          className,
-        ),
-      }),
-
-      text: cx('truncate', 'whitespace-nowrap', 'text-center', 'flex-1', textClassName),
-
-      icon: getStyles({
-        chipSizeIcon: size,
-      }),
-    }),
-    [className, cssAnimationDuration, disabled, size, textClassName],
-  );
-
-  const inlineStyles = useMemo(
-    () => ({
-      root: { maxWidth: `${maxWidth}px`, ...(minWidth ? { minWidth: `${minWidth}px` } : {}) },
-    }),
-    [maxWidth, minWidth],
-  );
-
-  return (
-    <HStack asChild ref={ref} className={classNames.root} style={inlineStyles.root} {...rest}>
-      <As disabled={disabled}>
-        {startIcon && (
-          <IconSlot
-            icon={startIcon}
-            iconProps={{
-              variant: 'fill',
-              className: cx(classNames.icon, startIconClassName),
-              ...startIconProps,
-            }}
-          />
-        )}
-
-        <Text
-          as="span"
-          color="current"
-          variant="inherit"
-          className={classNames.text}
-          {...textProps}
-        >
-          {children}
-        </Text>
-
-        {endIcon && (
-          <IconSlot
-            icon={endIcon}
-            iconProps={{
-              variant: 'fill',
-              className: cx(classNames.icon, endIconClassName),
-              ...endIconProps,
-            }}
-          />
-        )}
-      </As>
-    </HStack>
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-ChipBase.displayName = 'ChipBase';
-
-export { ChipBase, type ChipBaseProps, VARIANT_DEFAULT };

package/src/components/client/Chip/ChipButton.tsx

@@ -1,54 +0,0 @@
-import React, { forwardRef, useMemo } from 'react';
-
-import { getStyles } from '../../../styles/styler';
-import type { UniversalChipButtonProps } from '../../../tokens';
-import { mergeSlotProps } from '../../../utils/mergeSlotProps';
-import type { ChipBaseProps } from './ChipBase';
-import { ChipBase, VARIANT_DEFAULT } from './ChipBase';
-
-type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
-
-interface ChipButtonProps extends HtmlDivProps, Omit<UniversalChipButtonProps, 'type'> {
-  slotProps?: ChipBaseProps['slotProps'];
-}
-
-const ChipButton = forwardRef<HTMLDivElement, ChipButtonProps>(function ChipButton(
-  { variant = VARIANT_DEFAULT, slotProps, className, ...rest }: ChipButtonProps,
-  ref,
-) {
-  const classNames = useMemo(
-    () => ({
-      root: getStyles({
-        chipLinkVariantRoot: variant,
-        className,
-      }),
-
-      icon: getStyles({
-        chipLinkVariantIcon: variant,
-      }),
-    }),
-    [className, variant],
-  );
-
-  const mergedSlotProps = mergeSlotProps(slotProps, {
-    startIcon: { className: classNames.icon },
-    endIcon: { className: classNames.icon },
-  });
-
-  return (
-    <ChipBase
-      as="button"
-      ref={ref}
-      // Required for Safari to render a focus ring
-      tabIndex={0}
-      className={classNames.root}
-      slotProps={mergedSlotProps}
-      {...rest}
-    />
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-ChipButton.displayName = 'ChipButton';
-
-export { ChipButton, type ChipButtonProps };

package/src/components/client/Chip/ChipDismissible.tsx

@@ -1,90 +0,0 @@
-import { Cross } from '@yahoo/uds-icons';
-import React, { forwardRef, useCallback, useMemo } from 'react';
-
-import { cx, getStyles } from '../../../styles/styler';
-import type { UniversalChipDismissibleProps } from '../../../tokens';
-import { mergeSlotProps } from '../../../utils/mergeSlotProps';
-import type { IconProps } from '../../Icon';
-import { IconSlot } from '../../IconSlot';
-import { Pressable } from '../Pressable';
-import type { ChipBaseProps } from './ChipBase';
-import { ChipBase, VARIANT_DEFAULT } from './ChipBase';
-
-type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
-
-interface ChipDismissibleProps extends HtmlDivProps, Omit<UniversalChipDismissibleProps, 'type'> {
-  slotProps?: ChipBaseProps['slotProps'];
-}
-
-const ChipDismissible = forwardRef<HTMLDivElement, ChipDismissibleProps>(function ChipDismissible(
-  {
-    dismissButtonAriaLabel,
-    onDismiss,
-    dismissIcon,
-    variant = VARIANT_DEFAULT,
-    disabled,
-    slotProps,
-    className,
-    ...rest
-  }: ChipDismissibleProps,
-  ref,
-) {
-  const classNames = useMemo(
-    () => ({
-      root: getStyles({
-        chipDismissibleVariantRoot: variant,
-        className,
-      }),
-
-      icon: getStyles({
-        chipDismissibleVariantIcon: variant,
-      }),
-
-      iconPressable: cx('uds-chip-dismissible-button', 'uds-hit-target'),
-    }),
-    [className, variant],
-  );
-
-  /**
-   * Handlers
-   */
-  const handleDismissClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      onDismiss?.();
-    },
-    [onDismiss],
-  );
-
-  const mergedSlotProps = mergeSlotProps(slotProps, {
-    startIcon: { className: classNames.icon },
-    endIcon: { className: classNames.icon },
-  });
-
-  return (
-    <ChipBase
-      ref={ref}
-      disabled={disabled}
-      tabIndex={-1}
-      endIcon={(iconProps: Omit<IconProps, 'name'>) => (
-        <Pressable
-          // Note: asChild interferes with motion/react here so we keep the wrapper
-          aria-label={dismissButtonAriaLabel}
-          className={classNames.iconPressable}
-          onClick={handleDismissClick}
-          disabled={disabled}
-        >
-          <IconSlot icon={dismissIcon ?? Cross} iconProps={iconProps} />
-        </Pressable>
-      )}
-      className={classNames.root}
-      slotProps={mergedSlotProps}
-      {...rest}
-    />
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-ChipDismissible.displayName = 'ChipDismissible';
-
-export { ChipDismissible, type ChipDismissibleProps };

package/src/components/client/Chip/ChipLink.tsx

@@ -1,60 +0,0 @@
-import React, { forwardRef, useMemo } from 'react';
-
-import { getStyles } from '../../../styles/styler';
-import type { UniversalChipLinkProps } from '../../../tokens';
-import { mergeSlotProps } from '../../../utils/mergeSlotProps';
-import type { ChipBaseProps } from './ChipBase';
-import { ChipBase, VARIANT_DEFAULT } from './ChipBase';
-
-type HtmlAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'type'>;
-
-interface ChipLinkProps extends HtmlAnchorProps, Omit<UniversalChipLinkProps, 'type'> {
-  slotProps?: ChipBaseProps['slotProps'];
-}
-
-const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
-  { variant = VARIANT_DEFAULT, href, disabled, slotProps, className, ...rest }: ChipLinkProps,
-  ref,
-) {
-  const classNames = useMemo(
-    () => ({
-      root: getStyles({
-        chipLinkVariantRoot: variant,
-        className,
-      }),
-
-      icon: getStyles({
-        chipLinkVariantIcon: variant,
-      }),
-    }),
-    [className, variant],
-  );
-
-  const mergedSlotProps = mergeSlotProps(slotProps, {
-    startIcon: { className: classNames.icon },
-    endIcon: { className: classNames.icon },
-  });
-
-  return (
-    <ChipBase
-      as="a"
-      ref={ref as React.ForwardedRef<HTMLDivElement>}
-      disabled={disabled}
-      className={classNames.root}
-      slotProps={mergedSlotProps}
-      // Required for Safari to render a focus ring
-      tabIndex={0}
-      {...({
-        ...rest,
-
-        // Remove the href is the only way to disable a link
-        href: disabled ? undefined : href,
-      } as ChipBaseProps)}
-    />
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-ChipLink.displayName = 'ChipLink';
-
-export { ChipLink, type ChipLinkProps };

package/src/components/client/Chip/ChipToggle.tsx

@@ -1,79 +0,0 @@
-import type { ForwardedRef } from 'react';
-import React, { forwardRef, useCallback, useMemo } from 'react';
-
-import { getStyles } from '../../../styles/styler';
-import type { UniversalChipToggleProps } from '../../../tokens';
-import { mergeSlotProps } from '../../../utils/mergeSlotProps';
-import type { ChipBaseProps } from './ChipBase';
-import { ChipBase, VARIANT_DEFAULT } from './ChipBase';
-
-type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'label' | 'onToggle'>;
-
-interface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {
-  slotProps?: ChipBaseProps['slotProps'];
-}
-
-const ChipToggle = forwardRef<HTMLDivElement, ChipToggleProps>(function ChipToggle(
-  {
-    isToggled = false,
-    onToggle,
-    onClick,
-    variant = VARIANT_DEFAULT,
-    slotProps,
-    className,
-    role = 'checkbox',
-    ...rest
-  }: ChipToggleProps,
-  ref,
-) {
-  const classNames = useMemo(
-    () => ({
-      root: getStyles({
-        chipToggleVariantRoot: variant,
-        chipToggleVariantActiveRoot: isToggled ? 'on' : 'off',
-        className,
-      }),
-
-      icon: getStyles({
-        chipToggleVariantIcon: variant,
-      }),
-    }),
-    [className, isToggled, variant],
-  );
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      onToggle?.(!isToggled);
-      onClick?.(e);
-    },
-    [isToggled, onClick, onToggle],
-  );
-
-  const mergedSlotProps = mergeSlotProps(slotProps, {
-    startIcon: { className: classNames.icon },
-    endIcon: { className: classNames.icon },
-  });
-
-  // If a user passes a role other than checkbox or switch, they should also manage aria attributes, if applicable, themselves.
-  const isCheckboxOrSwitch = role === 'checkbox' || role === 'switch';
-
-  return (
-    <ChipBase
-      ref={ref as ForwardedRef<HTMLDivElement>}
-      as="button"
-      role={role}
-      aria-checked={isCheckboxOrSwitch ? isToggled : undefined}
-      onClick={handleClick}
-      className={classNames.root}
-      slotProps={mergedSlotProps}
-      // Required for Safari to render a focus ring
-      tabIndex={0}
-      {...rest}
-    />
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-ChipToggle.displayName = 'ChipToggle';
-
-export { ChipToggle, type ChipToggleProps };

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

@@ -1,5 +0,0 @@
-export { Chip, type ChipProps } from './Chip';
-export { ChipButton, type ChipButtonProps } from './ChipButton';
-export { ChipDismissible, type ChipDismissibleProps } from './ChipDismissible';
-export { ChipLink, type ChipLinkProps } from './ChipLink';
-export { ChipToggle, type ChipToggleProps } from './ChipToggle';