@box/combobox-with-api 1.15.9 → 1.17.0

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

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

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

@@ -1,5 +1,5 @@
 import { ComboboxWithApiTreeView as I } from "./combobox-with-api-tree-view.js";
-const m = [
+const p = [
   // Level 1
   {
     id: "japan-l1-id",
@@ -370,8 +370,8 @@ const m = [
     level: 2,
     selectable: !0
   }
-], y = 5, j = (l, e) => {
-  const a = parseInt(l, 10) || 0, i = a + y;
+], u = 5, j = (l, e) => {
+  const a = parseInt(l, 10) || 0, i = a + u;
   return e.slice(a, i).map(({
     displayName: s,
     id: t,
@@ -382,7 +382,7 @@ const m = [
     ...n
   }));
 }, U = (l, e) => {
-  const i = (parseInt(l, 10) || 0) + y;
+  const i = (parseInt(l, 10) || 0) + u;
   return i < e.length ? i.toString() : void 0;
 }, x = /* @__PURE__ */ (() => {
   let l = 0, e = 0;
@@ -393,36 +393,36 @@ const m = [
     searchInput: t,
     ancestorId: n,
     marker: o,
-    failOnLoadMore: N,
-    options: v = m,
-    failOnLoadMoreTimes: b = Number.MAX_SAFE_INTEGER,
-    failOnLoadLevel: g,
-    failOnLoadLevelTimes: k = Number.MAX_SAFE_INTEGER
+    failOnLoadMore: y,
+    options: N = p,
+    failOnLoadMoreTimes: v = Number.MAX_SAFE_INTEGER,
+    failOnLoadLevel: b,
+    failOnLoadLevelTimes: g = Number.MAX_SAFE_INTEGER
   }) => {
     if (i.aborted)
       return Promise.reject(new DOMException("Aborted", "AbortError"));
-    if (N && o != null && l < b)
+    if (y && o != null && l < v)
       return l += 1, Promise.reject();
-    if (s === g && e < k)
+    if (s === b && e < g)
       return e += 1, Promise.reject();
     a && await new Promise((r) => setTimeout(r, a));
-    const c = v.filter((r) => {
+    const c = N.filter((r) => {
       const {
-        displayName: h,
-        level: u,
-        ancestors: p
+        displayName: f,
+        level: m,
+        ancestors: h
       } = {
         ...r
       };
       let d = !0;
-      return s && u && u !== s && (d = !1), t && (d = d && h.toLowerCase().includes(t.toLowerCase())), n && (d = d && (p == null ? void 0 : p.some(({
+      return s && m && m !== s && (d = !1), t && (d = d && f.toLowerCase().includes(t.toLowerCase())), n && (d = d && h?.some(({
         id: S
-      }) => S === n))), d;
-    }), f = Promise.resolve({
+      }) => S === n)), d;
+    }), k = Promise.resolve({
       marker: U(o, c),
       options: j(o, c)
     });
-    return w(await f);
+    return w(await k);
   };
 })();
 function w(l) {
@@ -443,7 +443,7 @@ function w(l) {
   };
 }
 const J = (l) => {
-  const e = m.find((a) => a.displayName === l);
+  const e = p.find((a) => a.displayName === l);
   return e ? {
     value: e.id,
     displayValue: e.displayName,
@@ -452,13 +452,13 @@ const J = (l) => {
     ancestors: e.ancestors
   } : null;
 };
-m.map((l) => ({
+p.map((l) => ({
   ...l,
   selectable: l.level === 2
 }));
 export {
   I as ComboboxWithApiTreeView,
-  m as apiResponse,
+  p as apiResponse,
   J as findNode,
   x as mockTreeFetcher
 };

package/dist/i18n/en-x-pseudo.js

@@ -1,10 +1,10 @@
 export default {
-  "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Čоùĺďп'ţ ĺøáď ŕēŝůļτş. Čľιćκ ţó ŧяÿ αğāίʼn. 國國國國國國國國國國國國⟧",
-  "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Ćļēάř ïńΡųτ äйď śêĺēċťíôи 國國國國國國國⟧",
-  "comboboxWithApiPagination.errorAction": "⟦萬 Ŗěĺőåď 國⟧",
-  "comboboxWithApiPagination.errorIconLabel": "⟦萬 Èŕřőг 國⟧",
-  "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣ąîļëď τо ľøǻď óΡţϊóиş 國國國國國國⟧",
-  "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ľòāďίηĝ... 國國⟧",
-  "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ļσàďϊиĝ möѓė... 國國國國⟧",
-  "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Ñο ŗéѕµļτş ƒóűйď 國國國國⟧"
+  "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Čŏũĺďʼn'ţ ĺοãď řέśùļτś. Çļĩćк ťő ŧѓУ āĝǻíŋ. 國國國國國國國國國國國國⟧",
+  "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Ĉĺєáѓ ίʼnΡũť άπď ѕêĺєçŧїōņ 國國國國國國國⟧",
+  "comboboxWithApiPagination.errorAction": "⟦萬 Ґèļóāď 國⟧",
+  "comboboxWithApiPagination.errorIconLabel": "⟦萬 Èŗґőѓ 國⟧",
+  "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣άĭĺеď ŧò ļóăď óΡţĩοлş 國國國國國國⟧",
+  "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ĺόαďíʼnĝ... 國國⟧",
+  "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ļøáďìŋğ móřέ... 國國國國⟧",
+  "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Ñõ ŗёŝŭľŧѕ ƒσũиď 國國國國⟧"
 }

package/dist/i18n/en-x-pseudo.properties

@@ -1,16 +1,16 @@
 # Error message displayed as combobox item when an API failed and the suggestions could not load
-comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Čоùĺďп'ţ ĺøáď ŕēŝůļτş. Čľιćκ ţó ŧяÿ αğāίʼn. 國國國國國國國國國國國國⟧
+comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Čŏũĺďʼn'ţ ĺοãď řέśùļτś. Çļĩćк ťő ŧѓУ āĝǻíŋ. 國國國國國國國國國國國國⟧
 # Aria label for the clear button visible at the end of the combobox. When clicked, it will clear all text in the input, as well as the current selection.
-comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Ćļēάř ïńΡųτ äйď śêĺēċťíôи 國國國國國國國⟧
+comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Ĉĺєáѓ ίʼnΡũť άπď ѕêĺєçŧїōņ 國國國國國國國⟧
 # Error message displayed resembling button that calls to action to reload the results
-comboboxWithApiPagination.errorAction = ⟦萬 Ŗěĺőåď 國⟧
+comboboxWithApiPagination.errorAction = ⟦萬 Ґèļóāď 國⟧
 # Aria-label text for the error icon in the loading results error message
-comboboxWithApiPagination.errorIconLabel = ⟦萬 Èŕřőг 國⟧
+comboboxWithApiPagination.errorIconLabel = ⟦萬 Èŗґőѓ 國⟧
 # Error message displayed as inline notice that informs the user that the options failed to load
-comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣ąîļëď τо ľøǻď óΡţϊóиş 國國國國國國⟧
+comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣άĭĺеď ŧò ļóăď óΡţĩοлş 國國國國國國⟧
 # Visually hidden aria-label text for the loading spinner
-comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ľòāďίηĝ... 國國⟧
+comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ĺόαďíʼnĝ... 國國⟧
 # Visually hidden aria-label text for the loading spinner show when loading more results from infinite scrolling list
-comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ļσàďϊиĝ möѓė... 國國國國⟧
+comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ļøáďìŋğ móřέ... 國國國國⟧
 # Message displayed when no results are found in the combobox
-comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Ñο ŗéѕµļτş ƒóűйď 國國國國⟧
+comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Ñõ ŗёŝŭľŧѕ ƒσũиď 國國國國⟧

package/package.json

@@ -1,23 +1,23 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "1.15.9",
+    "version": "1.17.0",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
-        "@box/blueprint-web": "^10.3.1",
-        "@box/blueprint-web-assets": "^4.16.0",
+        "@box/blueprint-web": "^12.104.1",
+        "@box/blueprint-web-assets": "^4.87.0",
         "lodash": "^4.17.15",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^1.14.4",
+        "@box/tree": "^1.16.0",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.103.2",
-        "@box/blueprint-web-assets": "^4.86.0",
-        "@box/storybook-utils": "^0.14.23",
+        "@box/blueprint-web": "^12.104.1",
+        "@box/blueprint-web-assets": "^4.87.0",
+        "@box/storybook-utils": "^0.14.27",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },