@box/metadata-editor 0.67.8 → 0.67.12

package/esm/lib/components/interactive-header-text/interactive-header-text.js

@@ -0,0 +1,37 @@
+import "../../../../styles/interactive-header-text.css";
+import { Focusable as l } from "@ariakit/react";
+import { useFullTextTooltip as i, Text as m } from "@box/blueprint-web";
+import n from "clsx";
+import { useRef as p } from "react";
+import { jsx as e, Fragment as c } from "react/jsx-runtime";
+const d = "_header_d9pl2_1", f = {
+  header: d
+}, v = ({
+  className: o,
+  title: r
+}) => {
+  const t = p(null), {
+    Wrapper: a,
+    wrapperProps: s
+  } = i({
+    ref: t,
+    textValue: r
+  });
+  return /* @__PURE__ */ e(c, {
+    children: /* @__PURE__ */ e(a, {
+      ...s,
+      children: /* @__PURE__ */ e(l, {
+        render: /* @__PURE__ */ e(m, {
+          ref: t,
+          as: "h1",
+          className: n(f.header, o),
+          variant: "titleMedium",
+          children: r
+        })
+      })
+    })
+  });
+};
+export {
+  v as default
+};

package/esm/lib/components/metadata-editor-fields/components/ai-suggestion-field/ai-suggestion-field.js

@@ -1,28 +1,28 @@
 import "../../../../../../styles/ai-suggestion-field.css";
