gd-design-library 1.2.0 → 1.2.1

package/components/core/Menu/Menu.js

@@ -1,36 +1,36 @@
 "use client";
-import { jsxs as X, jsx as x } from "@emotion/react/jsx-runtime";
-import { forwardRef as K, useState as y, useRef as H, useCallback as L, useEffect as U, useImperativeHandle as W } from "react";
-import { EMPTY_CLIENT_RECT as j, COMPONENT_NAME as m } from "./constants.js";
-import { MenuTriggerStyled as G, MenuContentStyled as R } from "./MenuStyled.js";
-import { useAnimationFrame as V } from "../../../utils/animationFrame.js";
-import { SelectContext as q } from "../Select/hooks/useSelectContext.js";
-import { convertToInlineBoxStyles as z } from "../../../tokens/utils.js";
-import { useTheme as J } from "../../../hooks/useTheme/useTheme.js";
-import { useLogger as Q } from "../../../hooks/useLogger/useLogger.js";
-import { Portal as Z } from "../Portal/Portal.js";
-import { KEYBOARD_KEYS as ee } from "../../../constants/keyboard.js";
-const n = 4, te = 400, oe = 80, ne = K(({
-  onSelect: a,
+import { jsxs as W, jsx as O } from "@emotion/react/jsx-runtime";
+import { forwardRef as j, useState as x, useRef as y, useCallback as H, useEffect as G, useImperativeHandle as V } from "react";
+import { EMPTY_CLIENT_RECT as q, COMPONENT_NAME as m } from "./constants.js";
+import { MenuTriggerStyled as z, MenuContentStyled as J } from "./MenuStyled.js";
+import { useAnimationFrame as Q } from "../../../utils/animationFrame.js";
+import { SelectContext as Z } from "../Select/hooks/useSelectContext.js";
+import { convertToInlineBoxStyles as ee } from "../../../tokens/utils.js";
+import { useTheme as te } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as oe } from "../../../hooks/useLogger/useLogger.js";
+import { Portal as ne } from "../Portal/Portal.js";
+import { KEYBOARD_KEYS as re } from "../../../constants/keyboard.js";
+const n = 4, se = 400, ie = 80, le = j(({
+  onSelect: v,
   children: A,
   content: Y,
-  itemIdentifier: I = (f, r) => (f == null ? void 0 : f.value) === (r == null ? void 0 : r.value),
+  itemIdentifier: I = (g, r) => (g == null ? void 0 : g.value) === (r == null ? void 0 : r.value),
   closeOnSelect: M = !0,
   placement: _,
   ...$
-}, v) => {
+}, w) => {
   const {
-    theme: f
-  } = J(), r = Q(), [l, g] = y(!1), [i, P] = y(), [N, E] = y(), p = H(null), s = H(null), S = H({
+    theme: g
+  } = te(), r = oe(), [l, a] = x(!1), [s, P] = x(), [N, C] = x(), f = y(null), i = y(null), S = y({
     top: 0,
     left: 0
-  }), F = L(({
+  }), B = H(({
     width: t,
     height: e
   }) => {
-    const o = p.current ? p.current.getBoundingClientRect() : j, w = window.innerWidth, d = window.innerHeight, h = window.scrollX || window.pageXOffset || 0, k = window.scrollY || window.pageYOffset || 0, O = _ || "bottom-right";
+    const o = f.current ? f.current.getBoundingClientRect() : q, d = window.innerWidth, E = window.innerHeight, L = window.scrollX || window.pageXOffset || 0, k = window.scrollY || window.pageYOffset || 0, p = _ || "bottom-right";
     let c, u;
-    switch (O) {
+    switch (p) {
       case "top-left": {
         c = o.left - t, u = o.top - e - n;
         break;
@@ -48,79 +48,82 @@ const n = 4, te = 400, oe = 80, ne = K(({
         break;
       }
     }
-    return c + t > w && (c = w - t - n), c < 0 && (c = n), u + e > d && (u = d - e - n), u < 0 && (u = n), {
-      left: c + h,
+    const X = c + t > d, K = c < 0;
+    (X || K) && (p === "top-left" || p === "bottom-left" ? c = n : c = d - t - n);
+    const R = u + e > E, U = u < 0;
+    return (R || U) && (p === "top-left" || p === "top-right" ? u = n : u = E - e - n), {
+      left: c + L,
       top: u + k
     };
-  }, [_]), C = L(({
+  }, [_]), T = H(({
     event: t,
     data: e
   }) => {
     r.debug(`${m}: Select`, {
       value: e == null ? void 0 : e.value,
       name: e == null ? void 0 : e.name,
-      previousValue: i == null ? void 0 : i.value,
-      previousName: i == null ? void 0 : i.name
-    }), a == null || a({
+      previousValue: s == null ? void 0 : s.value,
+      previousName: s == null ? void 0 : s.name
+    }), v == null || v({
       event: t,
       data: e
-    }), P(e), M && g(!1);
-  }, [a, M, i]), B = L(() => {
-    g((t) => {
+    }), P(e), M && a(!1);
+  }, [v, M, s]), F = H(() => {
+    a((t) => {
       const e = !t;
       return r.debug(`${m}: ${e ? "Open" : "Close"}`, {
         trigger: "toggle"
       }), e;
     });
   }, []), D = {
-    onSelect: C,
-    value: i,
+    onSelect: T,
+    value: s,
     itemIdentifier: I
   }, b = (t) => {
     var e;
-    ((e = v == null ? void 0 : v.current) != null && e.isOpen || l) && t.key === ee.ESCAPE && (r.debug(`${m}: Close`, {
+    ((e = w == null ? void 0 : w.current) != null && e.isOpen || l) && t.key === re.ESCAPE && (r.debug(`${m}: Close`, {
       trigger: "escape"
-    }), g(!1));
-  }, T = (t) => {
+    }), a(!1));
+  }, h = (t) => {
     var e, o;
-    !((e = p == null ? void 0 : p.current) != null && e.contains(N || t.target)) && !((o = s == null ? void 0 : s.current) != null && o.contains(t.target)) && (r.debug(`${m}: Close`, {
+    !((e = f == null ? void 0 : f.current) != null && e.contains(N || t.target)) && !((o = i == null ? void 0 : i.current) != null && o.contains(t.target)) && (r.debug(`${m}: Close`, {
       trigger: "outsideClick"
-    }), g(!1), E(null));
+    }), a(!1), C(null));
   };
-  return U(() => (l ? (document.addEventListener("keydown", b), document.addEventListener("mousedown", T)) : (document.removeEventListener("keydown", b), document.removeEventListener("mousedown", T)), () => {
-    document.removeEventListener("keydown", b), document.removeEventListener("mousedown", T);
-  }), [l]), V(() => {
-    if (s.current && l) {
-      const t = s.current.getBoundingClientRect(), {
+  return G(() => (l ? (document.addEventListener("keydown", b), document.addEventListener("mousedown", h)) : (document.removeEventListener("keydown", b), document.removeEventListener("mousedown", h)), () => {
+    document.removeEventListener("keydown", b), document.removeEventListener("mousedown", h);
+  }), [l]), Q(() => {
+    if (i.current && l) {
+      const t = i.current.getBoundingClientRect(), {
         top: e,
         left: o
-      } = F(t), w = window.innerHeight, d = window.scrollY || window.pageYOffset || 0, h = e - d, k = w - h - n, O = Math.max(oe, Math.min(te, k));
+      } = B(t), d = window.innerHeight, E = window.scrollY || window.pageYOffset || 0, L = e - E, k = d - L - n, p = Math.max(ie, Math.min(se, k));
       S.current = {
         top: e,
         left: o
-      }, s.current && (s.current.style.left = `${o}px`, s.current.style.top = `${e}px`, s.current.style.maxHeight = `${O}px`);
+      }, i.current && (i.current.style.left = `${o}px`, i.current.style.top = `${e}px`, i.current.style.maxHeight = `${p}px`);
     }
-  }), W(v, () => ({
-    ref: p,
+  }), V(w, () => ({
+    ref: f,
     isOpen: l,
-    selectedValue: i,
-    onSelect: C,
+    selectedValue: s,
+    onSelect: T,
     open: (t) => {
       r.debug(`${m}: Open`, {
         trigger: "ref"
-      }), !l && (E(t || null), g(!0));
+      }), !l && (C(t || null), a(!0));
     },
     close: (t) => {
       r.debug(`${m}: Close`, {
         trigger: "ref"
-      }), l && (E(t || null), g(!1));
+      }), l && (C(t || null), a(!1));
     }
-  }), [l, i, C]), /* @__PURE__ */ X(q.Provider, { value: D, children: [
-    /* @__PURE__ */ x(G, { onClick: B, theme: f, ref: p, "data-testid": m, ...$, children: A }),
-    l && /* @__PURE__ */ x(Z, { withWrapper: !1, children: /* @__PURE__ */ x(R, { ref: s, "data-testid": m, theme: f, ...z($), children: Y }) })
+  }), [l, s, T]), /* @__PURE__ */ W(Z.Provider, { value: D, children: [
+    /* @__PURE__ */ O(z, { onClick: F, theme: g, ref: f, "data-testid": m, ...$, children: A }),
+    l && /* @__PURE__ */ O(ne, { withWrapper: !1, children: /* @__PURE__ */ O(J, { ref: i, "data-testid": m, theme: g, ...ee($), children: Y }) })
   ] });
 });
-ne.displayName = m;
+le.displayName = m;
 export {
-  ne as Menu
+  le as Menu
 };

package/hooks/useMediaQuery/useMediaQuery.js

@@ -1,13 +1,15 @@
 "use client";
-import { useState as i, useEffect as r } from "react";
+import { useState as a, useEffect as c } from "react";
 const o = (e) => {
-  const [a, s] = i(() => window.matchMedia(e).matches);
-  return r(() => {
-    const t = window.matchMedia(e), n = (c) => s(c.matches);
-    return t.addEventListener("change", n), s(t.matches), () => {
-      t.removeEventListener("change", n);
+  const [i, n] = a(() => typeof window > "u" ? !1 : window.matchMedia(e).matches);
+  return c(() => {
+    if (typeof window > "u")
+      return;
+    const t = window.matchMedia(e), s = (r) => n(r.matches);
+    return t.addEventListener("change", s), n(t.matches), () => {
+      t.removeEventListener("change", s);
     };
-  }, [e]), a;
+  }, [e]), i;
 };
 export {
   o as useMediaQuery

package/hooks/useTheme/NoOpTheme.d.ts

@@ -3205,8 +3205,8 @@ export declare class NoOpTheme implements ITheme {
             content: {
                 default: {
                     backgroundColor: (theme: Record<symbol, unknown>) => string;
+                    zIndex: (theme: Record<symbol, unknown>) => string;
                     position: string;
-                    overflow: string;
                     boxShadow: (theme: Record<symbol, unknown>) => string;
                 };
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gd-design-library",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",

package/tokens/defaultTheme.d.ts

@@ -3203,8 +3203,8 @@ export declare const defaultTheme: {
         content: {
             default: {
                 backgroundColor: (theme: Record<symbol, unknown>) => string;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 position: string;
-                overflow: string;
                 boxShadow: (theme: Record<symbol, unknown>) => string;
             };
         };

package/tokens/index.d.ts

@@ -3574,8 +3574,8 @@ export declare const defaultTokens: {
         content: {
             default: {
                 backgroundColor: (theme: Record<symbol, unknown>) => string;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 position: string;
-                overflow: string;
                 boxShadow: (theme: Record<symbol, unknown>) => string;
             };
         };

package/tokens/menu.d.ts

@@ -5,8 +5,8 @@ export declare const menu: {
     content: {
         default: {
             backgroundColor: (theme: Record<symbol, unknown>) => string;
+            zIndex: (theme: Record<symbol, unknown>) => string;
             position: string;
-            overflow: string;
             boxShadow: (theme: Record<symbol, unknown>) => string;
         };
     };

package/tokens/menu.js

@@ -1,17 +1,17 @@
-import { get as e } from "../utils/helpers.js";
-const r = {
+import { get as o } from "../utils/helpers.js";
+const h = {
   wrapper: {
     default: {}
   },
   content: {
     default: {
-      backgroundColor: (o) => e(o, "colors.neutral.white", "theme.colors.neutral.white"),
+      backgroundColor: (e) => o(e, "colors.neutral.white", "theme.colors.neutral.white"),
+      zIndex: (e) => o(e, "zIndex.high", "theme.zIndex.high"),
       position: "absolute",
-      overflow: "auto",
-      boxShadow: (o) => e(o, 'shadows.box["1"]', 'theme.shadows.box["1"]')
+      boxShadow: (e) => o(e, 'shadows.box["1"]', 'theme.shadows.box["1"]')
     }
   }
 };
 export {
-  r as menu
+  h as menu
 };