@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/Drawer/Drawer.js

@@ -1,135 +1,91 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as u, useEffect as S, useCallback as M } from "react";
-import { createPortal as B } from "react-dom";
-import { useBearDirectionOptional as C } from "../../context/BearProvider.js";
-import { cn as T } from "../../utils/cn.js";
-import { resolveBearId as P } from "../../utils/generateBearId.utils.js";
-import { useBearId as F } from "../../utils/useBearId.js";
-import { XIcon as W } from "../Icon/index.js";
-import { Backdrop as j } from "../Backdrop/Backdrop.js";
-import { DRAWER_ANIMATION_MS as m, DRAWER_Z_INDEX as X, DRAWER_ROOT_CLASSES as Z, DRAWER_PANEL_Z_INDEX as $, TRANSFORM_OPEN as z, TRANSFORM_CLOSED as q, SIZE_CLASSES as H, POSITION_CLASSES as G, BORDER_SIDE_MAP as J } from "./Drawer.const.js";
-import { lockBodyScroll as K } from "./Drawer.utils.js";
-const se = ({
-  isOpen: s,
-  onClose: o,
-  title: n,
-  children: _,
-  side: w = "right",
-  anchor: I,
-  variant: Q = "temporary",
-  size: N = "md",
-  showCloseButton: f = !0,
-  closeOnBackdrop: D = !0,
-  closeOnEscape: p = !0,
-  className: A,
-  container: R,
-  id: g,
-  testId: y
-}) => {
-  const O = F("Drawer"), d = P(g, O), { direction: h } = C(), i = I ?? w, r = h === "rtl" && (i === "left" || i === "right") ? i === "left" ? "right" : "left" : i, [a, v] = u(s), [k, b] = u(!1), [x, E] = u(!1);
-  S(() => {
-    if (s) {
-      v(!0), b(!1);
-      const e = requestAnimationFrame(() => E(!0));
-      return () => cancelAnimationFrame(e);
-    }
-    if (a) {
-      E(!1), b(!0);
-      const e = setTimeout(() => {
-        v(!1), b(!1);
-      }, m);
-      return () => clearTimeout(e);
-    }
-  }, [s, a]);
-  const l = M(
-    (e) => {
-      p && e.key === "Escape" && o();
-    },
-    [p, o]
-  );
-  if (S(() => {
-    if (a) {
-      document.addEventListener("keydown", l);
-      const e = K();
-      return () => {
-        document.removeEventListener("keydown", l), e();
-      };
-    }
-    return () => {
-      document.removeEventListener("keydown", l);
-    };
-  }, [a, l]), !a) return null;
-  const L = /* @__PURE__ */ c(
-    "div",
-    {
-      id: d,
-      "data-testid": y,
-      className: Z,
-      style: { zIndex: X },
-      children: [
-        /* @__PURE__ */ t(
-          j,
-          {
-            open: x && !k,
-            keepMounted: !0,
-            blur: !0,
-            nested: !0,
-            transitionDuration: m,
-            className: "Bear-Drawer__backdrop",
-            onClick: D ? () => o() : void 0
-          }
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
+import { createPortal as T } from "react-dom";
+import { useBearDirectionOptional as M } from "../../context/BearProvider.js";
+import { cn as F } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as L } from "../../utils/generateBearId.utils.js";
+import { useBearId as x } from "../../utils/useBearId.js";
+import { BOOLEAN_TRUE as e, COMPONENT_NAME_DRAWER as P } from "../../constants/generals.const.js";
+import { OVERLAY_OPEN_EFFECT_DEFAULT as S } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import { resolveOverlayEffects as U } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { Backdrop as W } from "../Backdrop/Backdrop.js";
+import { Box as n } from "../Box/Box.js";
+import { DRAWER_DEFAULT_SIDE as $, DRAWER_DEFAULT_SIZE as g, DRAWER_ANIMATION_MS as j } from "./Drawer.const.js";
+import { DrawerOptionalHeader as H } from "./helpers/DrawerOptionalHeader.js";
+import { useDrawer as z } from "./hooks/useDrawer.js";
+const ce = (i) => {
+  const {
+    isOpen: f,
+    onClose: r,
+    title: o,
+    children: E,
+    side: B = $,
+    anchor: D,
+    variant: V = "temporary",
+    size: u = g,
+    showCloseButton: l = e,
+    closeOnBackdrop: w = e,
+    closeOnEscape: O = e,
+    className: A,
+    container: N,
+    id: I,
+    testId: R
+  } = i, { openEffect: s, closeEffect: c } = U(i, S), k = x(P), d = L(I, k), { direction: v } = M(), m = D ?? B, { isMounted: b, isPanelOpen: a } = z({
+    isOpen: f,
+    onClose: r,
+    closeOnEscape: O,
+    openEffect: s,
+    closeEffect: c
+  }), h = a ? s : c;
+  if (!b)
+    return null;
+  const C = !!o || l, p = `${d}-title`, y = /* @__PURE__ */ _(n, { id: d, testId: R, className: "Bear-Drawer", children: [
+    /* @__PURE__ */ t(
+      W,
+      {
+        open: a,
+        keepMounted: !0,
+        blur: !0,
+        nested: !0,
+        transitionDuration: j,
+        className: "Bear-Drawer__backdrop",
+        onClick: w ? () => r() : void 0
+      }
+    ),
+    /* @__PURE__ */ _(
+      n,
+      {
+        role: "dialog",
+        "aria-modal": e,
+        "aria-labelledby": o ? p : void 0,
+        className: F(
+          "Bear-Drawer__panel",
+          `Bear-Drawer__panel--${m}`,
+          `Bear-Drawer__panel--${u}`,
+          `Bear-Drawer__panel--effect-${h}`,
+          a && "Bear-Drawer__panel--open",
+          A
         ),
-        /* @__PURE__ */ c(
-          "div",
-          {
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": n ? `${d}-title` : void 0,
-            className: T(
-              "Bear-Drawer__panel",
-              "bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl",
-              "bear-border-neutral-200 dark:bear-border-neutral-700",
-              "bear-flex bear-flex-col bear-overflow-hidden",
-              "bear-transform bear-transition-transform",
-              J[r],
-              G[r],
-              H[r][N],
-              x && !k ? z[r] : q[r],
-              A
-            ),
-            style: {
-              transitionDuration: `${m}ms`,
-              zIndex: $
-            },
-            children: [
-              (n || f) && /* @__PURE__ */ c("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", dir: h, children: [
-                n && /* @__PURE__ */ t(
-                  "h2",
-                  {
-                    id: `${d}-title`,
-                    className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
-                    children: n
-                  }
-                ),
-                f && /* @__PURE__ */ t(
-                  "button",
-                  {
-                    onClick: o,
-                    className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
-                    "aria-label": "Close drawer",
-                    children: /* @__PURE__ */ t(W, { className: "bear-w-5 bear-h-5" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ t("div", { className: "bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: _ })
-            ]
-          }
-        )
-      ]
-    }
-  );
-  return B(L, R ?? document.body);
+        children: [
+          /* @__PURE__ */ t(
+            H,
+            {
+              showHeader: C,
+              side: m,
+              title: o,
+              titleId: p,
+              showCloseButton: l,
+              onClose: r,
+              direction: v
+            }
+          ),
+          /* @__PURE__ */ t(n, { className: "Bear-Drawer__body", children: E })
+        ]
+      }
+    )
+  ] });
+  return T(y, N ?? document.body);
 };
 export {
-  se as Drawer
+  ce as Drawer
 };

package/dist/components/Drawer/Drawer.types.d.ts

@@ -1,11 +1,24 @@
 import { ReactNode } from 'react';
-export interface DrawerProps {
+import { OverlayEffectProps, OverlayMotionEffect } from '../../hooks/useFixedAnchorPosition';
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export interface UseDrawerParams {
+    isOpen: boolean;
+    onClose: () => void;
+    closeOnEscape: boolean;
+    openEffect: OverlayMotionEffect;
+    closeEffect: OverlayMotionEffect;
+}
+export interface UseDrawerResult {
+    isMounted: boolean;
+    isPanelOpen: boolean;
+}
+export interface DrawerProps extends OverlayEffectProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
     children: ReactNode;
-    side?: 'left' | 'right' | 'top' | 'bottom';
-    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    side?: DrawerSide;
+    anchor?: DrawerSide;
     variant?: 'temporary' | 'persistent' | 'permanent';
     size?: 'sm' | 'md' | 'lg' | 'xl';
     showCloseButton?: boolean;

package/dist/components/Drawer/Drawer.utils.d.ts

@@ -1,5 +1 @@
-/**
- * Locks page scroll and returns a restore function.
- * Uses position:fixed to prevent iOS Safari body-scroll leaking.
- */
 export declare function lockBodyScroll(): () => void;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../Flex/Flex.cjs"),d=require("../../../../constants/generals.const.cjs"),u=require("../../../../utils/cn.cjs");require("react");const w=require("./DrawerHeaderClose.cjs"),D=require("./DrawerHeaderTitle.cjs"),q=r=>{const{side:t,title:s,titleId:a,showCloseButton:n,onClose:o,direction:i}=r,c=t===d.POSITION_RIGHT;return e.jsxs(l.Flex,{className:u.cn("Bear-Drawer__header",c&&"Bear-Drawer__header--close-start"),align:"center",justify:"between",dir:i,children:[e.jsx(D.DrawerHeaderTitle,{title:s,titleId:a}),e.jsx(w.DrawerHeaderClose,{showCloseButton:n,onClose:o})]})};exports.DrawerHeader=q;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeader.d.ts

@@ -0,0 +1,2 @@
+import { DrawerHeaderProps } from './DrawerHeader.types';
+export declare const DrawerHeader: (props: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeader.js

@@ -0,0 +1,26 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Flex as l } from "../../../Flex/Flex.js";
+import { POSITION_RIGHT as d } from "../../../../constants/generals.const.js";
+import { cn as c } from "../../../../utils/cn.js";
+import "react";
+import { DrawerHeaderClose as p } from "./DrawerHeaderClose.js";
+import { DrawerHeaderTitle as f } from "./DrawerHeaderTitle.js";
+const j = (r) => {
+  const { side: o, title: t, titleId: i, showCloseButton: a, onClose: s, direction: m } = r;
+  return /* @__PURE__ */ n(
+    l,
+    {
+      className: c("Bear-Drawer__header", o === d && "Bear-Drawer__header--close-start"),
+      align: "center",
+      justify: "between",
+      dir: m,
+      children: [
+        /* @__PURE__ */ e(f, { title: t, titleId: i }),
+        /* @__PURE__ */ e(p, { showCloseButton: a, onClose: s })
+      ]
+    }
+  );
+};
+export {
+  j as DrawerHeader
+};

package/dist/components/Drawer/components/DrawerHeader/DrawerHeader.types.d.ts

@@ -0,0 +1,20 @@
+import { DrawerSide } from '../../Drawer.types';
+export interface DrawerHeaderTitleProps {
+    title?: string;
+    titleId: string;
+}
+export interface DrawerHeaderCloseProps {
+    showCloseButton: boolean;
+    onClose: () => void;
+}
+export interface DrawerHeaderProps {
+    side: DrawerSide;
+    title?: string;
+    titleId: string;
+    showCloseButton: boolean;
+    onClose: () => void;
+    direction?: string;
+}
+export interface DrawerOptionalHeaderProps extends DrawerHeaderProps {
+    showHeader: boolean;
+}

package/dist/components/Drawer/components/DrawerHeader/DrawerHeaderClose.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("../../../../constants/generals.const.cjs"),n=require("../../../CloseButton/CloseButton.cjs"),l=e=>{const{showCloseButton:r,onClose:o}=e;return r?s.jsx(n.CloseButton,{className:"Bear-Drawer__close","aria-label":t.LABEL_CLOSE_DRAWER,onClick:o}):null};exports.DrawerHeaderClose=l;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeaderClose.d.ts

@@ -0,0 +1,2 @@
+import { DrawerHeaderCloseProps } from './DrawerHeader.types';
+export declare const DrawerHeaderClose: (props: DrawerHeaderCloseProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeaderClose.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { LABEL_CLOSE_DRAWER as l } from "../../../../constants/generals.const.js";
+import { CloseButton as s } from "../../../CloseButton/CloseButton.js";
+const i = (o) => {
+  const { showCloseButton: r, onClose: e } = o;
+  return r ? /* @__PURE__ */ t(
+    s,
+    {
+      className: "Bear-Drawer__close",
+      "aria-label": l,
+      onClick: e
+    }
+  ) : null;
+};
+export {
+  i as DrawerHeaderClose
+};

package/dist/components/Drawer/components/DrawerHeader/DrawerHeaderTitle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("../../../Typography/Typography.cjs"),l=r=>{const{title:e,titleId:t}=r;return e?i.jsx(a.Typography,{id:t,variant:"h2",className:"Bear-Drawer__title",children:e}):null};exports.DrawerHeaderTitle=l;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeaderTitle.d.ts

@@ -0,0 +1,2 @@
+import { DrawerHeaderTitleProps } from './DrawerHeader.types';
+export declare const DrawerHeaderTitle: (props: DrawerHeaderTitleProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/components/DrawerHeader/DrawerHeaderTitle.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Typography as a } from "../../../Typography/Typography.js";
+const n = (t) => {
+  const { title: r, titleId: e } = t;
+  return r ? /* @__PURE__ */ i(a, { id: e, variant: "h2", className: "Bear-Drawer__title", children: r }) : null;
+};
+export {
+  n as DrawerHeaderTitle
+};

package/dist/components/Drawer/components/DrawerHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerHeader } from './DrawerHeader';
+export type { DrawerHeaderProps } from './DrawerHeader.types';

package/dist/components/Drawer/components/index.d.ts

@@ -0,0 +1 @@
+export { DrawerHeader } from './DrawerHeader';

package/dist/components/Drawer/helpers/DrawerOptionalHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("../components/DrawerHeader/DrawerHeader.cjs"),o=e=>{const{showHeader:r,...t}=e;return r?a.jsx(n.DrawerHeader,{...t}):null};exports.DrawerOptionalHeader=o;

package/dist/components/Drawer/helpers/DrawerOptionalHeader.d.ts

@@ -0,0 +1,2 @@
+import { DrawerOptionalHeaderProps } from '../components/DrawerHeader/DrawerHeader.types';
+export declare const DrawerOptionalHeader: (props: DrawerOptionalHeaderProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/helpers/DrawerOptionalHeader.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { DrawerHeader as a } from "../components/DrawerHeader/DrawerHeader.js";
+const s = (r) => {
+  const { showHeader: e, ...o } = r;
+  return e ? /* @__PURE__ */ t(a, { ...o }) : null;
+};
+export {
+  s as DrawerOptionalHeader
+};

package/dist/components/Drawer/helpers/index.d.ts

@@ -0,0 +1 @@
+export { DrawerOptionalHeader } from './DrawerOptionalHeader';

package/dist/components/Drawer/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useDrawer } from './useDrawer';

package/dist/components/Drawer/hooks/useDrawer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),f=require("../../../constants/numbers.const.cjs"),e=require("../../../constants/generals.const.cjs"),m=require("../../../constants/keys.const.cjs"),_=require("../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),S=require("../Drawer.const.cjs"),F=require("../Drawer.utils.cjs"),B=l=>{const{isOpen:r,onClose:u,closeOnEscape:i,openEffect:O,closeEffect:a}=l,[s,A]=n.useState(r),[L,c]=n.useState(e.BOOLEAN_FALSE),[N,E]=n.useState(e.BOOLEAN_FALSE);n.useEffect(()=>{if(r){if(A(e.BOOLEAN_TRUE),c(e.BOOLEAN_FALSE),O===_.OVERLAY_OPEN_EFFECT_NONE){E(e.BOOLEAN_TRUE);return}const t=requestAnimationFrame(()=>E(e.BOOLEAN_TRUE));return()=>cancelAnimationFrame(t)}if(s){E(e.BOOLEAN_FALSE),c(e.BOOLEAN_TRUE);const t=a===_.OVERLAY_OPEN_EFFECT_NONE?f.ZERO:S.DRAWER_ANIMATION_MS,d=setTimeout(()=>{A(e.BOOLEAN_FALSE),c(e.BOOLEAN_FALSE)},t);return()=>clearTimeout(d)}},[r,s,O,a]);const o=n.useCallback(t=>{i&&t.key===m.KEY_ESCAPE&&u()},[i,u]);return n.useEffect(()=>{if(s){document.addEventListener("keydown",o);const t=F.lockBodyScroll();return()=>{document.removeEventListener("keydown",o),t()}}return()=>{document.removeEventListener("keydown",o)}},[s,o]),{isMounted:s,isPanelOpen:N&&!L}};exports.useDrawer=B;

package/dist/components/Drawer/hooks/useDrawer.d.ts

@@ -0,0 +1,2 @@
+import { UseDrawerParams, UseDrawerResult } from '../Drawer.types';
+export declare const useDrawer: (params: UseDrawerParams) => UseDrawerResult;

package/dist/components/Drawer/hooks/useDrawer.js

@@ -0,0 +1,51 @@
+import { useState as m, useEffect as p, useCallback as L } from "react";
+import { ZERO as N } from "../../../constants/numbers.const.js";
+import { BOOLEAN_FALSE as o, BOOLEAN_TRUE as r } from "../../../constants/generals.const.js";
+import { KEY_ESCAPE as C } from "../../../constants/keys.const.js";
+import { OVERLAY_OPEN_EFFECT_NONE as d } from "../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import { DRAWER_ANIMATION_MS as M } from "../Drawer.const.js";
+import { lockBodyScroll as v } from "../Drawer.utils.js";
+const B = (O) => {
+  const { isOpen: s, onClose: E, closeOnEscape: f, openEffect: u, closeEffect: a } = O, [t, l] = m(s), [A, c] = m(o), [_, i] = m(o);
+  p(() => {
+    if (s) {
+      if (l(r), c(o), u === d) {
+        i(r);
+        return;
+      }
+      const e = requestAnimationFrame(() => i(r));
+      return () => cancelAnimationFrame(e);
+    }
+    if (t) {
+      i(o), c(r);
+      const k = setTimeout(() => {
+        l(o), c(o);
+      }, a === d ? N : M);
+      return () => clearTimeout(k);
+    }
+  }, [s, t, u, a]);
+  const n = L(
+    (e) => {
+      f && e.key === C && E();
+    },
+    [f, E]
+  );
+  return p(() => {
+    if (t) {
+      document.addEventListener("keydown", n);
+      const e = v();
+      return () => {
+        document.removeEventListener("keydown", n), e();
+      };
+    }
+    return () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, [t, n]), {
+    isMounted: t,
+    isPanelOpen: _ && !A
+  };
+};
+export {
+  B as useDrawer
+};

package/dist/components/Dropdown/Dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/cn.cjs"),J=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const Q=require("../Portal/Portal.cjs"),X=require("./Dropdown.const.cjs"),Y=({trigger:x,items:c,open:j,defaultOpen:m=!1,placement:i="bottom-start",offset:v=4,matchWidth:C=!1,minWidth:h=150,maxHeight:M=300,size:S="md",closeOnSelect:I=!0,closeOnClickOutside:g=!0,disabled:R=!1,onOpenChange:f,className:P,testId:W,...z})=>{const[A,U]=t.useState(m),[b,u]=t.useState(-1),[k,B]=t.useState({top:0,left:0,minWidth:h}),q=t.useRef(null),D=t.useRef(null),L=t.useRef(null),w=j!==void 0,n=w?j:A,p=t.useCallback(e=>{w||U(e),f==null||f(e)},[w,f]),F=t.useCallback(()=>{R||p(!n)},[R,n,p]),d=t.useCallback(()=>{p(!1),u(-1)},[p]),y=t.useCallback(e=>{var r;e.disabled||e.divider||e.header||((r=e.onClick)==null||r.call(e),I&&!e.items&&d())},[I,d]),T=t.useCallback(()=>{n&&g&&d()},[n,g,d]);J.useClickOutsideMultiple([q,D],T,{enabled:n&&g}),t.useEffect(()=>{if(!n)return;const e=c.filter(a=>!a.disabled&&!a.divider&&!a.header),r=a=>{switch(a.key){case"Escape":a.preventDefault(),d();break;case"ArrowDown":a.preventDefault(),u(o=>{const l=o+1;return l>=e.length?0:l});break;case"ArrowUp":a.preventDefault(),u(o=>{const l=o-1;return l<0?e.length-1:l});break;case"Enter":case" ":a.preventDefault(),b>=0&&b<e.length&&y(e[b]);break}};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n,c,b,d,y]),t.useEffect(()=>{if(!n)return;const e=()=>{var N;const r=(N=L.current)==null?void 0:N.getBoundingClientRect();if(!r)return;const a=window.innerWidth,o=C?r.width:h,Z=i.endsWith("end")?r.right-o:i==="top"||i==="bottom"?r.left+r.width/2-o/2:r.left,G=Math.min(Math.max(8,Z),Math.max(8,a-o-8)),H=i.startsWith("top")?r.top-v:r.bottom+v;B({top:H,left:G,minWidth:o})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[n,C,h,i,v]),t.useEffect(()=>{n||u(-1)},[n]);const _=t.useMemo(()=>c.map((e,r)=>({item:e,index:r})).filter(({item:e})=>!e.disabled&&!e.divider&&!e.header),[c]),K=(e,r)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const a=_.findIndex(l=>l.index===r),o=b===a;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>y(e),onMouseEnter:()=>u(a),className:E.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",X.SIZE_CLASSES[S],"bear-transition-colors bear-cursor-pointer",e.selected&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",o&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},V=t.isValidElement(x)?t.cloneElement(x,{onClick:F,ref:L,"aria-expanded":n,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:q,className:E.cn("bear-relative bear-inline-block",P),"data-testid":W,...z,children:[V,n&&s.jsx(Q.Portal,{children:s.jsx("div",{ref:D,role:"menu",className:E.cn("bear-fixed","bear-border bear-rounded-lg bear-shadow-lg","bear-py-1 bear-overflow-y-auto","bear-duration-100"),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",minWidth:k.minWidth,maxHeight:M,top:k.top,left:k.left,zIndex:11e3},children:c.map((e,r)=>K(e,r))})})]})};exports.Dropdown=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),C=require("../../utils/cn.cjs"),V=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const J=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),Q=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs");require("../FormControl/FormControl.context.cjs");const Y=require("../OverlayPortal/OverlayPortal.cjs"),u=require("./Dropdown.const.cjs"),$=k=>{const{trigger:x,items:c,open:E,defaultOpen:I=!1,placement:v="bottom-start",offset:N=u.DROPDOWN_DEFAULT_OFFSET_PX,matchWidth:P=!1,minWidth:R=u.DROPDOWN_DEFAULT_MIN_WIDTH_PX,maxHeight:j=u.DROPDOWN_DEFAULT_MAX_HEIGHT_PX,size:q="md",closeOnSelect:O=!0,closeOnClickOutside:h=!0,disabled:D=!1,onOpenChange:f,className:S,testId:A,openEffect:ee,closeEffect:re,effect:ae,...F}=k,{openEffect:W,closeEffect:T}=Q.resolveOverlayEffects(k),[L,M]=r.useState(I),[d,i]=r.useState(-1),_=r.useRef(null),m=r.useRef(null),w=r.useRef(null),g=E!==void 0,a=g?E:L,X=v==="left"||v==="right"?"bottom-start":v,{style:H,ready:U}=J.useFixedAnchorPosition({anchorRef:w,open:a,offsetPx:N,placement:X,matchWidth:P,minWidthPx:R}),p=r.useCallback(e=>{g||M(e),f==null||f(e)},[g,f]),z=r.useCallback(()=>{D||p(!a)},[D,a,p]),l=r.useCallback(()=>{p(!1),i(-1)},[p]),y=r.useCallback(e=>{var n;e.disabled||e.divider||e.header||((n=e.onClick)==null||n.call(e),O&&!e.items&&l())},[O,l]),Z=r.useCallback(()=>{a&&h&&l()},[a,h,l]);V.useClickOutsideMultiple([_,m],Z,{enabled:a&&h}),r.useEffect(()=>{if(!a)return;const e=c.filter(t=>!t.disabled&&!t.divider&&!t.header),n=t=>{switch(t.key){case"Escape":t.preventDefault(),l();break;case"ArrowDown":t.preventDefault(),i(b=>{const o=b+1;return o>=e.length?0:o});break;case"ArrowUp":t.preventDefault(),i(b=>{const o=b-1;return o<0?e.length-1:o});break;case"Enter":case" ":t.preventDefault(),d>=0&&d<e.length&&y(e[d]);break}};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,c,d,l,y]),r.useEffect(()=>{a||i(-1)},[a]);const B=r.useMemo(()=>c.map((e,n)=>({item:e,index:n})).filter(({item:e})=>!e.disabled&&!e.divider&&!e.header),[c]),G=(e,n)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const t=B.findIndex(o=>o.index===n),b=d===t;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>y(e),onMouseEnter:()=>i(t),className:C.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",u.SIZE_CLASSES[q],"bear-transition-colors bear-cursor-pointer",e.selected&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",b&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},K=r.isValidElement(x)?r.cloneElement(x,{onClick:z,ref:w,"aria-expanded":a,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:_,className:C.cn("bear-relative bear-inline-block",S),"data-testid":A,...F,children:[K,s.jsx(Y.OverlayPortal,{open:a,ready:U,style:{...H,backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",maxHeight:j},zIndex:u.DROPDOWN_Z_INDEX,openEffect:W,closeEffect:T,panelRef:m,className:"bear-border bear-rounded-lg bear-shadow-lg bear-py-1 bear-overflow-y-auto",attributes:{role:"menu"},children:c.map((e,n)=>G(e,n))})]})};exports.Dropdown=$;

