@box/metadata-template-editor 1.20.8 → 1.20.10

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 (95) hide show
  1. package/dist/chunks/chip.js +21 -0
  2. package/dist/chunks/dropdown-field-configuration.js +62 -0
  3. package/dist/chunks/field-context-menu.js +90 -0
  4. package/dist/chunks/field-selector.js +23 -0
  5. package/dist/chunks/field-type-dropdown.js +31 -0
  6. package/dist/chunks/levels-chain.js +125 -0
  7. package/dist/chunks/metadata-field-configurator.module.js +17 -16
  8. package/dist/chunks/metadata-field-list.js +229 -0
  9. package/dist/chunks/metadata-template-editor-form.js +107 -0
  10. package/dist/chunks/metadata-template-editor-modal.js +77 -0
  11. package/dist/chunks/metadata-template-editor.js +157 -0
  12. package/dist/chunks/sortable-option-list.js +231 -0
  13. package/dist/chunks/taxonomy-field-configuration.js +126 -0
  14. package/dist/chunks/taxonomy-field-configurator-initial-state.js +48 -0
  15. package/dist/chunks/taxonomy-selector.js +90 -0
  16. package/dist/chunks/types.js +22 -33
  17. package/dist/esm/index.js +13 -34
  18. package/dist/esm/lib/components/field-selector/field-selector.js +2 -39
  19. package/dist/esm/lib/components/field-selector/index.js +2 -4
  20. package/dist/esm/lib/components/field-selector/messages.js +10 -12
  21. package/dist/esm/lib/components/field-type-dropdown/field-type-dropdown.js +2 -47
  22. package/dist/esm/lib/components/field-type-dropdown/index.js +2 -4
  23. package/dist/esm/lib/components/field-type-dropdown/messages.js +10 -12
  24. package/dist/esm/lib/components/field-type-tiles/field-type-tiles.js +32 -39
  25. package/dist/esm/lib/components/field-type-tiles/index.js +2 -4
  26. package/dist/esm/lib/components/field-type-tiles/messages.js +10 -12
  27. package/dist/esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js +32 -45
  28. package/dist/esm/lib/components/metadata-field-configurator/components/confirmation-modal/messages.js +14 -16
  29. package/dist/esm/lib/components/metadata-field-configurator/components/field-action-slot/field-action-slot.js +62 -79
  30. package/dist/esm/lib/components/metadata-field-configurator/components/field-context-menu/field-context-menu.js +2 -115
  31. package/dist/esm/lib/components/metadata-field-configurator/components/field-edit-content/field-edit-content.js +83 -100
  32. package/dist/esm/lib/components/metadata-field-configurator/components/levels-chain/chip.js +2 -33
  33. package/dist/esm/lib/components/metadata-field-configurator/components/levels-chain/index.js +2 -4
  34. package/dist/esm/lib/components/metadata-field-configurator/components/levels-chain/levels-chain.js +2 -118
  35. package/dist/esm/lib/components/metadata-field-configurator/components/levels-chain/utils.js +16 -33
  36. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/dropdown/__mocks__/getInitialValues.js +34 -32
  37. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/dropdown/dropdown-default-values.js +10 -14
  38. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/dropdown/dropdown-field-configuration.js +2 -66
  39. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/dropdown/sortable-option-list.js +2 -294
  40. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/index.js +3 -6
  41. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-default-values.js +11 -15
  42. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-field-configuration.js +2 -149
  43. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-field-configurator-initial-state.js +2 -54
  44. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-selector-messages.js +34 -36
  45. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-selector.js +2 -103
  46. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/useTaxonomySelect.js +15 -19
  47. package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/utils.js +2 -4
  48. package/dist/esm/lib/components/metadata-field-configurator/context/field-configurator-context.js +60 -66
  49. package/dist/esm/lib/components/metadata-field-configurator/context/field-extensions-context.js +5 -8
  50. package/dist/esm/lib/components/metadata-field-configurator/context/taxonomy-options-context.js +14 -20
  51. package/dist/esm/lib/components/metadata-field-configurator/hooks/useFieldConfiguratorBehavior.js +99 -118
  52. package/dist/esm/lib/components/metadata-field-configurator/hooks/useFieldValidation.js +52 -66
  53. package/dist/esm/lib/components/metadata-field-configurator/hooks/useTaxonomyFetch.js +23 -26
  54. package/dist/esm/lib/components/metadata-field-configurator/hooks/useTemplateFieldSchema.js +34 -43
  55. package/dist/esm/lib/components/metadata-field-configurator/index.js +5 -11
  56. package/dist/esm/lib/components/metadata-field-configurator/messages/configurator-messages.js +131 -134
  57. package/dist/esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js +34 -36
  58. package/dist/esm/lib/components/metadata-field-configurator/messages/levels-chain-messages.js +14 -16
  59. package/dist/esm/lib/components/metadata-field-configurator/messages/taxonomy-messages.js +34 -36
  60. package/dist/esm/lib/components/metadata-field-configurator/metadata-field-configurator.js +94 -153
  61. package/dist/esm/lib/components/metadata-field-configurator/utils.js +42 -49
  62. package/dist/esm/lib/components/metadata-field-list/index.js +2 -5
  63. package/dist/esm/lib/components/metadata-field-list/metadata-field-list.js +2 -279
  64. package/dist/esm/lib/components/metadata-template-editor-form/metadata-template-editor-form.js +2 -137
  65. package/dist/esm/lib/components/metadata-template-editor-modal/index.js +2 -4
  66. package/dist/esm/lib/components/metadata-template-editor-modal/metadata-template-editor-modal.js +2 -103
  67. package/dist/esm/lib/hooks/useMetadataTemplateFormSchema.js +13 -15
  68. package/dist/esm/lib/hooks/useTemplateNameSchema.js +8 -10
  69. package/dist/esm/lib/index.js +7 -14
  70. package/dist/esm/lib/messages.js +114 -116
  71. package/dist/esm/lib/metadata-template-editor.js +2 -182
  72. package/dist/esm/lib/utils/constants.js +2 -8
  73. package/dist/esm/lib/utils/field-options/field-type-icon.js +14 -33
  74. package/dist/esm/lib/utils/field-options/index.js +4 -9
  75. package/dist/esm/lib/utils/field-options/messages.js +43 -46
  76. package/dist/esm/lib/utils/field-options/useFieldOptions.js +14 -18
  77. package/dist/esm/lib/utils/key-generation.js +16 -27
  78. package/dist/esm/lib/utils/template-type-conversion/convertLocalConfiguratorToTemplateField.js +63 -77
  79. package/dist/esm/lib/utils/template-type-conversion/convertTemplateFieldToLocalConfigurator.js +69 -89
  80. package/dist/esm/lib/utils/template-type-conversion/generateJSONPatchTemplateOperations.js +150 -169
  81. package/dist/esm/lib/utils/template-type-conversion/mapFieldsWithUniqueKeys.js +8 -13
  82. package/dist/styles/chip.css +1 -1
  83. package/dist/styles/dropdown-field-configuration.css +1 -1
  84. package/dist/styles/field-context-menu.css +1 -1
  85. package/dist/styles/levels-chain.css +1 -1
  86. package/dist/styles/metadata-field-configurator.css +1 -1
  87. package/dist/styles/metadata-field-list.css +1 -1
  88. package/dist/styles/metadata-template-editor-form.css +1 -1
  89. package/dist/styles/metadata-template-editor-modal.css +1 -1
  90. package/dist/styles/metadata-template-editor.css +1 -1
  91. package/dist/styles/sortable-option-list.css +1 -1
  92. package/dist/styles/taxonomy-field-configuration.css +1 -1
  93. package/dist/styles/taxonomy-field-configurator-initial-state.css +1 -1
  94. package/dist/styles/taxonomy-selector.css +1 -1
  95. package/package.json +7 -7
