@box/metadata-editor 0.53.2 → 0.55.0

package/esm/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js

@@ -1,46 +1,46 @@
 import "../../../../styles/combobox-with-api-pagination.css";
-import { ComboboxItemValue as U } from "@ariakit/react";
-import { Combobox as p, LoadingIndicator as q, InlineNotice as H, Text as J } from "@box/blueprint-web";
-import { Search as K, Loader as Q } from "@box/blueprint-web-assets/icons/Fill";
-import { IconIconOnLightSecondary as X, Size6 as C, Size1 as Y } from "@box/blueprint-web-assets/tokens/tokens";
-import { useRef as E, useCallback as Z, useMemo as v, useEffect as $, forwardRef as oo } from "react";
-import { useIntl as T, FormattedMessage as y } from "react-intl";
+import { ComboboxItemValue as J } from "@ariakit/react";
+import { Combobox as p, LoadingIndicator as K, InlineNotice as Q, Text as X } from "@box/blueprint-web";
+import { Search as Y, Loader as Z } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as $, Size6 as E, Size1 as oo } from "@box/blueprint-web-assets/tokens/tokens";
+import { useRef as y, useCallback as eo, useMemo as _, useEffect as to, forwardRef as ro } from "react";
+import { useIntl as T, FormattedMessage as v } from "react-intl";
 import i from "./messages.js";
