@box/metadata-template-editor 1.19.0

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/dropdown/dropdown-field-configuration.js

@@ -0,0 +1,66 @@
+import { InlineNotice as g, TextButton as v, Switch as S } from "@box/blueprint-web";
+import k from "lodash/uniqueId";
+import { useState as L, useCallback as l, useEffect as _ } from "react";
+import { useIntl as b } from "react-intl";
+import { useFieldConfigurator as y } from "../../../context/field-configurator-context.js";
+import d from "../../../messages/dropdown-messages.js";
+import { SortableOptionList as B } from "./sortable-option-list.js";
+import { jsxs as E, jsx as i } from "react/jsx-runtime";
+import '../../../../../../../styles/dropdown-field-configuration.css';const I = "_dropdownFieldConfiguration_rjv8w_1", N = "_addOptionButton_rjv8w_7", p = {
+  dropdownFieldConfiguration: I,
+  addOptionButton: N
+}, R = () => {
+  const {
+    formatMessage: t
+  } = b(), {
+    values: o,
+    errors: u,
+    touched: c,
+    setFieldValue: r
+  } = y(), [w, a] = L(!1), s = o.dropdown.options.length > 0, m = u.dropdown, f = c.dropdown, h = m?.options?.some((n, C) => n?.key && f?.options?.[C]), e = l((n = !1) => {
+    r("dropdown", {
+      ...o.dropdown,
+      options: [...o.dropdown.options, {
+        id: k(),
+        key: "",
+        isNew: !0
+      }]
+    }), a(n);
+  }, [o.dropdown, r]), F = l(() => {
+    e(!0);
+  }, [e]);
+  _(() => {
+    s || e(!1);
+  }, [s, e]);
+  const O = l(() => {
+    a(!1);
+  }, []);
+  return /* @__PURE__ */ E("div", {
+    className: p.dropdownFieldConfiguration,
+    children: [h && /* @__PURE__ */ i(g, {
+      variant: "error",
+      variantIconAriaLabel: t(d.optionListValidationError),
+      children: t(d.optionListValidationError)
+    }), s && /* @__PURE__ */ i(B, {
+      shouldFocusLastOption: w,
+      onFocusConsumed: O
+    }), /* @__PURE__ */ i(v, {
+      className: p.addOptionButton,
+      onClick: F,
+      children: t(d.addOption)
+    }), /* @__PURE__ */ i(S.Item, {
+      name: "dropdown.allowMultipleSelections",
+      checked: o.dropdown.allowMultipleSelections,
+      disabled: !o.isFieldNew || o.isFieldReadOnly,
+      label: t(d.allowMultipleSelection),
+      onCheckedChange: (n) => r("dropdown", {
+        ...o.dropdown,
+        allowMultipleSelections: n
+      }),
+      value: "true"
+    })]
+  });
+};
+export {
+  R as DropdownFieldConfiguration
+};

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/dropdown/sortable-option-list.js

