@box/combobox-with-api 1.36.0 → 1.37.1

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 (3) hide show
  1. package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js +99 -95
  2. package/dist/types/lib/components/combobox-with-api-pagination/stories/shared.d.ts +1 -1
  3. package/package.json +7 -7
package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js CHANGED
@@ -1,165 +1,169 @@
1
- import { useComboboxStore as H, ComboboxProvider as J, PopoverAnchor as Q, Combobox as Y, ComboboxCancel as Z, ComboboxPopover as _, ComboboxItem as $ } from "@ariakit/react";
2
- import { useLabelable as ee, ChipsGroup as oe, InputChip as te, IconButton as le } from "@box/blueprint-web";
3
- import { XMark as ae, Search as re } from "@box/blueprint-web-assets/icons/Fill";
4
- import { Size6 as w, Size1 as se, IconIconOnLightSecondary as ne } from "@box/blueprint-web-assets/tokens/tokens";
5
- import p from "clsx";
6
- import { forwardRef as ie, useId as ce, useState as L, useRef as y } from "react";
7
- import { useIntl as ue } from "react-intl";
8
- import N from "../combobox-with-api-pagination/messages.js";
9
- import { useControllableState as me } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
10
- import { s as t, D as de } from "../../../../chunks/dynamic-loading-tree.js";
11
- import { jsxs as n, jsx as o } from "react/jsx-runtime";
12
- const pe = () => /* @__PURE__ */ o(re, {
13
- color: ne,
14
- height: w,
1
+ import { useComboboxStore as $, ComboboxProvider as ee, PopoverAnchor as oe, Combobox as te, ComboboxCancel as le, ComboboxPopover as ae, ComboboxItem as se } from "@ariakit/react";
2
+ import { useLabelable as ne, ChipsGroup as re, InputChip as ie, IconButton as ce } from "@box/blueprint-web";
3
+ import { XMark as ue, Search as me } from "@box/blueprint-web-assets/icons/Fill";
4
+ import { Size6 as R, Size1 as pe, IconIconOnLightSecondary as de } from "@box/blueprint-web-assets/tokens/tokens";
5
+ import d from "clsx";
6
+ import { forwardRef as be, useId as he, useState as b, useRef as h, useCallback as A } from "react";
7
+ import { useIntl as fe } from "react-intl";
8
+ import O from "../combobox-with-api-pagination/messages.js";
9
+ import { useControllableState as Ce } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
10
+ import { s as t, D as ge } from "../../../../chunks/dynamic-loading-tree.js";
11
+ import { jsxs as r, jsx as o } from "react/jsx-runtime";
12
+ const ve = () => /* @__PURE__ */ o(me, {
13
+ color: de,
14
+ height: R,
15
15
  role: "presentation",
16
16
  style: {
17
- padding: se,
17
+ padding: pe,
18
18
  boxSizing: "border-box"
19
19
  },
20
- width: w
21
- }), Oe = /* @__PURE__ */ ie(function(A, he) {
20
+ width: R
21
+ }), ze = /* @__PURE__ */ be(function(T, Ie) {
22
22
  const {
23
- className: O,
24
- closeOnSelection: R = !1,
25
- dataTargetId: T,
26
- defaultFetcher: B,
27
- defaultValue: z = [],
28
- disabled: s,
29
- hideLabel: b,
30
- initialOpen: D = !1,
31
- label: M,
32
- levels: P,
33
- loadingAriaLabel: W,
34
- multiselect: h = !1,
35
- noResultMessage: k,
36
- onValueChange: E,
37
- onOpenChange: F,
38
- placeholder: j,
39
- portalElement: G,
40
- selectableLevels: K,
41
- treeAriaLabel: U,
42
- value: X
43
- } = A, {
44
- formatMessage: f
45
- } = ue(), i = ce(), [C, g] = L(D), [a, c] = me({
46
- prop: X,
47
- defaultProp: z,
48
- onChange: E
49
- }), [v, x] = L(""), I = y(null), u = H({
23
+ className: B,
24
+ closeOnSelection: E = !1,
25
+ dataTargetId: k,
26
+ defaultFetcher: z,
27
+ defaultValue: D = [],
28
+ disabled: n,
29
+ hideLabel: f,
30
+ initialOpen: M = !1,
31
+ label: P,
32
+ levels: W,
33
+ loadingAriaLabel: F,
34
+ multiselect: C = !1,
35
+ noResultMessage: j,
36
+ onValueChange: G,
37
+ onOpenChange: K,
38
+ placeholder: U,
39
+ portalElement: X,
40
+ selectableLevels: q,
41
+ treeAriaLabel: H,
42
+ value: J
43
+ } = T, {
44
+ formatMessage: g
45
+ } = fe(), i = he(), [v, x] = b(M), [a, c] = Ce({
46
+ prop: J,
47
+ defaultProp: D,
48
+ onChange: G
49
+ }), [I, S] = b(""), V = h(null), [Q, w] = b(!1), Y = A(() => w(!0), []), Z = A(() => w(!1), []), L = h("");
50
+ Q || (L.current = I.trimStart());
51
+ const u = $({
50
52
  includesBaseElement: !0,
51
53
  virtualFocus: !1,
52
- value: v,
54
+ value: I,
53
55
  setValue: (e) => {
54
- x(e);
56
+ S(e);
55
57
  },
56
- open: C,
58
+ open: v,
57
59
  setOpen: (e) => {
58
- g(e), F?.(e);
60
+ x(e), K?.(e);
59
61
  }
60
- }), V = a.length > 0, S = a.length > 0, q = ee(M, i), m = y(null);
61
- return /* @__PURE__ */ n(J, {
62
+ }), y = a.length > 0, N = a.length > 0, _ = ne(P, i), m = h(null);
63
+ return /* @__PURE__ */ r(ee, {
62
64
  store: u,
63
- children: [/* @__PURE__ */ o(Q, {
64
- children: /* @__PURE__ */ n("div", {
65
- className: p(t.container, O, {
66
- [t.disabled]: s
65
+ children: [/* @__PURE__ */ o(oe, {
66
+ children: /* @__PURE__ */ r("div", {
67
+ className: d(t.container, B, {
68
+ [t.disabled]: n
67
69
  }),
68
- children: [/* @__PURE__ */ o(q, {
69
- className: p(t.label, {
70
- [t.hiddenLabel]: b
70
+ children: [/* @__PURE__ */ o(_, {
71
+ className: d(t.label, {
72
+ [t.hiddenLabel]: f
71
73
  }),
72
- hideLabel: b
74
+ hideLabel: f
73
75
  }), /* @__PURE__ */ o("div", {
74
- children: /* @__PURE__ */ n("div", {
75
- className: p(t.comboboxContainer, {
76
- [t.withChips]: S,
77
- [t.withComboboxButtons]: V
76
+ children: /* @__PURE__ */ r("div", {
77
+ className: d(t.comboboxContainer, {
78
+ [t.withChips]: N,
79
+ [t.withComboboxButtons]: y
78
80
  }),
79
- children: [S && /* @__PURE__ */ o(oe, {
80
- children: a.map((e) => /* @__PURE__ */ o(te, {
81
+ children: [N && /* @__PURE__ */ o(re, {
82
+ children: a.map((e) => /* @__PURE__ */ o(ie, {
81
83
  label: e.displayValue,
82
84
  onDelete: () => {
83
- if (s)
85
+ if (n)
84
86
  return;
85
- const l = a.filter((r) => r.value !== e.value);
87
+ const l = a.filter((s) => s.value !== e.value);
86
88
  c(l);
87
89
  },
88
90
  tooltip: e.displayValue
89
91
  }, e.value))
90
- }), /* @__PURE__ */ n("div", {
92
+ }), /* @__PURE__ */ r("div", {
91
93
  className: t.textInputWrapper,
92
- children: [/* @__PURE__ */ o(Y, {
93
- ref: I,
94
+ children: [/* @__PURE__ */ o(te, {
95
+ ref: V,
94
96
  "aria-haspopup": "tree",
95
97
  className: t.textInput,
96
- "data-target-id": T,
97
- disabled: s,
98
+ "data-target-id": k,
99
+ disabled: n,
98
100
  id: i,
99
- placeholder: j,
101
+ onCompositionEnd: Z,
102
+ onCompositionStart: Y,
103
+ placeholder: U,
100
104
  store: u
101
105
  }), /* @__PURE__ */ o("div", {
102
106
  className: t.comboboxButtons,
103
- children: V ? /* @__PURE__ */ o(Z, {
104
- disabled: s,
107
+ children: y ? /* @__PURE__ */ o(le, {
108
+ disabled: n,
105
109
  onClick: () => {
106
110
  c([]);
107
111
  },
108
- render: (e) => /* @__PURE__ */ o(le, {
112
+ render: (e) => /* @__PURE__ */ o(ce, {
109
113
  ...e,
110
114
  "aria-label": "Clear selection",
111
- icon: ae,
115
+ icon: ue,
112
116
  size: "x-small"
113
117
  }),
114
118
  store: u
115
- }) : /* @__PURE__ */ o(pe, {})
119
+ }) : /* @__PURE__ */ o(ve, {})
116
120
  })]
117
121
  })]
118
122
  })
119
123
  })]
120
124
  })
121
- }), /* @__PURE__ */ o(_, {
125
+ }), /* @__PURE__ */ o(ae, {
122
126
  "aria-labelledby": i,
123
127
  className: t.popover,
124
128
  fitViewport: !0,
125
129
  gutter: 8,
126
130
  portal: !0,
127
- portalElement: G,
131
+ portalElement: X,
128
132
  sameWidth: !0,
129
- children: /* @__PURE__ */ o($, {
133
+ children: /* @__PURE__ */ o(se, {
130
134
  onFocusVisible: (e) => {
131
135
  m.current?.firstChild?.focus();
132
136
  },
133
137
  onKeyDown: (e) => {
134
138
  if (e.key === "ArrowUp") {
135
139
  const l = m.current?.firstChild;
136
- document.activeElement === l && (l.blur(), I.current?.focus());
140
+ document.activeElement === l && (l.blur(), V.current?.focus());
137
141
  }
138
142
  },
139
- children: /* @__PURE__ */ o(de, {
143
+ children: /* @__PURE__ */ o(ge, {
140
144
  ref: m,
141
- ariaLabel: U,
142
- defaultFetcher: B,
143
- levels: P,
144
- loadingAriaLabel: W || f(N.loadingAriaLabel),
145
- multiselect: h,
146
- noResultMessage: k || f(N.noResults),
145
+ ariaLabel: H,
146
+ defaultFetcher: z,
147
+ levels: W,
148
+ loadingAriaLabel: F || g(O.loadingAriaLabel),
149
+ multiselect: C,
150
+ noResultMessage: j || g(O.noResults),
147
151
  onSelect: (e) => {
148
152
  const {
149
153
  metadata: l
150
154
  } = e.element;
151
- let r = [];
152
- e.isSelected ? (h && (r = a.filter((d) => d.value !== e.element.id)), r.push({
155
+ let s = [];
156
+ e.isSelected ? (C && (s = a.filter((p) => p.value !== e.element.id)), s.push({
153
157
  value: e.element.id,
154
158
  displayValue: l.displayValue,
155
159
  level: l.level,
156
160
  selectable: l.selectable,
157
161
  ancestors: l.ancestors
158
- }), R && r.length > a.length && g(!1)) : r = a.filter((d) => d.value !== e.element.id), c(r), x("");
162
+ }), E && s.length > a.length && x(!1)) : s = a.filter((p) => p.value !== e.element.id), c(s), S("");
159
163
  },
160
- open: C,
161
- searchInput: v.trimStart(),
162
- selectableLevels: K,
164
+ open: v,
165
+ searchInput: L.current,
166
+ selectableLevels: q,
163
167
  selectedNodes: a.map((e) => e.value)
164
168
  })
165
169
  })
@@ -167,5 +171,5 @@ const pe = () => /* @__PURE__ */ o(re, {
167
171
  });
168
172
  });
169
173
  export {
170
- Oe as ComboboxWithApiTreeView
174
+ ze as ComboboxWithApiTreeView
171
175
  };
package/dist/types/lib/components/combobox-with-api-pagination/stories/shared.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react-webpack5';
1
+ import { StoryObj } from '@storybook/react-vite';
2
2
  import { ComboboxWithApiPagination } from '../combobox-with-api-pagination';
3
3
  import { mockFetcher } from './mocks';
4
4
  declare const combineSpanTextContent: (text: string) => (_content: string, element: HTMLElement) => boolean;
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "@box/combobox-with-api",
3
- "version": "1.36.0",
3
+ "version": "1.37.1",
4
4
  "peerDependencies": {
5
5
  "@ariakit/react": "0.4.15",
6
- "@box/blueprint-web": "^12.138.0",
7
- "@box/blueprint-web-assets": "^4.101.7",
6
+ "@box/blueprint-web": "^13.0.0",
7
+ "@box/blueprint-web-assets": "^4.101.9",
8
8
  "lodash": "^4.17.15",
9
9
  "react": "^17.0.0 || ^18.0.0",
10
10
  "react-dom": "^17.0.0 || ^18.0.0",
11
11
  "react-intl": "^6.4.2"
12
12
  },
13
13
  "dependencies": {
14
- "@box/tree": "^1.33.0",
14
+ "@box/tree": "^1.33.2",
15
15
  "react-accessible-treeview": "2.9.0"
16
16
  },
17
17
  "devDependencies": {
18
- "@box/blueprint-web": "^12.138.0",
19
- "@box/blueprint-web-assets": "^4.101.7",
20
- "@box/storybook-utils": "^0.16.44",
18
+ "@box/blueprint-web": "^13.0.0",
19
+ "@box/blueprint-web-assets": "^4.101.9",
20
+ "@box/storybook-utils": "^0.16.46",
21
21
  "react": "^18.3.0",
22
22
  "react-dom": "^18.3.0"
23
23
  },