-import { useAsyncList as eo } from "./use-async-list.js";
-import { useControllableState as ro } from "./utils/use-controllable-state.js";
-import { useTrackVisibility as to } from "./utils/use-intersection-observer.js";
-import { jsx as t, jsxs as I, Fragment as no } from "react/jsx-runtime";
-const io = "_container_16dlc_1", ao = "_highlightOptionText_16dlc_7", so = "_option_16dlc_20", lo = "_errorComboboxOption_16dlc_24", co = "_errorComboboxOptionText_16dlc_29", d = {
-  container: io,
-  highlightOptionText: ao,
-  option: so,
-  errorComboboxOption: lo,
-  errorComboboxOptionText: co
-}, M = /* @__PURE__ */ oo(({
-  onTryAgain: f
-}, h) => {
+import { useAsyncList as no } from "./use-async-list.js";
+import { useControllableState as io } from "./utils/use-controllable-state.js";
+import { useTrackVisibility as ao } from "./utils/use-intersection-observer.js";
+import { jsx as r, jsxs as I, Fragment as so } from "react/jsx-runtime";
+const lo = "_container_16dlc_1", co = "_highlightOptionText_16dlc_7", uo = "_option_16dlc_20", po = "_errorComboboxOption_16dlc_24", mo = "_errorComboboxOptionText_16dlc_29", m = {
+  container: lo,
+  highlightOptionText: co,
+  option: uo,
+  errorComboboxOption: po,
+  errorComboboxOptionText: mo
+}, M = /* @__PURE__ */ ro(({
+  onTryAgain: h
+}, f) => {
   const {
     formatMessage: s
   } = T();
-  return /* @__PURE__ */ I(no, {
-    children: [/* @__PURE__ */ t(H, {
+  return /* @__PURE__ */ I(so, {
+    children: [/* @__PURE__ */ r(Q, {
       variant: "error",
       variantIconAriaLabel: s(i.loadingResultsErrorIconLabel),
-      children: /* @__PURE__ */ t(y, {
+      children: /* @__PURE__ */ r(v, {
         ...i.loadingResultsErrorMessage
       })
-    }), /* @__PURE__ */ t(p.Option, {
-      ref: h,
-      className: d.errorComboboxOption,
-      onClick: f,
-      children: /* @__PURE__ */ I(J, {
+    }), /* @__PURE__ */ r(p.Option, {
+      ref: f,
+      className: m.errorComboboxOption,
+      onClick: h,
+      children: /* @__PURE__ */ I(X, {
         as: "span",
-        className: d.errorComboboxOptionText,
+        className: m.errorComboboxOptionText,
         color: "textOnLightLink",
         variant: "bodyDefaultBold",
-        children: [/* @__PURE__ */ t(y, {
+        children: [/* @__PURE__ */ r(v, {
           ...i.loadingResultsErrorAction
-        }), /* @__PURE__ */ t(Q, {
+        }), /* @__PURE__ */ r(Z, {
           color: "currentColor",
           height: "12px",
           width: "12px"
@@ -48,144 +48,148 @@ const io = "_container_16dlc_1", ao = "_highlightOptionText_16dlc_7", so = "_opt
       })
     })]
   });
-}), x = "__LOADING__", O = "__LOADING_ERROR__", uo = "0px 0px 20px 0px", mo = /* @__PURE__ */ t(K, {
-  color: X,
-  height: C,
+}), R = "__LOADING__", L = "__LOADING_ERROR__", ho = "0px 0px 20px 0px", fo = /* @__PURE__ */ r(Y, {
+  color: $,
+  height: E,
   role: "presentation",
   style: {
-    padding: Y,
+    padding: oo,
     boxSizing: "border-box"
   },
-  width: C
-}), Eo = (f) => {
+  width: E
+}), Io = (h) => {
   const {
-    defaultFetcher: h,
+    defaultFetcher: f,
     onInputValueChange: s,
-    value: N,
-    onValueChange: S,
-    noResultMessage: V,
-    defaultValue: D,
+    value: V,
+    onValueChange: N,
+    noResultMessage: S,
+    defaultValue: D = [],
     loadingAriaLabel: P,
-    multiselect: _ = !1,
+    multiselect: c = !1,
     ...k
-  } = f, {
-    formatMessage: l
-  } = T(), g = E(null), o = eo({
+  } = h, {
+    formatMessage: u
+  } = T(), g = y(null), o = no({
     async load({
       marker: e,
-      searchInput: r,
-      signal: u
+      searchInput: t,
+      signal: O
     }) {
-      const m = await h({
-        signal: u,
+      const l = await f({
+        signal: O,
         marker: e,
-        searchInput: r
+        searchInput: t
       });
       return {
-        items: m.options,
-        marker: m.marker
+        items: l.options,
+        marker: l.marker
       };
     }
-  }), R = E(!1), F = Z(() => {
-    R.current || (o.reload(), R.current = !0);
-  }, []), [n, A] = ro({
-    prop: N,
+  }), C = y(!1), F = eo(() => {
+    C.current || (o.reload(), C.current = !0);
+  }, []), [n, b] = io({
+    prop: V,
     defaultProp: D,
-    onChange: S
-  }), b = v(() => Array.isArray(n) ? n.filter((e) => !o.items.some((r) => r.value === e.value)) : [], [n, o.items]), w = (e) => {
+    onChange: N
+  }), w = (e) => {
+    e === void 0 ? b([]) : Array.isArray(e) ? b(e) : b([e]);
+  }, 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) => {
     const {
-      value: r,
-      ...u
+      value: t,
+      displayValue: O,
+      ...l
     } = e;
-    if (r === x)
-      return o.hasNextPage ? /* @__PURE__ */ t(p.Option, {
-        ...u,
-        ref: G,
+    if (t === R)
+      return o.hasNextPage ? /* @__PURE__ */ r(p.Option, {
+        ...l,
+        ref: j,
         disabled: !0,
-        value: r,
-        children: /* @__PURE__ */ t(q, {
-          "aria-label": l(i.loadingMoreAriaLabel),
+        value: t,
+        children: /* @__PURE__ */ r(K, {
+          "aria-label": u(i.loadingMoreAriaLabel),
           style: {
             position: "unset"
           }
         })
       }) : null;
-    if (r === O && o.hasError && !o.isEmpty)
-      return /* @__PURE__ */ t(M, {
+    if (t === L && o.hasError && !o.isEmpty)
+      return /* @__PURE__ */ r(M, {
         onTryAgain: () => {
           var a;
           o.loadMore(), (a = g.current) == null || a.focus();
         }
       });
-    if (b.some((a) => a.value === r))
+    if (x.some((a) => a.value === t))
       return null;
-    const m = () => n ? Array.isArray(n) ? n.some((a) => a.value === r) : n.value === r : !1;
-    return /* @__PURE__ */ t(p.Option, {
-      ...u,
-      className: d.option,
-      disabled: m(),
-      value: r,
-      children: /* @__PURE__ */ t(U, {
-        className: d.highlightOptionText,
-        value: r
+    const H = () => n.some((a) => a.value === t);
+    return /* @__PURE__ */ r(p.Option, {
+      ...l,
+      className: m.option,
+      disabled: H(),
+      value: t,
+      children: /* @__PURE__ */ r(J, {
+        className: m.highlightOptionText,
+        value: O || t
       })
     });
-  }, B = (e) => {
-    s == null || s(e), o.search(e), e.trim() === "" && !_ && A(null);
-  }, z = () => {
+  }, G = (e) => {
+    s == null || s(e), o.search(e);
+  }, W = () => {
     var e;
     o.reload(), (e = g.current) == null || e.focus();
   };
-  let c;
-  o.hasError && !o.isLoading ? c = /* @__PURE__ */ t(M, {
-    onTryAgain: z
-  }) : o.isEmpty && !o.isLoading ? c = V || l(i.noResults) : c = void 0;
-  const [G, {
-    rootRef: W,
-    isVisible: L
-  }] = to({
-    rootMargin: uo
+  let d;
+  o.hasError && !o.isLoading ? d = /* @__PURE__ */ r(M, {
+    onTryAgain: W
+  }) : o.isEmpty && !o.isLoading ? d = S || u(i.noResults) : d = void 0;
+  const [j, {
+    rootRef: U,
+    isVisible: A
+  }] = ao({
+    rootMargin: ho
   });
-  $(() => {
-    if (!(L && o.hasNextPage))
+  to(() => {
+    if (!(A && o.hasNextPage))
       return;
-    const r = setTimeout(() => {
+    const t = setTimeout(() => {
       o.loadMore();
     }, 100);
     return () => {
-      clearTimeout(r);
+      clearTimeout(t);
     };
-  }, [L]);
-  const j = v(() => {
+  }, [A]);
+  const q = _(() => {
     const e = o.hasNextPage ? {
-      id: x,
-      value: x
-    } : null, r = !e && o.hasError && !o.isEmpty ? {
-      id: O,
-      value: O
+      displayValue: R,
+      value: R
+    } : null, t = !e && o.hasError && !o.isEmpty ? {
+      displayValue: L,
+      value: L
     } : null;
-    return [...o.items, ...b, e, r].filter(Boolean);
-  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, b]);
-  return /* @__PURE__ */ t(p, {
+    return [...o.items, ...x, e, t].filter(Boolean);
+  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, x]);
+  return /* @__PURE__ */ r(p, {
     as: "input",
     ...k,
     ref: g,
-    clearButtonAriaLabel: l(i.clearButtonAriaLabel),
-    endComboboxIcon: mo,
+    clearButtonAriaLabel: u(i.clearButtonAriaLabel),
+    displayValue: (e) => e.displayValue || e.value,
+    endComboboxIcon: fo,
     focusLoop: !1,
-    getPopoverRef: W,
+    getPopoverRef: U,
     loading: o.isReloading,
-    loadingAriaLabel: P || l(i.loadingAriaLabel),
-    multiselect: _,
-    noResultMessage: c,
+    loadingAriaLabel: P || u(i.loadingAriaLabel),
+    multiselect: c,
+    noResultMessage: d,
     onFocus: F,
-    onInputValueChange: B,
-    onValueChange: A,
-    options: j,
-    renderOption: w,
-    value: n
+    onInputValueChange: G,
+    onValueChange: w,
+    options: q,
+    renderOption: z,
+    value: B
   });
 };
 export {
-  Eo as ComboboxWithApiPagination
+  Io as ComboboxWithApiPagination
 };

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js

@@ -1,93 +1,95 @@
 import "../../../../../../styles/metadata-instance-form.css";
-import { Card as O } from "@box/blueprint-web";
-import { Formik as N, Form as T } from "formik";
-import { useState as d, useRef as v, useEffect as P, useMemo as U } from "react";
-import { TEMPLATE_CUSTOM_PROPERTIES as _ } from "../../../../constants.js";
-import { useAutofill as x } from "../../../../utils/autofill-context.js";
-import { TemplateInstance as L } from "../../../metadata-editor-fields/metadata-editor-fields.js";
-import { MetadataEmptyState as R } from "../../../metadata-empty-state/metadata-empty-state.js";
-import { UnsavedChangesModal as j } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
+import { Card as N } from "@box/blueprint-web";
+import { Formik as T, Form as v } from "formik";
+import { useState as d, useRef as P, useEffect as U, useMemo as _ } from "react";
+import { TEMPLATE_CUSTOM_PROPERTIES as x } from "../../../../constants.js";
+import { useAutofill as L } from "../../../../utils/autofill-context.js";
+import { TemplateInstance as R } from "../../../metadata-editor-fields/metadata-editor-fields.js";
+import { MetadataEmptyState as j } from "../../../metadata-empty-state/metadata-empty-state.js";
+import { UnsavedChangesModal as B } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
 import { CustomInstance as k } from "../custom-instance/custom-instance.js";
 import { DeleteConfirmationModal as w } from "../delete-confirmation-modal/delete-confirmation-modal.js";
-import { MetadataInstanceFormFooter as B } from "../metadata-instance-form-footer/metadata-instance-form-footer.js";
-import { MetadataInstanceFormHeader as H } from "../metadata-instance-form-header/metadata-instance-form-header.js";
-import { createJSONPatch as J } from "./utils.js";
+import { MetadataInstanceFormFooter as H } from "../metadata-instance-form-footer/metadata-instance-form-footer.js";
+import { MetadataInstanceFormHeader as J } from "../metadata-instance-form-header/metadata-instance-form-header.js";
+import { createJSONPatch as K } from "./utils.js";
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
-const K = "_metadataInstanceForm_1hu4u_1", V = {
-  metadataInstanceForm: K
-}, ie = (p) => {
+const V = "_metadataInstanceForm_1hu4u_1", q = {
+  metadataInstanceForm: V
+}, me = (u) => {
   const {
     isAiSuggestionsFeatureEnabled: o,
-    isUnsavedChangesModalOpen: u = !1,
-    onCancel: g,
-    onDelete: C,
-    onSubmit: h,
+    isDeleteButtonDisabled: p,
+    isUnsavedChangesModalOpen: g = !1,
+    onCancel: C,
+    onDelete: h,
+    onSubmit: F,
     selectedTemplateInstance: e,
     setIsUnsavedChangesModalOpen: s,
-    onUnsavedChangesModalCancel: F
-  } = p, [M, m] = d(!1), {
+    onUnsavedChangesModalCancel: M
+  } = u, [S, m] = d(!1), {
     isFetchingSuggestions: a,
-    getAiSuggestions: S
-  } = x(), i = e.templateKey === _, r = async (t) => {
-    await h(t, J(t, e)), s(!1);
-  }, I = (t) => {
-    t ? s(!0) : g();
-  }, E = () => {
+    getAiSuggestions: I
+  } = L(), i = e.templateKey === x, r = async (t) => {
+    await F(t, K(t, e)), s(!1);
+  }, E = (t) => {
+    t ? s(!0) : C();
+  }, D = () => {
     m(!0);
-  }, A = {
+  }, b = {
     metadata: {
       ...e
     }
-  }, l = v(null), [c, D] = d(null);
-  P(() => {
-    D(l.current);
+  }, l = P(null), [c, A] = d(null);
+  U(() => {
+    A(l.current);
   }, []);
-  const b = U(() => {
+  const y = _(() => {
     const t = e.fields.length === 0;
     return i ? /* @__PURE__ */ n(k, {
       isLoading: a
-    }) : t ? /* @__PURE__ */ n(R, {
+    }) : t ? /* @__PURE__ */ n(j, {
       isBoxAiSuggestionsFeatureEnabled: o,
       level: "instance"
-    }) : /* @__PURE__ */ n(L, {
+    }) : /* @__PURE__ */ n(R, {
       disableForm: a,
       portalElement: c
     });
   }, [i, e.fields.length, a, o, c]);
-  return /* @__PURE__ */ n(N, {
-    initialValues: A,
+  return /* @__PURE__ */ n(T, {
+    initialValues: b,
     onSubmit: r,
     children: ({
       values: t,
-      dirty: y
-    }) => /* @__PURE__ */ f(T, {
-      children: [/* @__PURE__ */ f(O, {
+      dirty: O
+    }) => /* @__PURE__ */ f(v, {
+      children: [/* @__PURE__ */ f(N, {
         ref: l,
-        className: V.metadataInstanceForm,
-        children: [/* @__PURE__ */ n(H, {
+        className: q.metadataInstanceForm,
+        children: [/* @__PURE__ */ n(J, {
           isAiSuggestionsFeatureEnabled: o && !i,
           isLoading: a,
-          onAutofill: S,
+          onAutofill: I,
           templateName: e.displayName
-        }), b, /* @__PURE__ */ n(B, {
+        }), y, /* @__PURE__ */ n(H, {
+          isDeleteButtonDisabled: p,
           isLoading: a,
-          onCancel: () => I(y),
-          onDelete: E
+          onCancel: () => E(O),
+          onDelete: D
         })]
-      }), /* @__PURE__ */ n(j, {
-        onCancel: F,
+      }), /* @__PURE__ */ n(B, {
+        onCancel: M,
         onDismiss: () => s(!1),
         onSaveAndContinue: () => r(t),
-        open: u
+        open: g
       }), /* @__PURE__ */ n(w, {
-        onConfirm: () => C(e),
+        onConfirm: () => h(e),
         onDismiss: () => m(!1),
-        open: M,
+        open: S,
         templateName: e.displayName
       })]
     })
   });
 };
 export {
-  ie as MetadataInstanceForm
+  me as MetadataInstanceForm
 };

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.js

@@ -1,35 +1,36 @@
 import "../../../../../../styles/metadata-instance-form-footer.css";
-import { TextButton as u, Button as r } from "@box/blueprint-web";
-import { useFormikContext as b } from "formik";
-import { useIntl as F } from "react-intl";
+import { TextButton as b, Button as r } from "@box/blueprint-web";
+import { useFormikContext as F } from "formik";
+import { useIntl as g } from "react-intl";
 import o from "./messages.js";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8", _ = "_buttons_17478_8", a = {
-  metadataInstanceFormFooter: g,
-  buttonsContainer: f,
-  buttons: _
-}, x = ({
-  isLoading: m,
-  onCancel: c,
-  onDelete: l
+const f = "_metadataInstanceFormFooter_17478_1", _ = "_buttonsContainer_17478_8", C = "_buttons_17478_8", a = {
+  metadataInstanceFormFooter: f,
+  buttonsContainer: _,
+  buttons: C
+}, M = ({
+  isDeleteButtonDisabled: m,
+  isLoading: c,
+  onCancel: l,
+  onDelete: d
 }) => {
-  const t = F(), {
+  const t = g(), {
     isSubmitting: s,
-    submitForm: d
-  } = b(), n = m || s;
+    submitForm: u
+  } = F(), n = c || s;
   return /* @__PURE__ */ e("div", {
     className: a.metadataInstanceFormFooter,
     children: /* @__PURE__ */ i("div", {
       className: a.buttonsContainer,
-      children: [/* @__PURE__ */ e(u, {
-        disabled: n,
-        onClick: l,
+      children: [/* @__PURE__ */ e(b, {
+        disabled: n || m,
+        onClick: d,
         children: t.formatMessage(o.deleteButton)
       }), /* @__PURE__ */ i("div", {
         className: a.buttons,
         children: [/* @__PURE__ */ e(r, {
           disabled: n,
-          onClick: c,
+          onClick: l,
           size: "large",
           variant: "secondary",
           children: t.formatMessage(o.cancelButton)
@@ -37,7 +38,7 @@ const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8"
           disabled: n,
           loading: s,
           loadingAriaLabel: t.formatMessage(o.loadingAriaLabel),
-          onClick: d,
+          onClick: u,
           size: "large",
           children: t.formatMessage(o.saveButton)
         })]
@@ -46,5 +47,5 @@ const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8"
   });
 };
 export {
-  x as MetadataInstanceFormFooter
+  M as MetadataInstanceFormFooter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.53.2",
+  "version": "0.55.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.20.0",
@@ -52,5 +52,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "c68217f7a7d9a18a9f6984a3c8582ece76195e66"
+  "gitHead": "c8b17c1172f3189aeab0378c577c87b79f3a837f"
 }

package/types/lib/components/combobox-with-api-pagination/types.d.ts

@@ -12,7 +12,7 @@ export interface FetcherResponse<T> {
     options: T[];
 }
 export interface BaseOptionType {
-    id?: string;
+    displayValue?: string;
     value: string;
 }
 interface BaseComboboxProps<T extends BaseOptionType, M extends boolean> {
@@ -21,9 +21,9 @@ interface BaseComboboxProps<T extends BaseOptionType, M extends boolean> {
     noResultMessage?: ReactElement | string;
     onInputValueChange?: (inputValue: string) => void;
     multiselect: M;
-    onValueChange?: (selectedOptions: M extends true ? T[] : T) => void;
-    value?: M extends true ? T[] : T;
-    defaultValue?: M extends true ? T[] : T;
+    onValueChange?: (selectedOptions: T[]) => void;
+    value?: T[];
+    defaultValue?: T[];
     label: string;
     loadingAriaLabel?: string;
     portalElement?: HTMLElement | (() => HTMLElement);

package/types/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/types.d.ts

@@ -2,8 +2,8 @@ import { type MetadataFormFieldValue, type MetadataTemplateInstance } from '../.
 import { type FormValues } from '../../types';
 export type MetadataInstanceFormProps = {
     isAiSuggestionsFeatureEnabled: boolean;
+    isDeleteButtonDisabled: boolean;
     isUnsavedChangesModalOpen: boolean;
-    /** The MetadataTemplate is used when creating a new instance, while MetadataTemplateInstance is applied when editing an existing one. */
     selectedTemplateInstance: MetadataTemplateInstance;
     onCancel: () => void;
     onDelete: (templateInstance: MetadataTemplateInstance) => void;

package/types/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.d.ts

@@ -1,2 +1,2 @@
 import { type MetadataInstanceFormFooterProps } from './types';
-export declare const MetadataInstanceFormFooter: ({ isLoading, onCancel, onDelete }: MetadataInstanceFormFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataInstanceFormFooter: ({ isDeleteButtonDisabled, isLoading, onCancel, onDelete, }: MetadataInstanceFormFooterProps) => import("react/jsx-runtime").JSX.Element;

package/types/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/types.d.ts

@@ -1,4 +1,5 @@
 export type MetadataInstanceFormFooterProps = {
+    isDeleteButtonDisabled: boolean;
     isLoading: boolean;
     onCancel: () => void;
     onDelete: () => void;