@yahoo/uds 3.59.0-beta.1 → 3.59.0-beta.2

package/src/components/client/Menu/Menu.Trigger.tsx

@@ -1,119 +0,0 @@
-import type { MenuButtonProps as AriakitMenuTriggerProps } from '@ariakit/react/menu';
-import { MenuButton as AriakitMenuTrigger } from '@ariakit/react/menu';
-import { forwardRef, useCallback, useRef } from 'react';
-
-import { cx } from '../../../styles/styler';
-import type { BoxProps } from '../../Box';
-import { Box } from '../../Box';
-import type { PressableProps } from '../Pressable';
-
-interface MenuTriggerProps extends PressableProps {
-  /**
-   * When asChild is set to true, the component's child will be cloned and passed
-   * the props and behavior required to make it functional.
-   */
-  asChild?: BoxProps['asChild'];
-  /**
-   * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
-   * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
-   * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
-   */
-  store?: AriakitMenuTriggerProps['store'];
-  /**
-   * Determines if [Focusable](https://ariakit.org/components/focusable)
-   * features should be active on non-native focusable elements.
-   *
-   * **Note**: This prop only turns off the additional features provided by the
-   * [`Focusable`](https://ariakit.org/reference/focusable) component.
-   * Non-native focusable elements will lose their focusability entirely.
-   * However, native focusable elements will retain their inherent focusability,
-   * but without added features such as improved
-   * [`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
-   * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
-   * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
-   * etc.
-   * @default true
-   */
-  focusable?: AriakitMenuTriggerProps['focusable'];
-}
-
-/**
- * **⚡ A Menu Trigger component**
- *
- * @componentType Server component
- *
- * @description
- * A trigger component for the menu, which is used to toggle the menus open state.
- *
- * @see The {@link https://uds.build/docs/components/menu-trigger Menu.Trigger Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client'; // Next.js client component
- *
- * import { Menu, Button } from "@yahoo/uds";
- * import { Calendar, Clipboard } from "@yahoo/uds-icons";
- *
- * export function MenuProviderExample() {
- *   return (
- *     <Menu.Provider>
- *       <Menu.Trigger asChild>
- *         <Button>Menu Options</Button>
- *       </Menu.Trigger>
- *       <Menu.Content>
- *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
- *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
- *           Clipboard
- *         </Menu.Item>
- *         <Menu.Item active>Active Item</Menu.Item>
- *       </Menu.Content>
- *     </Menu.Provider>
- *   )
- * }
- * ```
- *
- * @usage
- * Use MenuTrigger to toggle the open state of a menu.
- *
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
- **/
-const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(
-  { asChild, children, className, ...props },
-  ref,
-) {
-  const slotRef = useRef<HTMLDivElement>(null);
-
-  const renderProps: Partial<AriakitMenuTriggerProps> = asChild
-    ? {
-        render: (
-          <Box asChild ref={slotRef} className="uds-ring h-fit w-fit">
-            {children}
-          </Box>
-        ),
-      }
-    : {
-        children,
-      };
-
-  const handleFocusVisible = useCallback(() => {
-    const firstChild = slotRef.current?.firstChild;
-    if (firstChild instanceof HTMLElement && typeof firstChild.focus === 'function') {
-      firstChild.focus();
-    }
-  }, [slotRef]);
-
-  return (
-    <AriakitMenuTrigger
-      onFocus={handleFocusVisible}
-      onFocusVisible={handleFocusVisible}
-      ref={ref}
-      className={cx('uds-menu-trigger', className)}
-      {...renderProps}
-      {...props}
-    />
-  );
-});
-
-MenuTrigger.displayName = 'MenuTrigger';
-
-export { MenuTrigger, type MenuTriggerProps };

package/src/components/client/Menu/Menu.index.tsx

