@x-plat/design-system 0.10.0 → 0.12.0

package/dist/components/Dropdown/index.cjs

@@ -35,7 +35,7 @@ __export(Dropdown_exports, {
 module.exports = __toCommonJS(Dropdown_exports);
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom = __toESM(require("react-dom"), 1);
@@ -51,8 +51,10 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  const placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,11 +79,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -96,11 +103,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -132,6 +145,30 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react3 = __toESM(require("react"), 1);
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  import_react3.default.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -152,14 +189,18 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react3.default.useState(false);
-  const [mounted, setMounted] = import_react3.default.useState(false);
-  const [visible, setVisible] = import_react3.default.useState(false);
-  const triggerRef = import_react3.default.useRef(null);
-  const menuRef = import_react3.default.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const [isOpen, setIsOpen] = import_react4.default.useState(false);
+  const [mounted, setMounted] = import_react4.default.useState(false);
+  const [visible, setVisible] = import_react4.default.useState(false);
+  const triggerRef = import_react4.default.useRef(null);
+  const menuRef = import_react4.default.useRef(null);
+  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react3.default.useEffect(() => {
+  useEscapeKey(isOpen, () => {
+    setIsOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  import_react4.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -188,7 +229,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/Dropdown/index.css

@@ -57,3 +57,6 @@
   color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }
+.lib-xplat-dropdown-menu.repositioning {
+  transition: none;
+}

package/dist/components/Dropdown/index.js

@@ -1,5 +1,5 @@
 // src/components/Dropdown/Dropdown.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
@@ -15,8 +15,10 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -96,6 +109,30 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React3 from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  React3.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -116,14 +153,18 @@ var clsx_default = clsx;
 import { jsx, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [mounted, setMounted] = React3.useState(false);
-  const [visible, setVisible] = React3.useState(false);
-  const triggerRef = React3.useRef(null);
-  const menuRef = React3.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [mounted, setMounted] = React4.useState(false);
+  const [visible, setVisible] = React4.useState(false);
+  const triggerRef = React4.useRef(null);
+  const menuRef = React4.useRef(null);
+  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React3.useEffect(() => {
+  useEscapeKey(isOpen, () => {
+    setIsOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  React4.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -152,7 +193,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx(