@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Drawer/index.ts

@@ -0,0 +1,12 @@
+export { Drawer } from './Drawer';
+export type {
+  DrawerProps,
+  DrawerSide,
+  DrawerSize,
+  DrawerOverlayVariant,
+  DrawerStackMode,
+  DrawerHeaderProps,
+  DrawerBodyProps,
+  DrawerFooterProps,
+  DrawerCloseProps,
+} from './Drawer';

package/src/components/Drawer/useDragToClose.ts

@@ -0,0 +1,149 @@
+import { useEffect, type RefObject } from 'react';
+
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+
+export interface UseDragToCloseOptions {
+  side: DrawerSide;
+  /** When false, the hook attaches no listeners. */
+  active: boolean;
+  /** Called when the gesture crosses the dismiss threshold. */
+  onDismiss: () => void;
+  /** Ref to the dialog container; transform is applied here via --drag-translate-x/y. */
+  contentRef: RefObject<HTMLElement | null>;
+}
+
+const DISTANCE_THRESHOLD = 0.4; // 40% of drawer size
+const VELOCITY_THRESHOLD = 0.5; // px/ms in dismiss direction
+
+/**
+ * Touch-only drag-to-close gesture. Attaches touch listeners to `headerRef`.
+ * During drag, applies `--drag-translate-{x|y}` on the content element and
+ * `--drag-opacity` on the parent overlay. On release, dismisses if the
+ * gesture crossed the distance OR velocity threshold; otherwise snaps back.
+ *
+ * Per-side dismiss direction:
+ * - right:  positive deltaX (drag right)
+ * - left:   negative deltaX (drag left)
+ * - top:    negative deltaY (drag up)
+ * - bottom: positive deltaY (drag down)
+ */
+export function useDragToClose(
+  headerRef: RefObject<HTMLElement | null>,
+  options: UseDragToCloseOptions,
+): void {
+  const { side, active, onDismiss, contentRef } = options;
+
+  useEffect(() => {
+    if (!active) return;
+    const header = headerRef.current;
+    if (!header) return;
+
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+    let startTime = 0;
+
+    function onTouchStart(e: TouchEvent) {
+      const touch = e.touches[0];
+      if (!touch) return;
+      dragging = true;
+      startX = touch.clientX;
+      startY = touch.clientY;
+      startTime = performance.now();
+    }
+
+    function dismissDelta(deltaX: number, deltaY: number): number {
+      switch (side) {
+        case 'right':
+          return Math.max(0, deltaX);
+        case 'left':
+          return Math.max(0, -deltaX);
+        case 'top':
+          return Math.max(0, -deltaY);
+        case 'bottom':
+          return Math.max(0, deltaY);
+      }
+    }
+
+    function applyDragStyles(deltaX: number, deltaY: number) {
+      const content = contentRef.current;
+      if (!content) return;
+      const drawerSize =
+        side === 'left' || side === 'right' ? content.offsetWidth : content.offsetHeight;
+      const progress = Math.min(1, dismissDelta(deltaX, deltaY) / drawerSize);
+
+      // Per-axis transform (clamped to dismiss direction so drawer doesn't pull off-edge backwards)
+      if (side === 'right') {
+        content.style.setProperty('--drag-translate-x', `${Math.max(0, deltaX)}px`);
+      } else if (side === 'left') {
+        content.style.setProperty('--drag-translate-x', `${Math.min(0, deltaX)}px`);
+      } else if (side === 'top') {
+        content.style.setProperty('--drag-translate-y', `${Math.min(0, deltaY)}px`);
+      } else {
+        content.style.setProperty('--drag-translate-y', `${Math.max(0, deltaY)}px`);
+      }
+
+      const overlay = content.parentElement;
+      if (overlay) overlay.style.setProperty('--drag-opacity', String(1 - progress));
+    }
+
+    function clearDragStyles() {
+      const content = contentRef.current;
+      if (!content) return;
+      content.style.removeProperty('--drag-translate-x');
+      content.style.removeProperty('--drag-translate-y');
+      const overlay = content.parentElement;
+      if (overlay) overlay.style.removeProperty('--drag-opacity');
+    }
+
+    function onTouchMove(e: TouchEvent) {
+      if (!dragging) return;
+      const touch = e.touches[0];
+      if (!touch) return;
+      const deltaX = touch.clientX - startX;
+      const deltaY = touch.clientY - startY;
+      applyDragStyles(deltaX, deltaY);
+    }
+
+    function onTouchEnd(e: TouchEvent) {
+      if (!dragging) return;
+      dragging = false;
+      const touch = e.changedTouches[0];
+      if (!touch) {
+        clearDragStyles();
+        return;
+      }
+      const deltaX = touch.clientX - startX;
+      const deltaY = touch.clientY - startY;
+      const elapsed = Math.max(1, performance.now() - startTime);
+
+      const content = contentRef.current;
+      const drawerSize = content
+        ? side === 'left' || side === 'right'
+          ? content.offsetWidth
+          : content.offsetHeight
+        : 0;
+      const delta = dismissDelta(deltaX, deltaY);
+      const velocity = delta / elapsed;
+
+      const shouldDismiss =
+        delta >= drawerSize * DISTANCE_THRESHOLD || velocity >= VELOCITY_THRESHOLD;
+
+      clearDragStyles();
+      if (shouldDismiss) onDismiss();
+    }
+
+    header.addEventListener('touchstart', onTouchStart, { passive: true });
+    header.addEventListener('touchmove', onTouchMove, { passive: true });
+    header.addEventListener('touchend', onTouchEnd, { passive: true });
+    header.addEventListener('touchcancel', onTouchEnd, { passive: true });
+
+    return () => {
+      header.removeEventListener('touchstart', onTouchStart);
+      header.removeEventListener('touchmove', onTouchMove);
+      header.removeEventListener('touchend', onTouchEnd);
+      header.removeEventListener('touchcancel', onTouchEnd);
+      clearDragStyles();
+    };
+  }, [headerRef, contentRef, side, active, onDismiss]);
+}