-import { Text as g, IconButton as l, DropdownMenu as t } from "@box/blueprint-web";
+import { Text as g, IconButton as d, DropdownMenu as t } from "@box/blueprint-web";
 import { Checkmark as u, Ellipsis as S } from "@box/blueprint-web-assets/icons/Fill";
 import { useIntl as h, FormattedMessage as n } from "react-intl";
 import r from "./messages.js";
 import { formatSuggestionValue as w } from "./utils.js";
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-const I = "_wrapperGradient_t2yak_1", _ = "_wrapper_t2yak_1", f = "_buttons_t2yak_18", k = "_selectTrigger_t2yak_22", i = {
-  wrapperGradient: I,
-  wrapper: _,
+const _ = "_wrapperGradient_t2yak_1", I = "_wrapper_t2yak_1", f = "_buttons_t2yak_18", k = "_selectTrigger_t2yak_22", o = {
+  wrapperGradient: _,
+  wrapper: I,
   buttons: f,
   selectTrigger: k
 };
-function A({
-  aiSuggestion: c,
-  onAiSuggestionAppend: s,
-  onAiSuggestionReplace: p,
-  onAiSuggestionIgnore: d,
-  type: m
+function D({
+  aiSuggestion: p,
+  onAiSuggestionAppend: l,
+  onAiSuggestionReplace: c,
+  onAiSuggestionIgnore: m,
+  type: i
 }) {
-  const o = h();
+  const s = h();
   return /* @__PURE__ */ e("div", {
-    className: i.wrapperGradient,
+    className: o.wrapperGradient,
     children: /* @__PURE__ */ a("div", {
-      className: i.wrapper,
+      className: o.wrapper,
       children: [/* @__PURE__ */ a("div", {
         children: [/* @__PURE__ */ e(g, {
           as: "p",
@@ -33,42 +33,41 @@ function A({
           })
         }), /* @__PURE__ */ e(g, {
           as: "p",
-          children: w(c, {
-            type: m,
-            locale: o.locale
+          children: w(p, {
+            type: i,
+            locale: s.locale
           })
         })]
       }), /* @__PURE__ */ a("div", {
-        className: i.buttons,
-        children: [/* @__PURE__ */ e(l, {
-          "aria-label": o.formatMessage(r.aiSuggestionAppend),
+        className: o.buttons,
+        children: [/* @__PURE__ */ e(d, {
+          "aria-label": s.formatMessage(i === "multiSelect" ? r.aiSuggestionAppend : r.aiSuggestionClearAndReplace),
           icon: u,
-          onClick: s,
-          size: "x-small",
-          "data-target-id": "IconButton-aiSuggestionAppend"
+          onClick: i === "multiSelect" ? l : c,
+          size: "x-small"
         }), /* @__PURE__ */ a(t.Root, {
           children: [/* @__PURE__ */ e(t.Trigger, {
-            className: i.selectTrigger,
-            children: /* @__PURE__ */ e(l, {
-              "aria-label": o.formatMessage(r.aiSuggestionOptions),
+            className: o.selectTrigger,
+            children: /* @__PURE__ */ e(d, {
+              "aria-label": s.formatMessage(r.aiSuggestionOptions),
               icon: S,
               "data-target-id": "IconButton-aiSuggestionOptions"
             })
           }), /* @__PURE__ */ a(t.Content, {
-            children: [/* @__PURE__ */ e(t.Item, {
-              onSelect: s,
+            children: [i === "multiSelect" && /* @__PURE__ */ e(t.Item, {
+              onSelect: l,
               "data-target-id": "DropdownMenu.Item-aiSuggestionAppend",
               children: /* @__PURE__ */ e(n, {
                 ...r.aiSuggestionAppend
               })
             }), /* @__PURE__ */ e(t.Item, {
-              onSelect: p,
+              onSelect: c,
               "data-target-id": "DropdownMenu.Item-aiSuggestionClearAndReplace",
               children: /* @__PURE__ */ e(n, {
                 ...r.aiSuggestionClearAndReplace
               })
             }), /* @__PURE__ */ e(t.Separator, {}), /* @__PURE__ */ e(t.Item, {
-              onSelect: d,
+              onSelect: m,
               "data-target-id": "DropdownMenu.Item-aiSuggestionIgnore",
               children: /* @__PURE__ */ e(n, {
                 ...r.aiSuggestionIgnore
@@ -81,5 +80,5 @@ function A({
   });
 }
 export {
-  A as AiSuggestionField
+  D as AiSuggestionField
 };

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

@@ -1,85 +1,67 @@
 import "../../../../../../styles/metadata-instance-form-header.css";
-import { Focusable as v } from "@ariakit/react";
-import { Text as K, Tooltip as h, Button as k } from "@box/blueprint-web";
-import { BoxAiLogo as S } from "@box/blueprint-web-assets/icons/Logo";
-import { useFormikContext as j, getIn as i } from "formik";
-import { useState as C, useRef as E, useEffect as I } from "react";
-import { useIntl as L } from "react-intl";
-import { useAutofill as N } from "../../../../utils/autofill-context.js";
-import r from "./messages.js";
-import { jsx as o, jsxs as R } from "react/jsx-runtime";
-const W = "_metadataInstanceFormHeader_rdx5o_1", D = "_title_rdx5o_9", x = {
-  metadataInstanceFormHeader: W,
-  title: D
-}, X = ({
-  areAiSuggestionsAvailable: B,
-  isAiSuggestionsFeatureEnabled: F,
-  isLoading: d,
-  templateName: T,
-  onAutofill: y
+import { Tooltip as _, Button as b } from "@box/blueprint-web";
+import { BoxAiLogo as A } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as M, getIn as o } from "formik";
+import { useEffect as h } from "react";
+import { useIntl as v } from "react-intl";
+import { useAutofill as K } from "../../../../utils/autofill-context.js";
+import T from "../../../interactive-header-text/interactive-header-text.js";
+import s from "./messages.js";
+import { jsxs as k, jsx as m } from "react/jsx-runtime";
+const j = "_metadataInstanceFormHeader_13lxr_1", C = "_title_13lxr_9", u = {
+  metadataInstanceFormHeader: j,
+  title: C
+}, J = ({
+  areAiSuggestionsAvailable: p,
+  isAiSuggestionsFeatureEnabled: g,
+  isLoading: l,
+  templateName: I,
+  onAutofill: x
 }) => {
   const {
-    isSubmitting: b,
-    values: n,
-    setFieldValue: u
-  } = j(), s = L(), {
+    isSubmitting: B,
+    values: e,
+    setFieldValue: c
+  } = M(), a = v(), {
     suggestions: t
-  } = N(), [M, _] = C(!1), l = E(null);
-  I(() => {
+  } = K();
+  h(() => {
     if (t) {
-      const e = i(n, "metadata.fields"), a = i(n, "metadata.templateKey");
-      u("metadata.fields", e.map((c) => {
-        var g;
-        const p = (g = t == null ? void 0 : t[a]) == null ? void 0 : g[c.key];
-        return p ? {
-          ...c,
-          aiSuggestion: p
-        } : c;
+      const n = o(e, "metadata.fields"), r = o(e, "metadata.templateKey");
+      c("metadata.fields", n.map((i) => {
+        var f;
+        const d = (f = t == null ? void 0 : t[r]) == null ? void 0 : f[i.key];
+        return d ? {
+          ...i,
+          aiSuggestion: d
+        } : i;
       }));
     }
-  }, [t, u]);
-  const A = () => {
-    const e = i(n, "metadata.fields"), a = i(n, "metadata.templateKey");
-    y(a, e);
-  }, m = T ?? s.formatMessage(r.customInstanceTitle);
-  I(() => {
-    if (l.current) {
-      const {
-        scrollWidth: e,
-        clientWidth: a
-      } = l.current;
-      _(e > a);
-    }
-  }, [m]);
-  const f = /* @__PURE__ */ o(K, {
-    ref: l,
-    as: "h1",
-    className: x.title,
-    variant: "titleMedium",
-    children: m
-  }), H = !B || b || d;
-  return /* @__PURE__ */ R("div", {
-    className: x.metadataInstanceFormHeader,
-    children: [M ? /* @__PURE__ */ o(h, {
-      content: m,
-      children: /* @__PURE__ */ o(v, {
-        render: f
-      })
-    }) : f, F && /* @__PURE__ */ o(h, {
-      content: s.formatMessage(r.autofillButtonTooltip),
-      children: /* @__PURE__ */ o(k, {
+  }, [t, c]);
+  const y = () => {
+    const n = o(e, "metadata.fields"), r = o(e, "metadata.templateKey");
+    x(r, n);
+  }, F = I ?? a.formatMessage(s.customInstanceTitle), H = !p || B || l;
+  return /* @__PURE__ */ k("div", {
+    className: u.metadataInstanceFormHeader,
+    children: [/* @__PURE__ */ m(T, {
+      className: u.title,
+      title: F
+    }), g && /* @__PURE__ */ m(_, {
+      content: a.formatMessage(s.autofillButtonTooltip),
+      children: /* @__PURE__ */ m(b, {
         disabled: H,
-        icon: S,
-        loading: d,
-        loadingAriaLabel: s.formatMessage(r.loadingButtonAriaLabel),
-        onClick: A,
+        icon: A,
+        loading: l,
+        loadingAriaLabel: a.formatMessage(s.loadingButtonAriaLabel),
+        onClick: y,
         variant: "secondary",
         "data-target-id": "Button-autofillButton",
-        children: s.formatMessage(r.autofillButton)
+        children: a.formatMessage(s.autofillButton)
       })
     })]
   });
 };
 export {
-  X as MetadataInstanceFormHeader
+  J as MetadataInstanceFormHeader
 };

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js

@@ -1,72 +1,53 @@
 import "../../../../../../styles/metadata-instance-header.css";
-import { Focusable as b } from "@ariakit/react";
-import { Text as x, Tooltip as r, IconButton as l } from "@box/blueprint-web";
-import { Pencil as M } from "@box/blueprint-web-assets/icons/Line";
-import { BoxAiLogo as A } from "@box/blueprint-web-assets/icons/Logo";
-import { useState as C, useRef as j, useEffect as H } from "react";
-import { useIntl as L } from "react-intl";
+import { Tooltip as i, IconButton as r } from "@box/blueprint-web";
+import { Pencil as p } from "@box/blueprint-web-assets/icons/Line";
+import { BoxAiLogo as I } from "@box/blueprint-web-assets/icons/Logo";
+import { useIntl as g } from "react-intl";
+import _ from "../../../interactive-header-text/interactive-header-text.js";
 import n from "./messages.js";
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-const v = "_metadataInstanceHeader_jo0x0_1", k = "_iconButtonsContainer_jo0x0_6", E = "_title_jo0x0_14", s = {
-  metadataInstanceHeader: v,
-  iconButtonsContainer: k,
-  title: E
-}, D = ({
-  areAiSuggestionsAvailable: u,
-  canEdit: m,
-  isAiSuggestionsFeatureEnabled: f,
-  onEdit: B,
-  onAutofill: I,
-  templateName: o
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+const x = "_metadataInstanceHeader_54pdx_1", b = "_iconButtonsContainer_54pdx_6", A = "_title_54pdx_14", e = {
+  metadataInstanceHeader: x,
+  iconButtonsContainer: b,
+  title: A
+}, k = ({
+  areAiSuggestionsAvailable: c,
+  canEdit: l,
+  isAiSuggestionsFeatureEnabled: d,
+  onEdit: m,
+  onAutofill: u,
+  templateName: t
 }) => {
-  const e = L(), [g, h] = C(!1), a = j(null), i = o || e.formatMessage(n.customInstanceTitle), p = f && o;
-  H(() => {
-    if (a.current) {
-      const {
-        scrollWidth: T,
-        clientWidth: _
-      } = a.current;
-      h(T > _);
-    }
-  }, [i]);
-  const c = /* @__PURE__ */ t(x, {
-    ref: a,
-    as: "h1",
-    className: s.title,
-    variant: "titleMedium",
-    children: i
-  });
-  return /* @__PURE__ */ d("div", {
-    className: s.metadataInstanceHeader,
-    children: [g ? /* @__PURE__ */ t(r, {
-      content: i,
-      children: /* @__PURE__ */ t(b, {
-        render: c
-      })
-    }) : c, m && /* @__PURE__ */ d("div", {
-      className: s.iconButtonsContainer,
-      children: [p && /* @__PURE__ */ t(r, {
-        content: e.formatMessage(n.autofillButtonTooltip, {
-          templateName: o
+  const o = g(), f = t || o.formatMessage(n.customInstanceTitle), B = d && t;
+  return /* @__PURE__ */ s("div", {
+    className: e.metadataInstanceHeader,
+    children: [/* @__PURE__ */ a(_, {
+      className: e.title,
+      title: f
+    }), l && /* @__PURE__ */ s("div", {
+      className: e.iconButtonsContainer,
+      children: [B && /* @__PURE__ */ a(i, {
+        content: o.formatMessage(n.autofillButtonTooltip, {
+          templateName: t
         }),
-        children: /* @__PURE__ */ t(l, {
-          "aria-label": e.formatMessage(n.autofillButtonAriaLabel, {
-            templateName: o
+        children: /* @__PURE__ */ a(r, {
+          "aria-label": o.formatMessage(n.autofillButtonAriaLabel, {
+            templateName: t
           }),
-          disabled: !u,
-          icon: A,
-          onClick: I,
+          disabled: !c,
+          icon: I,
+          onClick: u,
           variant: "icon-logo",
           "data-target-id": "IconButton-autofillButtonAriaLabel"
         })
-      }), /* @__PURE__ */ t(r, {
-        content: e.formatMessage(n.editButtonTooltip),
-        children: /* @__PURE__ */ t(l, {
-          "aria-label": e.formatMessage(n.editButtonAriaLabel, {
-            templateName: o
+      }), /* @__PURE__ */ a(i, {
+        content: o.formatMessage(n.editButtonTooltip),
+        children: /* @__PURE__ */ a(r, {
+          "aria-label": o.formatMessage(n.editButtonAriaLabel, {
+            templateName: t
           }),
-          icon: M,
-          onClick: B,
+          icon: p,
+          onClick: m,
           "data-target-id": "IconButton-editButtonAriaLabel"
         })
       })]
@@ -74,5 +55,5 @@ const v = "_metadataInstanceHeader_jo0x0_1", k = "_iconButtonsContainer_jo0x0_6"
   });
 };
 export {
-  D as MetadataInstanceHeader
+  k as MetadataInstanceHeader
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.67.8",
+  "version": "0.67.12",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -14,9 +14,9 @@
   "devDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/babel-plugin-target-attributes": "1.3.0",
-    "@box/blueprint-web": "^7.34.1",
-    "@box/blueprint-web-assets": "^4.27.0",
-    "@box/storybook-utils": "^0.6.1",
+    "@box/blueprint-web": "^7.36.0",
+    "@box/blueprint-web-assets": "^4.27.2",
+    "@box/storybook-utils": "^0.7.0",
     "@testing-library/react": "^15.0.6",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "35b9456f5e326f5f66d7cb19ba4bb773bffc2cb8"
+  "gitHead": "ef6dc665705b4829db20173c2d8d13a8376a617f"
 }

package/styles/interactive-header-text.css

@@ -0,0 +1 @@
+._header_d9pl2_1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/styles/metadata-instance-form-header.css

@@ -1 +1 @@
-._metadataInstanceFormHeader_rdx5o_1{display:flex;justify-content:space-between;align-items:center;padding-block-end:var(--space-4);border-block-end:solid var(--gray-10) var(--border-1);gap:var(--space-2)}._metadataInstanceFormHeader_rdx5o_1 ._title_rdx5o_9{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+._metadataInstanceFormHeader_13lxr_1{display:flex;justify-content:space-between;align-items:center;padding-block-end:var(--space-4);border-block-end:solid var(--gray-10) var(--border-1);gap:var(--space-2)}._metadataInstanceFormHeader_13lxr_1 ._title_13lxr_9{width:100%}

package/styles/metadata-instance-header.css

@@ -1 +1 @@
-._metadataInstanceHeader_jo0x0_1{display:flex;justify-content:space-between;height:var(--size-10)}._metadataInstanceHeader_jo0x0_1 ._iconButtonsContainer_jo0x0_6{display:flex;gap:var(--space-1);justify-content:flex-end;align-self:center;margin-block:0 var(--space-2);padding-left:var(--space-2)}._metadataInstanceHeader_jo0x0_1 ._title_jo0x0_14{margin-block:var(--space-1) var(--space-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+._metadataInstanceHeader_54pdx_1{display:flex;justify-content:space-between;height:var(--size-10)}._metadataInstanceHeader_54pdx_1 ._iconButtonsContainer_54pdx_6{display:flex;gap:var(--space-1);justify-content:flex-end;align-self:center;margin-block:0 var(--space-2);padding-left:var(--space-2)}._metadataInstanceHeader_54pdx_1 ._title_54pdx_14{margin-block:var(--space-1) var(--space-3)}

package/types/lib/components/interactive-header-text/interactive-header-text.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface InteractiveHeaderTextProps {
+    title: string;
+    className?: string;
+}
+declare const InteractiveHeaderText: React.FC<InteractiveHeaderTextProps>;
+export default InteractiveHeaderText;