@@ -0,0 +1,294 @@
+import { TextInput as K, IconButton as $ } from "@box/blueprint-web";
+import { DragDots as F } from "@box/blueprint-web-assets/icons/Fill";
+import { Trash as V } from "@box/blueprint-web-assets/icons/Line";
+import { useSensors as te, useSensor as B, PointerSensor as ne, TouchSensor as oe, KeyboardSensor as re, DndContext as ie, closestCenter as ae, DragOverlay as le } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as de, SortableContext as se, verticalListSortingStrategy as ce, arrayMove as R, useSortable as ue } from "@dnd-kit/sortable";
+import { CSS as pe } from "@dnd-kit/utilities";
+import J from "clsx";
+import me from "lodash/uniqueId";
+import { useState as S, useRef as fe, useEffect as E, useCallback as G } from "react";
+import { useIntl as ge } from "react-intl";
+import { useFieldConfigurator as he } from "../../../context/field-configurator-context.js";
+import v from "../../../messages/dropdown-messages.js";
+import be from "../../confirmation-modal/confirmation-modal.js";
+import { jsxs as L, Fragment as ye, jsx as o } from "react/jsx-runtime";
+import '../../../../../../../styles/sortable-option-list.css';const Ce = "_sortableOptionList_1cieq_1", ve = "_option_1cieq_9", De = "_editable_1cieq_9", _e = "_dragging_1cieq_22", Oe = "_dragHandle_1cieq_26", we = "_input_1cieq_41", Ie = "_deleteButtonContainer_1cieq_52", Se = "_optionDragOverlay_1cieq_58", r = {
+  sortableOptionList: Ce,
+  option: ve,
+  editable: De,
+  dragging: _e,
+  dragHandle: Oe,
+  input: we,
+  deleteButtonContainer: Ie,
+  optionDragOverlay: Se
+};
+function Ne(a, u, t, s, D, l) {
+  const p = (
+    // Guard 1: was this option's field interacted with?
+    u?.dropdown?.options?.[t] && // Guard 2: errors is a non-null object (required for property access below)
+    typeof a == "object" && a !== null && // Guard 3: errors.dropdown is an object (i.e. there are dropdown-level errors)
+    typeof a.dropdown == "object" && // Finally: read the `key` validation error for this specific option, if present
+    a.dropdown?.options?.[t]?.key
+  );
+  if (typeof p != "string")
+    return "";
+  if (l !== null && s.id !== l) {
+    const h = D.find((b) => b.id === l)?.key;
+    if (
+      // Guard 1: lastChangedKey is non-null (i.e. the user has edited an option)
+      !!h && // Guard 2: the current option's key matches the last-edited option's key
+      s.key === h && // Guard 3: there is at least one other option in the group with the same key
+      D.some((b, _) => _ !== t && b.key === h)
+    )
+      return "";
+  }
+  return p;
+}
+function Te({
+  option: a,
+  index: u,
+  isFieldReadOnly: t,
+  onInputChange: s,
+  onDelete: D,
+  onInputRef: l,
+  error: p,
+  handleBlur: h,
+  canDelete: w,
+  dragAriaLabel: b,
+  inputPlaceholder: _,
+  deleteAriaLabel: I
+}) {
+  const {
+    attributes: y,
+    listeners: n,
+    setNodeRef: O,
+    transform: N,
+    transition: T,
+    isDragging: m
+  } = ue({
+    id: a.id
+  }), k = {
+    transform: pe.Translate.toString(N),
+    transition: T
+  };
+  return /* @__PURE__ */ L("li", {
+    ref: O,
+    style: k,
+    className: J(r.option, {
+      [r.dragging]: m,
+      [r.editable]: !t
+    }),
+    children: [!t && /* @__PURE__ */ o("div", {
+      className: r.dragHandle,
+      ...n,
+      ...y,
+      "aria-label": b,
+      tabIndex: -1,
+      children: /* @__PURE__ */ o(F, {
+        fontSize: 20,
+        "aria-hidden": "true"
+      })
+    }), /* @__PURE__ */ o(K, {
+      disabled: t,
+      placeholder: _,
+      label: _,
+      hideLabel: !0,
+      onBlur: h,
+      id: `dropdown.options.${u}.key`,
+      name: `dropdown.options.${u}.key`,
+      value: a.key,
+      className: r.input,
+      onChange: (C) => s(C, a.id),
+      ref: (C) => l(C, u),
+      error: p
+    }), !t && /* @__PURE__ */ o("div", {
+      className: r.deleteButtonContainer,
+      children: /* @__PURE__ */ o($, {
+        onClick: () => D(a),
+        "aria-label": I,
+        icon: V,
+        size: "x-small",
+        variant: "default",
+        tabIndex: -1,
+        focusable: !0,
+        disabled: !w,
+        className: r.deleteButton
+      })
+    })]
+  });
+}
+function Ke({
+  shouldFocusLastOption: a = !1,
+  onFocusConsumed: u
+}) {
+  const {
+    formatMessage: t
+  } = ge(), {
+    values: s,
+    errors: D,
+    touched: l,
+    setFieldValue: p,
+    setFieldTouched: h,
+    setTouched: w,
+    handleBlur: b
+  } = he(), _ = te(B(ne, {
+    activationConstraint: {
+      distance: 8
+    }
+  }), B(oe, {
+    activationConstraint: {
+      delay: 250,
+      tolerance: 5
+    }
+  }), B(re, {
+    coordinateGetter: de
+  })), {
+    options: I
+  } = s.dropdown, {
+    isFieldReadOnly: y
+  } = s, [n, O] = S(I), [N, T] = S(null), m = fe(null), [k, C] = S(null), [Q, q] = S(!1), [M, H] = S(null);
+  E(() => {
+    O(I);
+  }, [I]), E(() => () => {
+    m.current && clearTimeout(m.current);
+  }, []);
+  const x = G((e) => {
+    p("dropdown", {
+      ...s.dropdown,
+      options: e
+    });
+  }, [s.dropdown, p]), U = (e, i) => {
+    T(i);
+    const c = n.map((d, f) => d.id === i ? (h(`dropdown.options.${f}.key`, !0), {
+      ...d,
+      key: e.target.value
+    }) : d);
+    O(c), x(c);
+  }, j = () => {
+    H(null), q(!1);
+  }, z = (e) => {
+    if (!e)
+      return;
+    const i = n.filter((f) => f.id !== e);
+    O(i), x(i), e === N && T(null);
+    const c = {
+      ...l
+    }, d = c.dropdown;
+    d?.options && (d.options = d.options.filter((f, g) => n[g]?.id !== e)), w(c), i.length === 0 && p("dropdown", {
+      ...s.dropdown,
+      options: [{
+        id: me(),
+        key: "",
+        isNew: !0
+      }]
+    }), j();
+  }, W = (e) => {
+    e.isNew ? z(e.id) : (H(e), q(!0));
+  }, X = ({
+    active: e
+  }) => {
+    C(String(e.id));
+  }, Y = () => {
+    C(null);
+  }, Z = (e) => {
+    C(null);
+    const {
+      active: i,
+      over: c
+    } = e;
+    if (c && i.id !== c.id) {
+      const d = n.findIndex((g) => g.id === i.id), f = n.findIndex((g) => g.id === c.id);
+      if (d !== -1 && f !== -1) {
+        const g = R(n, d, f);
+        O(g), x(g);
+        const A = l?.dropdown?.options;
+        A && A.length > 0 && w({
+          ...l,
+          dropdown: {
+            ...l.dropdown ?? {},
+            options: R(A, d, f)
+          }
+        });
+      }
+    }
+  }, ee = G((e, i) => {
+    e && a && i === n.length - 1 && (m.current && clearTimeout(m.current), m.current = setTimeout(() => {
+      e.focus(), u(), m.current = null;
+    }, 0));
+  }, [a, u, n.length]), P = k ? n.find((e) => e.id === k) : null;
+  return /* @__PURE__ */ L(ye, {
+    children: [/* @__PURE__ */ L(ie, {
+      sensors: _,
+      collisionDetection: ae,
+      onDragStart: X,
+      onDragEnd: Z,
+      onDragCancel: Y,
+      children: [/* @__PURE__ */ o(se, {
+        items: n.map((e) => e.id),
+        strategy: ce,
+        children: /* @__PURE__ */ o("ul", {
+          className: r.sortableOptionList,
+          children: n.map((e, i) => /* @__PURE__ */ o(Te, {
+            option: e,
+            index: i,
+            isFieldReadOnly: !!y,
+            onInputChange: U,
+            onDelete: W,
+            onInputRef: ee,
+            error: Ne(D, l, i, e, n, N),
+            handleBlur: b,
+            canDelete: n.length >= 2,
+            dragAriaLabel: t(v.dragAndDropOptionAriaLabel),
+            inputPlaceholder: t(v.addAnOptionOptionPlaceholder),
+            deleteAriaLabel: t(v.deleteDropdownOptionAriaLabel)
+          }, e.id))
+        })
+      }), /* @__PURE__ */ o(le, {
+        dropAnimation: null,
+        children: P ? /* @__PURE__ */ L("li", {
+          className: J(r.option, r.optionDragOverlay, {
+            [r.editable]: !y
+          }),
+          children: [!y && /* @__PURE__ */ o("div", {
+            className: r.dragHandle,
+            children: /* @__PURE__ */ o(F, {
+              fontSize: 20,
+              "aria-hidden": "true"
+            })
+          }), /* @__PURE__ */ o(K, {
+            disabled: y,
+            placeholder: t(v.addAnOptionOptionPlaceholder),
+            label: t(v.addAnOptionOptionPlaceholder),
+            hideLabel: !0,
+            id: "drag-overlay-option",
+            name: "drag-overlay-option",
+            value: P.key,
+            className: r.input
+          }), !y && /* @__PURE__ */ o("div", {
+            className: r.deleteButtonContainer,
+            children: /* @__PURE__ */ o($, {
+              icon: V,
+              size: "x-small",
+              variant: "default",
+              tabIndex: -1,
+              focusable: !0,
+              disabled: n.length < 2,
+              className: r.deleteButton,
+              "aria-label": ""
+            })
+          })]
+        }) : null
+      })]
+    }), Q && /* @__PURE__ */ o(be, {
+      onClose: j,
+      onConfirm: () => z(M?.id ?? null),
+      title: t(v.deleteOptionTitle, {
+        optionName: M?.key ?? ""
+      }),
+      body: t(v.deleteOptionDescription)
+    })]
+  });
+}
+export {
+  Ke as SortableOptionList
+};

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/index.js

