@robr0/design-system 0.1.0 → 0.2.0

package/components/Drawer/Drawer.js

@@ -1,134 +1,148 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
 import ReactDOM from "react-dom";
 import "./Drawer.css";
 import "../../fonts/material-symbols.css";
 const emptySubscribe = () => () => {
 };
 const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const Drawer = ({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  side = "right",
-  size = "md",
-  dismissible = true,
-  className = ""
-}) => {
-  const panelRef = useRef(null);
-  const previousFocusRef = useRef(null);
-  const titleId = useId();
-  const descId = useId();
-  const baseClass = "ds-drawer";
-  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
-  useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const panel = panelRef.current;
-    if (panel) {
-      const first = panel.querySelector(FOCUSABLE);
-      (first ?? panel).focus();
-    }
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape" && dismissible) {
-        onOpenChange(false);
-        return;
+const Drawer = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    footer,
+    side = "right",
+    size = "md",
+    dismissible = true,
+    className = "",
+    ...rest
+  }, ref) => {
+    const panelRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const titleId = useId();
+    const descId = useId();
+    const baseClass = "ds-drawer";
+    const setPanelRef = (node) => {
+      panelRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const mounted = useSyncExternalStore(
+      emptySubscribe,
+      () => true,
+      () => false
+    );
+    useEffect(() => {
+      if (open) {
+        previousFocusRef.current = document.activeElement;
+      }
+    }, [open]);
+    useEffect(() => {
+      if (!open) return;
+      const panel = panelRef.current;
+      if (panel) {
+        const first = panel.querySelector(FOCUSABLE);
+        (first ?? panel).focus();
       }
-      if (e.key === "Tab" && panel) {
-        const focusable = panel.querySelectorAll(FOCUSABLE);
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && dismissible) {
+          onOpenChange(false);
+          return;
         }
+        if (e.key === "Tab" && panel) {
+          const focusable = panel.querySelectorAll(FOCUSABLE);
+          if (focusable.length === 0) return;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, dismissible, onOpenChange]);
+    useEffect(() => {
+      if (!open && previousFocusRef.current) {
+        previousFocusRef.current.focus();
+        previousFocusRef.current = null;
       }
+    }, [open]);
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+    const handleScrimClick = () => {
+      if (dismissible) onOpenChange(false);
     };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, dismissible, onOpenChange]);
-  useEffect(() => {
-    if (!open && previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-  const handleScrimClick = () => {
-    if (dismissible) onOpenChange(false);
-  };
-  const classes = [
-    baseClass,
-    `${baseClass}--${side}`,
-    `${baseClass}--${size}`,
-    open ? `${baseClass}--open` : "",
-    className
-  ].filter(Boolean).join(" ");
-  const drawer = /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__scrim`, onClick: handleScrimClick }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${baseClass}__panel`,
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": titleId,
-        "aria-describedby": description ? descId : void 0,
-        tabIndex: -1,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
-              /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
-              description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
+    const classes = [
+      baseClass,
+      `${baseClass}--${side}`,
+      `${baseClass}--${size}`,
+      open ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const drawer = /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__scrim`, onClick: handleScrimClick }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          className: `${baseClass}__panel`,
+          ref: setPanelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": description ? descId : rest["aria-describedby"],
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+              /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+                /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
+              ] }),
+              dismissible && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__close`,
+                  onClick: () => onOpenChange(false),
+                  "aria-label": "Close drawer",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__close-icon material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "close"
+                    }
+                  )
+                }
+              )
             ] }),
-            dismissible && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: `${baseClass}__close`,
-                onClick: () => onOpenChange(false),
-                "aria-label": "Close drawer",
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `${baseClass}__close-icon material-symbols-rounded`,
-                    "aria-hidden": "true",
-                    children: "close"
-                  }
-                )
-              }
-            )
-          ] }),
-          children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
-          footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
-        ]
-      }
-    )
-  ] });
-  if (!mounted) return null;
-  return ReactDOM.createPortal(drawer, document.body);
-};
+            children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
+            footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+          ]
+        }
+      )
+    ] });
+    if (!mounted) return null;
+    return ReactDOM.createPortal(drawer, document.body);
+  }
+);
+Drawer.displayName = "Drawer";
 export {
   Drawer
 };

package/components/Dropdown/Dropdown.d.ts

@@ -13,7 +13,8 @@ export interface DropdownOptionGroup {
     /** Options within the group */
     options: DropdownOption[];
 }
-export interface DropdownProps {
+/** Props owned by Dropdown itself — everything else falls through to the wrapper. */
+type DropdownOwnProps = {
     /** Dropdown label text */
     label?: string;
     /** Placeholder when no value selected */
@@ -34,15 +35,30 @@ export interface DropdownProps {
     error?: boolean;
     /** Helper or error message */
     helperText?: string;
-    /** Callback when selection changes */
-    onChange?: (value: string) => void;
+    /** Called with the newly selected value */
+    onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible label override */
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML name attribute */
+    /**
+     * Used only as a fallback for deriving the element id (`id || name || label`).
+     *
+     * Note: Dropdown renders a `<div role="combobox">`, not a native `<select>`,
+     * so `name` does **not** make it participate in native form submission.
+     */
     name?: string;
-    /** HTML id attribute */
-    id?: string;
+};
+export interface DropdownProps extends DropdownOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DropdownOwnProps> {
 }
-export declare const Dropdown: ({ label, placeholder, value, options, groups, size, disabled, required, error, helperText, onChange, className, ariaLabel, name, id, }: DropdownProps) => React.JSX.Element;
+/**
+ * Static single-select dropdown. Renders a `<div role="combobox">` paired with a
+ * `role="listbox"` menu; supports flat and grouped options with full keyboard
+ * navigation.
+ *
+ * Forwards a ref to the wrapping element and spreads unrecognised props onto it.
+ */
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};