@box/combobox-with-api 0.33.0 → 0.34.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js +70 -60
  2. package/package.json +3 -3
package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js CHANGED
@@ -1,64 +1,74 @@
1
- import { useComboboxStore as G, ComboboxProvider as z, PopoverAnchor as X, Combobox as q, ComboboxCancel as H, ComboboxPopover as J } from "@ariakit/react";
2
- import { useLabelable as K, ChipsGroup as Q, InputChip as U, IconButton as Y } from "@box/blueprint-web";
3
- import { XMark as Z } from "@box/blueprint-web-assets/icons/Fill";
1
+ import { useComboboxStore as G, ComboboxProvider as X, PopoverAnchor as q, Combobox as H, ComboboxCancel as J, ComboboxPopover as K } from "@ariakit/react";
2
+ import { useLabelable as Q, ChipsGroup as U, InputChip as Y, IconButton as Z } from "@box/blueprint-web";
3
+ import { XMark as _, Search as $ } from "@box/blueprint-web-assets/icons/Fill";
4
+ import { IconIconOnLightSecondary as ee, Size6 as g, Size1 as oe } from "@box/blueprint-web-assets/tokens/tokens";
4
5
  import m from "clsx";
5
- import { forwardRef as _, useId as $, useState as V, useRef as ee, useCallback as oe } from "react";
6
- import { useIntl as le } from "react-intl";
7
- import g from "../combobox-with-api-pagination/messages.js";
8
- import { useControllableState as te } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
9
- import { s as o, D as ae } from "../../../../chunks/dynamic-loading-tree.js";
10
- import { jsxs as n, jsx as l } from "react/jsx-runtime";
11
- const Ce = /* @__PURE__ */ _(function(w, re) {
6
+ import { forwardRef as le, useId as te, useState as V, useRef as ae, useCallback as se } from "react";
7
+ import { useIntl as re } from "react-intl";
8
+ import I from "../combobox-with-api-pagination/messages.js";
9
+ import { useControllableState as ne } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
10
+ import { s as l, D as ie } from "../../../../chunks/dynamic-loading-tree.js";
11
+ import { jsxs as n, jsx as o } from "react/jsx-runtime";
12
+ const ce = () => /* @__PURE__ */ o($, {
13
+ color: ee,
14
+ height: g,
15
+ role: "presentation",
16
+ style: {
17
+ padding: oe,
18
+ boxSizing: "border-box"
19
+ },
20
+ width: g
21
+ }), Se = /* @__PURE__ */ le(function(S, me) {
12
22
  const {
13
- defaultFetcher: I,
23
+ defaultFetcher: w,
14
24
  value: L,
15
25
  onValueChange: N,
16
- noResultMessage: S,
17
- defaultValue: y = [],
18
- loadingAriaLabel: A,
26
+ noResultMessage: y,
27
+ defaultValue: A = [],
28
+ loadingAriaLabel: R,
19
29
  multiselect: p = !1,
20
- className: R,
21
- levels: B,
30
+ className: B,
31
+ levels: z,
22
32
  selectableLevels: M,
23
- label: P,
33
+ label: O,
24
34
  hideLabel: b,
25
- treeAriaLabel: W,
26
- portalElement: k,
27
- placeholder: D,
28
- disabled: O
29
- } = w, {
35
+ treeAriaLabel: P,
36
+ portalElement: W,
37
+ placeholder: k,
38
+ disabled: D
39
+ } = S, {
30
40
  formatMessage: d
31
- } = le(), i = $(), [h, T] = V(!1), [t, c] = te({
41
+ } = re(), i = te(), [h, T] = V(!1), [t, c] = ne({
32
42
  prop: L,
33
- defaultProp: y,
43
+ defaultProp: A,
34
44
  onChange: N
35
- }), [f, C] = V(""), j = ee(null), E = oe((e) => {
36
- C(e);
37
- }, [C]), u = G({
45
+ }), [f, x] = V(""), j = ae(null), E = se((e) => {
46
+ x(e);
47
+ }, [x]), u = G({
38
48
  includesBaseElement: !0,
39
49
  virtualFocus: !1,
40
50
  value: f,
41
51
  setValue: E,
42
52
  open: h,
43
53
  setOpen: T
44
- }), v = t.length > 0, x = t.length > 0, F = K(P, i);
45
- return /* @__PURE__ */ n(z, {
54
+ }), C = t.length > 0, v = t.length > 0, F = Q(O, i);
55
+ return /* @__PURE__ */ n(X, {
46
56
  store: u,
47
- children: [/* @__PURE__ */ l(X, {
57
+ children: [/* @__PURE__ */ o(q, {
48
58
  children: /* @__PURE__ */ n("div", {
49
- className: m(o.container, R),
50
- children: [/* @__PURE__ */ l(F, {
51
- className: m(o.label, {
52
- [o.hiddenLabel]: b
59
+ className: m(l.container, B),
60
+ children: [/* @__PURE__ */ o(F, {
61
+ className: m(l.label, {
62
+ [l.hiddenLabel]: b
53
63
  }),
54
64
  hideLabel: b
55
65
  }), /* @__PURE__ */ n("div", {
56
- className: m(o.comboboxContainer, {
57
- [o.withChips]: x,
58
- [o.withComboboxButtons]: v
66
+ className: m(l.comboboxContainer, {
67
+ [l.withChips]: v,
68
+ [l.withComboboxButtons]: C
59
69
  }),
60
- children: [x && /* @__PURE__ */ l(Q, {
61
- children: t.map((e) => /* @__PURE__ */ l(U, {
70
+ children: [v && /* @__PURE__ */ o(U, {
71
+ children: t.map((e) => /* @__PURE__ */ o(Y, {
62
72
  label: e.displayValue,
63
73
  onDelete: () => {
64
74
  const a = t.filter((r) => r.value !== e.value);
@@ -67,48 +77,48 @@ const Ce = /* @__PURE__ */ _(function(w, re) {
67
77
  tooltip: e.displayValue
68
78
  }, e.value))
69
79
  }), /* @__PURE__ */ n("div", {
70
- className: o.textInputWrapper,
71
- children: [/* @__PURE__ */ l(q, {
80
+ className: l.textInputWrapper,
81
+ children: [/* @__PURE__ */ o(H, {
72
82
  ref: j,
73
- className: o.textInput,
74
- disabled: O,
83
+ className: l.textInput,
84
+ disabled: D,
75
85
  id: i,
76
- placeholder: D,
86
+ placeholder: k,
77
87
  store: u
78
- }), /* @__PURE__ */ l("div", {
79
- className: o.comboboxButtons,
80
- children: v ? /* @__PURE__ */ l(H, {
88
+ }), /* @__PURE__ */ o("div", {
89
+ className: l.comboboxButtons,
90
+ children: C ? /* @__PURE__ */ o(J, {
81
91
  onClick: () => {
82
92
  c([]);
83
93
  },
84
- render: (e) => /* @__PURE__ */ l(Y, {
94
+ render: (e) => /* @__PURE__ */ o(Z, {
85
95
  ...e,
86
96
  "aria-label": "Clear selection",
87
- icon: Z,
97
+ icon: _,
88
98
  size: "x-small"
89
99
  }),
90
100
  store: u
91
- }) : null
101
+ }) : /* @__PURE__ */ o(ce, {})
92
102
  })]
93
103
  })]
94
104
  })]
95
105
  })
96
- }), /* @__PURE__ */ l(J, {
106
+ }), /* @__PURE__ */ o(K, {
97
107
  "aria-labelledby": i,
98
- className: o.popover,
108
+ className: l.popover,
99
109
  fitViewport: !0,
100
110
  gutter: 8,
101
111
  modal: !0,
102
112
  portal: !0,
103
- portalElement: k,
113
+ portalElement: W,
104
114
  sameWidth: !0,
105
- children: /* @__PURE__ */ l(ae, {
106
- ariaLabel: W,
107
- defaultFetcher: I,
108
- levels: B,
109
- loadingAriaLabel: A || d(g.loadingAriaLabel),
115
+ children: /* @__PURE__ */ o(ie, {
116
+ ariaLabel: P,
117
+ defaultFetcher: w,
118
+ levels: z,
119
+ loadingAriaLabel: R || d(I.loadingAriaLabel),
110
120
  multiselect: p,
111
- noResultMessage: S || d(g.noResults),
121
+ noResultMessage: y || d(I.noResults),
112
122
  onSelect: (e) => {
113
123
  const {
114
124
  metadata: s
@@ -131,5 +141,5 @@ const Ce = /* @__PURE__ */ _(function(w, re) {
131
141
  });
132
142
  });
133
143
  export {
134
- Ce as ComboboxWithApiTreeView
144
+ Se as ComboboxWithApiTreeView
135
145
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/combobox-with-api",
3
- "version": "0.33.0",
3
+ "version": "0.34.2",
4
4
  "peerDependencies": {
5
5
  "@ariakit/react": "0.4.15",
6
6
  "@box/blueprint-web": "^10.3.1",
@@ -11,11 +11,11 @@
11
11
  "react-intl": "^6.4.2"
12
12
  },
13
13
  "dependencies": {
14
- "@box/tree": "^0.45.0",
14
+ "@box/tree": "^0.45.1",
15
15
  "react-accessible-treeview": "2.9.0"
16
16
  },
17
17
  "devDependencies": {
18
- "@box/blueprint-web": "^11.8.3",
18
+ "@box/blueprint-web": "^11.8.4",
19
19
  "@box/blueprint-web-assets": "^4.41.1",
20
20
  "@box/storybook-utils": "^0.12.0",
21
21
  "react": "^18.3.0",