package/dist/components/Dropdown/Dropdown.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"};exports.SIZE_CLASSES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=11e3,_=150,D=300,t=4,r={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"};exports.DROPDOWN_DEFAULT_MAX_HEIGHT_PX=D;exports.DROPDOWN_DEFAULT_MIN_WIDTH_PX=_;exports.DROPDOWN_DEFAULT_OFFSET_PX=t;exports.DROPDOWN_Z_INDEX=e;exports.SIZE_CLASSES=r;

package/dist/components/Dropdown/Dropdown.const.d.ts

@@ -1,3 +1,7 @@
+export declare const DROPDOWN_Z_INDEX = 11000;
+export declare const DROPDOWN_DEFAULT_MIN_WIDTH_PX = 150;
+export declare const DROPDOWN_DEFAULT_MAX_HEIGHT_PX = 300;
+export declare const DROPDOWN_DEFAULT_OFFSET_PX = 4;
 export declare const SIZE_CLASSES: {
     readonly xs: "bear-text-xs bear-py-1 bear-px-2";
     readonly sm: "bear-text-sm bear-py-1.5 bear-px-3";

package/dist/components/Dropdown/Dropdown.const.js

@@ -1,4 +1,4 @@
-const e = {
+const e = 11e3, a = 150, b = 300, r = 4, t = {
   xs: "bear-text-xs bear-py-1 bear-px-2",
   sm: "bear-text-sm bear-py-1.5 bear-px-3",
   md: "bear-text-sm bear-py-2 bear-px-3",
@@ -6,5 +6,9 @@ const e = {
   xl: "bear-text-lg bear-py-3 bear-px-5"
 };
 export {
-  e as SIZE_CLASSES
+  b as DROPDOWN_DEFAULT_MAX_HEIGHT_PX,
+  a as DROPDOWN_DEFAULT_MIN_WIDTH_PX,
+  r as DROPDOWN_DEFAULT_OFFSET_PX,
+  e as DROPDOWN_Z_INDEX,
+  t as SIZE_CLASSES
 };