@box/metadata-editor 0.61.3 → 0.63.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 (4) hide show
  1. package/esm/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js +139 -128
  2. package/package.json +2 -2
  3. package/styles/combobox-with-api-pagination.css +1 -1
  4. package/types/lib/components/combobox-with-api-pagination/types.d.ts +1 -0
package/esm/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js CHANGED
@@ -1,46 +1,48 @@
1
1
  import "../../../../styles/combobox-with-api-pagination.css";
2
- import { ComboboxItemValue as J } from "@ariakit/react";
3
- import { Combobox as p, LoadingIndicator as K, InlineNotice as Q, Text as X } from "@box/blueprint-web";
4
- import { Search as Y, Loader as Z } from "@box/blueprint-web-assets/icons/Fill";
5
- import { IconIconOnLightSecondary as $, Size6 as E, Size1 as oo } from "@box/blueprint-web-assets/tokens/tokens";
6
- import { useRef as y, useCallback as eo, useMemo as _, useEffect as to, forwardRef as ro } from "react";
7
- import { useIntl as T, FormattedMessage as v } from "react-intl";
8
- import i from "./messages.js";
9
- import { useAsyncList as no } from "./use-async-list.js";
10
- import { useControllableState as io } from "./utils/use-controllable-state.js";
11
- import { useTrackVisibility as ao } from "./utils/use-intersection-observer.js";
12
- import { jsx as r, jsxs as I, Fragment as so } from "react/jsx-runtime";
13
- const lo = "_container_16dlc_1", co = "_highlightOptionText_16dlc_7", uo = "_option_16dlc_20", po = "_errorComboboxOption_16dlc_24", mo = "_errorComboboxOptionText_16dlc_29", m = {
14
- container: lo,
15
- highlightOptionText: co,
16
- option: uo,
17
- errorComboboxOption: po,
18
- errorComboboxOptionText: mo
19
- }, M = /* @__PURE__ */ ro(({
2
+ import { ComboboxItemValue as X } from "@ariakit/react";
3
+ import { Combobox as p, LoadingIndicator as Y, InlineNotice as Z, Text as $ } from "@box/blueprint-web";
4
+ import { Search as oo, Loader as eo } from "@box/blueprint-web-assets/icons/Fill";
5
+ import { IconIconOnLightSecondary as ro, Size6 as I, Size1 as to } from "@box/blueprint-web-assets/tokens/tokens";
6
+ import no from "clsx";
7
+ import { useRef as L, useCallback as ao, useMemo as C, useEffect as io, forwardRef as so } from "react";
8
+ import { useIntl as N, FormattedMessage as M } from "react-intl";
9
+ import a from "./messages.js";
10
+ import { useAsyncList as lo } from "./use-async-list.js";
11
+ import { useControllableState as co } from "./utils/use-controllable-state.js";
12
+ import { useTrackVisibility as uo } from "./utils/use-intersection-observer.js";
13
+ import { jsx as t, jsxs as T, Fragment as mo } from "react/jsx-runtime";
14
+ const po = "_container_181ao_1", ho = "_disabled_181ao_7", fo = "_highlightOptionText_181ao_11", bo = "_option_181ao_24", go = "_errorComboboxOption_181ao_28", xo = "_errorComboboxOptionText_181ao_33", u = {
15
+ container: po,
16
+ disabled: ho,
17
+ highlightOptionText: fo,
18
+ option: bo,
19
+ errorComboboxOption: go,
20
+ errorComboboxOptionText: xo
21
+ }, V = /* @__PURE__ */ so(({
20
22
  onTryAgain: h
21
23
  }, f) => {
22
24
  const {
23
25
  formatMessage: s
24
- } = T();
25
- return /* @__PURE__ */ I(so, {
26
- children: [/* @__PURE__ */ r(Q, {
26
+ } = N();
27
+ return /* @__PURE__ */ T(mo, {
28
+ children: [/* @__PURE__ */ t(Z, {
27
29
  variant: "error",
28
- variantIconAriaLabel: s(i.loadingResultsErrorIconLabel),
29
- children: /* @__PURE__ */ r(v, {
30
- ...i.loadingResultsErrorMessage
30
+ variantIconAriaLabel: s(a.loadingResultsErrorIconLabel),
31
+ children: /* @__PURE__ */ t(M, {
32
+ ...a.loadingResultsErrorMessage
31
33
  })
32
- }), /* @__PURE__ */ r(p.Option, {
34
+ }), /* @__PURE__ */ t(p.Option, {
33
35
  ref: f,
34
- className: m.errorComboboxOption,
36
+ className: u.errorComboboxOption,
35
37
  onClick: h,
36
- children: /* @__PURE__ */ I(X, {
38
+ children: /* @__PURE__ */ T($, {
37
39
  as: "span",
38
- className: m.errorComboboxOptionText,
40
+ className: u.errorComboboxOptionText,
39
41
  color: "textOnLightLink",
40
42
  variant: "bodyDefaultBold",
41
- children: [/* @__PURE__ */ r(v, {
42
- ...i.loadingResultsErrorAction
43
- }), /* @__PURE__ */ r(Z, {
43
+ children: [/* @__PURE__ */ t(M, {
44
+ ...a.loadingResultsErrorAction
45
+ }), /* @__PURE__ */ t(eo, {
44
46
  color: "currentColor",
45
47
  height: "12px",
46
48
  width: "12px"
@@ -48,148 +50,157 @@ const lo = "_container_16dlc_1", co = "_highlightOptionText_16dlc_7", uo = "_opt
48
50
  })
49
51
  })]
50
52
  });
51
- }), R = "__LOADING__", L = "__LOADING_ERROR__", ho = "0px 0px 20px 0px", fo = /* @__PURE__ */ r(Y, {
52
- color: $,
53
- height: E,
53
+ }), A = "__LOADING__", E = "__LOADING_ERROR__", Oo = "0px 0px 20px 0px", _o = /* @__PURE__ */ t(oo, {
54
+ color: ro,
55
+ height: I,
54
56
  role: "presentation",
55
57
  style: {
56
- padding: oo,
58
+ padding: to,
57
59
  boxSizing: "border-box"
58
60
  },
59
- width: E
60
- }), Io = (h) => {
61
+ width: I
62
+ }), Do = (h) => {
61
63
  const {
62
64
  defaultFetcher: f,
63
65
  onInputValueChange: s,
64
- value: V,
65
- onValueChange: N,
66
- noResultMessage: S,
67
- defaultValue: D = [],
68
- loadingAriaLabel: P,
69
- multiselect: c = !1,
70
- ...k
66
+ value: S,
67
+ onValueChange: D,
68
+ noResultMessage: F,
69
+ defaultValue: P = [],
70
+ loadingAriaLabel: k,
71
+ multiselect: l = !1,
72
+ disabled: w,
73
+ ...B
71
74
  } = h, {
72
- formatMessage: u
73
- } = T(), g = y(null), o = no({
75
+ formatMessage: d
76
+ } = N(), b = L(null), g = L(!0), o = lo({
74
77
  async load({
75
78
  marker: e,
76
- searchInput: t,
77
- signal: O
79
+ searchInput: r,
80
+ signal: R
78
81
  }) {
79
- const l = await f({
80
- signal: O,
82
+ const c = await f({
83
+ signal: R,
81
84
  marker: e,
82
- searchInput: t
85
+ searchInput: r
83
86
  });
84
87
  return {
85
- items: l.options,
86
- marker: l.marker
88
+ items: c.options,
89
+ marker: c.marker
87
90
  };
88
91
  }
89
- }), C = y(!1), F = eo(() => {
90
- C.current || (o.reload(), C.current = !0);
91
- }, []), [n, b] = io({
92
- prop: V,
93
- defaultProp: D,
94
- onChange: N
95
- }), w = (e) => {
96
- e === void 0 ? b([]) : Array.isArray(e) ? b(e) : b([e]);
97
- }, B = _(() => n.length === 0 ? c ? [] : void 0 : c ? n : n[0], [c, n]), x = _(() => n.filter((e) => !o.items.some((t) => t.value === e.value)), [n, o.items]), z = (e) => {
92
+ }), y = L(!1), z = ao(() => {
93
+ y.current || (o.reload(), y.current = !0);
94
+ }, []), [n, x] = co({
95
+ prop: S,
96
+ defaultProp: P,
97
+ onChange: D
98
+ }), O = !l && n.length === 1, G = (e) => {
99
+ e === void 0 ? (x([]), g.current || (o.search(""), g.current = !0)) : Array.isArray(e) ? x(e) : x([e]);
100
+ }, W = C(() => n.length === 0 ? l ? [] : void 0 : l ? n : n[0], [l, n]), _ = C(() => n.filter((e) => !o.items.some((r) => r.value === e.value)), [n, o.items]), j = (e) => {
98
101
  const {
99
- value: t,
100
- displayValue: O,
101
- ...l
102
+ value: r,
103
+ displayValue: R,
104
+ ...c
102
105
  } = e;
103
- if (t === R)
104
- return o.hasNextPage ? /* @__PURE__ */ r(p.Option, {
105
- ...l,
106
- ref: j,
106
+ if (r === A)
107
+ return o.hasNextPage ? /* @__PURE__ */ t(p.Option, {
108
+ ...c,
109
+ ref: H,
107
110
  disabled: !0,
108
- value: t,
109
- children: /* @__PURE__ */ r(K, {
110
- "aria-label": u(i.loadingMoreAriaLabel),
111
+ value: r,
112
+ children: /* @__PURE__ */ t(Y, {
113
+ "aria-label": d(a.loadingMoreAriaLabel),
111
114
  style: {
112
115
  position: "unset"
113
116
  }
114
117
  })
115
118
  }) : null;
116
- if (t === L && o.hasError && !o.isEmpty)
117
- return /* @__PURE__ */ r(M, {
119
+ if (r === E && o.hasError && !o.isEmpty)
120
+ return /* @__PURE__ */ t(V, {
118
121
  onTryAgain: () => {
119
- var a;
120
- o.loadMore(), (a = g.current) == null || a.focus();
122
+ var i;
123
+ o.loadMore(), (i = b.current) == null || i.focus();
121
124
  }
122
125
  });
123
- if (x.some((a) => a.value === t))
126
+ if (_.some((i) => i.value === r))
124
127
  return null;
125
- const H = () => n.some((a) => a.value === t);
126
- return /* @__PURE__ */ r(p.Option, {
127
- ...l,
128
- className: m.option,
129
- disabled: H(),
130
- value: t,
131
- children: /* @__PURE__ */ r(J, {
132
- className: m.highlightOptionText,
133
- value: O || t
128
+ const Q = () => n.some((i) => i.value === r);
129
+ return /* @__PURE__ */ t(p.Option, {
130
+ ...c,
131
+ className: u.option,
132
+ disabled: Q(),
133
+ value: r,
134
+ children: /* @__PURE__ */ t(X, {
135
+ className: u.highlightOptionText,
136
+ value: R || r
134
137
  })
135
138
  });
136
- }, G = (e) => {
137
- s == null || s(e), o.search(e);
138
- }, W = () => {
139
+ }, U = (e) => {
140
+ if (s == null || s(e), O && e === "") {
141
+ g.current = !1;
142
+ return;
143
+ }
144
+ o.search(e);
145
+ }, q = () => {
139
146
  var e;
140
- o.reload(), (e = g.current) == null || e.focus();
147
+ o.reload(), (e = b.current) == null || e.focus();
141
148
  };
142
- let d;
143
- o.hasError && !o.isLoading ? d = /* @__PURE__ */ r(M, {
144
- onTryAgain: W
145
- }) : o.isEmpty && !o.isLoading ? d = S || u(i.noResults) : d = void 0;
146
- const [j, {
147
- rootRef: U,
148
- isVisible: A
149
- }] = ao({
150
- rootMargin: ho
149
+ let m;
150
+ o.hasError && !o.isLoading ? m = /* @__PURE__ */ t(V, {
151
+ onTryAgain: q
152
+ }) : o.isEmpty && !o.isLoading ? m = F || d(a.noResults) : m = void 0;
153
+ const [H, {
154
+ rootRef: J,
155
+ isVisible: v
156
+ }] = uo({
157
+ rootMargin: Oo
151
158
  });
152
- to(() => {
153
- if (!(A && o.hasNextPage))
159
+ io(() => {
160
+ if (!(v && o.hasNextPage))
154
161
  return;
155
- const t = setTimeout(() => {
162
+ const r = setTimeout(() => {
156
163
  o.loadMore();
157
164
  }, 100);
158
165
  return () => {
159
- clearTimeout(t);
166
+ clearTimeout(r);
160
167
  };
161
- }, [A]);
162
- const q = _(() => {
168
+ }, [v]);
169
+ const K = C(() => {
163
170
  const e = o.hasNextPage ? {
164
- displayValue: R,
165
- value: R
166
- } : null, t = !e && o.hasError && !o.isEmpty ? {
167
- displayValue: L,
168
- value: L
171
+ displayValue: A,
172
+ value: A
173
+ } : null, r = !e && o.hasError && !o.isEmpty ? {
174
+ displayValue: E,
175
+ value: E
169
176
  } : null;
170
- return [...o.items, ...x, e, t].filter(Boolean);
171
- }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, x]);
172
- return /* @__PURE__ */ r(p, {
177
+ return [...o.items, ..._, e, r].filter(Boolean);
178
+ }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, _]);
179
+ return /* @__PURE__ */ t(p, {
173
180
  as: "input",
174
- ...k,
175
- ref: g,
176
- clearButtonAriaLabel: u(i.clearButtonAriaLabel),
181
+ ...B,
182
+ ref: b,
183
+ className: no({
184
+ [u.disabled]: O
185
+ }),
186
+ clearButtonAriaLabel: d(a.clearButtonAriaLabel),
187
+ disabled: w || O,
177
188
  displayValue: (e) => e.displayValue || e.value,
178
- endComboboxIcon: fo,
189
+ endComboboxIcon: _o,
179
190
  focusLoop: !1,
180
- getPopoverRef: U,
191
+ getPopoverRef: J,
181
192
  loading: o.isReloading,
182
- loadingAriaLabel: P || u(i.loadingAriaLabel),
183
- multiselect: c,
184
- noResultMessage: d,
185
- onFocus: F,
186
- onInputValueChange: G,
187
- onValueChange: w,
188
- options: q,
189
- renderOption: z,
190
- value: B
193
+ loadingAriaLabel: k || d(a.loadingAriaLabel),
194
+ multiselect: l,
195
+ noResultMessage: m,
196
+ onFocus: z,
197
+ onInputValueChange: U,
198
+ onValueChange: G,
199
+ options: K,
200
+ renderOption: j,
201
+ value: W
191
202
  });
192
203
  };
193
204
  export {
194
- Io as ComboboxWithApiPagination
205
+ Do as ComboboxWithApiPagination
195
206
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/metadata-editor",
3
- "version": "0.61.3",
3
+ "version": "0.63.0",
4
4
  "peerDependencies": {
5
5
  "@ariakit/react": "0.4.5",
6
6
  "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
53
53
  "**/*.css"
54
54
  ],
55
55
  "license": "SEE LICENSE IN LICENSE",
56
- "gitHead": "aa14ef3d6c34197e3d46bd778fa4f7b24e02a6cc"
56
+ "gitHead": "ed629b47ecaf845602ef01a10843bf1831b8c028"
57
57
  }
package/styles/combobox-with-api-pagination.css CHANGED
@@ -1 +1 @@
1
- ._container_16dlc_1{display:flex;gap:var(--space-1);justify-content:center}._highlightOptionText_16dlc_7 [data-user-value]{font-weight:700;font-size:.875rem;font-family:Lato,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.25rem;letter-spacing:.01875rem;text-transform:none;text-decoration:none}._highlightOptionText_16dlc_7 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._option_16dlc_20:nth-last-child(1 of._option_16dlc_20){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_16dlc_24[role=option]{display:flex;align-items:center;justify-content:center}._errorComboboxOption_16dlc_24[role=option] ._errorComboboxOptionText_16dlc_29{display:flex;gap:var(--space-1);align-items:center}
1
+ ._container_181ao_1{display:flex;gap:var(--space-1);justify-content:center}._disabled_181ao_7._disabled_181ao_7{opacity:unset}._highlightOptionText_181ao_11 [data-user-value]{font-weight:700;font-size:.875rem;font-family:Lato,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.25rem;letter-spacing:.01875rem;text-transform:none;text-decoration:none}._highlightOptionText_181ao_11 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._option_181ao_24:nth-last-child(1 of._option_181ao_24){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_181ao_28[role=option]{display:flex;align-items:center;justify-content:center}._errorComboboxOption_181ao_28[role=option] ._errorComboboxOptionText_181ao_33{display:flex;gap:var(--space-1);align-items:center}
package/types/lib/components/combobox-with-api-pagination/types.d.ts CHANGED
@@ -24,6 +24,7 @@ interface BaseComboboxProps<T extends BaseOptionType, M extends boolean> {
24
24
  onValueChange?: (selectedOptions: T[]) => void;
25
25
  value?: T[];
26
26
  defaultValue?: T[];
27
+ disabled?: boolean;
27
28
  label: string;
28
29
  loadingAriaLabel?: string;
29
30
  portalElement?: HTMLElement | (() => HTMLElement);