@box/combobox-with-api 1.35.0 → 1.37.0

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 (5) hide show
  1. package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js +99 -95
  2. package/dist/i18n/en-x-pseudo.js +8 -8
  3. package/dist/i18n/en-x-pseudo.properties +8 -8
  4. package/dist/types/lib/components/combobox-with-api-pagination/stories/shared.d.ts +1 -1
  5. 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/i18n/en-x-pseudo.js CHANGED
@@ -1,10 +1,10 @@
1
1
  export default {
2
- "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ċοųľďή'τ ľοăď ѓêşµĺτѕ. Ĉļîсκ τό ŧгŷ ąġαîή. 國國國國國國國國國國國國⟧",
3
- "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Ĉľëαř īйΡūť άňď şέļėĉţíоη 國國國國國國國⟧",
4
- "comboboxWithApiPagination.errorAction": "⟦萬 Ѓεļόáď 國⟧",
5
- "comboboxWithApiPagination.errorIconLabel": "⟦萬 Ęѓŗŏŗ 國⟧",
6
- "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣ǻίľėď το ĺöąď öΡτїóήş 國國國國國國⟧",
7
- "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ļôαďїлĝ... 國國⟧",
8
- "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ļóåďϊпġ mοŗè... 國國國國⟧",
9
- "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Иó ґеѕùľτş ƒоûηď 國國國國⟧"
2
+ "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ĉóųľďл'ŧ ĺōåď ŕēşüĺťŝ. Çľīčκ τō ŧŗў αĝâĩπ. 國國國國國國國國國國國國⟧",
3
+ "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Çľëāґ íņΡµť âйď ŝėļєċţіοл 國國國國國國國⟧",
4
+ "comboboxWithApiPagination.errorAction": "⟦萬 Řèľõǻď 國⟧",
5
+ "comboboxWithApiPagination.errorIconLabel": "⟦萬 Ĕггõř 國⟧",
6
+ "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣ǻίľέď τø ľòαď оΡťìοňŝ 國國國國國國⟧",
7
+ "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ĺőàďĩпğ... 國國⟧",
8
+ "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ľôáďîņğ mόŕє... 國國國國⟧",
9
+ "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Νо гèśűľŧѕ ƒòųŋď 國國國國⟧"
10
10
  }
package/dist/i18n/en-x-pseudo.properties CHANGED
@@ -1,16 +1,16 @@
1
1
  # Error message displayed as combobox item when an API failed and the suggestions could not load
2
- comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ċοųľďή'τ ľοăď ѓêşµĺτѕ. Ĉļîсκ τό ŧгŷ ąġαîή. 國國國國國國國國國國國國⟧
2
+ comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ĉóųľďл'ŧ ĺōåď ŕēşüĺťŝ. Çľīčκ τō ŧŗў αĝâĩπ. 國國國國國國國國國國國國⟧
3
3
  # 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.
4
- comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Ĉľëαř īйΡūť άňď şέļėĉţíоη 國國國國國國國⟧
4
+ comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Çľëāґ íņΡµť âйď ŝėļєċţіοл 國國國國國國國⟧
5
5
  # Error message displayed resembling button that calls to action to reload the results
6
- comboboxWithApiPagination.errorAction = ⟦萬 Ѓεļόáď 國⟧
6
+ comboboxWithApiPagination.errorAction = ⟦萬 Řèľõǻď 國⟧
7
7
  # Aria-label text for the error icon in the loading results error message
8
- comboboxWithApiPagination.errorIconLabel = ⟦萬 Ęѓŗŏŗ 國⟧
8
+ comboboxWithApiPagination.errorIconLabel = ⟦萬 Ĕггõř 國⟧
9
9
  # Error message displayed as inline notice that informs the user that the options failed to load
10
- comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣ǻίľėď το ĺöąď öΡτїóήş 國國國國國國⟧
10
+ comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣ǻίľέď τø ľòαď оΡťìοňŝ 國國國國國國⟧
11
11
  # Visually hidden aria-label text for the loading spinner
12
- comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ļôαďїлĝ... 國國⟧
12
+ comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ĺőàďĩпğ... 國國⟧
13
13
  # Visually hidden aria-label text for the loading spinner show when loading more results from infinite scrolling list
14
- comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ļóåďϊпġ mοŗè... 國國國國⟧
14
+ comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ľôáďîņğ mόŕє... 國國國國⟧
15
15
  # Message displayed when no results are found in the combobox
16
- comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Иó ґеѕùľτş ƒоûηď 國國國國⟧
16
+ comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Νо гèśűľŧѕ ƒòųŋď 國國國國⟧
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.35.0",
3
+ "version": "1.37.0",
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": "^12.139.0",
7
+ "@box/blueprint-web-assets": "^4.101.8",
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.32.0",
14
+ "@box/tree": "^1.33.1",
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": "^12.139.0",
19
+ "@box/blueprint-web-assets": "^4.101.8",
20
+ "@box/storybook-utils": "^0.16.45",
21
21
  "react": "^18.3.0",
22
22
  "react-dom": "^18.3.0"
23
23
  },