@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/Transition/Transition.js

@@ -1,48 +1,51 @@
-import { useState as v, useRef as y, useEffect as P, createElement as R } from "react";
-import { cn as b } from "../../utils/cn.js";
-import { DEFAULT_EASING as k, DEFAULT_DURATION as D, TRANSITION_PRESETS as U } from "./Transition.const.js";
-const G = ({
-  show: u,
-  name: I = "fade",
-  duration: r = D,
+import { useState as v, useRef as q, useEffect as P, createElement as b } from "react";
+import { cn as k } from "../../utils/cn.js";
+import { DEFAULT_DURATION as U, TRANSITION_PRESETS as g, DEFAULT_EASING as D } from "./Transition.const.js";
+const O = ({
+  show: i,
+  name: M = "fade",
+  duration: r = U,
   delay: a = 0,
-  easing: M = k,
+  easing: I = D,
   enterFrom: n,
   enterTo: l,
-  leaveFrom: m,
+  leaveFrom: o,
   leaveTo: N,
   unmountOnHide: S = !0,
-  onEnter: o,
+  onEnter: m,
   onEntered: f,
-  onLeave: i,
+  onLeave: c,
   onLeft: d,
   children: T,
-  className: $,
+  className: R,
   as: A = "div"
 }) => {
-  const [x, F] = v(u), [q, c] = v(
-    u ? "idle" : "exit-active"
-  ), e = y(null);
-  if (P(() => (e.current && clearTimeout(e.current), u ? (F(!0), c("enter"), o == null || o(), requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      c("enter-active"), e.current = setTimeout(() => {
-        c("idle"), f == null || f();
-      }, r + a);
-    });
-  })) : (c("exit"), i == null || i(), requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      c("exit-active"), e.current = setTimeout(() => {
-        S && F(!1), d == null || d();
-      }, r + a);
-    });
-  })), () => {
-    e.current && clearTimeout(e.current);
-  }), [u]), !x && S) return null;
-  const t = U[I];
+  const [x, F] = v(i), [$, u] = v(
+    i ? "idle" : "exit-active"
+  ), e = q(null), y = q(!1);
+  if (P(() => {
+    if (e.current && clearTimeout(e.current), !(!y.current && (y.current = !0, !i)))
+      return i ? (F(!0), u("enter"), m == null || m(), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          u("enter-active"), e.current = setTimeout(() => {
+            u("idle"), f == null || f();
+          }, r + a);
+        });
+      })) : (u("exit"), c == null || c(), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          u("exit-active"), e.current = setTimeout(() => {
+            S && F(!1), d == null || d();
+          }, r + a);
+        });
+      })), () => {
+        e.current && clearTimeout(e.current);
+      };
+  }, [i]), !x && S) return null;
+  const t = g[M];
   let s = {
-    transition: `all ${r}ms ${M} ${a}ms`
+    transition: `all ${r}ms ${I} ${a}ms`
   };