@@ -1,9 +0,0 @@
-export { MenuContent as Content } from './Menu.Content';
-export { MenuDivider as Divider } from './Menu.Divider';
-export { MenuItem as Item } from './Menu.Item';
-export { MenuItemCheckbox as ItemCheckbox } from './Menu.ItemCheckbox';
-export { MenuProvider as Provider } from './Menu.Provider';
-export { MenuTrigger as Trigger } from './Menu.Trigger';
-// Forward relevant AriaKit hooks
-export { useStoreState } from '@ariakit/react';
-export { useMenuContext, useMenuStore } from '@ariakit/react/menu';

package/src/components/client/Menu/Menu.tsx

@@ -1,2 +0,0 @@
-// Re-export the client components as a named export
-export * as Menu from './Menu.index';

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

@@ -1,7 +0,0 @@
-export { Menu } from './Menu';
-export { type MenuContentProps } from './Menu.Content';
-export { type MenuDividerProps } from './Menu.Divider';
-export { type MenuItemProps } from './Menu.Item';
-export { type MenuItemCheckboxProps } from './Menu.ItemCheckbox';
-export { type MenuPlacement, type MenuProviderProps } from './Menu.Provider';
-export { type MenuTriggerProps } from './Menu.Trigger';

package/src/components/client/Menu/utils/transformAriakitPlacement.ts

@@ -1,66 +0,0 @@
-import type { MenuProviderProps as AriakitMenuProviderProps } from '@ariakit/react/menu';
-
-import type { MenuPlacement } from '../Menu.Provider';
-
-/**
- * Maps directionally-agnostic placement values to Ariakit LTR values
- * - Converts 'start' to 'left' and 'end' to 'right' (with RTL support)
- * - Examples:
- *   - 'start' -> 'left' (or 'right' in RTL)
- *   - 'end' -> 'right' (or 'left' in RTL)
- *   - 'top-start' -> 'top-left' (or 'top-right' in RTL)
- *   - 'bottom-end' -> 'bottom-right' (or 'bottom-left' in RTL)
- *   - 'start-top' -> 'left-top' (or 'right-top' in RTL)
- *   - 'end-bottom' -> 'right-bottom' (or 'left-bottom' in RTL)
- *
- * The function handles:
- * - Simple placements (start/end)
- * - Vertical-horizontal combinations (top-start, bottom-end, etc.)
- * - Horizontal-vertical combinations (start-top, end-bottom, etc.)
- * - RTL/LTR directionality
- * - Undefined placements and options
- */
-export const transformAriakitPlacement = (
-  /** The placement of the menu relative to the trigger */
-  placement?: MenuPlacement,
-  /** Extra options */
-  options?: {
-    /** Whether to apply RTL/LTR directionality to the menu */
-    rtl?: boolean;
-  },
-): AriakitMenuProviderProps['placement'] => {
-  const isRtl = options?.rtl;
-
-  // Handle simple start/end replacements
-  if (placement === 'start') {
-    return isRtl ? 'right' : 'left';
-  }
-  if (placement === 'end') {
-    return isRtl ? 'left' : 'right';
-  }
-
-  // Handle compound values
-  if (placement?.includes('-')) {
-    const [first, second] = placement.split('-');
-
-    // Handle horizontal-vertical combinations
-    if (first === 'start' || first === 'end') {
-      const horizontal = first === 'start' ? (isRtl ? 'right' : 'left') : isRtl ? 'left' : 'right';
-      // Ensure second is a valid vertical placement
-      if (second === 'top' || second === 'bottom') {
-        return `${horizontal}-${second === 'bottom' ? 'end' : 'start'}`;
-      }
-    }
-
-    // Handle vertical-horizontal combinations
-    if (first === 'top' || first === 'bottom') {
-      const horizontal = second === 'start' ? (isRtl ? 'end' : 'start') : isRtl ? 'start' : 'end';
-
-      // Ensure second is a valid vertical placement
-      return `${first}-${horizontal}`;
-    }
-  }
-
-  // Pass through other values unchanged
-  return placement as AriakitMenuProviderProps['placement'];
-};

package/src/components/client/Pressable.tsx

