@box/metadata-template-editor 1.22.17 → 1.24.5

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.
@@ -1,93 +1,91 @@
1
1
  import { general as e } from "../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";
2
2
  import { Divider as t, DropdownMenu as n, IconButton as r, Text as i } from "@box/blueprint-web";
3
3
  import { FormattedMessage as a, useIntl as o } from "react-intl";
4
- import { jsx as s, jsxs as c } from "react/jsx-runtime";
5
- import { Ellipsis as l } from "@box/blueprint-web-assets/icons/Fill";
6
- import u from "react";
7
- import { IconIconErrorOnLight as d } from "@box/blueprint-web-assets/tokens/tokens";
8
- import { ArrowDown as f, ArrowUp as p, Hidden as m, Trash as h, TwoFiles as g, Visible as _ } from "@box/blueprint-web-assets/icons/Line";
9
- import v from "clsx";
10
- import '../styles/field-context-menu.css';var y = {
4
+ import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
5
+ import { Ellipsis as u } from "@box/blueprint-web-assets/icons/Fill";
6
+ import d from "react";
7
+ import { IconIconErrorOnLight as f } from "@box/blueprint-web-assets/tokens/tokens";
8
+ import { ArrowDown as p, ArrowUp as m, Hidden as h, Trash as g, TwoFiles as _, Visible as v } from "@box/blueprint-web-assets/icons/Line";
9
+ import y from "clsx";
10
+ import '../styles/field-context-menu.css';var b = {
11
11
  contextMenuTrigger: "_contextMenuTrigger_102vn_1",
12
12
  menuItem: "_menuItem_102vn_5",
13
13
  contextMenu: "_contextMenu_102vn_1",
14
14
  divider: "_divider_102vn_14"
15
- }, b = ({ className: b, index: x, maxIndex: S, isHidden: C, onReorderFields: w, onToggleVisibility: T, onRequestDelete: E, onRequestDuplicate: D, onOpenChange: O }) => {
16
- let k = o(), [A, j] = u.useState(!1), M = u.useRef(null), N = (e) => {
17
- j(e), O?.(e);
18
- }, P = () => {
19
- x > 0 && w(x, x - 1);
15
+ }, x = ({ className: x, index: S, maxIndex: C, isHidden: w = !1, onReorderFields: T, onToggleVisibility: E, onRequestDelete: D, onRequestDuplicate: O, onOpenChange: k }) => {
16
+ let A = o(), [j, M] = d.useState(!1), N = d.useRef(null), P = (e) => {
17
+ M(e), k?.(e);
20
18
  }, F = () => {
21
- w(x, x + 1);
22
- };
23
- return /* @__PURE__ */ c(n.Root, {
24
- open: A,
25
- onOpenChange: N,
19
+ S > 0 && T?.(S, S - 1);
20
+ }, I = () => {
21
+ T?.(S, S + 1);
22
+ }, L = !!(T || O || E);
23
+ return /* @__PURE__ */ l(n.Root, {
24
+ open: j,
25
+ onOpenChange: P,
26
26
  modal: !1,
27
- children: [/* @__PURE__ */ s(n.Trigger, {
28
- className: v(y.contextMenuTrigger, b),
29
- children: /* @__PURE__ */ s(r, {
30
- icon: l,
31
- "aria-label": k.formatMessage(e.contextMenuAriaLabel),
27
+ children: [/* @__PURE__ */ c(n.Trigger, {
28
+ className: y(b.contextMenuTrigger, x),
29
+ children: /* @__PURE__ */ c(r, {
30
+ icon: u,
31
+ "aria-label": A.formatMessage(e.contextMenuAriaLabel),
32
32
  size: "large"
33
33
  })
34
- }), /* @__PURE__ */ c(n.Content, {
35
- ref: M,
34
+ }), /* @__PURE__ */ l(n.Content, {
35
+ ref: N,
36
36
  align: "end",
37
- className: y.contextMenu,
37
+ className: b.contextMenu,
38
38
  children: [
39
- /* @__PURE__ */ s(n.Item, {
40
- disabled: x === 0,
41
- onClick: P,
42
- "aria-label": k.formatMessage(e.moveUpAriaLabel),
43
- children: /* @__PURE__ */ c("div", {
44
- className: y.menuItem,
45
- children: [/* @__PURE__ */ s(p, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...e.moveUp })]
46
- })
47
- }),
48
- /* @__PURE__ */ s(n.Item, {
49
- disabled: x === S,
39
+ T && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n.Item, {
40
+ disabled: S === 0,
50
41
  onClick: F,
51
- "aria-label": k.formatMessage(e.moveDownAriaLabel),
52
- children: /* @__PURE__ */ c("div", {
53
- className: y.menuItem,
54
- children: [/* @__PURE__ */ s(f, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...e.moveDown })]
42
+ "aria-label": A.formatMessage(e.moveUpAriaLabel),
43
+ children: /* @__PURE__ */ l("div", {
44
+ className: b.menuItem,
45
+ children: [/* @__PURE__ */ c(m, { "aria-hidden": "true" }), /* @__PURE__ */ c(a, { ...e.moveUp })]
55
46
  })
56
- }),
57
- /* @__PURE__ */ s(n.Item, {
58
- onClick: D,
59
- "aria-label": k.formatMessage(e.duplicateFieldAriaLabel),
60
- children: /* @__PURE__ */ c("div", {
61
- className: y.menuItem,
62
- children: [/* @__PURE__ */ s(g, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...e.duplicateField })]
47
+ }), /* @__PURE__ */ c(n.Item, {
48
+ disabled: S === C,
49
+ onClick: I,
50
+ "aria-label": A.formatMessage(e.moveDownAriaLabel),
51
+ children: /* @__PURE__ */ l("div", {
52
+ className: b.menuItem,
53
+ children: [/* @__PURE__ */ c(p, { "aria-hidden": "true" }), /* @__PURE__ */ c(a, { ...e.moveDown })]
54
+ })
55
+ })] }),
56
+ O && /* @__PURE__ */ c(n.Item, {
57
+ onClick: O,
58
+ "aria-label": A.formatMessage(e.duplicateFieldAriaLabel),
59
+ children: /* @__PURE__ */ l("div", {
60
+ className: b.menuItem,
61
+ children: [/* @__PURE__ */ c(_, { "aria-hidden": "true" }), /* @__PURE__ */ c(a, { ...e.duplicateField })]
63
62
  })
64
63
  }),
65
- /* @__PURE__ */ s(n.Item, {
66
- onClick: () => T(!C),
67
- "aria-label": k.formatMessage(C ? e.showField : e.hideField),
68
- children: /* @__PURE__ */ c("div", {
69
- className: y.menuItem,
70
- children: [s(C ? _ : m, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...C ? e.showField : e.hideField })]
64
+ E && /* @__PURE__ */ c(n.Item, {
65
+ onClick: () => E(!w),
66
+ "aria-label": A.formatMessage(w ? e.showField : e.hideField),
67
+ children: /* @__PURE__ */ l("div", {
68
+ className: b.menuItem,
69
+ children: [c(w ? v : h, { "aria-hidden": "true" }), /* @__PURE__ */ c(a, { ...w ? e.showField : e.hideField })]
71
70
  })
72
71
  }),
73
- /* @__PURE__ */ s(t, { className: y.divider }),
74
- /* @__PURE__ */ s(n.Item, {
75
- onClick: E,
76
- "aria-label": k.formatMessage(e.deleteFieldAriaLabel),
77
- children: /* @__PURE__ */ c("div", {
78
- className: y.menuItem,
79
- children: [/* @__PURE__ */ s(h, {
80
- color: d,
72
+ D && /* @__PURE__ */ l(s, { children: [L && /* @__PURE__ */ c(t, { className: b.divider }), /* @__PURE__ */ c(n.Item, {
73
+ onClick: D,
74
+ "aria-label": A.formatMessage(e.deleteFieldAriaLabel),
75
+ children: /* @__PURE__ */ l("div", {
76
+ className: b.menuItem,
77
+ children: [/* @__PURE__ */ c(g, {
78
+ color: f,
81
79
  "aria-hidden": "true"
82
- }), /* @__PURE__ */ s(i, {
80
+ }), /* @__PURE__ */ c(i, {
83
81
  as: "span",
84
82
  color: "textOnLightError",
85
- children: /* @__PURE__ */ s(a, { ...e.deleteField })
83
+ children: /* @__PURE__ */ c(a, { ...e.deleteField })
86
84
  })]
87
85
  })
88
- })
86
+ })] })
89
87
  ]
90
88
  })]
91
89
  });
92
90
  };
93
- export { b as t };
91
+ export { x as t };
@@ -1,22 +1,21 @@
1
1
  import '../styles/metadata-field-configurator.css';var e = {
2
- fieldset: "_fieldset_ireyr_1",
3
- fieldAccordionItem: "_fieldAccordionItem_ireyr_7",
4
- expandedContent: "_expandedContent_ireyr_11",
5
- basic: "_basic_ireyr_17",
6
- fieldTypeSelect: "_fieldTypeSelect_ireyr_22",
7
- typeSpecific: "_typeSpecific_ireyr_26",
8
- description: "_description_ireyr_33",
9
- labelWithTooltip: "_labelWithTooltip_ireyr_38",
10
- validationErrors: "_validationErrors_ireyr_49",
11
- errorIcon: "_errorIcon_ireyr_53",
12
- fieldActionSlot: "_fieldActionSlot_ireyr_59",
13
- expandedToolbarActions: "_expandedToolbarActions_ireyr_65",
14
- fieldCollapsedText: "_fieldCollapsedText_ireyr_71",
15
- extensionTabsContainer: "_extensionTabsContainer_ireyr_76",
16
- extensionContent: "_extensionContent_ireyr_82",
17
- menuOpen: "_menuOpen_ireyr_94",
18
- fieldContextMenu: "_fieldContextMenu_ireyr_97",
19
- hiddenBadge: "_hiddenBadge_ireyr_112",
20
- contextMenuWithCollapsedText: "_contextMenuWithCollapsedText_ireyr_115"
2
+ fieldset: "_fieldset_l98ha_1",
3
+ expandedContent: "_expandedContent_l98ha_7",
4
+ basic: "_basic_l98ha_13",
5
+ fieldTypeSelect: "_fieldTypeSelect_l98ha_18",
6
+ typeSpecific: "_typeSpecific_l98ha_22",
7
+ description: "_description_l98ha_29",
8
+ labelWithTooltip: "_labelWithTooltip_l98ha_34",
9
+ fieldActionSlot: "_fieldActionSlot_l98ha_45",
10
+ expandedToolbarActions: "_expandedToolbarActions_l98ha_52",
11
+ extensionTabsContainer: "_extensionTabsContainer_l98ha_58",
12
+ extensionContent: "_extensionContent_l98ha_64",
13
+ fieldCollapsedText: "_fieldCollapsedText_l98ha_68",
14
+ expanded: "_expanded_l98ha_7",
15
+ contextMenuWithCollapsedText: "_contextMenuWithCollapsedText_l98ha_77",
16
+ fieldAccordionItem: "_fieldAccordionItem_l98ha_83",
17
+ fieldContextMenu: "_fieldContextMenu_l98ha_90",
18
+ menuOpen: "_menuOpen_l98ha_93",
19
+ hiddenBadge: "_hiddenBadge_l98ha_112"
21
20
  };
22
21
  export { e as t };
@@ -14,29 +14,43 @@ import * as v from "yup";
14
14
  import y from "clsx";
15
15
  import ee from "lodash/cloneDeep";
16
16
  import b from "lodash/uniqueId";
17
- import { DndContext as te, DragOverlay as x, KeyboardSensor as S, PointerSensor as ne, TouchSensor as re, closestCenter as ie, useSensor as C, useSensors as w } from "@dnd-kit/core";
18
- import { SortableContext as T, arrayMove as E, sortableKeyboardCoordinates as ae, useSortable as D, verticalListSortingStrategy as oe } from "@dnd-kit/sortable";
19
- import { CSS as O } from "@dnd-kit/utilities";
20
- import '../styles/metadata-field-list.css';var k = {
17
+ import { DndContext as te, DragOverlay as x, KeyboardSensor as S, PointerSensor as ne, TouchSensor as C, closestCenter as re, useSensor as w, useSensors as T } from "@dnd-kit/core";
18
+ import { SortableContext as E, arrayMove as D, sortableKeyboardCoordinates as ie, useSortable as O, verticalListSortingStrategy as ae } from "@dnd-kit/sortable";
19
+ import { CSS as k } from "@dnd-kit/utilities";
20
+ import '../styles/metadata-field-list.css';var A = {
21
21
  fieldList: "_fieldList_18x5c_1",
22
22
  fieldItem: "_fieldItem_18x5c_11",
23
23
  dragging: "_dragging_18x5c_11",
24
24
  accordionRootContainer: "_accordionRootContainer_18x5c_15"
25
- }, A = 150;
26
- function j(e) {
25
+ }, j = 150;
26
+ function M(e) {
27
27
  return e.id;
28
28
  }
29
- var M = 150;
30
- function N({ field: e, index: t, maxIndex: n, isExpanded: r, onChangeField: i, onDeleteAtIndex: a, onDuplicateAtIndex: o, onReorderFields: c, onRequestExpand: l, submitAttemptCount: d }) {
31
- let f = j(e), { attributes: p, listeners: m, setNodeRef: h, transform: g, transition: _, isDragging: v } = D({ id: f });
29
+ var N = 150, P = class extends S {
30
+ static activators = [{
31
+ eventName: "onKeyDown",
32
+ handler: (e, t, n) => {
33
+ let r = e.nativeEvent?.target ?? e.target ?? null;
34
+ return r instanceof HTMLElement && [
35
+ "BUTTON",
36
+ "INPUT",
37
+ "SELECT",
38
+ "TEXTAREA",
39
+ "A"
40
+ ].includes(r.tagName) ? !1 : S.activators[0].handler(e, t, n);
41
+ }
42
+ }];
43
+ };
44
+ function oe({ field: e, index: t, maxIndex: n, isExpanded: r, onChangeField: i, onDeleteAtIndex: a, onDuplicateAtIndex: o, onReorderFields: c, onRequestExpand: l, submitAttemptCount: d }) {
45
+ let f = M(e), { attributes: p, listeners: m, setNodeRef: h, transform: g, transition: _, isDragging: v } = O({ id: f });
32
46
  return /* @__PURE__ */ u("li", {
33
47
  ref: h,
34
48
  style: {
35
- transform: O.Translate.toString(g),
49
+ transform: k.Translate.toString(g),
36
50
  transition: _
37
51
  },
38
52
  "data-field-id": f,
39
- className: y(k.fieldItem, { [k.dragging]: v }),
53
+ className: y(A.fieldItem, { [A.dragging]: v }),
40
54
  children: /* @__PURE__ */ u(s, {
41
55
  values: e,
42
56
  onValuesChange: i,
@@ -57,8 +71,8 @@ function N({ field: e, index: t, maxIndex: n, isExpanded: r, onChangeField: i, o
57
71
  })
58
72
  });
59
73
  }
60
- var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteFieldAtIndex: y, onDuplicateField: D, taxonomyOptions: O, fetchTaxonomies: P, firstInvalidFieldIndex: F, submitAttemptCount: I, fieldExtensions: L, onValidationChange: R }, z) {
61
- let { formatMessage: B } = l(), V = o(P, O), H = g(null), U = g(null), W = g(new Set(s.map((e) => j(e)))), G = r(), K = g(null);
74
+ var F = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteFieldAtIndex: y, onDuplicateField: S, taxonomyOptions: O, fetchTaxonomies: k, firstInvalidFieldIndex: F, submitAttemptCount: I, fieldExtensions: L, onValidationChange: R }, z) {
75
+ let { formatMessage: B } = l(), V = o(k, O), H = g(null), U = g(null), W = g(new Set(s.map((e) => M(e)))), G = r(), K = g(null);
62
76
  m(() => {
63
77
  K.current = null;
64
78
  }, [R]), m(() => {
@@ -69,7 +83,7 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
69
83
  }).catch(() => {
70
84
  e || K.current === !1 || (K.current = !1, R(!1));
71
85
  });
72
- }, A);
86
+ }, j);
73
87
  return () => {
74
88
  e = !0, clearTimeout(t);
75
89
  };
@@ -80,7 +94,7 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
80
94
  ]);
81
95
  let [q, J] = _(() => {
82
96
  let e = s.find((e) => e.isFieldNew);
83
- return e ? j(e) : null;
97
+ return e ? M(e) : null;
84
98
  });
85
99
  h(z, () => ({ scrollToAndExpand(e) {
86
100
  U.current = e, q === e ? (U.current = null, setTimeout(() => {
@@ -91,14 +105,14 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
91
105
  }, 0)) : J(e);
92
106
  } }), [q]), m(() => {
93
107
  s.forEach((e) => {
94
- let t = j(e);
108
+ let t = M(e);
95
109
  W.current.has(t) || (W.current.add(t), U.current = t, J(t));
96
110
  });
97
111
  }, [s]), m(() => {
98
112
  if (F == null || !I) return;
99
113
  let e = s[F];
100
114
  if (!e) return;
101
- let t = j(e);
115
+ let t = M(e);
102
116
  J(t), requestAnimationFrame(() => {
103
117
  (H.current?.querySelector(`[data-field-id="${t}"]`))?.scrollIntoView({
104
118
  behavior: "smooth",
@@ -114,27 +128,27 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
114
128
  behavior: "smooth",
115
129
  block: "nearest"
116
130
  });
117
- }, M);
131
+ }, N);
118
132
  return () => clearTimeout(t);
119
133
  }, [q]);
120
- let [Y, X] = _(null), se = w(C(ne, { activationConstraint: { distance: 8 } }), C(re, { activationConstraint: {
134
+ let [Y, X] = _(null), se = T(w(ne, { activationConstraint: { distance: 8 } }), w(C, { activationConstraint: {
121
135
  delay: 250,
122
136
  tolerance: 5
123
- } }), C(S, { coordinateGetter: ae })), ce = p((e) => {
137
+ } }), w(P, { coordinateGetter: ie })), ce = p((e) => {
124
138
  X(String(e.active.id));
125
139
  }, []), le = p((e) => {
126
140
  X(null);
127
141
  let { active: t, over: n } = e;
128
142
  if (n && t.id !== n.id) {
129
- let e = s.findIndex((e) => j(e) === t.id), r = s.findIndex((e) => j(e) === n.id);
130
- e !== -1 && r !== -1 && f?.(E(s, e, r));
143
+ let e = s.findIndex((e) => M(e) === t.id), r = s.findIndex((e) => M(e) === n.id);
144
+ e !== -1 && r !== -1 && f?.(D(s, e, r));
131
145
  }
132
146
  }, [s, f]), ue = p(() => {
133
147
  X(null);
134
148
  }, []), de = p((e, t) => {
135
149
  f?.(s.map((n, r) => r === e ? t : n));
136
150
  }, [s, f]), fe = p((e) => {
137
- let t = s[e], n = j(t);
151
+ let t = s[e], n = M(t);
138
152
  J((e) => e === n ? null : e), f?.(s.filter((t, n) => n !== e)), y?.(e, t);
139
153
  }, [
140
154
  s,
@@ -147,13 +161,13 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
147
161
  id: b()
148
162
  })));
149
163
  let i = [...s];
150
- i.splice(t + 1, 0, r), f?.(i), D?.(r);
164
+ i.splice(t + 1, 0, r), f?.(i), S?.(r);
151
165
  }, [
152
166
  s,
153
167
  f,
154
- D
168
+ S
155
169
  ]), me = p((e, t) => {
156
- t < 0 || t >= s.length || f?.(E(s, e, t));
170
+ t < 0 || t >= s.length || f?.(D(s, e, t));
157
171
  }, [s, f]), he = p((e) => {
158
172
  let t = e || null;
159
173
  J(t), t && setTimeout(() => {
@@ -161,34 +175,34 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
161
175
  behavior: "smooth",
162
176
  block: "nearest"
163
177
  });
164
- }, M);
165
- }, []), ge = s.map((e) => j(e)), Z = Y ? s.find((e) => j(e) === Y) : null, Q = Z ? t(Z.type) : null, _e = Z ? ((t) => {
178
+ }, N);
179
+ }, []), ge = s.map((e) => M(e)), Z = Y ? s.find((e) => M(e) === Y) : null, Q = Z ? t(Z.type) : null, _e = Z ? ((t) => {
166
180
  let r = t.name || B(n.fieldNameInputPlaceholder);
167
181
  return t.type === e.Dropdown ? `${r} (${t.dropdown?.options?.length ?? 0})` : r;
168
182
  })(Z) : "", $ = /* @__PURE__ */ u(i.Provider, {
169
183
  value: V,
170
184
  children: /* @__PURE__ */ d(te, {
171
185
  sensors: se,
172
- collisionDetection: ie,
186
+ collisionDetection: re,
173
187
  onDragStart: ce,
174
188
  onDragEnd: le,
175
189
  onDragCancel: ue,
176
190
  children: [/* @__PURE__ */ u("div", {
177
- className: k.accordionRootContainer,
191
+ className: A.accordionRootContainer,
178
192
  children: /* @__PURE__ */ u(c, {
179
193
  type: "single",
180
194
  collapsible: !0,
181
195
  value: q ?? "",
182
196
  onValueChange: he,
183
- children: /* @__PURE__ */ u(T, {
197
+ children: /* @__PURE__ */ u(E, {
184
198
  items: ge,
185
- strategy: oe,
199
+ strategy: ae,
186
200
  children: /* @__PURE__ */ u("ul", {
187
201
  ref: H,
188
- className: k.fieldList,
202
+ className: A.fieldList,
189
203
  children: s.map((e, t) => {
190
- let n = j(e);
191
- return /* @__PURE__ */ u(N, {
204
+ let n = M(e);
205
+ return /* @__PURE__ */ u(oe, {
192
206
  field: e,
193
207
  index: t,
194
208
  maxIndex: s.length - 1,
@@ -226,4 +240,4 @@ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteField
226
240
  children: $
227
241
  });
228
242
  });
229
- export { P as t };
243
+ export { F as t };
package/dist/esm/index.js CHANGED
@@ -3,11 +3,17 @@ import { a as t, c as n, i as r, l as i, n as a, o, r as s, s as c, t as l } fro
3
3
  import { t as u } from "../chunks/field-type-dropdown.js";
4
4
  import { FieldTypeTiles as d } from "./lib/components/field-type-tiles/field-type-tiles.js";
5
5
  import { useTemplateFieldSchema as f } from "./lib/components/metadata-field-configurator/hooks/useTemplateFieldSchema.js";
6
- import { createDefaultFieldValues as p } from "./lib/components/metadata-field-configurator/utils.js";
7
- import { FieldExtensionsContext as m, useFieldExtensions as h } from "./lib/components/metadata-field-configurator/context/field-extensions-context.js";
8
- import { MetadataFieldConfigurator as g } from "./lib/components/metadata-field-configurator/metadata-field-configurator.js";
9
- import { t as _ } from "../chunks/metadata-field-list.js";
10
- import { t as v } from "../chunks/metadata-template-editor.js";
11
- import { t as y } from "../chunks/metadata-template-editor-modal.js";
6
+ import p from "./lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";
7
+ import { FieldActionSlot as m } from "./lib/components/metadata-field-configurator/components/field-action-slot/field-action-slot.js";
8
+ import { FieldConfiguratorContext as h, useFieldConfigurator as g } from "./lib/components/metadata-field-configurator/context/field-configurator-context.js";
9
+ import { TaxonomyOptionsContext as _, createStaticTaxonomyContext as v, useTaxonomyOptions as y } from "./lib/components/metadata-field-configurator/context/taxonomy-options-context.js";
10
+ import { createDefaultFieldValues as b } from "./lib/components/metadata-field-configurator/utils.js";
11
+ import { FieldEditContent as x } from "./lib/components/metadata-field-configurator/components/field-edit-content/field-edit-content.js";
12
+ import { FieldExtensionsContext as S, useFieldExtensions as C } from "./lib/components/metadata-field-configurator/context/field-extensions-context.js";
13
+ import { useFieldConfiguratorBehavior as w } from "./lib/components/metadata-field-configurator/hooks/useFieldConfiguratorBehavior.js";
14
+ import { MetadataFieldConfigurator as T } from "./lib/components/metadata-field-configurator/metadata-field-configurator.js";
15
+ import { t as E } from "../chunks/metadata-field-list.js";
16
+ import { t as D } from "../chunks/metadata-template-editor.js";
17
+ import { t as O } from "../chunks/metadata-template-editor-modal.js";
12
18
  import "./lib/components/metadata-template-editor-modal/index.js";
13
- export { l as AllOps, a as ApiMetadataTemplateFieldType, s as EnumOperations, m as FieldExtensionsContext, r as FieldOperations, e as FieldSelector, t as FieldType, u as FieldTypeDropdown, d as FieldTypeTiles, g as MetadataFieldConfigurator, _ as MetadataFieldList, _ as MetadataFieldListDefault, v as MetadataTemplateEditor, y as MetadataTemplateEditorModal, o as MetadataTemplateEditorMode, c as MultiSelectOperations, n as TaxonomySelection, i as TemplateOperations, p as createDefaultFieldValues, h as useFieldExtensions, f as useTemplateFieldSchema };
19
+ export { l as AllOps, a as ApiMetadataTemplateFieldType, p as ConfirmationModal, s as EnumOperations, m as FieldActionSlot, h as FieldConfiguratorContext, x as FieldEditContent, S as FieldExtensionsContext, r as FieldOperations, e as FieldSelector, t as FieldType, u as FieldTypeDropdown, d as FieldTypeTiles, T as MetadataFieldConfigurator, E as MetadataFieldList, E as MetadataFieldListDefault, D as MetadataTemplateEditor, O as MetadataTemplateEditorModal, o as MetadataTemplateEditorMode, c as MultiSelectOperations, _ as TaxonomyOptionsContext, n as TaxonomySelection, i as TemplateOperations, b as createDefaultFieldValues, v as createStaticTaxonomyContext, g as useFieldConfigurator, w as useFieldConfiguratorBehavior, C as useFieldExtensions, y as useTaxonomyOptions, f as useTemplateFieldSchema };
@@ -8,34 +8,50 @@ import { useState as l } from "react";
8
8
  import { SurfaceStatusSurfaceGray as u } from "@box/blueprint-web-assets/tokens/tokens";
9
9
  import { Hidden as d, Pencil as f } from "@box/blueprint-web-assets/icons/Line";
10
10
  import p from "clsx";
11
- var m = ({ isHidden: m, isExpanded: h, index: g, maxIndex: _, onReorderFields: v, onToggleVisibility: y, onRequestDelete: b, onRequestDuplicate: x, extensions: S, fieldCollapsedText: C }) => {
12
- let w = o(), [T, E] = l(!1);
11
+ var m = ({ isHidden: m, isExpanded: h = !1, index: g, maxIndex: _, onReorderFields: v, onToggleVisibility: y, onRequestDelete: b, onRequestDuplicate: x, extensions: S, fieldCollapsedText: C, collapsedMenuSlot: w }) => {
12
+ let T = o(), [E, D] = l(!1), O = !h && w ? /* @__PURE__ */ s("div", {
13
+ className: t.contextMenuWithCollapsedText,
14
+ children: w
15
+ }) : /* @__PURE__ */ s(n, {
16
+ className: p(t.fieldContextMenu, {
17
+ [t.menuOpen]: E,
18
+ [t.contextMenuWithCollapsedText]: C && !h
19
+ }),
20
+ index: g,
21
+ maxIndex: _,
22
+ isHidden: m,
23
+ onReorderFields: v,
24
+ onToggleVisibility: y,
25
+ onRequestDelete: b,
26
+ onRequestDuplicate: x,
27
+ onOpenChange: D
28
+ });
13
29
  return /* @__PURE__ */ c("div", {
14
- className: t.fieldActionSlot,
30
+ className: p(t.fieldActionSlot, { [t.expanded]: h }),
15
31
  children: [
16
32
  m && /* @__PURE__ */ s(r, {
17
33
  icon: d,
18
34
  iconPosition: "left",
19
35
  color: u,
20
- text: w.formatMessage(e.hiddenStatus).toUpperCase(),
36
+ text: T.formatMessage(e.hiddenStatus).toUpperCase(),
21
37
  className: t.hiddenBadge
22
38
  }),
23
39
  C && !h && /* @__PURE__ */ s(a, {
24
40
  as: "span",
25
41
  variant: "bodySmall",
26
42
  color: "textOnLightSecondary",
27
- className: p(t.fieldCollapsedText, { [t.menuOpen]: T }),
43
+ className: p(t.fieldCollapsedText, { [t.menuOpen]: E }),
28
44
  children: C
29
45
  }),
30
46
  /* @__PURE__ */ c("div", {
31
- className: p(t.expandedToolbarActions, { [t.menuOpen]: T }),
47
+ className: p(t.expandedToolbarActions, { [t.menuOpen]: E }),
32
48
  children: [S.length > 0 && /* @__PURE__ */ c(i.TabList, {
33
49
  variant: "contentSwitcher",
34
50
  containerClassname: t.extensionTabsContainer,
35
51
  children: [/* @__PURE__ */ s(i.Tab, {
36
52
  id: "edit",
37
53
  variant: "contentSwitcher",
38
- "aria-label": w.formatMessage(e.editTabAriaLabel),
54
+ "aria-label": T.formatMessage(e.editTabAriaLabel),
39
55
  children: /* @__PURE__ */ s(f, { "aria-hidden": "true" })
40
56
  }), S.map((e, t) => /* @__PURE__ */ s(i.Tab, {
41
57
  id: `ext-${t}`,
@@ -43,20 +59,7 @@ var m = ({ isHidden: m, isExpanded: h, index: g, maxIndex: _, onReorderFields: v
43
59
  "aria-label": e.label,
44
60
  children: /* @__PURE__ */ s(e.icon, { "aria-hidden": "true" })
45
61
  }, e.label))]
46
- }), /* @__PURE__ */ s(n, {
47
- className: p(t.fieldContextMenu, {
48
- [t.menuOpen]: T,
49
- [t.contextMenuWithCollapsedText]: !!C && !h
50
- }),
51
- index: g,
52
- maxIndex: _,
53
- isHidden: m,
54
- onReorderFields: v,
55
- onToggleVisibility: y,
56
- onRequestDelete: b,
57
- onRequestDuplicate: x,
58
- onOpenChange: E
59
- })]
62
+ }), O]
60
63
  })
61
64
  ]
62
65
  });
@@ -8,22 +8,22 @@ import { Select as o, TextInput as s, TextWithInfoBadge as c, TooltipProvider as
8
8
  import { useIntl as u } from "react-intl";
9
9
  import { jsx as d, jsxs as f } from "react/jsx-runtime";
10
10
  import { useMemo as p } from "react";
11
- var m = ({ nameInputId: m, descriptionInputId: h, isTypeEditable: g, externalErrors: _, externalTouched: v, handleTypeChange: y }) => {
12
- let b = u(), x = t(), { values: S, errors: C, touched: w, handleChange: T, handleBlur: E } = i(), D = (e) => {
11
+ var m = ({ nameInputId: m, descriptionInputId: h, isTypeEditable: g, externalErrors: _, externalTouched: v, handleTypeChange: y, hideDescription: b = !1 }) => {
12
+ let x = u(), S = t(), { values: C, errors: w, touched: T, handleChange: E, handleBlur: D } = i(), O = (e) => {
13
13
  if (_ && v?.[e]) return _[e];
14
- let t = C[e];
15
- if (w[e] && t != null && typeof t == "string") return t;
16
- }, O = p(() => /* @__PURE__ */ d(l, { children: /* @__PURE__ */ d(c, {
17
- infoBadgeAriaLabel: b.formatMessage(n.descriptionLearnMoreBadgeAriaLabel),
18
- infoText: b.formatMessage(n.descriptionInfoTooltip),
14
+ let t = w[e];
15
+ if (T[e] && t != null && typeof t == "string") return t;
16
+ }, k = p(() => /* @__PURE__ */ d(l, { children: /* @__PURE__ */ d(c, {
17
+ infoBadgeAriaLabel: x.formatMessage(n.descriptionLearnMoreBadgeAriaLabel),
18
+ infoText: x.formatMessage(n.descriptionInfoTooltip),
19
19
  children: /* @__PURE__ */ d("label", {
20
20
  className: r.labelWithTooltip,
21
21
  htmlFor: h,
22
- children: b.formatMessage(n.fieldDescriptionLabel)
22
+ children: x.formatMessage(n.fieldDescriptionLabel)
23
23
  })
24
- }) }), [b, h]);
24
+ }) }), [x, h]);
25
25
  return /* @__PURE__ */ d("fieldset", {
26
- disabled: S.isFieldReadOnly,
26
+ disabled: C.isFieldReadOnly,
27
27
  className: r.fieldset,
28
28
  children: /* @__PURE__ */ f("div", {
29
29
  className: r.expandedContent,
@@ -33,48 +33,48 @@ var m = ({ nameInputId: m, descriptionInputId: h, isTypeEditable: g, externalErr
33
33
  children: [/* @__PURE__ */ d(s, {
34
34
  name: "name",
35
35
  id: m,
36
- label: b.formatMessage(n.fieldNameLabel),
37
- placeholder: b.formatMessage(n.fieldNameInputPlaceholder),
38
- value: S.name,
39
- error: D("name"),
40
- onChange: T,
41
- onBlur: E,
42
- disabled: S.isFieldReadOnly,
36
+ label: x.formatMessage(n.fieldNameLabel),
37
+ placeholder: x.formatMessage(n.fieldNameInputPlaceholder),
38
+ value: C.name,
39
+ error: O("name"),
40
+ onChange: E,
41
+ onBlur: D,
42
+ disabled: C.isFieldReadOnly,
43
43
  required: !0
44
44
  }), /* @__PURE__ */ d(o, {
45
45
  name: "type",
46
- label: b.formatMessage(n.fieldTypeLabel),
47
- placeholder: b.formatMessage(n.fieldTypePlaceholder),
48
- value: S.type,
46
+ label: x.formatMessage(n.fieldTypeLabel),
47
+ placeholder: x.formatMessage(n.fieldTypePlaceholder),
48
+ value: C.type,
49
49
  "aria-readonly": !g,
50
50
  readonly: !g,
51
- disabled: S.isFieldReadOnly,
51
+ disabled: C.isFieldReadOnly,
52
52
  onValueChange: y,
53
53
  className: r.fieldTypeSelect,
54
54
  required: !0,
55
- children: /* @__PURE__ */ d(o.Content, { children: x.availableFieldTypes.map((e) => /* @__PURE__ */ d(o.Option, {
55
+ children: /* @__PURE__ */ d(o.Content, { children: S.availableFieldTypes.map((e) => /* @__PURE__ */ d(o.Option, {
56
56
  text: typeof e.label == "string" ? e.label : String(e.label),
57
57
  value: e.type
58
58
  }, e.type)) })
59
59
  })]
60
60
  }),
61
- [e.Dropdown, e.Taxonomy].includes(S.type) && /* @__PURE__ */ d("div", {
61
+ [e.Dropdown, e.Taxonomy].includes(C.type) && /* @__PURE__ */ d("div", {
62
62
  className: r.typeSpecific,
63
- children: a(S.type)
63
+ children: a(C.type)
64
64
  }),
65
- /* @__PURE__ */ d("div", {
65
+ !b && /* @__PURE__ */ d("div", {
66
66
  className: r.description,
67
67
  children: /* @__PURE__ */ d(s, {
68
68
  name: "description",
69
69
  id: h,
70
- label: O,
71
- placeholder: b.formatMessage(n.fieldDescriptionInputPlaceholder),
72
- value: S.description ?? "",
73
- error: D("description"),
70
+ label: k,
71
+ placeholder: x.formatMessage(n.fieldDescriptionInputPlaceholder),
72
+ value: C.description ?? "",
73
+ error: O("description"),
74
74
  hideLabel: !0,
75
- disabled: S.isFieldReadOnly,
76
- onChange: T,
77
- onBlur: E
75
+ disabled: C.isFieldReadOnly,
76
+ onChange: E,
77
+ onBlur: D
78
78
  })
79
79
  })
80
80
  ]
@@ -61,6 +61,7 @@ function g({ values: g, onValuesChange: _, onDelete: v, isExpanded: y, onExpande
61
61
  }, [Q, g.isFieldNew]), ae = c(() => R(!1), []), oe = c((e) => I(e === U), [U]), se = c((e) => {
62
62
  _({
63
63
  ...n(e),
64
+ id: g.id,
64
65
  key: g.key,
65
66
  hidden: g.hidden,
66
67
  isFieldNew: g.isFieldNew,
@@ -1,5 +1,11 @@
1
1
  import { useTemplateFieldSchema as e } from "./hooks/useTemplateFieldSchema.js";
2
- import { createDefaultFieldValues as t } from "./utils.js";
3
- import { FieldExtensionsContext as n, useFieldExtensions as r } from "./context/field-extensions-context.js";
4
- import { MetadataFieldConfigurator as i } from "./metadata-field-configurator.js";
5
- export { n as FieldExtensionsContext, i as MetadataFieldConfigurator, t as createDefaultFieldValues, r as useFieldExtensions, e as useTemplateFieldSchema };
2
+ import t from "./components/confirmation-modal/confirmation-modal.js";
3
+ import { FieldActionSlot as n } from "./components/field-action-slot/field-action-slot.js";
4
+ import { FieldConfiguratorContext as r, useFieldConfigurator as i } from "./context/field-configurator-context.js";
5
+ import { TaxonomyOptionsContext as a, createStaticTaxonomyContext as o, useTaxonomyOptions as s } from "./context/taxonomy-options-context.js";
6
+ import { createDefaultFieldValues as c } from "./utils.js";
7
+ import { FieldEditContent as l } from "./components/field-edit-content/field-edit-content.js";
8
+ import { FieldExtensionsContext as u, useFieldExtensions as d } from "./context/field-extensions-context.js";
9
+ import { useFieldConfiguratorBehavior as f } from "./hooks/useFieldConfiguratorBehavior.js";
10
+ import { MetadataFieldConfigurator as p } from "./metadata-field-configurator.js";
11
+ export { t as ConfirmationModal, n as FieldActionSlot, r as FieldConfiguratorContext, l as FieldEditContent, u as FieldExtensionsContext, p as MetadataFieldConfigurator, a as TaxonomyOptionsContext, c as createDefaultFieldValues, o as createStaticTaxonomyContext, i as useFieldConfigurator, f as useFieldConfiguratorBehavior, d as useFieldExtensions, s as useTaxonomyOptions, e as useTemplateFieldSchema };