-  switch (q) {
+  switch ($) {
     case "enter":
       s = { ...s, ...n ?? (t == null ? void 0 : t.enter) };
       break;
@@ -51,46 +54,46 @@ const G = ({
       s = { ...s, ...l ?? (t == null ? void 0 : t.enterActive) };
       break;
     case "exit":
-      s = { ...s, ...m ?? (t == null ? void 0 : t.exit) };
+      s = { ...s, ...o ?? (t == null ? void 0 : t.exit) };
       break;
     case "exit-active":
       s = { ...s, ...N ?? (t == null ? void 0 : t.exitActive) };
       break;
   }
-  return R(
+  return b(
     A,
-    { className: b($), style: s },
+    { className: k(R), style: s },
     T
   );
-}, O = ({
-  children: u,
-  initial: I,
+}, j = ({
+  children: i,
+  initial: M,
   animate: r,
   exit: a,
-  transition: M = {},
+  transition: I = {},
   whileHover: n,
   whileTap: l,
-  inView: m = !0,
+  inView: o = !0,
   as: N = "div",
   className: S,
-  testId: o
+  testId: m
 }) => {
-  const [f, i] = v(I ?? {}), [d, T] = v(!1), [$, A] = v(!1), x = y(!1), { duration: F = 300, delay: q = 0, easing: c = k } = M;
+  const [f, c] = v(M ?? {}), [d, T] = v(!1), [R, A] = v(!1), x = q(!1), { duration: F = 300, delay: $ = 0, easing: u = D } = I;
   P(() => {
-    x.current ? m && r ? i(r) : !m && a && i(a) : (x.current = !0, requestAnimationFrame(() => {
-      m && r && i(r);
+    x.current ? o && r ? c(r) : !o && a && c(a) : (x.current = !0, requestAnimationFrame(() => {
+      o && r && c(r);
     }));
-  }, [m]);
+  }, [o]);
   let e = {
     ...f,
-    transition: `all ${F}ms ${c} ${q}ms`
+    transition: `all ${F}ms ${u} ${$}ms`
   };
-  return $ && l ? e = { ...e, ...l } : d && n && (e = { ...e, ...n }), R(
+  return R && l ? e = { ...e, ...l } : d && n && (e = { ...e, ...n }), b(
     N,
     {
-      className: b(S),
+      className: k(S),
       style: e,
-      "data-testid": o,
+      "data-testid": m,
       onMouseEnter: n ? () => T(!0) : void 0,
       onMouseLeave: n ? () => {
         T(!1), A(!1);
@@ -98,10 +101,10 @@ const G = ({
       onMouseDown: l ? () => A(!0) : void 0,
       onMouseUp: l ? () => A(!1) : void 0
     },
-    u
+    i
   );
 };
 export {
-  O as Motion,
-  G as Transition
+  j as Motion,
+  O as Transition
 };

package/dist/components/TreeSelect/TreeSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),x=require("../../utils/cn.cjs"),Z=require("../Portal/Portal.cjs"),s=require("./TreeSelect.const.cjs"),N=require("./TreeSelect.utils.cjs"),U=1e4,I=({node:a,depth:i,selected:d,expanded:n,multiple:o,onToggleExpand:h,onSelect:p})=>{const u=a.children&&a.children.length>0,E=n.has(a.id),m=d.has(a.id);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:x.cn(s.NODE_CLASSES,m&&s.NODE_SELECTED_CLASSES,a.disabled&&s.NODE_DISABLED_CLASSES),style:{paddingLeft:i*s.INDENT_PX+12},onClick:()=>!a.disabled&&p(a.id),role:"treeitem","aria-selected":m,"aria-expanded":u?E:void 0,children:[u?e.jsx("svg",{className:x.cn(s.CHEVRON_CLASSES,E&&"bear-rotate-90"),onClick:f=>{f.stopPropagation(),h(a.id)},fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}):e.jsx("span",{className:"bear-w-4 bear-mr-1"}),o&&e.jsx("span",{className:x.cn("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs",m?"bear-bg-primary-500 bear-border-primary-500 bear-text-white":"bear-border-gray-300 dark:bear-border-zinc-600"),children:m&&"✓"}),a.icon&&e.jsx("span",{className:"bear-mr-1.5",children:a.icon}),e.jsx("span",{className:"bear-truncate",children:a.label})]}),u&&E&&a.children.map(f=>e.jsx(I,{node:f,depth:i+1,selected:d,expanded:n,multiple:o,onToggleExpand:h,onSelect:p},f.id))]})},J=a=>{const{nodes:i,value:d,onChange:n,multiple:o=!1,label:h,placeholder:p="Select…",disabled:u=!1,clearable:E=!0,searchable:m=!0,expandAll:f=!1,size:O="md",error:w,helperText:y,maxHeight:P=s.DEFAULT_MAX_HEIGHT,className:D,testId:M,...z}=a,[b,j]=l.useState(!1),[L,v]=l.useState(""),C=l.useRef(null),_=l.useRef(null),g=l.useRef(null),[A,B]=l.useState({top:0,left:0,width:0}),q=l.useMemo(()=>N.collectAllIds(i),[i]),[H,G]=l.useState(()=>f?q:new Set),S=l.useMemo(()=>d?new Set(Array.isArray(d)?d:[d]):new Set,[d]);l.useEffect(()=>{if(!b)return;const r=()=>{var c;const t=(c=_.current)==null?void 0:c.getBoundingClientRect();t&&B({top:t.bottom+4,left:Math.max(8,Math.min(t.left,window.innerWidth-t.width-8)),width:t.width})};return r(),window.addEventListener("resize",r),window.addEventListener("scroll",r,!0),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",r,!0)}},[b]),l.useEffect(()=>{if(!b)return;const r=t=>{var k,T;const c=t.target;(k=C.current)!=null&&k.contains(c)||(T=g.current)!=null&&T.contains(c)||(j(!1),v(""))};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[b]);const W=l.useCallback(r=>{G(t=>{const c=new Set(t);return c.has(r)?c.delete(r):c.add(r),c})},[]),F=l.useCallback(r=>{if(o){const t=new Set(S);t.has(r)?t.delete(r):t.add(r),n==null||n(Array.from(t))}else n==null||n(r),j(!1),v("")},[o,S,n]),V=l.useCallback(()=>{n==null||n(o?[]:"")},[o,n]),R=L?N.filterNodes(i,L):i,X=()=>{if(S.size===0)return e.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:p});if(o)return e.jsx("div",{className:"bear-flex bear-flex-wrap bear-gap-1",children:Array.from(S).map(t=>{const c=N.findNodeById(i,t);return c?e.jsx("span",{className:s.TAG_CLASSES,children:c.label},t):null})});const r=N.findNodeById(i,Array.from(S)[0]);return(r==null?void 0:r.label)??p};return e.jsxs("div",{ref:C,className:x.cn(s.ROOT_CLASSES,D),"data-testid":M,...z,children:[h&&e.jsx("label",{className:s.LABEL_CLASSES,children:h}),e.jsxs("button",{ref:_,type:"button",disabled:u,onClick:()=>!u&&j(!b),className:x.cn(s.TRIGGER_CLASSES,s.SIZE_CLASSES[O],u&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:"bear-flex-1 bear-text-left bear-truncate",children:X()}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[E&&S.size>0&&e.jsx("span",{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:r=>{r.stopPropagation(),V()},children:"✕"}),e.jsx("svg",{className:x.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",b&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})]}),b&&e.jsx(Z.Portal,{children:e.jsxs("div",{ref:g,className:x.cn(s.DROPDOWN_CLASSES,"bear-fixed"),style:{top:A.top,left:A.left,width:A.width,zIndex:U},children:[m&&e.jsx("input",{className:s.SEARCH_CLASSES,placeholder:"Search…",value:L,onChange:r=>v(r.target.value),autoFocus:!0}),e.jsx("div",{style:{maxHeight:P},className:"bear-overflow-y-auto",role:"tree",children:R.length>0?R.map(r=>e.jsx(I,{node:r,depth:0,selected:S,expanded:H,multiple:o,onToggleExpand:W,onSelect:F},r.id)):e.jsx("div",{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]})}),w&&e.jsx("p",{className:s.ERROR_CLASSES,children:w}),!w&&y&&e.jsx("p",{className:s.HELPER_CLASSES,children:y})]})};exports.TreeSelect=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),s=require("../../constants/numbers.const.cjs"),n=require("../../constants/generals.const.cjs"),T=require("../../utils/cn.cjs"),m=require("../Box/Box.cjs"),K=require("../Button/Button.cjs"),Q=require("@forgedevstack/bear-icons"),v=require("../Flex/Flex.cjs"),$=require("../Portal/Portal.cjs"),b=require("../Typography/Typography.cjs"),ee=require("./components/TreeNodeRow/TreeNodeRow.cjs"),re=require("./TreeSelect.const.cjs"),h=require("./TreeSelect.utils.cjs"),te=q=>{const{nodes:d,value:x,onChange:l,multiple:c=n.BOOLEAN_FALSE,label:O,placeholder:R="Select…",disabled:f=n.BOOLEAN_FALSE,clearable:z=n.BOOLEAN_TRUE,searchable:M=n.BOOLEAN_TRUE,expandAll:P=n.BOOLEAN_FALSE,size:F=n.SIZE_MD,error:y,helperText:_,maxHeight:Z=s.TREE_SELECT_MAX_HEIGHT_PX,className:G,testId:C,...H}=q,[i,E]=a.useState(n.BOOLEAN_FALSE),[g,w]=a.useState(n.EMPTY_STRING),A=a.useRef(null),L=a.useRef(null),j=a.useRef(null),[S,Y]=a.useState({top:s.ZERO,left:s.ZERO,width:s.ZERO}),U=a.useMemo(()=>h.collectAllIds(d),[d]),[D,X]=a.useState(()=>P?U:new Set),u=a.useMemo(()=>x?new Set(Array.isArray(x)?x:[x]):new Set,[x]);a.useEffect(()=>{if(!i)return;const e=()=>{var o;const t=(o=L.current)==null?void 0:o.getBoundingClientRect();t&&Y({top:t.bottom+s.FOUR,left:Math.max(s.EIGHT,Math.min(t.left,window.innerWidth-t.width-s.EIGHT)),width:t.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[i]),a.useEffect(()=>{if(!i)return;const e=t=>{var B,I;const o=t.target;(B=A.current)!=null&&B.contains(o)||(I=j.current)!=null&&I.contains(o)||(E(n.BOOLEAN_FALSE),w(n.EMPTY_STRING))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[i]);const V=a.useCallback(e=>{X(t=>{const o=new Set(t);return o.has(e)?o.delete(e):o.add(e),o})},[]),W=a.useCallback(e=>{if(c){const t=new Set(u);t.has(e)?t.delete(e):t.add(e),l==null||l(Array.from(t));return}l==null||l(e),E(n.BOOLEAN_FALSE),w(n.EMPTY_STRING)},[c,u,l]),J=a.useCallback(()=>{l==null||l(c?[]:n.EMPTY_STRING)},[c,l]),k=g?h.filterNodes(d,g):d,N=h.findNodeById(d,Array.from(u)[s.ZERO]??n.EMPTY_STRING),p=u.size>s.ZERO;return r.jsxs(m.Box,{ref:A,className:T.cn("Bear-TreeSelect bear-relative bear-inline-block bear-w-full",G),"data-testid":C,...H,children:[O?r.jsx(b.Typography,{className:"Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",children:O}):null,r.jsxs(K.Button,{ref:L,type:"button",disabled:f,onClick:()=>!f&&E(!i),className:T.cn("bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-primary-500 bear-outline-none",re.SIZE_CLASSES[F],f&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsxs(b.Typography,{className:"bear-flex-1 bear-text-left bear-truncate",children:[p&&c?r.jsx(v.Flex,{className:"bear-flex-wrap bear-gap-1",children:Array.from(u).map(e=>{const t=h.findNodeById(d,e);return t?r.jsx(b.Typography,{className:"bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs",children:t.label},e):null})}):null,p&&!c?(N==null?void 0:N.label)??R:null,p?null:r.jsx(b.Typography,{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:R})]}),r.jsxs(v.Flex,{align:"center",className:"bear-gap-1",children:[z&&p?r.jsx(m.Box,{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:e=>{e.stopPropagation(),J()},children:"✕"}):null,r.jsx(Q.ChevronDownIcon,{className:T.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",i&&"bear-rotate-180")})]})]}),i?r.jsx($.Portal,{children:r.jsxs(m.Box,{ref:j,className:"bear-fixed bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden",style:{top:S.top,left:S.left,width:S.width,zIndex:s.ELEVEN_THOUSAND},children:[M?r.jsx("input",{className:"bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white",placeholder:"Search…",value:g,onChange:e=>w(e.target.value),autoFocus:!0}):null,r.jsx(m.Box,{style:{maxHeight:Z},className:"bear-overflow-y-auto",role:"tree",children:k.length>s.ZERO?k.map(e=>r.jsx(ee.TreeNodeRow,{node:e,depth:s.ZERO,selected:u,expanded:D,multiple:c,onToggleExpand:V,onSelect:W},e.id)):r.jsx(b.Typography,{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]})}):null,y?r.jsx(b.Typography,{className:"bear-mt-1 bear-text-xs bear-text-red-500",children:y}):null,!y&&_?r.jsx(b.Typography,{className:"bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500",children:_}):null]})};exports.TreeSelect=te;

package/dist/components/TreeSelect/TreeSelect.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=280,e=20,a={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-base",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},b="Bear-TreeSelect bear-relative bear-inline-block bear-w-full",t="bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-primary-500 bear-outline-none",S="bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden",E="bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white",o="bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300",n="bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-700 dark:bear-text-primary-300",i="bear-opacity-40 bear-cursor-not-allowed",s="bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer",c="bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs",d="Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",x="bear-mt-1 bear-text-xs bear-text-red-500",A="bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.CHEVRON_CLASSES=s;exports.DEFAULT_MAX_HEIGHT=r;exports.DROPDOWN_CLASSES=S;exports.ERROR_CLASSES=x;exports.HELPER_CLASSES=A;exports.INDENT_PX=e;exports.LABEL_CLASSES=d;exports.NODE_CLASSES=o;exports.NODE_DISABLED_CLASSES=i;exports.NODE_SELECTED_CLASSES=n;exports.ROOT_CLASSES=b;exports.SEARCH_CLASSES=E;exports.SIZE_CLASSES=a;exports.TAG_CLASSES=c;exports.TRIGGER_CLASSES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-base",lg:"bear-py-2.5 bear-px-5 bear-text-lg"};exports.SIZE_CLASSES=e;

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

@@ -1,19 +1,5 @@
-export declare const DEFAULT_MAX_HEIGHT = 280;
-export declare const INDENT_PX = 20;
 export declare const SIZE_CLASSES: {
-    readonly sm: "bear-py-1.5 bear-px-3 bear-text-sm";
-    readonly md: "bear-py-2 bear-px-4 bear-text-base";
-    readonly lg: "bear-py-2.5 bear-px-5 bear-text-lg";
+    sm: string;
+    md: string;
+    lg: string;
 };
-export declare const ROOT_CLASSES = "Bear-TreeSelect bear-relative bear-inline-block bear-w-full";
-export declare const TRIGGER_CLASSES = "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-primary-500 bear-outline-none";
-export declare const DROPDOWN_CLASSES = "bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden";
-export declare const SEARCH_CLASSES = "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white";
-export declare const NODE_CLASSES = "bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300";
-export declare const NODE_SELECTED_CLASSES = "bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-700 dark:bear-text-primary-300";
-export declare const NODE_DISABLED_CLASSES = "bear-opacity-40 bear-cursor-not-allowed";
-export declare const CHEVRON_CLASSES = "bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer";
-export declare const TAG_CLASSES = "bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs";
-export declare const LABEL_CLASSES = "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
-export declare const ERROR_CLASSES = "bear-mt-1 bear-text-xs bear-text-red-500";
-export declare const HELPER_CLASSES = "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";

package/dist/components/TreeSelect/TreeSelect.const.js

@@ -1,22 +1,8 @@
-const r = 280, e = 20, a = {
+const e = {
   sm: "bear-py-1.5 bear-px-3 bear-text-sm",
   md: "bear-py-2 bear-px-4 bear-text-base",
   lg: "bear-py-2.5 bear-px-5 bear-text-lg"
-}, b = "Bear-TreeSelect bear-relative bear-inline-block bear-w-full", t = "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-primary-500 bear-outline-none", n = "bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden", o = "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white", i = "bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300", S = "bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-700 dark:bear-text-primary-300", s = "bear-opacity-40 bear-cursor-not-allowed", x = "bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer", c = "bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs", d = "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", E = "bear-mt-1 bear-text-xs bear-text-red-500", l = "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+};
 export {
-  x as CHEVRON_CLASSES,
-  r as DEFAULT_MAX_HEIGHT,
-  n as DROPDOWN_CLASSES,
-  E as ERROR_CLASSES,
-  l as HELPER_CLASSES,
-  e as INDENT_PX,
-  d as LABEL_CLASSES,
-  i as NODE_CLASSES,
-  s as NODE_DISABLED_CLASSES,
-  S as NODE_SELECTED_CLASSES,
-  b as ROOT_CLASSES,
-  o as SEARCH_CLASSES,
-  a as SIZE_CLASSES,
-  c as TAG_CLASSES,
-  t as TRIGGER_CLASSES
+  e as SIZE_CLASSES
 };

package/dist/components/TreeSelect/TreeSelect.d.ts

@@ -1,4 +1,2 @@
-import { FC } from 'react';
 import { TreeSelectProps } from './TreeSelect.types';
-export declare const TreeSelect: FC<TreeSelectProps>;
-export default TreeSelect;
+export declare const TreeSelect: (props: TreeSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TreeSelect/TreeSelect.js

@@ -1,160 +1,180 @@
-import { jsxs as h, jsx as r, Fragment as Q } from "react/jsx-runtime";
-import { useState as N, useRef as C, useMemo as D, useEffect as P, useCallback as y } from "react";
-import { cn as b } from "../../utils/cn.js";
-import { Portal as Y } from "../Portal/Portal.js";
-import { DEFAULT_MAX_HEIGHT as $, LABEL_CLASSES as ee, SIZE_CLASSES as re, TRIGGER_CLASSES as te, SEARCH_CLASSES as ae, DROPDOWN_CLASSES as se, ERROR_CLASSES as ne, HELPER_CLASSES as le, ROOT_CLASSES as ie, TAG_CLASSES as oe, CHEVRON_CLASSES as ce, INDENT_PX as de, NODE_DISABLED_CLASSES as me, NODE_SELECTED_CLASSES as be, NODE_CLASSES as ue } from "./TreeSelect.const.js";
-import { collectAllIds as fe, filterNodes as he, findNodeById as z } from "./TreeSelect.utils.js";
-const pe = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i, onToggleExpand: p, onSelect: S }) => {
-  const c = a.children && a.children.length > 0, E = s.has(a.id), u = o.has(a.id);
-  return /* @__PURE__ */ h(Q, { children: [
-    /* @__PURE__ */ h(
-      "div",
-      {
-        className: b(ue, u && be, a.disabled && me),
-        style: { paddingLeft: l * de + 12 },
-        onClick: () => !a.disabled && S(a.id),
-        role: "treeitem",
-        "aria-selected": u,
-        "aria-expanded": c ? E : void 0,
-        children: [
-          c ? /* @__PURE__ */ r(
-            "svg",
-            {
-              className: b(ce, E && "bear-rotate-90"),
-              onClick: (f) => {
-                f.stopPropagation(), p(a.id);
-              },
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
-            }
-          ) : /* @__PURE__ */ r("span", { className: "bear-w-4 bear-mr-1" }),
-          i && /* @__PURE__ */ r("span", { className: b("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs", u ? "bear-bg-primary-500 bear-border-primary-500 bear-text-white" : "bear-border-gray-300 dark:bear-border-zinc-600"), children: u && "✓" }),
-          a.icon && /* @__PURE__ */ r("span", { className: "bear-mr-1.5", children: a.icon }),
-          /* @__PURE__ */ r("span", { className: "bear-truncate", children: a.label })
-        ]
-      }
-    ),
-    c && E && a.children.map((f) => /* @__PURE__ */ r(M, { node: f, depth: l + 1, selected: o, expanded: s, multiple: i, onToggleExpand: p, onSelect: S }, f.id))
-  ] });
-}, Ae = (a) => {
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useState as x, useRef as v, useMemo as C, useEffect as H, useCallback as T } from "react";
+import { TREE_SELECT_MAX_HEIGHT_PX as oe, ZERO as s, ELEVEN_THOUSAND as le, EIGHT as F, FOUR as se } from "../../constants/numbers.const.js";
+import { BOOLEAN_FALSE as d, BOOLEAN_TRUE as j, SIZE_MD as ie, EMPTY_STRING as f } from "../../constants/generals.const.js";
+import { cn as z } from "../../utils/cn.js";
+import { Box as h } from "../Box/Box.js";
+import { Button as be } from "../Button/Button.js";
+import { ChevronDownIcon as ce } from "@forgedevstack/bear-icons";
+import { Flex as D } from "../Flex/Flex.js";
+import { Portal as de } from "../Portal/Portal.js";
+import { Typography as i } from "../Typography/Typography.js";
+import { TreeNodeRow as me } from "./components/TreeNodeRow/TreeNodeRow.js";
+import { SIZE_CLASSES as ue } from "./TreeSelect.const.js";
+import { collectAllIds as fe, filterNodes as pe, findNodeById as G } from "./TreeSelect.utils.js";
+const Le = (U) => {
   const {
-    nodes: l,
-    value: o,
-    onChange: s,
-    multiple: i = !1,
-    label: p,
-    placeholder: S = "Select…",
-    disabled: c = !1,
-    clearable: E = !0,
-    searchable: u = !0,
-    expandAll: f = !1,
-    size: B = "md",
-    error: w,
-    helperText: _,
-    maxHeight: H = $,
-    className: j,
-    testId: G,
-    ...W
-  } = a, [d, x] = N(!1), [L, A] = N(""), g = C(null), R = C(null), k = C(null), [v, F] = N({ top: 0, left: 0, width: 0 }), V = D(() => fe(l), [l]), [X, Z] = N(() => f ? V : /* @__PURE__ */ new Set()), m = D(() => o ? new Set(Array.isArray(o) ? o : [o]) : /* @__PURE__ */ new Set(), [o]);
-  P(() => {
-    if (!d) return;
+    nodes: b,
+    value: m,
+    onChange: a,
+    multiple: o = d,
+    label: A,
+    placeholder: I = "Select…",
+    disabled: w = d,
+    clearable: Z = j,
+    searchable: X = j,
+    expandAll: V = d,
+    size: W = ie,
+    error: g,
+    helperText: L,
+    maxHeight: Y = oe,
+    className: q,
+    testId: J,
+    ...K
+  } = U, [l, y] = x(d), [E, N] = x(f), _ = v(null), R = v(null), O = v(null), [S, Q] = x({ top: s, left: s, width: s }), $ = C(() => fe(b), [b]), [ee, re] = x(() => V ? $ : /* @__PURE__ */ new Set()), c = C(() => m ? new Set(Array.isArray(m) ? m : [m]) : /* @__PURE__ */ new Set(), [m]);
+  H(() => {
+    if (!l) return;
     const e = () => {
       var n;
-      const t = (n = R.current) == null ? void 0 : n.getBoundingClientRect();
-      t && F({
-        top: t.bottom + 4,
-        left: Math.max(8, Math.min(t.left, window.innerWidth - t.width - 8)),
-        width: t.width
+      const r = (n = R.current) == null ? void 0 : n.getBoundingClientRect();
+      r && Q({
+        top: r.bottom + se,
+        left: Math.max(F, Math.min(r.left, window.innerWidth - r.width - F)),
+        width: r.width
       });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [d]), P(() => {
-    if (!d) return;
-    const e = (t) => {
-      var I, O;
-      const n = t.target;
-      (I = g.current) != null && I.contains(n) || (O = k.current) != null && O.contains(n) || (x(!1), A(""));
+  }, [l]), H(() => {
+    if (!l) return;
+    const e = (r) => {
+      var M, P;
+      const n = r.target;
+      (M = _.current) != null && M.contains(n) || (P = O.current) != null && P.contains(n) || (y(d), N(f));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [d]);
-  const U = y((e) => {
-    Z((t) => {
-      const n = new Set(t);
+  }, [l]);
+  const te = T((e) => {
+    re((r) => {
+      const n = new Set(r);
       return n.has(e) ? n.delete(e) : n.add(e), n;
     });
-  }, []), q = y((e) => {
-    if (i) {
-      const t = new Set(m);
-      t.has(e) ? t.delete(e) : t.add(e), s == null || s(Array.from(t));
-    } else
-      s == null || s(e), x(!1), A("");
-  }, [i, m, s]), J = y(() => {
-    s == null || s(i ? [] : "");
-  }, [i, s]), T = L ? he(l, L) : l, K = () => {
-    if (m.size === 0) return /* @__PURE__ */ r("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: S });
-    if (i)
-      return /* @__PURE__ */ r("div", { className: "bear-flex bear-flex-wrap bear-gap-1", children: Array.from(m).map((t) => {
-        const n = z(l, t);
-        return n ? /* @__PURE__ */ r("span", { className: oe, children: n.label }, t) : null;
-      }) });
-    const e = z(l, Array.from(m)[0]);
-    return (e == null ? void 0 : e.label) ?? S;
-  };
-  return /* @__PURE__ */ h("div", { ref: g, className: b(ie, j), "data-testid": G, ...W, children: [
-    p && /* @__PURE__ */ r("label", { className: ee, children: p }),
-    /* @__PURE__ */ h(
-      "button",
-      {
-        ref: R,
-        type: "button",
-        disabled: c,
-        onClick: () => !c && x(!d),
-        className: b(te, re[B], c && "bear-opacity-50 bear-cursor-not-allowed"),
-        children: [
-          /* @__PURE__ */ r("span", { className: "bear-flex-1 bear-text-left bear-truncate", children: K() }),
-          /* @__PURE__ */ h("div", { className: "bear-flex bear-items-center bear-gap-1", children: [
-            E && m.size > 0 && /* @__PURE__ */ r("span", { className: "bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer", onClick: (e) => {
-              e.stopPropagation(), J();
-            }, children: "✕" }),
-            /* @__PURE__ */ r("svg", { className: b("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform", d && "bear-rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
-          ] })
-        ]
-      }
-    ),
-    d && /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ h(
-      "div",
-      {
-        ref: k,
-        className: b(se, "bear-fixed"),
-        style: {
-          top: v.top,
-          left: v.left,
-          width: v.width,
-          zIndex: pe
-        },
-        children: [
-          u && /* @__PURE__ */ r(
-            "input",
-            {
-              className: ae,
-              placeholder: "Search…",
-              value: L,
-              onChange: (e) => A(e.target.value),
-              autoFocus: !0
-            }
-          ),
-          /* @__PURE__ */ r("div", { style: { maxHeight: H }, className: "bear-overflow-y-auto", role: "tree", children: T.length > 0 ? T.map((e) => /* @__PURE__ */ r(M, { node: e, depth: 0, selected: m, expanded: X, multiple: i, onToggleExpand: U, onSelect: q }, e.id)) : /* @__PURE__ */ r("div", { className: "bear-py-6 bear-text-center bear-text-sm bear-text-gray-400", children: "No results" }) })
-        ]
+  }, []), ae = T(
+    (e) => {
+      if (o) {
+        const r = new Set(c);
+        r.has(e) ? r.delete(e) : r.add(e), a == null || a(Array.from(r));
+        return;
       }
-    ) }),
-    w && /* @__PURE__ */ r("p", { className: ne, children: w }),
-    !w && _ && /* @__PURE__ */ r("p", { className: le, children: _ })
-  ] });
+      a == null || a(e), y(d), N(f);
+    },
+    [o, c, a]
+  ), ne = T(() => {
+    a == null || a(o ? [] : f);
+  }, [o, a]), B = E ? pe(b, E) : b, k = G(b, Array.from(c)[s] ?? f), p = c.size > s;
+  return /* @__PURE__ */ u(
+    h,
+    {
+      ref: _,
+      className: z("Bear-TreeSelect bear-relative bear-inline-block bear-w-full", q),
+      "data-testid": J,
+      ...K,
+      children: [
+        A ? /* @__PURE__ */ t(i, { className: "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", children: A }) : null,
+        /* @__PURE__ */ u(
+          be,
+          {
+            ref: R,
+            type: "button",
+            disabled: w,
+            onClick: () => !w && y(!l),
+            className: z(
+              "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-primary-500 bear-outline-none",
+              ue[W],
+              w && "bear-opacity-50 bear-cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ u(i, { className: "bear-flex-1 bear-text-left bear-truncate", children: [
+                p && o ? /* @__PURE__ */ t(D, { className: "bear-flex-wrap bear-gap-1", children: Array.from(c).map((e) => {
+                  const r = G(b, e);
+                  return r ? /* @__PURE__ */ t(
+                    i,
+                    {
+                      className: "bear-inline-flex bear-items-center bear-gap-1 bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-700 dark:bear-text-primary-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs",
+                      children: r.label
+                    },
+                    e
+                  ) : null;
+                }) }) : null,
+                p && !o ? (k == null ? void 0 : k.label) ?? I : null,
+                p ? null : /* @__PURE__ */ t(i, { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: I })
+              ] }),
+              /* @__PURE__ */ u(D, { align: "center", className: "bear-gap-1", children: [
+                Z && p ? /* @__PURE__ */ t(
+                  h,
+                  {
+                    className: "bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",
+                    onClick: (e) => {
+                      e.stopPropagation(), ne();
+                    },
+                    children: "✕"
+                  }
+                ) : null,
+                /* @__PURE__ */ t(
+                  ce,
+                  {
+                    className: z("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform", l && "bear-rotate-180")
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        l ? /* @__PURE__ */ t(de, { children: /* @__PURE__ */ u(
+          h,
+          {
+            ref: O,
+            className: "bear-fixed bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden",
+            style: {
+              top: S.top,
+              left: S.left,
+              width: S.width,
+              zIndex: le
+            },
+            children: [
+              X ? /* @__PURE__ */ t(
+                "input",
+                {
+                  className: "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white",
+                  placeholder: "Search…",
+                  value: E,
+                  onChange: (e) => N(e.target.value),
+                  autoFocus: !0
+                }
+              ) : null,
+              /* @__PURE__ */ t(h, { style: { maxHeight: Y }, className: "bear-overflow-y-auto", role: "tree", children: B.length > s ? B.map((e) => /* @__PURE__ */ t(
+                me,
+                {
+                  node: e,
+                  depth: s,
+                  selected: c,
+                  expanded: ee,
+                  multiple: o,
+                  onToggleExpand: te,
+                  onSelect: ae
+                },
+                e.id
+              )) : /* @__PURE__ */ t(i, { className: "bear-py-6 bear-text-center bear-text-sm bear-text-gray-400", children: "No results" }) })
+            ]
+          }
+        ) }) : null,
+        g ? /* @__PURE__ */ t(i, { className: "bear-mt-1 bear-text-xs bear-text-red-500", children: g }) : null,
+        !g && L ? /* @__PURE__ */ t(i, { className: "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500", children: L }) : null
+      ]
+    }
+  );
 };
 export {
-  Ae as TreeSelect
+  Le as TreeSelect
 };

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

@@ -6,6 +6,21 @@ export interface TreeNode {
     disabled?: boolean;
     icon?: React.ReactNode;
 }
+export interface TreeNodeRowProps {
+    node: TreeNode;
+    depth: number;
+    selected: Set<string>;
+    expanded: Set<string>;
+    multiple: boolean;
+    onToggleExpand: (id: string) => void;
+    onSelect: (id: string) => void;
+}
+export interface TreeSelectExpandControlProps {
+    hasChildren: boolean;
+    isExpanded: boolean;
+    nodeId: string;
+    onToggleExpand: (id: string) => void;
+}
 export interface TreeSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     id?: string;
     nodes: TreeNode[];

package/dist/components/TreeSelect/TreeSelect.utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=(t,r)=>{for(const e of t){if(e.id===r)return e;if(e.children){const n=d(e.children,r);if(n)return n}}},c=(t,r)=>{const e=r.toLowerCase();return t.reduce((n,l)=>{const o=l.children?c(l.children,r):[];return(l.label.toLowerCase().includes(e)||o.length>0)&&n.push({...l,children:o.length>0?o:l.children}),n},[])},i=t=>{const r=new Set;for(const e of t)r.add(e.id),e.children&&i(e.children).forEach(n=>r.add(n));return r};exports.collectAllIds=i;exports.filterNodes=c;exports.findNodeById=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../constants/numbers.const.cjs"),l=(t,r)=>{for(const e of t){if(e.id===r)return e;if(e.children){const n=l(e.children,r);if(n)return n}}},i=(t,r)=>{const e=r.toLowerCase();return t.reduce((n,o)=>{const d=o.children?i(o.children,r):[];return(o.label.toLowerCase().includes(e)||d.length>c.ZERO)&&n.push({...o,children:d.length>c.ZERO?d:o.children}),n},[])},s=t=>{const r=new Set;for(const e of t)r.add(e.id),e.children&&s(e.children).forEach(n=>r.add(n));return r};exports.collectAllIds=s;exports.filterNodes=i;exports.findNodeById=l;