@box/metadata-editor 0.61.2 → 0.62.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 +111 -104
  2. package/package.json +3 -3
  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(({
20
- onTryAgain: h
21
- }, f) => {
2
+ import { ComboboxItemValue as Q } from "@ariakit/react";
3
+ import { Combobox as p, LoadingIndicator as X, InlineNotice as Y, Text as Z } from "@box/blueprint-web";
4
+ import { Search as $, Loader as oo } from "@box/blueprint-web-assets/icons/Fill";
5
+ import { IconIconOnLightSecondary as eo, Size6 as y, Size1 as to } from "@box/blueprint-web-assets/tokens/tokens";
6
+ import ro from "clsx";
7
+ import { useRef as v, useCallback as no, useMemo as _, useEffect as ao, forwardRef as io } from "react";
8
+ import { useIntl as V, FormattedMessage as I } from "react-intl";
9
+ import a from "./messages.js";
10
+ import { useAsyncList as so } from "./use-async-list.js";
11
+ import { useControllableState as lo } from "./utils/use-controllable-state.js";
12
+ import { useTrackVisibility as co } from "./utils/use-intersection-observer.js";
13
+ import { jsx as r, jsxs as M, Fragment as uo } from "react/jsx-runtime";
14
+ const mo = "_container_181ao_1", po = "_disabled_181ao_7", bo = "_highlightOptionText_181ao_11", ho = "_option_181ao_24", go = "_errorComboboxOption_181ao_28", fo = "_errorComboboxOptionText_181ao_33", u = {
15
+ container: mo,
16
+ disabled: po,
17
+ highlightOptionText: bo,
18
+ option: ho,
19
+ errorComboboxOption: go,
20
+ errorComboboxOptionText: fo
21
+ }, T = /* @__PURE__ */ io(({
22
+ onTryAgain: b
23
+ }, h) => {
22
24
  const {
23
25
  formatMessage: s
24
- } = T();
25
- return /* @__PURE__ */ I(so, {
26
- children: [/* @__PURE__ */ r(Q, {
26
+ } = V();
27
+ return /* @__PURE__ */ M(uo, {
28
+ children: [/* @__PURE__ */ r(Y, {
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__ */ r(I, {
32
+ ...a.loadingResultsErrorMessage
31
33
  })
32
34
  }), /* @__PURE__ */ r(p.Option, {
33
- ref: f,
34
- className: m.errorComboboxOption,
35
- onClick: h,
36
- children: /* @__PURE__ */ I(X, {
35
+ ref: h,
36
+ className: u.errorComboboxOption,
37
+ onClick: b,
38
+ children: /* @__PURE__ */ M(Z, {
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__ */ r(I, {
44
+ ...a.loadingResultsErrorAction
45
+ }), /* @__PURE__ */ r(oo, {
44
46
  color: "currentColor",
45
47
  height: "12px",
46
48
  width: "12px"
@@ -48,108 +50,109 @@ 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
+ }), R = "__LOADING__", L = "__LOADING_ERROR__", xo = "0px 0px 20px 0px", Oo = /* @__PURE__ */ r($, {
54
+ color: eo,
55
+ height: y,
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: y
62
+ }), So = (b) => {
61
63
  const {
62
- defaultFetcher: f,
64
+ defaultFetcher: h,
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
71
- } = h, {
72
- formatMessage: u
73
- } = T(), g = y(null), o = no({
66
+ value: N,
67
+ onValueChange: S,
68
+ noResultMessage: D,
69
+ defaultValue: P = [],
70
+ loadingAriaLabel: k,
71
+ multiselect: l = !1,
72
+ disabled: F,
73
+ ...w
74
+ } = b, {
75
+ formatMessage: d
76
+ } = V(), g = v(null), o = so({
74
77
  async load({
75
78
  marker: e,
76
79
  searchInput: t,
77
80
  signal: O
78
81
  }) {
79
- const l = await f({
82
+ const c = await h({
80
83
  signal: O,
81
84
  marker: e,
82
85
  searchInput: t
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(() => {
92
+ }), C = v(!1), B = no(() => {
90
93
  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) => {
94
+ }, []), [n, f] = lo({
95
+ prop: N,
96
+ defaultProp: P,
97
+ onChange: S
98
+ }), z = (e) => {
99
+ e === void 0 ? f([]) : Array.isArray(e) ? f(e) : f([e]);
100
+ }, G = _(() => n.length === 0 ? l ? [] : void 0 : l ? n : n[0], [l, n]), x = _(() => n.filter((e) => !o.items.some((t) => t.value === e.value)), [n, o.items]), W = (e) => {
98
101
  const {
99
102
  value: t,
100
103
  displayValue: O,
101
- ...l
104
+ ...c
102
105
  } = e;
103
106
  if (t === R)
104
107
  return o.hasNextPage ? /* @__PURE__ */ r(p.Option, {
105
- ...l,
106
- ref: j,
108
+ ...c,
109
+ ref: q,
107
110
  disabled: !0,
108
111
  value: t,
109
- children: /* @__PURE__ */ r(K, {
110
- "aria-label": u(i.loadingMoreAriaLabel),
112
+ children: /* @__PURE__ */ r(X, {
113
+ "aria-label": d(a.loadingMoreAriaLabel),
111
114
  style: {
112
115
  position: "unset"
113
116
  }
114
117
  })
115
118
  }) : null;
116
119
  if (t === L && o.hasError && !o.isEmpty)
117
- return /* @__PURE__ */ r(M, {
120
+ return /* @__PURE__ */ r(T, {
118
121
  onTryAgain: () => {
119
- var a;
120
- o.loadMore(), (a = g.current) == null || a.focus();
122
+ var i;
123
+ o.loadMore(), (i = g.current) == null || i.focus();
121
124
  }
122
125
  });
123
- if (x.some((a) => a.value === t))
126
+ if (x.some((i) => i.value === t))
124
127
  return null;
125
- const H = () => n.some((a) => a.value === t);
128
+ const K = () => n.some((i) => i.value === t);
126
129
  return /* @__PURE__ */ r(p.Option, {
127
- ...l,
128
- className: m.option,
129
- disabled: H(),
130
+ ...c,
131
+ className: u.option,
132
+ disabled: K(),
130
133
  value: t,
131
- children: /* @__PURE__ */ r(J, {
132
- className: m.highlightOptionText,
134
+ children: /* @__PURE__ */ r(Q, {
135
+ className: u.highlightOptionText,
133
136
  value: O || t
134
137
  })
135
138
  });
136
- }, G = (e) => {
139
+ }, j = (e) => {
137
140
  s == null || s(e), o.search(e);
138
- }, W = () => {
141
+ }, U = () => {
139
142
  var e;
140
143
  o.reload(), (e = g.current) == null || e.focus();
141
144
  };
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,
145
+ let m;
146
+ o.hasError && !o.isLoading ? m = /* @__PURE__ */ r(T, {
147
+ onTryAgain: U
148
+ }) : o.isEmpty && !o.isLoading ? m = D || d(a.noResults) : m = void 0;
149
+ const [q, {
150
+ rootRef: H,
148
151
  isVisible: A
149
- }] = ao({
150
- rootMargin: ho
152
+ }] = co({
153
+ rootMargin: xo
151
154
  });
152
- to(() => {
155
+ ao(() => {
153
156
  if (!(A && o.hasNextPage))
154
157
  return;
155
158
  const t = setTimeout(() => {
@@ -159,7 +162,7 @@ const lo = "_container_16dlc_1", co = "_highlightOptionText_16dlc_7", uo = "_opt
159
162
  clearTimeout(t);
160
163
  };
161
164
  }, [A]);
162
- const q = _(() => {
165
+ const J = _(() => {
163
166
  const e = o.hasNextPage ? {
164
167
  displayValue: R,
165
168
  value: R
@@ -168,28 +171,32 @@ const lo = "_container_16dlc_1", co = "_highlightOptionText_16dlc_7", uo = "_opt
168
171
  value: L
169
172
  } : null;
170
173
  return [...o.items, ...x, e, t].filter(Boolean);
171
- }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, x]);
174
+ }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, x]), E = !l && n.length === 1;
172
175
  return /* @__PURE__ */ r(p, {
173
176
  as: "input",
174
- ...k,
177
+ ...w,
175
178
  ref: g,
176
- clearButtonAriaLabel: u(i.clearButtonAriaLabel),
179
+ className: ro({
180
+ [u.disabled]: E
181
+ }),
182
+ clearButtonAriaLabel: d(a.clearButtonAriaLabel),
183
+ disabled: F || E,
177
184
  displayValue: (e) => e.displayValue || e.value,
178
- endComboboxIcon: fo,
185
+ endComboboxIcon: Oo,
179
186
  focusLoop: !1,
180
- getPopoverRef: U,
187
+ getPopoverRef: H,
181
188
  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
189
+ loadingAriaLabel: k || d(a.loadingAriaLabel),
190
+ multiselect: l,
191
+ noResultMessage: m,
192
+ onFocus: B,
193
+ onInputValueChange: j,
194
+ onValueChange: z,
195
+ options: J,
196
+ renderOption: W,
197
+ value: G
191
198
  });
192
199
  };
193
200
  export {
194
- Io as ComboboxWithApiPagination
201
+ So as ComboboxWithApiPagination
195
202
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/metadata-editor",
3
- "version": "0.61.2",
3
+ "version": "0.62.0",
4
4
  "peerDependencies": {
5
5
  "@ariakit/react": "0.4.5",
6
6
  "@box/blueprint-web": "^7.30.3",
@@ -14,7 +14,7 @@
14
14
  "devDependencies": {
15
15
  "@ariakit/react": "0.4.5",
16
16
  "@box/babel-plugin-target-attributes": "1.3.0",
17
- "@box/blueprint-web": "^7.32.0",
17
+ "@box/blueprint-web": "^7.32.1",
18
18
  "@box/blueprint-web-assets": "^4.27.0",
19
19
  "@box/storybook-utils": "^0.6.1",
20
20
  "@testing-library/react": "^15.0.6",
@@ -53,5 +53,5 @@
53
53
  "**/*.css"
54
54
  ],
55
55
  "license": "SEE LICENSE IN LICENSE",
56
- "gitHead": "1a9265fe9212f894e9e9a8d86c1969ef1d602004"
56
+ "gitHead": "ab664c931e214b862035e211809f92f711a0a2d4"
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);