asheeui 0.6.8 → 0.6.9

package/dist/components/multi-select/MultiSelect.js

@@ -1,250 +1,250 @@
 "use client";
-import { jsx as l, jsxs as S } from "react/jsx-runtime";
-import { useClick as Ue, useDismiss as Ve, useRole as je, useInteractions as Be } from "@floating-ui/react";
-import { forwardRef as Ge, useId as He, useState as P, useMemo as R, useCallback as L } from "react";
-import { ChevronDownIcon as Qe } from "../../icons/ChevronDownIcon.js";
-import { CloseIcon as $e } from "../../icons/CloseIcon.js";
-import { useAsheeConfig as qe } from "../../libs/context.js";
-import { resolveCascade as c, resolveRadiusKey as U, resolveClassKey as g } from "../../utils/resolve-token.js";
-import { Button as Je } from "../button/Button.js";
+import { jsx as l, jsxs as S, Fragment as Pe } from "react/jsx-runtime";
+import { useClick as Re, useDismiss as Ue, useRole as je, useInteractions as Ve } from "@floating-ui/react";
+import { forwardRef as $e, useId as Be, useState as B, useMemo as A, useCallback as z } from "react";
+import { ChevronDownIcon as Ge } from "../../icons/ChevronDownIcon.js";
+import { CloseIcon as He } from "../../icons/CloseIcon.js";
+import { useAsheeConfig as Qe } from "../../libs/context.js";
+import { resolveCascade as m, resolveRadiusKey as G, resolveClassKey as N } from "../../utils/resolve-token.js";
+import { Button as he } from "../button/Button.js";
 import { Chip as We } from "../chip/Chip.js";
-import { FieldShell as Xe } from "../field/FieldShell.js";
-import { SelectMenu as Ye } from "../select-menu/SelectMenu.js";
+import { FieldShell as qe } from "../field/FieldShell.js";
+import { SelectMenu as Je } from "../select-menu/SelectMenu.js";
 import { FALLBACK_MULTI_SELECT_CONFIG as s } from "./multi-select-config.js";
