@box/combobox-with-api 0.37.0 → 0.38.1

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

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

package/dist/types/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.d.ts

@@ -14,4 +14,5 @@ export declare const ComboboxWithApiPagination: import('react').ForwardRefExotic
     portalElement?: HTMLElement | (() => HTMLElement);
     experimentalVirtualization?: boolean;
     className?: string;
+    dataTargetId?: string;
 } & import('@box/blueprint-web').Labelable & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/lib/components/combobox-with-api-pagination/types.d.ts

@@ -46,4 +46,5 @@ export type ComboboxWithApiPaginationProps<T extends BaseOptionType> = {
     portalElement?: HTMLElement | (() => HTMLElement);
     experimentalVirtualization?: boolean;
     className?: string;
+    dataTargetId?: string;
 } & Labelable;

package/dist/types/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.d.ts

@@ -18,4 +18,5 @@ export declare const ComboboxWithApiTreeView: import('react').ForwardRefExoticCo
     className?: string;
     hideLabel?: boolean;
     treeAriaLabel?: string;
+    dataTargetId?: string;
 } & import('@box/blueprint-web').Labelable & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/lib/components/combobox-with-api-tree-view/types.d.ts

@@ -57,4 +57,5 @@ export type ComboboxWithApiTreeViewProps<T extends TreeOptionType> = {
     className?: string;
     hideLabel?: boolean;
     treeAriaLabel?: string;
+    dataTargetId?: string;
 } & Labelable;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.37.0",
+    "version": "0.38.1",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^10.3.1",
@@ -11,11 +11,11 @@
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^0.48.0",
+        "@box/tree": "^0.48.2",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^11.12.0",
+        "@box/blueprint-web": "^12.1.0",
         "@box/blueprint-web-assets": "^4.44.0",
         "@box/storybook-utils": "^0.12.3",
         "react": "^18.3.0",