@@ -0,0 +1,6 @@
+import { DropdownFieldConfiguration as i } from "./dropdown/dropdown-field-configuration.js";
+import { TaxonomyFieldConfiguration as e } from "./taxonomy/taxonomy-field-configuration.js";
+export {
+  i as DropdownFieldConfiguration,
+  e as TaxonomyFieldConfiguration
+};

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-default-values.js

@@ -0,0 +1,15 @@
+import { T as e } from "../../../../../../../chunks/types.js";
+const a = {
+  taxonomy: {
+    availableTaxonomies: [],
+    allowMultipleSelections: !1,
+    selection: e.RequireSpecific,
+    selectedLevels: [],
+    taxonomySearchValue: "",
+    taxonomyKey: "",
+    namespace: ""
+  }
+};
+export {
+  a as taxonomyDefaultValues
+};

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-field-configuration.js

@@ -0,0 +1,149 @@
+import { InlineNotice as I, Switch as M, TextButton as h, Radio as y, DropdownMenu as x } from "@box/blueprint-web";
+import { Caret as p } from "@box/blueprint-web-assets/icons/Fill";
+import { useMemo as R, useEffect as V } from "react";
+import { useIntl as A } from "react-intl";
+import { useFieldConfigurator as q } from "../../../context/field-configurator-context.js";
+import { useTaxonomyOptions as N } from "../../../context/taxonomy-options-context.js";
+import t from "../../../messages/taxonomy-messages.js";
+import { TaxonomyFieldConfiguratorInitialState as k } from "./taxonomy-field-configurator-initial-state.js";
+import { TaxonomySelector as E } from "./taxonomy-selector.js";
+import { T as a } from "../../../../../../../chunks/types.js";
+import { useTaxonomySelect as K } from "./useTaxonomySelect.js";
+import { filterTaxonomiesByValue as B } from "./utils.js";
+import { jsxs as c, Fragment as v, jsx as l } from "react/jsx-runtime";
+import { LevelsChain as O } from "../../levels-chain/levels-chain.js";
+import '../../../../../../../styles/taxonomy-field-configuration.css';const _ = "_taxonomyFieldConfiguration_ylhrs_1", j = {
+  taxonomyFieldConfiguration: _
+}, oe = () => {
+  const {
+    formatMessage: n
+  } = A(), {
+    values: e,
+    errors: S,
+    touched: g,
+    setFieldValue: r
+  } = q(), {
+    onTaxonomySelect: T
+  } = K({
+    values: e,
+    setFieldValue: r
+  }), {
+    options: u
+  } = N(), i = e.taxonomy.availableTaxonomies.find((o) => o.selected), {
+    selectedLevels: f
+  } = e.taxonomy, m = R(() => i ? i.levels : [], [i]), C = e.taxonomy.selection === a.RequireSpecific && f.length > 0 ? m[f[0] - 1]?.name : void 0;
+  V(
+    () => {
+      if (u.length > 0) {
+        const o = {
+          ...e.taxonomy,
+          availableTaxonomies: u.map((d) => ({
+            ...d,
+            selected: d.taxonomyKey === e.taxonomy.taxonomyKey
+          })),
+          selectedLevels: e.taxonomy.selectedLevels,
+          selection: e.taxonomy.selectedLevels.length > 1 ? a.AllowAny : a.RequireSpecific
+        };
+        r("taxonomy", o);
+      }
+    },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [u]
+  );
+  const b = (o) => {
+    const d = o === a.AllowAny ? m.map((F) => F.level) : [m[0].level];
+    r("taxonomy", {
+      ...e.taxonomy,
+      selection: o,
+      selectedLevels: d
+    });
+  }, L = i?.label ?? n(t.chooseTaxonomyLevel), w = !!S.taxonomy?.taxonomyKey && !!g.taxonomy?.taxonomyKey;
+  if (!i && e.isFieldNew)
+    return /* @__PURE__ */ c(v, {
+      children: [w && /* @__PURE__ */ l(I, {
+        variant: "error",
+        variantIconAriaLabel: n(t.noTaxonomySelectedError),
+        children: n(t.noTaxonomySelectedError)
+      }), /* @__PURE__ */ l(k, {})]
+    });
+  const s = e.isFieldReadOnly || !e.isFieldNew;
+  return /* @__PURE__ */ c("div", {
+    className: j.taxonomyFieldConfiguration,
+    children: [/* @__PURE__ */ l(M.Item, {
+      name: "allowMultipleSelections",
+      disabled: s,
+      checked: e.taxonomy.allowMultipleSelections,
+      label: n(t.allowMultipleTaxonomySelections),
+      onCheckedChange: (o) => {
+        r("taxonomy", {
+          ...e.taxonomy,
+          allowMultipleSelections: o
+        });
+      },
+      value: e.taxonomy.allowMultipleSelections.toString()
+    }), /* @__PURE__ */ l("div", {
+      children: /* @__PURE__ */ l(E, {
+        triggerButton: /* @__PURE__ */ l(h, {
+          disabled: s,
+          icon: p,
+          children: L
+        }),
+        data: B(e.taxonomy.availableTaxonomies, e.taxonomy.taxonomySearchValue),
+        onClick: T,
+        onSearchValue: (o) => {
+          r("taxonomy", {
+            ...e.taxonomy,
+            taxonomySearchValue: o
+          });
+        }
+      })
+    }), m.length > 0 && /* @__PURE__ */ l(O, {
+      levels: m,
+      selectedLevels: f
+    }), i && m.length > 1 && /* @__PURE__ */ l(y.Legend, {
+      header: n(t.selection),
+      children: /* @__PURE__ */ c(y.Group, {
+        disabled: s,
+        defaultValue: a.RequireSpecific,
+        loop: !0,
+        name: "selection",
+        onValueChange: b,
+        orientation: "vertical",
+        value: e.taxonomy.selection,
+        children: [/* @__PURE__ */ l(y.Item, {
+          label: /* @__PURE__ */ c(v, {
+            children: [n(t.requiredSelection), /* @__PURE__ */ c(x.Root, {
+              modal: !1,
+              children: [/* @__PURE__ */ l(x.Trigger, {
+                disabled: e.taxonomy.selection !== a.RequireSpecific || s,
+                children: /* @__PURE__ */ l(h, {
+                  icon: p,
+                  children: C ?? n(t.chooseTaxonomyLevel)
+                })
+              }), /* @__PURE__ */ l(x.Content, {
+                align: "start",
+                children: i?.levels?.map((o) => /* @__PURE__ */ l(x.Item, {
+                  onClick: () => {
+                    r("taxonomy", {
+                      ...e.taxonomy,
+                      selectedLevels: [o.level]
+                    });
+                  },
+                  children: o.name
+                }, o.level))
+              })]
+            })]
+          }),
+          value: a.RequireSpecific
+        }), /* @__PURE__ */ l(y.Item, {
+          disabled: s,
+          label: n(t.anyLevelSelection),
+          value: a.AllowAny
+        })]
+      })
+    })]
+  });
+};
+export {
+  oe as TaxonomyFieldConfiguration
+};

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-field-configurator-initial-state.js