@@ -1,194 +0,0 @@
-import type { UniversalPressableProps } from '@yahoo/uds/tokens';
-import { forwardRef } from 'react';
-
-import { getStyles } from '../../styles/styler';
-import { createSlot } from '../../utils/createSlot';
-
-const Slot = createSlot<React.ComponentType<HtmlButtonProps>>();
-
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {}
-
-/**
- * **🖲️ A primitive component for creating button interactions with accessibility support**
- *
- * @componentType Client component
- *
- * @description
- * The Pressable component is a primitive component that can be used
- * to create button interactions with accessibility support. It can be used
- * to trigger an action, such as submitting a form, navigating to a new page,
- * or adding interactivity to a section or card.
- *
- * @example
- * ```tsx
- * import { Pressable } from '@yahoo/uds';
- *
- * <Pressable
- *   backgroundColor="secondary"
- *   borderWidth="thin"
- *   borderColor="primary"
- *   borderRadius="lg"
- *   onPress={() => console.log('Pressed!')}
- *  >
- *    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
- * </Pressable>
- * ```
- *
- * @usage
- * - If you need to add interactivity to a section or card.
- * - If you need a highly customized version of [Button](./button)
- *
- * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
- *
- * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
- *
- */
-
-const Pressable = forwardRef<HTMLButtonElement, PressableProps>(function Pressable(
-  {
-    className,
-    asChild,
-    onPress,
-    onClick = onPress,
-    // background
-    backgroundColor,
-    // border
-    borderRadius,
-    borderTopStartRadius,
-    borderTopEndRadius,
-    borderBottomStartRadius,
-    borderBottomEndRadius,
-    borderColor,
-    borderStartColor,
-    borderEndColor,
-    borderTopColor,
-    borderBottomColor,
-    borderWidth,
-    borderVerticalWidth,
-    borderHorizontalWidth,
-    borderStartWidth,
-    borderEndWidth,
-    borderTopWidth,
-    borderBottomWidth,
-    // flex
-    alignContent,
-    alignItems,
-    alignSelf,
-    flex,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    justifyContent,
-    flexBasis,
-    // layout
-    display,
-    overflow,
-    overflowX,
-    overflowY,
-    position,
-    // spacing
-    spacing,
-    spacingHorizontal,
-    spacingVertical,
-    spacingBottom,
-    spacingEnd,
-    spacingStart,
-    spacingTop,
-    offset,
-    offsetVertical,
-    offsetHorizontal,
-    offsetBottom,
-    offsetEnd,
-    offsetStart,
-    offsetTop,
-    columnGap,
-    rowGap,
-    // shadow
-    dropShadow,
-    insetShadow,
-    // rest
-    ...props
-  }: PressableProps,
-  ref,
-) {
-  const styles = getStyles({
-    // background
-    backgroundColor,
-    // border
-    borderRadius,
-    borderTopStartRadius,
-    borderTopEndRadius,
-    borderBottomStartRadius,
-    borderBottomEndRadius,
-    borderColor,
-    borderStartColor,
-    borderEndColor,
-    borderTopColor,
-    borderBottomColor,
-    borderWidth,
-    borderVerticalWidth,
-    borderHorizontalWidth,
-    borderStartWidth,
-    borderEndWidth,
-    borderTopWidth,
-    borderBottomWidth,
-    // flex
-    alignContent,
-    alignItems,
-    alignSelf,
-    flex,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    justifyContent,
-    flexBasis,
-    // layout
-    display,
-    overflow,
-    overflowX,
-    overflowY,
-    position,
-    // spacing
-    spacing,
-    spacingHorizontal,
-    spacingVertical,
-    spacingBottom,
-    spacingEnd,
-    spacingStart,
-    spacingTop,
-    offset,
-    offsetVertical,
-    offsetHorizontal,
-    offsetBottom,
-    offsetEnd,
-    offsetStart,
-    offsetTop,
-    columnGap,
-    rowGap,
-    // shadow
-    dropShadow,
-    insetShadow,
-    // rest
-    className,
-  });
-
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      className={styles}
-      ref={ref}
-      onClick={onClick}
-      // Required for Safari to render a focus ring
-      tabIndex={0}
-      {...props}
-    />
-  );
-});
-
-Pressable.displayName = 'Pressable';
-
-export { Pressable, type PressableProps };