@@ -0,0 +1,21 @@
1
+ import e from "../esm/lib/components/metadata-field-configurator/messages/levels-chain-messages.js";
2
+ import { Text as t } from "@box/blueprint-web";
3
+ import { useIntl as n } from "react-intl";
4
+ import { jsx as r } from "react/jsx-runtime";
5
+ import i from "clsx";
6
+ import '../styles/chip.css';var a = {
7
+ chip: "_chip_x2zx9_1",
8
+ selected: "_selected_x2zx9_12"
9
+ }, o = /* @__PURE__ */ function(e) {
10
+ return e.Selected = "selected", e.Unselected = "unselected", e;
11
+ }({}), s = ({ value: s, selected: c = !1 }) => {
12
+ let { formatMessage: l } = n(), u = l(c ? e.chipSelected : e.chipNotSelected);
13
+ return /* @__PURE__ */ r(t, {
14
+ as: "span",
15
+ className: i(a.chip, { [a.selected]: c }),
16
+ "data-state": c ? o.Selected : o.Unselected,
17
+ "aria-label": `${s}: ${u}`,
18
+ children: s
19
+ });
20
+ };
21
+ export { o as n, s as t };
@@ -0,0 +1,62 @@
1
+ import { useFieldConfigurator as e } from "../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";
2
+ import t from "../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";
3
+ import { t as n } from "./sortable-option-list.js";
4
+ import { InlineNotice as r, Switch as i, TextButton as a } from "@box/blueprint-web";
5
+ import { useIntl as o } from "react-intl";
6
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
+ import { useCallback as l, useEffect as u, useState as d } from "react";
8
+ import f from "lodash/uniqueId";
9
+ import '../styles/dropdown-field-configuration.css';var p = {
10
+ dropdownFieldConfiguration: "_dropdownFieldConfiguration_rjv8w_1",
11
+ addOptionButton: "_addOptionButton_rjv8w_7"
12
+ }, m = () => {
13
+ let { formatMessage: m } = o(), { values: h, errors: g, touched: _, setFieldValue: v } = e(), [y, b] = d(!1), x = h.dropdown.options.length > 0, S = g.dropdown, C = _.dropdown, w = S?.options?.some((e, t) => e?.key && C?.options?.[t]), T = l((e = !1) => {
14
+ v("dropdown", {
15
+ ...h.dropdown,
16
+ options: [...h.dropdown.options, {
17
+ id: f(),
18
+ key: "",
19
+ isNew: !0
20
+ }]
21
+ }), b(e);
22
+ }, [h.dropdown, v]), E = l(() => {
23
+ T(!0);
24
+ }, [T]);
25
+ u(() => {
26
+ x || T(!1);
27
+ }, [x, T]);
28
+ let D = l(() => {
29
+ b(!1);
30
+ }, []);
31
+ return /* @__PURE__ */ c("div", {
32
+ className: p.dropdownFieldConfiguration,
33
+ children: [
34
+ w && /* @__PURE__ */ s(r, {
35
+ variant: "error",
36
+ variantIconAriaLabel: m(t.optionListValidationError),
37
+ children: m(t.optionListValidationError)
38
+ }),
39
+ x && /* @__PURE__ */ s(n, {
40
+ shouldFocusLastOption: y,
41
+ onFocusConsumed: D
42
+ }),
43
+ /* @__PURE__ */ s(a, {
44
+ className: p.addOptionButton,
45
+ onClick: E,
46
+ children: m(t.addOption)
47
+ }),
48
+ /* @__PURE__ */ s(i.Item, {
49
+ name: "dropdown.allowMultipleSelections",
50
+ checked: h.dropdown.allowMultipleSelections,
51
+ disabled: !h.isFieldNew || h.isFieldReadOnly,
52
+ label: m(t.allowMultipleSelection),
53
+ onCheckedChange: (e) => v("dropdown", {
54
+ ...h.dropdown,
55
+ allowMultipleSelections: e
56
+ }),
57
+ value: "true"
58
+ })
59
+ ]
60
+ });
61
+ };
62
+ export { m as t };
@@ -0,0 +1,90 @@
1
+ import { general as e } from "../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";
2
+ import { Divider as t, DropdownMenu as n, IconButton as r, Text as i } from "@box/blueprint-web";
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 '../styles/field-context-menu.css';var v = {
10
+ contextMenuTrigger: "_contextMenuTrigger_102vn_1",
11
+ menuItem: "_menuItem_102vn_5",
12
+ contextMenu: "_contextMenu_102vn_1",
13
+ divider: "_divider_102vn_14"
14
+ }, y = ({ index: y, maxIndex: b, isHidden: x, onReorderFields: S, onToggleVisibility: C, onRequestDelete: w, onRequestDuplicate: T }) => {
15
+ let E = o(), [D, O] = u.useState(!1), k = u.useRef(null), A = () => {
16
+ y > 0 && S(y, y - 1);
17
+ }, j = () => {
18
+ S(y, y + 1);
19
+ };
20
+ return /* @__PURE__ */ c(n.Root, {
21
+ open: D,
22
+ onOpenChange: O,
23
+ modal: !1,
24
+ children: [/* @__PURE__ */ s(n.Trigger, {
25
+ className: v.contextMenuTrigger,
26
+ children: /* @__PURE__ */ s(r, {
27
+ icon: l,
28
+ "aria-label": E.formatMessage(e.contextMenuAriaLabel),
29
+ size: "large"
30
+ })
31
+ }), /* @__PURE__ */ c(n.Content, {
32
+ ref: k,
33
+ align: "end",
34
+ className: v.contextMenu,
35
+ children: [
36
+ /* @__PURE__ */ s(n.Item, {
37
+ disabled: y === 0,
38
+ onClick: A,
39
+ "aria-label": E.formatMessage(e.moveUpAriaLabel),
40
+ children: /* @__PURE__ */ c("div", {
41
+ className: v.menuItem,
42
+ children: [/* @__PURE__ */ s(p, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...e.moveUp })]
43
+ })
44
+ }),
45
+ /* @__PURE__ */ s(n.Item, {
46
+ disabled: y === b,
47
+ onClick: j,
48
+ "aria-label": E.formatMessage(e.moveDownAriaLabel),
49
+ children: /* @__PURE__ */ c("div", {
50
+ className: v.menuItem,
51
+ children: [/* @__PURE__ */ s(f, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...e.moveDown })]
52
+ })
53
+ }),
54
+ /* @__PURE__ */ s(n.Item, {
55
+ onClick: T,
56
+ "aria-label": E.formatMessage(e.duplicateFieldAriaLabel),
57
+ children: /* @__PURE__ */ c("div", {
58
+ className: v.menuItem,
59
+ children: [/* @__PURE__ */ s(g, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...e.duplicateField })]
60
+ })
61
+ }),
62
+ /* @__PURE__ */ s(n.Item, {
63
+ onClick: () => C(!x),
64
+ "aria-label": E.formatMessage(x ? e.showField : e.hideField),
65
+ children: /* @__PURE__ */ c("div", {
66
+ className: v.menuItem,
67
+ children: [s(x ? _ : m, { "aria-hidden": "true" }), /* @__PURE__ */ s(a, { ...x ? e.showField : e.hideField })]
68
+ })
69
+ }),
70
+ /* @__PURE__ */ s(t, { className: v.divider }),
71
+ /* @__PURE__ */ s(n.Item, {
72
+ onClick: w,
73
+ "aria-label": E.formatMessage(e.deleteFieldAriaLabel),
74
+ children: /* @__PURE__ */ c("div", {
75
+ className: v.menuItem,
76
+ children: [/* @__PURE__ */ s(h, {
77
+ color: d,
78
+ "aria-hidden": "true"
79
+ }), /* @__PURE__ */ s(i, {
80
+ as: "span",
81
+ color: "textOnLightError",
82
+ children: /* @__PURE__ */ s(a, { ...e.deleteField })
83
+ })]
84
+ })
85
+ })
86
+ ]
87
+ })]
88
+ });
89
+ };
90
+ export { y as t };
@@ -0,0 +1,23 @@
1
+ import e from "../esm/lib/components/field-selector/messages.js";
2
+ import { DropdownMenu as t, TextButton as n } from "@box/blueprint-web";
3
+ import { useIntl as r } from "react-intl";
4
+ import { ChevronDown as i } from "@box/blueprint-web-assets/icons/Medium";
5
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
+ import '../styles/field-selector.css';var s = { fieldSelectorTrigger: "_fieldSelectorTrigger_cj5ij_1" };
7
+ function c({ fields: c, onSelect: l }) {
8
+ let { formatMessage: u } = r();
9
+ return /* @__PURE__ */ o(t.Root, {
10
+ modal: !1,
11
+ children: [/* @__PURE__ */ a(t.Trigger, { children: /* @__PURE__ */ a(n, {
12
+ icon: i,
13
+ className: s.fieldSelectorTrigger,
14
+ variant: "bodyDefaultSemibold",
15
+ color: "textOnLightSecondary",
16
+ children: u(e.selectField)
17
+ }) }), /* @__PURE__ */ a(t.Content, { children: c.map((n) => /* @__PURE__ */ a(t.Item, {
18
+ onClick: () => l(n.id),
19
+ children: /* @__PURE__ */ a(t.Item.MainContent, { label: n.name || u(e.unnamedField) })
20
+ }, n.id)) })]
21
+ });
22
+ }
23
+ export { c as t };
@@ -0,0 +1,31 @@
1
+ import { useFieldOptions as e } from "../esm/lib/utils/field-options/useFieldOptions.js";
2
+ import { fieldTypeDropdownMessages as t } from "../esm/lib/components/field-type-dropdown/messages.js";
3
+ import { Button as n, DropdownMenu as r } from "@box/blueprint-web";
4
+ import { useIntl as i } from "react-intl";
5
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
+ import { Plus as s } from "@box/blueprint-web-assets/icons/Fill";
7
+ import '../styles/field-type-dropdown.css';var c = { addField: "_addField_1bl6g_1" };
8
+ function l({ onFieldAdd: l, trigger: u }) {
9
+ let { formatMessage: d } = i(), f = e();
10
+ return /* @__PURE__ */ o(r.Root, {
11
+ modal: !1,
12
+ children: [/* @__PURE__ */ a(r.Trigger, { children: u ?? /* @__PURE__ */ a(n, {
13
+ className: c.addField,
14
+ variant: "secondary",
15
+ size: "large",
16
+ startIcon: s,
17
+ "aria-label": d(t.addFieldAriaLabel),
18
+ children: d(t.addField)
19
+ }) }), /* @__PURE__ */ a(r.Content, { children: f.availableFieldTypes.map((e) => /* @__PURE__ */ o(r.Item, {
20
+ onClick: () => l(e),
21
+ children: [/* @__PURE__ */ a(r.Item.StartElement, { children: /* @__PURE__ */ a(e.Icon, {
22
+ fontSize: "15px",
23
+ "aria-hidden": "true"
24
+ }) }), /* @__PURE__ */ a(r.Item.MainContent, {
25
+ caption: e.description,
26
+ label: String(e.label)
27
+ })]
28
+ }, e.type)) })]
29
+ });
30
+ }
31
+ export { l as t };
@@ -0,0 +1,125 @@
1
+ import e from "../esm/lib/components/metadata-field-configurator/messages/levels-chain-messages.js";
2
+ import { t } from "./chip.js";
3
+ import { getHideCounts as n } from "../esm/lib/components/metadata-field-configurator/components/levels-chain/utils.js";
4
+ import { Text as r, Tooltip as i } from "@box/blueprint-web";
5
+ import { FormattedMessage as a } from "react-intl";
6
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
7
+ import { useEffect as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
8
+ import { IconIconOnLightSecondary as p } from "@box/blueprint-web-assets/tokens/tokens";
9
+ import { ArrowRight as m } from "@box/blueprint-web-assets/icons/Line";
10
+ import '../styles/levels-chain.css';var h = {
11
+ levelsChain: "_levelsChain_1wuki_1",
12
+ hiddenLevelsButton: "_hiddenLevelsButton_1wuki_11"
13
+ };
14
+ function g(e) {
15
+ let t = Math.ceil(e.length / 2);
16
+ return [e.slice(0, t), e.slice(t)];
17
+ }
18
+ var _ = ({ levels: _ = [], selectedLevels: v = [] }) => {
19
+ let [y, b] = g(_), [x, S] = f(!1), [C, w] = f([]), [T, E] = f([]), [D, O] = f(0), [k, A] = f(0), j = d(null), M = d(null), N = u(() => {
20
+ let e = j.current ? window.getComputedStyle(j.current) : { gap: "11px" };
21
+ return parseInt(e.gap, 10);
22
+ }, [j.current]), P = /* @__PURE__ */ o(m, {
23
+ color: p,
24
+ "aria-hidden": "true"
25
+ });
26
+ c(() => {
27
+ S(!1);
28
+ }, [_]), l(() => {
29
+ if (j.current && !x && _.length > 0) {
30
+ let e = j.current;
31
+ A(e.clientWidth);
32
+ let t = e.querySelectorAll("li"), n = Array.from(t).slice(0, y.length), r = Array.from(t).slice(y.length + 1);
33
+ w(n.map((e) => e.getBoundingClientRect().width)), E(r.map((e) => e.getBoundingClientRect().width)), M.current && O(M.current.getBoundingClientRect().width), S(!0);
34
+ }
35
+ }, [
36
+ y,
37
+ b,
38
+ x,
39
+ _.length
40
+ ]), c(() => {
41
+ let e = () => {
42
+ j.current && A(j.current.clientWidth);
43
+ };
44
+ return window.addEventListener("resize", e), () => {
45
+ window.removeEventListener("resize", e);
46
+ };
47
+ }, []);
48
+ let [F, I] = u(() => n({
49
+ isMeasured: x,
50
+ leftLevelWidths: C,
51
+ rightLevelWidths: T,
52
+ containerWidthPx: k,
53
+ buttonWidthPx: D,
54
+ gapBetweenItems: N
55
+ }), [
56
+ x,
57
+ C,
58
+ T,
59
+ k,
60
+ D,
61
+ N
62
+ ]), L = u(() => {
63
+ let e = y.slice(y.length - F), t = b.slice(0, I);
64
+ return [...e, ...t];
65
+ }, [
66
+ F,
67
+ I,
68
+ y,
69
+ b
70
+ ]), R = L.some((e) => v.includes(e.level));
71
+ return _.length === 0 ? /* @__PURE__ */ o("div", {
72
+ role: "alert",
73
+ children: /* @__PURE__ */ o(a, { ...e.noLevels })
74
+ }) : /* @__PURE__ */ s("ul", {
75
+ ref: j,
76
+ className: h.levelsChain,
77
+ "data-testid": "taxonomy-levels-chain",
78
+ children: [
79
+ y.map((e, n) => {
80
+ let r = x && n >= y.length - F;
81
+ return /* @__PURE__ */ s("li", {
82
+ className: h.left,
83
+ style: { display: r ? "none" : void 0 },
84
+ "aria-hidden": r,
85
+ children: [/* @__PURE__ */ o(t, {
86
+ value: e.name,
87
+ selected: v.includes(e.level)
88
+ }), y.length + b.length > 1 ? P : null]
89
+ }, e.level);
90
+ }),
91
+ /* @__PURE__ */ s("li", {
92
+ ref: M,
93
+ style: x ? F > 0 || I > 0 ? {} : { display: "none" } : {
94
+ position: "absolute",
95
+ visibility: "hidden"
96
+ },
97
+ "aria-hidden": !(F > 0 || I > 0),
98
+ tabIndex: x && (F > 0 || I > 0) ? 0 : -1,
99
+ children: [/* @__PURE__ */ o(i, {
100
+ content: L.map((e) => e.name).join(" > "),
101
+ children: /* @__PURE__ */ o(r, {
102
+ as: "span",
103
+ children: /* @__PURE__ */ o(t, {
104
+ value: `+${F + I}`,
105
+ selected: R
106
+ })
107
+ })
108
+ }), P]
109
+ }),
110
+ b.map((e, n) => {
111
+ let r = x && n < I;
112
+ return /* @__PURE__ */ s("li", {
113
+ className: h.right,
114
+ style: { display: r ? "none" : void 0 },
115
+ "aria-hidden": r,
116
+ children: [/* @__PURE__ */ o(t, {
117
+ value: e.name,
118
+ selected: v.includes(e.level)
119
+ }), n < b.length - 1 && P]
120
+ }, e.level);
121
+ })
122
+ ]
123
+ });
124
+ };
125
+ export { _ as t };
@@ -1,17 +1,18 @@
1
- import '../styles/metadata-field-configurator.css';const e = "_fieldset_1bz4h_1", n = "_extensionTabsContainer_1bz4h_13", t = "_extensionContent_1bz4h_21", o = "_fieldAccordionItem_1bz4h_25", i = "_expandedToolbarActions_1bz4h_29", s = "_dragHandle_1bz4h_41", c = "_expandedContent_1bz4h_75", _ = "_basic_1bz4h_81", d = "_fieldTypeSelect_1bz4h_86", a = "_typeSpecific_1bz4h_90", l = "_description_1bz4h_97", b = "_labelWithTooltip_1bz4h_102", p = {
2
- fieldset: e,
3
- extensionTabsContainer: n,
4
- extensionContent: t,
5
- fieldAccordionItem: o,
6
- expandedToolbarActions: i,
7
- dragHandle: s,
8
- expandedContent: c,
9
- basic: _,
10
- fieldTypeSelect: d,
11
- typeSpecific: a,
12
- description: l,
13
- labelWithTooltip: b
14
- };
15
- export {
16
- p as s
1
+ import '../styles/metadata-field-configurator.css';var e = {
2
+ fieldset: "_fieldset_1bz4h_1",
3
+ toolbarActions: "_toolbarActions_1bz4h_7",
4
+ extensionTabsContainer: "_extensionTabsContainer_1bz4h_13",
5
+ extensionContent: "_extensionContent_1bz4h_21",
6
+ fieldAccordionItem: "_fieldAccordionItem_1bz4h_25",
7
+ expandedToolbarActions: "_expandedToolbarActions_1bz4h_29",
8
+ dragHandle: "_dragHandle_1bz4h_41",
9
+ errorIcon: "_errorIcon_1bz4h_65",
10
+ validationErrors: "_validationErrors_1bz4h_71",
11
+ expandedContent: "_expandedContent_1bz4h_75",
12
+ basic: "_basic_1bz4h_81",
13
+ fieldTypeSelect: "_fieldTypeSelect_1bz4h_86",
14
+ typeSpecific: "_typeSpecific_1bz4h_90",
15
+ description: "_description_1bz4h_97",
16
+ labelWithTooltip: "_labelWithTooltip_1bz4h_102"
17
17
  };
18
+ export { e as t };
@@ -0,0 +1,229 @@
1
+ import { a as e } from "./types.js";
2
+ import { FieldTypeIcon as t } from "../esm/lib/utils/field-options/field-type-icon.js";
3
+ import { general as n } from "../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";
4
+ import { useTemplateFieldSchema as r } from "../esm/lib/components/metadata-field-configurator/hooks/useTemplateFieldSchema.js";
5
+ import { TaxonomyOptionsContext as i } from "../esm/lib/components/metadata-field-configurator/context/taxonomy-options-context.js";
6
+ import { FieldExtensionsContext as a } from "../esm/lib/components/metadata-field-configurator/context/field-extensions-context.js";
7
+ import { useTaxonomyFetch as o } from "../esm/lib/components/metadata-field-configurator/hooks/useTaxonomyFetch.js";
8
+ import { MetadataFieldConfigurator as s } from "../esm/lib/components/metadata-field-configurator/metadata-field-configurator.js";
9
+ import { Accordion as c } from "@box/blueprint-web";
10
+ import { useIntl as l } from "react-intl";
11
+ import { jsx as u, jsxs as d } from "react/jsx-runtime";
12
+ import { forwardRef as f, useCallback as p, useEffect as m, useImperativeHandle as h, useRef as g, useState as _ } from "react";
13
+ import * as v from "yup";
14
+ import ee from "lodash/cloneDeep";
15
+ import y from "lodash/uniqueId";
16
+ import { DndContext as te, DragOverlay as ne, KeyboardSensor as b, PointerSensor as re, TouchSensor as x, closestCenter as S, useSensor as C, useSensors as ie } from "@dnd-kit/core";
17
+ import { SortableContext as ae, arrayMove as w, sortableKeyboardCoordinates as T, useSortable as E, verticalListSortingStrategy as oe } from "@dnd-kit/sortable";
18
+ import { CSS as D } from "@dnd-kit/utilities";
19
+ import O from "clsx";
20
+ import '../styles/metadata-field-list.css';var k = {
21
+ fieldList: "_fieldList_18x5c_1",
22
+ fieldItem: "_fieldItem_18x5c_11",
23
+ dragging: "_dragging_18x5c_11",
24
+ accordionRootContainer: "_accordionRootContainer_18x5c_15"
25
+ }, A = 150;
26
+ function j(e) {
27
+ return e.id;
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 } = E({ id: f });
32
+ return /* @__PURE__ */ u("li", {
33
+ ref: h,
34
+ style: {
35
+ transform: D.Translate.toString(g),
36
+ transition: _
37
+ },
38
+ "data-field-id": f,
39
+ className: O(k.fieldItem, { [k.dragging]: v }),
40
+ children: /* @__PURE__ */ u(s, {
41
+ values: e,
42
+ onValuesChange: i,
43
+ index: t,
44
+ maxIndex: n,
45
+ onDelete: () => a(t),
46
+ onDuplicate: () => o(t),
47
+ onReorderFields: c,
48
+ dndDragHandleProps: {
49
+ listeners: m,
50
+ attributes: p
51
+ },
52
+ isExpanded: r,
53
+ onExpandedChange: (e) => {
54
+ e && l();
55
+ },
56
+ submitAttemptCount: d
57
+ })
58
+ });
59
+ }
60
+ var P = /* @__PURE__ */ f(function({ fields: s, onChangeFields: f, onDeleteFieldAtIndex: E, 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);
62
+ m(() => {
63
+ K.current = null;
64
+ }, [R]), m(() => {
65
+ if (!R) return;
66
+ let e = !1, t = setTimeout(() => {
67
+ v.array().of(G).validate(s, { abortEarly: !0 }).then(() => {
68
+ e || K.current === !0 || (K.current = !0, R(!0));
69
+ }).catch(() => {
70
+ e || K.current === !1 || (K.current = !1, R(!1));
71
+ });
72
+ }, A);
73
+ return () => {
74
+ e = !0, clearTimeout(t);
75
+ };
76
+ }, [
77
+ s,
78
+ G,
79
+ R
80
+ ]);
81
+ let [q, J] = _(() => {
82
+ let e = s.find((e) => e.isFieldNew);
83
+ return e ? j(e) : null;
84
+ });
85
+ h(z, () => ({ scrollToAndExpand(e) {
86
+ U.current = e, q === e ? (U.current = null, setTimeout(() => {
87
+ (H.current?.querySelector(`[data-field-id="${e}"]`))?.scrollIntoView({
88
+ behavior: "smooth",
89
+ block: "nearest"
90
+ });
91
+ }, 0)) : J(e);
92
+ } }), [q]), m(() => {
93
+ s.forEach((e) => {
94
+ let t = j(e);
95
+ W.current.has(t) || (W.current.add(t), U.current = t, J(t));
96
+ });
97
+ }, [s]), m(() => {
98
+ if (F == null || !I) return;
99
+ let e = s[F];
100
+ if (!e) return;
101
+ let t = j(e);
102
+ J(t), requestAnimationFrame(() => {
103
+ (H.current?.querySelector(`[data-field-id="${t}"]`))?.scrollIntoView({
104
+ behavior: "smooth",
105
+ block: "nearest"
106
+ });
107
+ });
108
+ }, [I]), m(() => {
109
+ let e = U.current;
110
+ if (!e || e !== q) return;
111
+ U.current = null;
112
+ let t = setTimeout(() => {
113
+ (H.current?.querySelector(`[data-field-id="${e}"]`))?.scrollIntoView({
114
+ behavior: "smooth",
115
+ block: "nearest"
116
+ });
117
+ }, M);
118
+ return () => clearTimeout(t);
119
+ }, [q]);
120
+ let [Y, X] = _(null), se = ie(C(re, { activationConstraint: { distance: 8 } }), C(x, { activationConstraint: {
121
+ delay: 250,
122
+ tolerance: 5
123
+ } }), C(b, { coordinateGetter: T })), ce = p((e) => {
124
+ X(String(e.active.id));
125
+ }, []), le = p((e) => {
126
+ X(null);
127
+ let { active: t, over: n } = e;
128
+ 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?.(w(s, e, r));
131
+ }
132
+ }, [s, f]), ue = p(() => {
133
+ X(null);
134
+ }, []), de = p((e, t) => {
135
+ f?.(s.map((n, r) => r === e ? t : n));
136
+ }, [s, f]), fe = p((e) => {
137
+ let t = s[e], n = j(t);
138
+ J((e) => e === n ? null : e), f?.(s.filter((t, n) => n !== e)), E?.(e, t);
139
+ }, [
140
+ s,
141
+ f,
142
+ E
143
+ ]), pe = p((t) => {
144
+ let n = s[t], r = ee(n);
145
+ r.id = y("field-"), r.key = "", r.isFieldNew = !0, r.type === e.Dropdown && (r.dropdown.options = r.dropdown.options.map((e) => ({
146
+ ...e,
147
+ id: y()
148
+ })));
149
+ let i = [...s];
150
+ i.splice(t + 1, 0, r), f?.(i), D?.(r);
151
+ }, [
152
+ s,
153
+ f,
154
+ D
155
+ ]), me = p((e, t) => {
156
+ t < 0 || t >= s.length || f?.(w(s, e, t));
157
+ }, [s, f]), he = p((e) => {
158
+ let t = e || null;
159
+ J(t), t && setTimeout(() => {
160
+ (H.current?.querySelector(`[data-field-id="${t}"]`))?.scrollIntoView({
161
+ behavior: "smooth",
162
+ block: "nearest"
163
+ });
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) => {
166
+ let r = t.name || B(n.fieldNameInputPlaceholder);
167
+ return t.type === e.Dropdown ? `${r} (${t.dropdown?.options?.length ?? 0})` : r;
168
+ })(Z) : "", $ = /* @__PURE__ */ u(i.Provider, {
169
+ value: V,
170
+ children: /* @__PURE__ */ d(te, {
171
+ sensors: se,
172
+ collisionDetection: S,
173
+ onDragStart: ce,
174
+ onDragEnd: le,
175
+ onDragCancel: ue,
176
+ children: [/* @__PURE__ */ u("div", {
177
+ className: k.accordionRootContainer,
178
+ children: /* @__PURE__ */ u(c, {
179
+ type: "single",
180
+ collapsible: !0,
181
+ value: q ?? "",
182
+ onValueChange: he,
183
+ children: /* @__PURE__ */ u(ae, {
184
+ items: ge,
185
+ strategy: oe,
186
+ children: /* @__PURE__ */ u("ul", {
187
+ ref: H,
188
+ className: k.fieldList,
189
+ children: s.map((e, t) => {
190
+ let n = j(e);
191
+ return /* @__PURE__ */ u(N, {
192
+ field: e,
193
+ index: t,
194
+ maxIndex: s.length - 1,
195
+ isExpanded: q === n,
196
+ onChangeField: (e) => de(t, e),
197
+ onDeleteAtIndex: fe,
198
+ onDuplicateAtIndex: pe,
199
+ onReorderFields: me,
200
+ onRequestExpand: () => J(n),
201
+ submitAttemptCount: I
202
+ }, n);
203
+ })
204
+ })
205
+ })
206
+ })
207
+ }), /* @__PURE__ */ u(ne, {
208
+ dropAnimation: null,
209
+ children: Z && Q ? /* @__PURE__ */ u(c, {
210
+ type: "single",
211
+ children: /* @__PURE__ */ u(c.Item, {
212
+ value: "ghost",
213
+ title: _e,
214
+ startElement: /* @__PURE__ */ u(Q, {
215
+ fontSize: "20px",
216
+ role: "presentation"
217
+ }),
218
+ children: null
219
+ })
220
+ }) : null
221
+ })]
222
+ })
223
+ });
224
+ return L === void 0 ? $ : /* @__PURE__ */ u(a.Provider, {
225
+ value: L,
226
+ children: $
227
+ });
228
+ });
229
+ export { P as t };