@@ -0,0 +1,54 @@
+import { Text as a } from "@box/blueprint-web";
+import { FormattedMessage as r } from "react-intl";
+import { useFieldConfigurator as s } from "../../../context/field-configurator-context.js";
+import i from "../../../messages/taxonomy-messages.js";
+import { useTaxonomySelect as u } from "./useTaxonomySelect.js";
+import { filterTaxonomiesByValue as c } from "./utils.js";
+import { TaxonomySelector as d } from "./taxonomy-selector.js";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import '../../../../../../../styles/taxonomy-field-configurator-initial-state.css';const f = "_taxonomyFieldConfiguratorInitialState_il5v7_1", y = "_subheader_il5v7_10", n = {
+  taxonomyFieldConfiguratorInitialState: f,
+  subheader: y
+}, C = () => {
+  const {
+    values: t,
+    setFieldValue: e
+  } = s(), {
+    onTaxonomySelect: l
+  } = u({
+    values: t,
+    setFieldValue: e
+  });
+  return /* @__PURE__ */ x("div", {
+    className: n.taxonomyFieldConfiguratorInitialState,
+    children: [/* @__PURE__ */ o(a, {
+      as: "h1",
+      color: "textOnLightDefault",
+      variant: "titleMedium",
+      children: /* @__PURE__ */ o(r, {
+        ...i.callToActionHeader
+      })
+    }), /* @__PURE__ */ o(a, {
+      as: "p",
+      className: n.subheader,
+      color: "textOnLightDefault",
+      variant: "bodyDefault",
+      children: /* @__PURE__ */ o(r, {
+        ...i.callToActionSubheader
+      })
+    }), /* @__PURE__ */ o(d, {
+      data: c(t.taxonomy.availableTaxonomies, t.taxonomy.taxonomySearchValue),
+      onClick: l,
+      resetValueOnHide: !0,
+      onSearchValue: (m) => {
+        e("taxonomy", {
+          ...t.taxonomy,
+          taxonomySearchValue: m
+        });
+      }
+    })]
+  });
+};
+export {
+  C as TaxonomyFieldConfiguratorInitialState
+};