-import { MULTI_SELECT_HEIGHT_CLASS as Ze, MULTI_SELECT_PADDING_CLASS as he, MULTI_SELECT_FONT_CLASS as Ce, STATUS_BORDER_CLASS as er } from "./multi-select-styles.js";
-import { RADIUS_CLASS as rr } from "../../shared/radius.js";
-import { useSelectFloating as sr } from "../select-menu/use-select-floating.js";
-import { cn as T } from "../../utils/cn.js";
-const tr = Ge(
+import { MULTI_SELECT_HEIGHT_CLASS as Xe, MULTI_SELECT_PADDING_CLASS as Ye, MULTI_SELECT_FONT_CLASS as Ze, STATUS_BORDER_CLASS as Ce } from "./multi-select-styles.js";
+import { RADIUS_CLASS as er } from "../../shared/radius.js";
+import { useSelectFloating as rr } from "../select-menu/use-select-floating.js";
+import { cn as v } from "../../utils/cn.js";
+const sr = $e(
   ({
-    options: I = [],
-    value: o,
-    onChange: m,
-    InputLabel: V = "Select Options...",
-    isSearch: j = !0,
-    searchPlaceholder: B = "Search...",
-    searchInputName: G = "multiselect-search",
-    belowList: H,
-    chipOptions: N,
-    handleRemoveChip: n,
+    options: _ = [],
+    value: n,
+    onChange: u,
+    InputLabel: T = "Select Options...",
+    isSearch: H = !0,
+    searchPlaceholder: Q = "Search...",
+    searchInputName: h = "multiselect-search",
+    belowList: W,
+    chipOptions: L,
+    handleRemoveChip: i,
     handleAddChip: f,
-    chipLabel: _,
-    disableChipDisplay: Q = !1,
-    variant: $,
-    color: q,
-    size: J,
-    radius: W,
-    status: X,
-    label: Y,
-    labelAlign: Z,
-    description: h,
-    message: C,
-    required: ee,
-    isLoading: re,
-    disabled: u,
-    containerClassName: se,
-    dropdownClassName: te,
+    chipLabel: E,
+    disableChipDisplay: q = !1,
+    variant: J,
+    color: X,
+    size: Y,
+    radius: Z,
+    status: C,
+    label: ee,
+    labelAlign: re,
+    description: w,
+    message: k,
+    required: se,
+    isLoading: M,
+    disabled: c,
+    containerClassName: te,
     id: le,
-    className: ae,
-    menu: oe,
+    className: oe,
+    menu: ae,
     chip: a,
-    portal: ne,
-    portalTarget: ie,
-    style: ce,
-    ...ue
-  }, p) => {
-    var M, D, K, F;
-    const v = qe(), e = (M = v.components) == null ? void 0 : M.multiSelect, me = He(), de = le ?? me, [x, fe] = P(!1), [Se, pe] = P(""), y = c(
-      J,
+    style: ne,
+    startContent: ie,
+    endContent: ce
+  }, x) => {
+    var R, U, j, V;
+    const p = Qe(), e = (R = p.components) == null ? void 0 : R.multiSelect, ue = Be(), y = le ?? ue, [b, de] = B(!1), [me, fe] = B(""), g = m(
+      Y,
       e == null ? void 0 : e.size,
       void 0,
       s.size
-    ), ve = c(
-      $,
+    ), Se = m(
+      J,
       e == null ? void 0 : e.variant,
-      v.defaultVariant,
+      p.defaultVariant,
       s.variant
-    ), w = c(
-      q,
+    ), D = m(
+      X,
       e == null ? void 0 : e.color,
-      v.defaultColor,
+      p.defaultColor,
       s.color
-    ), A = U(
-      W,
+    ), F = G(
+      Z,
       e == null ? void 0 : e.radius,
-      v.defaultRadius,
+      p.defaultRadius,
       s.radius
-    ), xe = c(
+    ), ve = m(
       a == null ? void 0 : a.color,
-      (D = e == null ? void 0 : e.chip) == null ? void 0 : D.color,
-      w,
+      (U = e == null ? void 0 : e.chip) == null ? void 0 : U.color,
+      D,
       s.chip.color
-    ), ye = c(
+    ), xe = m(
       a == null ? void 0 : a.size,
-      (K = e == null ? void 0 : e.chip) == null ? void 0 : K.size,
+      (j = e == null ? void 0 : e.chip) == null ? void 0 : j.size,
       void 0,
       s.chip.size
-    ), be = U(
+    ), pe = G(
       a == null ? void 0 : a.radius,
-      (F = e == null ? void 0 : e.chip) == null ? void 0 : F.radius,
-      A,
+      (V = e == null ? void 0 : e.chip) == null ? void 0 : V.radius,
+      F,
       s.chip.radius
-    ), d = X ?? "default", ge = d === "error" ? "danger" : d === "success" ? "success" : d === "warning" ? "warning" : w, Te = c(
-      Z,
+    ), d = C ?? s.status, ye = d === "error" ? "danger" : d === "success" ? "success" : d === "warning" ? "warning" : D, be = m(
+      re,
       e == null ? void 0 : e.labelAlign,
       void 0,
       s.labelAlign
-    ), Ie = c(
-      ne,
-      e == null ? void 0 : e.portal,
-      void 0,
-      s.portal
-    ), Ne = c(
-      ie,
-      e == null ? void 0 : e.portalTarget,
-      void 0,
-      s.portalTarget
-    ), Le = g(
-      y,
-      Ze,
+    ), ge = N(
+      g,
+      Xe,
       s.size
-    ), _e = g(
-      y,
-      he,
+    ), Ie = N(
+      g,
+      Ye,
       s.size
-    ), we = g(
-      y,
-      Ce,
+    ), Ne = N(
+      g,
+      Ze,
       s.size
-    ), Ae = g(
-      be,
-      rr,
+    ), _e = N(
+      pe,
+      er,
       s.chip.radius
-    ), { refs: z, floatingStyles: ze, context: b } = sr({
-      isOpen: x,
-      onOpenChange: fe,
-      disabled: u
-    }), Ee = Ue(b, { enabled: !u }), ke = Ve(b), Me = je(b, { role: "listbox" }), { getReferenceProps: De, getFloatingProps: Ke } = Be([
-      Ee,
-      ke,
-      Me
-    ]), i = R(() => N !== void 0 ? N : Array.isArray(o) ? I.filter((r) => o.includes(r.value)) : [], [N, o, I]), E = L(
-      (r) => i.some((t) => t.value === r),
-      [i]
-    ), Fe = L(
+    ), { refs: K, floatingStyles: Le, context: I } = rr({
+      isOpen: b,
+      onOpenChange: de,
+      disabled: c
+    }), we = Re(I, { enabled: !c }), Ae = Ue(I), ze = je(I, { role: "listbox" }), { getReferenceProps: Te, getFloatingProps: Ee } = Ve([
+      we,
+      Ae,
+      ze
+    ]), o = A(() => L !== void 0 ? L : Array.isArray(n) ? _.filter((r) => n.includes(r.value)) : [], [L, n, _]), O = z(
+      (r) => o.some((t) => t.value === r),
+      [o]
+    ), ke = z(
       (r) => {
-        const t = E(r.value);
-        if (f || n)
-          t ? n == null || n(r.value) : f == null || f(r);
-        else if (m) {
-          const O = o ?? [], Pe = t ? O.filter((Re) => Re !== r.value) : [...O, r.value];
-          m(Pe);
+        const t = O(r.value);
+        if (f || i)
+          t ? i == null || i(r.value) : f == null || f(r);
+        else if (u) {
+          const $ = n ?? [], Ke = t ? $.filter((Oe) => Oe !== r.value) : [...$, r.value];
+          u(Ke);
         }
       },
-      [E, f, n, m, o]
-    ), k = L(
+      [O, f, i, u, n]
+    ), P = z(
       (r) => {
-        n ? n(r) : m && Array.isArray(o) && m(o.filter((t) => t !== r));
+        i ? i(r) : u && Array.isArray(n) && u(n.filter((t) => t !== r));
       },
-      [n, m, o]
-    ), Oe = R(
-      () => i.map((r) => r.value),
-      [i]
-    );
+      [i, u, n]
+    ), Me = A(
+      () => o.map((r) => r.value),
+      [o]
+    ), De = A(() => o.length > 0 ? `${o.length} selected` : T, [o.length, T]), Fe = Te();
     return /* @__PURE__ */ l(
-      Xe,
+      qe,
       {
-        id: de,
-        label: Y,
-        labelAlign: Te,
-        description: h,
-        message: C,
+        id: y,
+        label: ee,
+        labelAlign: be,
+        description: w,
+        descriptionId: w ? `${y}-description` : void 0,
+        message: k,
+        messageId: k ? `${y}-message` : void 0,
         status: d,
-        required: ee,
-        isLoading: re,
+        required: se,
+        isLoading: M,
         children: /* @__PURE__ */ S(
           "div",
           {
-            className: T("w-full flex flex-col gap-3", se),
-            style: ce,
-            ...ue,
+            className: v("w-full flex flex-col gap-3", te),
+            style: ne,
             children: [
               /* @__PURE__ */ S("div", { className: "relative w-full", children: [
-                /* @__PURE__ */ S(
-                  Je,
+                /* @__PURE__ */ l(
+                  he,
                   {
                     ref: (r) => {
-                      z.setReference(r), typeof p == "function" ? p(r) : p && (p.current = r);
+                      K.setReference(r), typeof x == "function" ? x(r) : x && (x.current = r);
                     },
-                    variant: ve,
-                    color: ge,
-                    radius: A,
-                    animate: !1,
-                    size: y,
-                    isDisabled: u,
-                    "aria-expanded": x,
+                    type: "button",
+                    variant: Se,
+                    color: ye,
+                    size: g,
+                    radius: F,
+                    isDisabled: c,
+                    isLoading: M,
+                    fullWidth: !0,
+                    "aria-expanded": b,
                     "aria-haspopup": "listbox",
                     "aria-invalid": d === "error",
-                    className: T(
-                      "w-full flex items-center justify-between font-normal text-left transition-all duration-200 outline-none select-none",
-                      er[d],
-                      Le,
-                      _e,
-                      we,
-                      ae
+                    "aria-describedby": [w ? `${y}-description` : void 0].filter(Boolean).join(" ") || void 0,
+                    className: v(
+                      "font-normal text-left justify-between",
+                      Ce[d],
+                      ge,
+                      Ie,
+                      Ne,
+                      oe
                     ),
-                    ...De(),
-                    children: [
-                      /* @__PURE__ */ l("span", { children: i.length > 0 ? `${i.length} selected` : V }),
+                    startContent: ie,
+                    endContent: /* @__PURE__ */ S(Pe, { children: [
+                      ce,
                       /* @__PURE__ */ l(
-                        Qe,
+                        Ge,
                         {
-                          className: T(
-                            "ml-2 shrink-0 transition-transform duration-200",
-                            x && "rotate-180"
+                          className: v(
+                            "shrink-0 text-foreground/70 transition-transform duration-200",
+                            b && "rotate-180"
                           )
                         }
                       )
-                    ]
+                    ] }),
+                    ...Fe,
+                    children: /* @__PURE__ */ l(
+                      "span",
+                      {
+                        className: v(
+                          "truncate",
+                          o.length > 0 ? "text-foreground" : "text-foreground/70"
+                        ),
+                        children: De
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ l(
-                  Ye,
+                  Je,
                   {
-                    isOpen: x,
-                    context: b,
-                    floatingStyles: ze,
-                    getFloatingProps: Ke,
-                    setFloatingRef: z.setFloating,
-                    options: I,
-                    selectedValues: Oe,
-                    onSelectMenuOption: Fe,
-                    isSearch: j,
-                    searchPlaceholder: B,
-                    searchInputName: G,
-                    searchQuery: Se,
-                    onSearchChange: pe,
-                    belowList: H,
-                    dropdownClassName: te,
-                    menuProps: oe,
-                    menuConfig: e == null ? void 0 : e.menu,
-                    portal: Ie,
-                    portalTarget: Ne
+                    isOpen: b,
+                    context: I,
+                    floatingStyles: Le,
+                    getFloatingProps: Ee,
+                    setFloatingRef: K.setFloating,
+                    options: _,
+                    selectedValues: Me,
+                    onSelectMenuOption: ke,
+                    isSearch: H,
+                    searchPlaceholder: Q,
+                    searchInputName: h,
+                    searchQuery: me,
+                    onSearchChange: fe,
+                    belowList: W,
+                    menuProps: ae,
+                    menuConfig: e == null ? void 0 : e.menu
                   }
                 )
               ] }),
-              !Q && /* @__PURE__ */ S("div", { className: "flex flex-col gap-1.5", children: [
-                _ && /* @__PURE__ */ l("span", { className: "text-xs font-medium text-foreground/70", children: _ }),
-                /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1.5 p-2 min-h-12 bg-secondary/20 border border-dashed border-border rounded-lg items-center", children: i.length === 0 ? /* @__PURE__ */ l("span", { className: "text-xs text-foreground/70 px-2 py-1", children: "No selections made" }) : i.map((r) => /* @__PURE__ */ S(
+              !q && /* @__PURE__ */ S("div", { className: "flex flex-col gap-1.5", children: [
+                E && /* @__PURE__ */ l("span", { className: "text-xs font-medium text-foreground/70", children: E }),
+                /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1.5 p-2 min-h-12 bg-secondary/20 border border-dashed border-border rounded-lg items-center", children: o.length === 0 ? /* @__PURE__ */ l("span", { className: "text-xs text-foreground/70 px-2 py-1", children: "No selections made" }) : o.map((r) => /* @__PURE__ */ S(
                   We,
                   {
                     variant: "bordered",
-                    color: xe,
-                    size: ye,
-                    isDisabled: u,
-                    className: T(
+                    color: ve,
+                    size: xe,
+                    isDisabled: c,
+                    className: v(
                       "inline-flex items-center gap-1.5 font-medium shadow-xs",
-                      Ae
+                      _e
                     ),
                     children: [
                       /* @__PURE__ */ l("span", { children: r.label }),
@@ -252,16 +252,16 @@ const tr = Ge(
                         "button",
                         {
                           type: "button",
-                          tabIndex: u ? -1 : 0,
+                          tabIndex: c ? -1 : 0,
                           onClick: (t) => {
-                            t.stopPropagation(), u || k(r.value);
+                            t.stopPropagation(), c || P(r.value);
                           },
                           onKeyDown: (t) => {
-                            (t.key === "Enter" || t.key === " ") && !u && (t.stopPropagation(), k(r.value));
+                            (t.key === "Enter" || t.key === " ") && !c && (t.stopPropagation(), P(r.value));
                           },
                           "aria-label": `Remove ${r.label}`,
                           className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-black/20 dark:hover:bg-white/20 transition-colors cursor-pointer shrink-0",
-                          children: /* @__PURE__ */ l($e, { className: "w-3 h-3" })
+                          children: /* @__PURE__ */ l(He, { className: "w-3 h-3" })
                         }
                       )
                     ]
@@ -276,7 +276,7 @@ const tr = Ge(
     );
   }
 );
-tr.displayName = "MultiSelect";
+sr.displayName = "MultiSelect";
 export {
-  tr as MultiSelect
+  sr as MultiSelect
 };

package/dist/components/multi-select/multi-select-config.d.ts

@@ -1,6 +1,6 @@
 import { Color, Radius, Size, Variant } from '../../shared';
 import { FieldConfig } from '../field/field-config';
-import { SelectMenuConfig } from '../select-menu';
+import { MenuConfig } from '../select-menu';
 /**
  * Theme configuration options for the MultiSelect component.
  *
@@ -12,7 +12,7 @@ export interface MultiSelectConfig extends FieldConfig {
      * Configuration for the dropdown menu.
      * Controls the menu's visual appearance and behavior.
      */
-    menu?: SelectMenuConfig;
+    menu?: MenuConfig;
     /**
      * Configuration for selected value chips.
      * Controls the appearance of chips in the selected values section.
@@ -35,22 +35,6 @@ export interface MultiSelectConfig extends FieldConfig {
          */
         size?: Size;
     };
-    /**
-     * Whether to render the dropdown menu in a React portal.
-     * When true, the menu is rendered at the document body level,
-     * escaping any parent DOM hierarchy. This prevents CSS containment
-     * and stacking context issues. Defaults to true because dropdowns
-     * should always appear above other content.
-     *
-     * @default true
-     */
-    portal?: boolean;
-    /**
-     * Custom portal target element for the dropdown menu.
-     * When portal is enabled, the menu is rendered into this element.
-     * Defaults to document.body.
-     */
-    portalTarget?: HTMLElement | null;
 }
 /**
  * Default config values registered for the MultiSelect component.
@@ -69,8 +53,6 @@ export declare const FALLBACK_MULTI_SELECT_CONFIG: {
         readonly radius: "sm";
         readonly variant: "solid";
     };
-    readonly portal: true;
-    readonly portalTarget: null;
     readonly size: import('../field').FieldSizeKey;
     readonly radius: Radius;
     readonly variant: Variant;

package/dist/components/multi-select/multi-select-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAEd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB;;WAEG;QACH,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;IAEF;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAOtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAU/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
+{"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAEd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB;;WAEG;QACH,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

package/dist/components/multi-select/multi-select-config.js

@@ -1,26 +1,22 @@
 "use client";
-import { registerComponentDefaults as t } from "../../libs/registry.js";
-import { FALLBACK_FIELD_CONFIG as e, defaultFieldConfig as r } from "../field/field-config.js";
-const l = {
-  ...r,
+import { registerComponentDefaults as i } from "../../libs/registry.js";
+import { FALLBACK_FIELD_CONFIG as e, defaultFieldConfig as t } from "../field/field-config.js";
+const o = {
+  ...t,
   chip: {
     size: "sm"
-  },
-  portal: !0,
-  portalTarget: null
-}, a = {
+  }
+}, l = {
   ...e,
   chip: {
     size: "sm",
     color: "primary",
     radius: "sm",
     variant: "solid"
-  },
-  portal: !0,
-  portalTarget: null
+  }
 };
-t("multiSelect", l);
+i("multiSelect", o);
 export {
-  a as FALLBACK_MULTI_SELECT_CONFIG,
-  l as defaultMultiSelectConfig
+  l as FALLBACK_MULTI_SELECT_CONFIG,
+  o as defaultMultiSelectConfig
 };