package/src/components/DropdownMenu/CheckboxItem.tsx

@@ -0,0 +1,144 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useId,
+  useLayoutEffect,
+  useRef,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import styles from './DropdownMenu.module.scss';
+import { useDropdownMenuContext } from './context';
+import { mergeRefs } from '../_internal/refs';
+import { ItemIndicator } from './ItemIndicator';
+
+/**
+ * Props for `<DropdownMenu.CheckboxItem>`.
+ *
+ * Extends standard `div` HTML attributes, omitting `onSelect` (use
+ * `onCheckedChange` instead). The ARIA contract attributes (`role`,
+ * `aria-checked`, `aria-disabled`) are always set by the component.
+ */
+export interface DropdownMenuCheckboxItemProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onSelect'
+> {
+  /** Whether the item is checked. */
+  checked: boolean;
+  /** Called with the new checked state when activated (click or Enter/Space). */
+  onCheckedChange: (checked: boolean) => void;
+  /**
+   * Whether activating closes the entire menu chain. Defaults to `false` —
+   * checkbox items typically toggle in place inside a multi-select menu.
+   * Set to `true` for single-toggle "apply and close" patterns.
+   */
+  closeOnSelect?: boolean;
+  /** Disabled items don't fire `onCheckedChange`, are skipped by keyboard nav, and render dimmed. */
+  disabled?: boolean;
+  /**
+   * Leading icon, rendered in a fixed-size slot before the label (parity with
+   * `<DropdownMenu.Item icon>`). Prefer this over inlining an icon into
+   * `children`: typeahead derives its match string from the string children, so
+   * an inlined leading icon leaves the JSX whitespace `" "` as the first string
+   * child and breaks first-letter type-to-select. Passing the icon here keeps
+   * the typeahead label the pure label string. Mark the glyph `aria-hidden`.
+   */
+  icon?: ReactNode;
+  /** Optional trailing shortcut hint (e.g. `'⌘D'`). Visual cue only — does NOT register a global key handler. */
+  shortcut?: string;
+  /**
+   * Trailing secondary content *about the item itself* — a region code, a
+   * count, a `<Badge>`. Distinct from `shortcut`, which is a keyboard hint
+   * and is styled (and free to evolve) as one.
+   *
+   * `ReactNode`, so a Badge or Dot can go here. It is NOT `aria-hidden`, so
+   * it joins the item's accessible name ("demo RU" rather than a second
+   * identical "demo") — which is the point when the label alone is
+   * ambiguous. It is a prop, not a child, so it stays out of the typeahead
+   * label; type-to-select still matches the pure label text.
+   *
+   * Renders before `shortcut` when both are present, keeping the keyboard
+   * hint rightmost.
+   */
+  meta?: ReactNode;
+  /**
+   * Item content. May include a `<DropdownMenu.ItemIndicator>` as a direct
+   * child to provide a custom indicator glyph.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Toggleable menu item (`role="menuitemcheckbox"`) that stays open after each toggle by default.
+ * @see docs/components/DropdownMenu.md
+ */
+export const CheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
+  function CheckboxItem(
+    {
+      checked,
+      onCheckedChange,
+      closeOnSelect = false,
+      disabled = false,
+      icon,
+      shortcut,
+      meta,
+      className,
+      children,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const ctx = useDropdownMenuContext('CheckboxItem');
+    const itemRef = useRef<HTMLDivElement | null>(null);
+    const id = useId();
+
+    // Extract any ItemIndicator from direct children.
+    const childrenArray = Children.toArray(children);
+    const indicator = childrenArray.find((c) => isValidElement(c) && c.type === ItemIndicator);
+    const labelContent = childrenArray.filter((c) => c !== indicator);
+    const labelText = labelContent.find((c): c is string => typeof c === 'string') ?? '';
+
+    useLayoutEffect(() => {
+      return ctx.registerItem({ id, ref: itemRef, disabled, label: labelText });
+    }, [ctx, id, disabled, labelText]);
+
+    const index = ctx.itemsRef.current.findIndex((x) => x.id === id);
+    const isActive = index !== -1 && index === ctx.activeIndex;
+
+    const handleClick = (_e: MouseEvent) => {
+      if (disabled) return;
+      onCheckedChange(!checked);
+      if (closeOnSelect) {
+        ctx.closeAll();
+      }
+    };
+
+    return (
+      // {...rest} first so consumer-supplied props don't override the menuitemcheckbox
+      // ARIA contract (role/tabIndex/aria-checked/aria-disabled) or our event wiring.
+      <div
+        {...rest}
+        ref={mergeRefs<HTMLDivElement>(itemRef, forwardedRef)}
+        role="menuitemcheckbox"
+        tabIndex={isActive ? 0 : -1}
+        aria-checked={checked}
+        aria-disabled={disabled || undefined}
+        className={clsx(styles.item, className)}
+        onClick={handleClick}
+      >
+        {indicator && (
+          <span className={styles.indicatorSlot} aria-hidden="true">
+            {checked && indicator}
+          </span>
+        )}
+        {icon !== undefined && <span className={styles.icon}>{icon}</span>}
+        <span className={styles.itemLabel}>{labelContent}</span>
+        {meta !== undefined && <span className={styles.meta}>{meta}</span>}
+        {shortcut !== undefined && <span className={styles.shortcut}>{shortcut}</span>}
+      </div>
+    );
+  },
+);