package/dist/esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/taxonomy-selector-messages.js

@@ -0,0 +1,38 @@
+import { defineMessages as e } from "react-intl";
+const o = e({
+  taxonomySelectorAriaLabel: {
+    id: "groupSharedFeatures.metadataTemplateEditor.taxonomySelectorAriaLabel",
+    defaultMessage: "Open taxonomy selector"
+  },
+  taxonomySelector: {
+    id: "groupSharedFeatures.metadataTemplateEditor.taxonomySelector",
+    defaultMessage: "Choose a Taxonomy"
+  },
+  recentlyUsedTaxonomies: {
+    id: "groupSharedFeatures.metadataTemplateEditor.recentlyUsedTaxonomies",
+    defaultMessage: "Recents"
+  },
+  allTaxonomies: {
+    id: "groupSharedFeatures.metadataTemplateEditor.allTaxonomies",
+    defaultMessage: "All taxonomies"
+  },
+  searchTaxonomiesInputPlaceholder: {
+    id: "groupSharedFeatures.metadataTemplateEditor.searchTaxonomiesInputPlaceholder",
+    defaultMessage: "Search taxonomies"
+  },
+  loadingTaxonomies: {
+    id: "groupSharedFeatures.metadataTemplateEditor.loadingTaxonomies",
+    defaultMessage: "Loading taxonomies…"
+  },
+  loadTaxonomiesError: {
+    id: "groupSharedFeatures.metadataTemplateEditor.loadTaxonomiesError",
+    defaultMessage: "Failed to load taxonomies."
+  },
+  retryLoadTaxonomies: {
+    id: "groupSharedFeatures.metadataTemplateEditor.retryLoadTaxonomies",
+    defaultMessage: "Retry"
+  }
+});
+export {
+  o as default
+};