@pibit.ai/cure-design-system 0.5.12 → 0.6.0

package/dist/primitives/select/select.js

@@ -1,112 +1,133 @@
-import { jsx as e, jsxs as b, Fragment as K } from "react/jsx-runtime";
-import { useRef as T, useCallback as j, isValidElement as V } from "react";
-import { ChevronDown as _, XClose as k } from "@untitledui/icons";
-import { Select as L, ListBox as O, Button as P, SelectValue as U } from "react-aria-components";
-import { Avatar as $ } from "../avatar/avatar.js";
-import { HintText as z } from "../input/hint-text.js";
-import { Label as A } from "../input/label.js";
-import { ComboBox as E } from "./combobox.js";
-import { Popover as F } from "./popover.js";
-import { SelectItem as H } from "./select-item.js";
-import { SearchableSelect as M } from "./searchable-select.js";
-import { SelectContext as X, fontSizes as w, sizes as G } from "./select-shared.js";
-import { cx as s } from "../../utils/cn.js";
-import { isReactComponent as J } from "../../utils/is-react-component.js";
-const Q = {
+import { jsx as e, jsxs as x, Fragment as z } from "react/jsx-runtime";
+import { useRef as $, useCallback as j, isValidElement as F } from "react";
+import { ChevronDown as H, XClose as M } from "@untitledui/icons";
+import { Select as O, ListBox as X, Button as G, SelectValue as J, ButtonContext as Q } from "react-aria-components";
+import { Avatar as W } from "../avatar/avatar.js";
+import { HintText as Y } from "../input/hint-text.js";
+import { Label as Z } from "../input/label.js";
+import { createEllipsisContent as A } from "../tooltip/ellipsis-content.js";
+import { ComboBox as D } from "./combobox.js";
+import { Popover as ee } from "./popover.js";
+import { SelectItem as te } from "./select-item.js";
+import { SearchableSelect as re } from "./searchable-select.js";
+import { SelectContext as le, fontSizes as T, sizes as ne } from "./select-shared.js";
+import { cx as n } from "../../utils/cn.js";
+import { isReactComponent as ie } from "../../utils/is-react-component.js";
+const oe = {
   sm: "rounded-md",
   md: "rounded-md",
   lg: "rounded-lg"
-}, R = {
+}, V = {
   sm: "size-4",
   md: "size-4",
   lg: "size-5"
-}, W = {
+}, ae = {
   sm: "text-xs",
   md: "text-xs",
   lg: "text-sm"
-}, Y = "relative flex w-full cursor-pointer items-center bg-primary ring-1 ring-secondary outline-hidden transition duration-100 ease-linear ring-inset", Z = ({
-  isOpen: I,
-  isFocused: B,
+}, ce = "relative flex w-full cursor-pointer items-center bg-primary ring-1 outline-hidden transition duration-100 ease-linear ring-inset", se = ({
+  isOpen: C,
+  isFocused: k,
   isDisabled: c,
-  size: n,
-  placeholder: m,
-  placeholderIcon: p,
-  ref: h,
-  textStyles: y,
-  showChevron: f = !0,
-  isClearable: N = !1,
-  onClear: a,
-  selectedItem: x
+  isInvalid: R,
+  size: r,
+  placeholder: v,
+  placeholderIcon: S,
+  ref: q,
+  textStyles: h,
+  showChevron: b = !0,
+  isClearable: y = !1,
+  onClear: s,
+  selectedItem: u,
+  endAdornment: a
 }) => {
-  const d = N && x && !c && a, g = /* @__PURE__ */ e(
-    P,
+  const m = y && u && !c && s, P = m && a ? "pr-12" : m ? "pr-6" : a ? "pr-8" : void 0, I = /* @__PURE__ */ e(
+    G,
     {
-      ref: h,
-      className: s(
-        Y,
-        Q[n],
-        (B || I) && "ring-1 ring-brand",
+      ref: q,
+      className: n(
+        ce,
+        oe[r],
+        R ? "ring-error" : k || C ? "ring-brand" : "ring-secondary",
         c && "cursor-not-allowed bg-disabled_subtle text-disabled"
       ),
       children: /* @__PURE__ */ e(
-        U,
+        J,
         {
-          className: s(
+          className: n(
             "flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle",
             // Icon styles
             "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary in-disabled:*:data-icon:text-fg-disabled",
-            G[n].root
+            ne[r].root
           ),
-          children: (r) => {
-            var o, u, i, v, S;
-            const t = ((o = r.selectedItem) == null ? void 0 : o.icon) || p;
-            return /* @__PURE__ */ b(K, { children: [
-              (u = r.selectedItem) != null && u.avatarUrl ? /* @__PURE__ */ e(
-                $,
+          children: (i) => {
+            var p, t, N, d, g;
+            const f = ((p = i.selectedItem) == null ? void 0 : p.icon) || S;
+            return /* @__PURE__ */ x(z, { children: [
+              (t = i.selectedItem) != null && t.avatarUrl ? /* @__PURE__ */ e(
+                W,
                 {
-                  size: "sm",
-                  src: r.selectedItem.avatarUrl,
-                  alt: r.selectedItem.label
+                  size: "xs",
+                  src: i.selectedItem.avatarUrl,
+                  alt: i.selectedItem.label
                 }
-              ) : J(t) ? /* @__PURE__ */ e(
-                t,
+              ) : ie(f) ? /* @__PURE__ */ e(
+                f,
                 {
                   "data-icon": !0,
                   "aria-hidden": "true",
-                  className: R[n]
+                  className: V[r]
                 }
-              ) : V(t) ? t : null,
-              r.selectedItem ? /* @__PURE__ */ b("section", { className: "flex w-full gap-2 truncate", children: [
-                /* @__PURE__ */ e(
-                  "p",
-                  {
-                    className: s(
-                      "truncate font-medium text-primary",
-                      w[n],
-                      y
-                    ),
-                    children: (i = r.selectedItem) == null ? void 0 : i.label
-                  }
-                ),
-                ((v = r.selectedItem) == null ? void 0 : v.supportingText) && /* @__PURE__ */ e("p", { className: s("text-tertiary", w[n]), children: (S = r.selectedItem) == null ? void 0 : S.supportingText })
-              ] }) : /* @__PURE__ */ e(
+              ) : F(f) ? f : null,
+              i.selectedItem ? /* @__PURE__ */ x(
+                "section",
+                {
+                  className: n("flex w-full min-w-0 gap-2", P),
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: A(
+                      ((N = i.selectedItem) == null ? void 0 : N.label) ?? "",
+                      "min-w-0 w-full",
+                      !1,
+                      "start",
+                      void 0,
+                      void 0,
+                      n(
+                        "font-medium text-primary",
+                        T[r],
+                        h
+                      ),
+                      "z-[100001]"
+                    ) }),
+                    ((d = i.selectedItem) == null ? void 0 : d.supportingText) && /* @__PURE__ */ e(
+                      "p",
+                      {
+                        className: n(
+                          "min-w-0 truncate text-tertiary",
+                          T[r]
+                        ),
+                        children: (g = i.selectedItem) == null ? void 0 : g.supportingText
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ e(
                 "p",
                 {
-                  className: s(
+                  className: n(
                     "text-placeholder_subtle",
-                    w[n],
+                    T[r],
                     c && "text-disabled"
                   ),
-                  children: m
+                  children: v
                 }
               ),
-              f && /* @__PURE__ */ e(
-                _,
+              b && /* @__PURE__ */ e(
+                H,
                 {
                   "aria-hidden": "true",
-                  className: s(
+                  className: n(
                     "ml-auto shrink-0 text-fg-quaternary",
-                    R[n]
+                    V[r]
                   )
                 }
               )
@@ -116,126 +137,160 @@ const Q = {
       )
     }
   );
-  return d ? /* @__PURE__ */ b("div", { className: "relative flex w-full items-stretch", children: [
-    g,
-    /* @__PURE__ */ e(
-      "button",
+  return y || a ? /* @__PURE__ */ x("div", { className: "relative flex w-full items-stretch", children: [
+    I,
+    (m || a) && /* @__PURE__ */ x(
+      "div",
       {
-        type: "button",
-        tabIndex: -1,
-        "aria-label": "Clear selection",
-        onClick: () => a == null ? void 0 : a(),
-        className: s(
-          "absolute right-8 top-1/2 cursor-pointer flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-fg-quaternary outline-hidden transition hover:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring"
+        className: n(
+          "absolute top-1/2 z-10 flex -translate-y-1/2 items-center gap-0.5",
+          b ? "right-8" : "right-1"
         ),
-        children: /* @__PURE__ */ e(k, { "aria-hidden": !0, className: R[n] })
+        children: [
+          a ? /* @__PURE__ */ e(Q.Provider, { value: null, children: a }) : null,
+          m ? /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": "Clear selection",
+              onClick: () => s == null ? void 0 : s(),
+              className: "flex cursor-pointer items-center justify-center rounded-md p-1 text-fg-quaternary outline-hidden transition hover:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+              children: /* @__PURE__ */ e(M, { "aria-hidden": !0, className: V[r] })
+            }
+          ) : null
+        ]
       }
     )
-  ] }) : g;
-}, D = ({
-  placeholder: I = "Select",
-  placeholderIcon: B,
+  ] }) : I;
+}, de = ({
+  placeholder: C = "Select",
+  placeholderIcon: k,
   size: c = "sm",
-  children: n,
-  items: m,
-  label: p,
-  hint: h,
-  tooltip: y,
-  className: f,
-  textStyles: N,
-  showChevron: a = !0,
-  isClearable: x = !1,
-  isDeselectable: d = !1,
-  ...g
+  children: R,
+  items: r,
+  label: v,
+  hint: S,
+  tooltip: q,
+  className: h,
+  textStyles: b,
+  showChevron: y = !0,
+  isClearable: s = !1,
+  isDeselectable: u = !1,
+  footer: a,
+  listBoxClassName: m,
+  popoverPlacement: P,
+  popoverContainerPadding: I,
+  endAdornment: i,
+  ...f
 }) => {
   const {
-    selectedKey: r,
+    selectedKey: p,
     onSelectionChange: t,
-    ...o
-  } = g, u = T(!1), i = r === void 0 ? void 0 : r == null || String(r) === "" ? null : r, v = j(() => {
-    var l;
-    !d || i == null || (u.current = !0, t == null || t(null), (l = o.onOpenChange) == null || l.call(o, !1), queueMicrotask(() => {
-      u.current = !1;
+    isRequired: N,
+    onOpenChange: d,
+    ...g
+  } = f, B = $(!1), o = p == null || String(p) === "" ? null : p, K = j(
+    (l) => {
+      d == null || d(l);
+    },
+    [d]
+  ), L = j(() => {
+    !u || o == null || (B.current = !0, t == null || t(null), K(!1), queueMicrotask(() => {
+      B.current = !1;
     }));
-  }, [
-    o.onOpenChange,
-    d,
-    t,
-    i
-  ]), S = j(
+  }, [K, u, t, o]), E = j(
     (l) => {
-      if (u.current) return;
-      const C = l == null || String(l) === "" ? null : l;
-      t == null || t(C);
+      if (B.current) return;
+      const w = l == null || String(l) === "" ? null : l, U = o == null || String(o) === "" ? null : o;
+      String(w ?? "") !== String(U ?? "") && (t == null || t(w));
     },
-    [t]
+    [t, o]
   );
   return /* @__PURE__ */ e(
-    X.Provider,
+    le.Provider,
     {
       value: {
         size: c,
-        isDeselectable: d,
-        selectedKey: i,
-        onReselectCurrent: d ? v : void 0
+        isDeselectable: u,
+        selectedKey: o,
+        onReselectCurrent: u ? L : void 0
       },
       children: /* @__PURE__ */ e(
-        L,
+        O,
         {
-          ...o,
-          selectedKey: i,
-          onSelectionChange: S,
-          className: (l) => s(
+          ...g,
+          isRequired: N,
+          selectedKey: o,
+          onOpenChange: K,
+          onSelectionChange: E,
+          className: (l) => n(
             "flex flex-col gap-1.5",
-            typeof f == "function" ? f(l) : f
+            typeof h == "function" ? h(l) : h
           ),
-          children: (l) => /* @__PURE__ */ b(K, { children: [
-            p && /* @__PURE__ */ e(
-              A,
+          children: (l) => /* @__PURE__ */ x(z, { children: [
+            v && /* @__PURE__ */ e(
+              Z,
               {
                 isRequired: l.isRequired,
-                tooltip: y,
-                className: W[c],
-                children: p
+                tooltip: q,
+                className: ae[c],
+                children: v
               }
             ),
             /* @__PURE__ */ e(
-              Z,
+              se,
               {
                 ...l,
                 size: c,
-                placeholder: I,
+                placeholder: C,
                 placeholderIcon: null,
-                textStyles: N,
-                showChevron: a,
-                isClearable: x,
-                onClear: x && t ? () => t(null) : void 0,
-                selectedItem: i != null && m ? m.find(
-                  (C) => String(C.id) === String(i)
+                textStyles: b,
+                showChevron: y,
+                isClearable: s,
+                onClear: s && t ? () => t(null) : void 0,
+                endAdornment: i,
+                selectedItem: o != null && r ? r.find(
+                  (w) => String(w.id) === String(o)
                 ) ?? null : null
               }
             ),
-            /* @__PURE__ */ e(
-              F,
+            /* @__PURE__ */ x(
+              ee,
               {
                 size: c,
-                className: s(o.popoverClassName),
-                children: /* @__PURE__ */ e(O, { items: m, className: "size-full outline-hidden ", children: n })
+                placement: P,
+                containerPadding: I,
+                className: n("flex flex-col", g.popoverClassName),
+                children: [
+                  /* @__PURE__ */ e(
+                    X,
+                    {
+                      items: r,
+                      className: n(
+                        "size-full min-h-0 outline-hidden",
+                        m
+                      ),
+                      children: R
+                    }
+                  ),
+                  a && /* @__PURE__ */ e("div", { className: "relative border-t border-tertiary bg-primary p-1.5", children: a })
+                ]
               }
             ),
-            h && /* @__PURE__ */ e(z, { isInvalid: l.isInvalid, children: h })
+            S && /* @__PURE__ */ e(Y, { isInvalid: l.isInvalid, children: S })
           ] })
         }
       )
     }
   );
-}, q = D;
-q.ComboBox = E;
-q.Item = H;
-q.Searchable = M;
+}, _ = de;
+_.ComboBox = D;
+_.Item = te;
+_.Searchable = re;
 export {
-  q as Select,
-  X as SelectContext,
-  w as fontSizes,
-  G as sizes
+  _ as Select,
+  le as SelectContext,
+  T as fontSizes,
+  ne as sizes
 };