@box/combobox-with-api 0.32.1 → 0.34.0

package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js

@@ -1,64 +1,74 @@
-import { useComboboxStore as G, ComboboxProvider as z, PopoverAnchor as X, Combobox as q, ComboboxCancel as H, ComboboxPopover as J } from "@ariakit/react";
-import { useLabelable as K, ChipsGroup as Q, InputChip as U, IconButton as Y } from "@box/blueprint-web";
-import { XMark as Z } from "@box/blueprint-web-assets/icons/Fill";
+import { useComboboxStore as G, ComboboxProvider as X, PopoverAnchor as q, Combobox as H, ComboboxCancel as J, ComboboxPopover as K } from "@ariakit/react";
+import { useLabelable as Q, ChipsGroup as U, InputChip as Y, IconButton as Z } from "@box/blueprint-web";
+import { XMark as _, Search as $ } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as ee, Size6 as g, Size1 as oe } from "@box/blueprint-web-assets/tokens/tokens";
 import m from "clsx";
-import { forwardRef as _, useId as $, useState as V, useRef as ee, useCallback as oe } from "react";
-import { useIntl as le } from "react-intl";
-import g from "../combobox-with-api-pagination/messages.js";
-import { useControllableState as te } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
-import { s as o, D as ae } from "../../../../chunks/dynamic-loading-tree.js";
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-const Ce = /* @__PURE__ */ _(function(w, re) {
+import { forwardRef as le, useId as te, useState as V, useRef as ae, useCallback as se } from "react";
+import { useIntl as re } from "react-intl";
+import I from "../combobox-with-api-pagination/messages.js";
+import { useControllableState as ne } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
+import { s as l, D as ie } from "../../../../chunks/dynamic-loading-tree.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+const ce = () => /* @__PURE__ */ o($, {
+  color: ee,
+  height: g,
+  role: "presentation",
+  style: {
+    padding: oe,
+    boxSizing: "border-box"
+  },
+  width: g
+}), Se = /* @__PURE__ */ le(function(S, me) {
   const {
-    defaultFetcher: I,
+    defaultFetcher: w,
     value: L,
     onValueChange: N,
-    noResultMessage: S,
-    defaultValue: y = [],
-    loadingAriaLabel: A,
+    noResultMessage: y,
+    defaultValue: A = [],
+    loadingAriaLabel: R,
     multiselect: p = !1,
-    className: R,
-    levels: B,
+    className: B,
+    levels: z,
     selectableLevels: M,
-    label: P,
+    label: O,
     hideLabel: b,
-    treeAriaLabel: W,
-    portalElement: k,
-    placeholder: D,
-    disabled: O
-  } = w, {
+    treeAriaLabel: P,
+    portalElement: W,
+    placeholder: k,
+    disabled: D
+  } = S, {
     formatMessage: d
-  } = le(), i = $(), [h, T] = V(!1), [t, c] = te({
+  } = re(), i = te(), [h, T] = V(!1), [t, c] = ne({
     prop: L,
-    defaultProp: y,
+    defaultProp: A,
     onChange: N
-  }), [f, C] = V(""), j = ee(null), E = oe((e) => {
-    C(e);
-  }, [C]), u = G({
+  }), [f, x] = V(""), j = ae(null), E = se((e) => {
+    x(e);
+  }, [x]), u = G({
     includesBaseElement: !0,
     virtualFocus: !1,
     value: f,
     setValue: E,
     open: h,
     setOpen: T
-  }), v = t.length > 0, x = t.length > 0, F = K(P, i);
-  return /* @__PURE__ */ n(z, {
+  }), C = t.length > 0, v = t.length > 0, F = Q(O, i);
+  return /* @__PURE__ */ n(X, {
     store: u,
-    children: [/* @__PURE__ */ l(X, {
+    children: [/* @__PURE__ */ o(q, {
       children: /* @__PURE__ */ n("div", {
-        className: m(o.container, R),
-        children: [/* @__PURE__ */ l(F, {
-          className: m(o.label, {
-            [o.hiddenLabel]: b
+        className: m(l.container, B),
+        children: [/* @__PURE__ */ o(F, {
+          className: m(l.label, {
+            [l.hiddenLabel]: b
           }),
           hideLabel: b
         }), /* @__PURE__ */ n("div", {
-          className: m(o.comboboxContainer, {
-            [o.withChips]: x,
-            [o.withComboboxButtons]: v
+          className: m(l.comboboxContainer, {
+            [l.withChips]: v,
+            [l.withComboboxButtons]: C
           }),
-          children: [x && /* @__PURE__ */ l(Q, {
-            children: t.map((e) => /* @__PURE__ */ l(U, {
+          children: [v && /* @__PURE__ */ o(U, {
+            children: t.map((e) => /* @__PURE__ */ o(Y, {
               label: e.displayValue,
               onDelete: () => {
                 const a = t.filter((r) => r.value !== e.value);
@@ -67,48 +77,48 @@ const Ce = /* @__PURE__ */ _(function(w, re) {
               tooltip: e.displayValue
             }, e.value))
           }), /* @__PURE__ */ n("div", {
-            className: o.textInputWrapper,
-            children: [/* @__PURE__ */ l(q, {
+            className: l.textInputWrapper,
+            children: [/* @__PURE__ */ o(H, {
               ref: j,
-              className: o.textInput,
-              disabled: O,
+              className: l.textInput,
+              disabled: D,
               id: i,
-              placeholder: D,
+              placeholder: k,
               store: u
-            }), /* @__PURE__ */ l("div", {
-              className: o.comboboxButtons,
-              children: v ? /* @__PURE__ */ l(H, {
+            }), /* @__PURE__ */ o("div", {
+              className: l.comboboxButtons,
+              children: C ? /* @__PURE__ */ o(J, {
                 onClick: () => {
                   c([]);
                 },
-                render: (e) => /* @__PURE__ */ l(Y, {
+                render: (e) => /* @__PURE__ */ o(Z, {
                   ...e,
                   "aria-label": "Clear selection",
-                  icon: Z,
+                  icon: _,
                   size: "x-small"
                 }),
                 store: u
-              }) : null
+              }) : /* @__PURE__ */ o(ce, {})
             })]
           })]
         })]
       })
-    }), /* @__PURE__ */ l(J, {
+    }), /* @__PURE__ */ o(K, {
       "aria-labelledby": i,
-      className: o.popover,
+      className: l.popover,
       fitViewport: !0,
       gutter: 8,
       modal: !0,
       portal: !0,
-      portalElement: k,
+      portalElement: W,
       sameWidth: !0,
-      children: /* @__PURE__ */ l(ae, {
-        ariaLabel: W,
-        defaultFetcher: I,
-        levels: B,
-        loadingAriaLabel: A || d(g.loadingAriaLabel),
+      children: /* @__PURE__ */ o(ie, {
+        ariaLabel: P,
+        defaultFetcher: w,
+        levels: z,
+        loadingAriaLabel: R || d(I.loadingAriaLabel),
         multiselect: p,
-        noResultMessage: S || d(g.noResults),
+        noResultMessage: y || d(I.noResults),
         onSelect: (e) => {
           const {
             metadata: s
@@ -131,5 +141,5 @@ const Ce = /* @__PURE__ */ _(function(w, re) {
   });
 });
 export {
-  Ce as ComboboxWithApiTreeView
+  Se as ComboboxWithApiTreeView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.32.1",
+    "version": "0.34.0",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^10.3.1",