@box/metadata-editor 0.66.0 → 0.66.2

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

@@ -1,26 +1,26 @@
-import { Select as l, SELECT_EMPTY_VALUE as o } from "@box/blueprint-web";
+import { Select as l, SELECT_EMPTY_VALUE as r } from "@box/blueprint-web";
 import { useFormikContext as M, getIn as V, Field as C } from "formik";
-import { useIntl as L, FormattedMessage as $ } from "react-intl";
-import { forwardRef as b } from "react";
-import c from "../../../../messages.js";
-import { getFieldLabel as j } from "../../utils.js";
-import { jsx as t, jsxs as I } from "react/jsx-runtime";
-const U = /* @__PURE__ */ b(({
-  className: u,
-  description: i,
-  disableForm: f,
+import { forwardRef as L } from "react";
+import { useIntl as P, FormattedMessage as $ } from "react-intl";
+import d from "../../../../messages.js";
+import { getFieldLabel as b } from "../../utils.js";
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+const O = /* @__PURE__ */ L(({
+  className: i,
+  description: u,
+  disableForm: p,
   fieldNamePrefix: s,
   label: n,
-  options: h,
-  portalElement: p,
+  options: f,
+  portalElement: h,
   updateModePrefix: v
 }, g) => {
   const {
-    setFieldValue: F,
-    values: x
-  } = M(), E = L(), m = `${v ?? s}.value`, r = h || V(x, `${s}.options`, []).map(({
+    setFieldValue: E,
+    values: F
+  } = M(), x = P(), m = `${v ?? s}.value`, o = f || V(F, `${s}.options`, []).map(({
     key: a
-  }) => a), d = E.formatMessage(c.selectValuePlaceholder);
+  }) => a), c = x.formatMessage(d.selectValuePlaceholder);
   return /* @__PURE__ */ t("div", {
     "data-testid": `${n}-field`,
     children: /* @__PURE__ */ t(C, {
@@ -29,24 +29,25 @@ const U = /* @__PURE__ */ b(({
         field: a
       }) => /* @__PURE__ */ t(l, {
         ref: g,
-        className: u,
-        disabled: f,
-        label: j(n, i),
+        className: i,
+        disabled: p,
+        label: b(n, u),
         onValueChange: (e) => {
-          F(m, e === o ? "" : e);
+          E(m, e === r ? "" : e);
         },
-        placeholder: d,
+        placeholder: c,
         ...a,
-        value: a.value === o ? "" : a.value,
-        children: /* @__PURE__ */ I(l.Content, {
-          container: p,
+        value: a.value === r ? "" : a.value,
+        children: /* @__PURE__ */ j(l.Content, {
+          container: h,
+          onEscapeKeyDown: (e) => e.stopPropagation(),
           children: [/* @__PURE__ */ t(l.Option, {
-            text: d,
-            value: o,
+            text: c,
+            value: r,
             children: /* @__PURE__ */ t($, {
-              ...c.selectValuePlaceholder
+              ...d.selectValuePlaceholder
             })
-          }), r == null ? void 0 : r.map((e) => /* @__PURE__ */ t(l.Option, {
+          }), o == null ? void 0 : o.map((e) => /* @__PURE__ */ t(l.Option, {
             text: e,
             value: e,
             children: e
@@ -57,6 +58,6 @@ const U = /* @__PURE__ */ b(({
   });
 });
 export {
-  U as MetadataEnumField,
-  U as default
+  O as MetadataEnumField,
+  O as default
 };

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

@@ -1,14 +1,15 @@
 import "../../../../../../styles/metadata-instance-form-header.css";
-import { Text as x, Tooltip as M, Button as _ } from "@box/blueprint-web";
-import { BoxAiLogo as H } from "@box/blueprint-web-assets/icons/Logo";
-import { useFormikContext as k, getIn as m } from "formik";
-import { useIntl as v } from "react-intl";
+import { Tooltip as _, Button as b } from "@box/blueprint-web";
+import { BoxAiLogo as M } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as T, getIn as m } from "formik";
+import { useIntl as h } from "react-intl";
+import k from "../../../truncated-header-text/truncated-header-text.js";
 import e from "./messages.js";
 import { jsxs as A, jsx as n } from "react/jsx-runtime";
-const T = "_metadataInstanceFormHeader_1b2cc_1", S = "_title_1b2cc_8", c = {
-  metadataInstanceFormHeader: T,
+const v = "_metadataInstanceFormHeader_13lxr_1", S = "_title_13lxr_9", c = {
+  metadataInstanceFormHeader: v,
   title: S
-}, V = ({
+}, q = ({
   areAiSuggestionsAvailable: d,
   isAiSuggestionsFeatureEnabled: u,
   isLoading: s,
@@ -18,32 +19,30 @@ const T = "_metadataInstanceFormHeader_1b2cc_1", S = "_title_1b2cc_8", c = {
   const {
     isSubmitting: p,
     values: i,
-    setFieldValue: B
-  } = k(), t = v(), I = async () => {
+    setFieldValue: x
+  } = T(), t = h(), B = async () => {
     const r = m(i, "metadata.fields"), F = m(i, "metadata.templateKey"), a = await g(F, r);
-    B("metadata.fields", r.map((o) => {
-      const l = a == null ? void 0 : a.find((h) => h.key === o.key);
+    x("metadata.fields", r.map((o) => {
+      const l = a == null ? void 0 : a.find((H) => H.key === o.key);
       return l ? {
         ...o,
         aiSuggestion: l.aiSuggestion
       } : o;
     }));
-  }, b = f ?? t.formatMessage(e.customInstanceTitle), y = !d || p || s;
+  }, I = f ?? t.formatMessage(e.customInstanceTitle), y = !d || p || s;
   return /* @__PURE__ */ A("div", {
     className: c.metadataInstanceFormHeader,
-    children: [/* @__PURE__ */ n(x, {
-      as: "h1",
+    children: [/* @__PURE__ */ n(k, {
       className: c.title,
-      variant: "titleMedium",
-      children: b
-    }), u && /* @__PURE__ */ n(M, {
+      title: I
+    }), u && /* @__PURE__ */ n(_, {
       content: t.formatMessage(e.autofillButtonTooltip),
-      children: /* @__PURE__ */ n(_, {
+      children: /* @__PURE__ */ n(b, {
         disabled: y,
-        icon: H,
+        icon: M,
         loading: s,
         loadingAriaLabel: t.formatMessage(e.loadingButtonAriaLabel),
-        onClick: I,
+        onClick: B,
         variant: "secondary",
         "data-target-id": "Button-autofillButton",
         children: t.formatMessage(e.autofillButton)
@@ -52,5 +51,5 @@ const T = "_metadataInstanceFormHeader_1b2cc_1", S = "_title_1b2cc_8", c = {
   });
 };
 export {
-  V as MetadataInstanceFormHeader
+  q as MetadataInstanceFormHeader
 };

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

@@ -1,54 +1,53 @@
 import "../../../../../../styles/metadata-instance-header.css";
-import { Text as b, Tooltip as i, IconButton as s } from "@box/blueprint-web";
-import { Pencil as g } from "@box/blueprint-web-assets/icons/Line";
-import { BoxAiLogo as I } from "@box/blueprint-web-assets/icons/Logo";
-import { useIntl as _ } 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 g } from "@box/blueprint-web-assets/icons/Logo";
+import { useIntl as I } from "react-intl";
+import _ from "../../../truncated-header-text/truncated-header-text.js";
 import n from "./messages.js";
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-const h = "_metadataInstanceHeader_1vbbg_1", p = "_iconButtonsContainer_1vbbg_7", v = "_title_1vbbg_15", e = {
-  metadataInstanceHeader: h,
-  iconButtonsContainer: p,
-  title: v
-}, j = ({
+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: u,
-  onAutofill: m,
+  onEdit: m,
+  onAutofill: u,
   templateName: t
 }) => {
-  const o = _(), B = t || o.formatMessage(n.customInstanceTitle), f = d && t;
-  return /* @__PURE__ */ r("div", {
+  const o = I(), f = t || o.formatMessage(n.customInstanceTitle), B = d && t;
+  return /* @__PURE__ */ s("div", {
     className: e.metadataInstanceHeader,
-    children: [/* @__PURE__ */ a(b, {
-      as: "h1",
+    children: [/* @__PURE__ */ a(_, {
       className: e.title,
-      variant: "titleMedium",
-      children: B
-    }), l && /* @__PURE__ */ r("div", {
+      title: f
+    }), l && /* @__PURE__ */ s("div", {
       className: e.iconButtonsContainer,
-      children: [f && /* @__PURE__ */ a(i, {
+      children: [B && /* @__PURE__ */ a(i, {
         content: o.formatMessage(n.autofillButtonTooltip, {
           templateName: t
         }),
-        children: /* @__PURE__ */ a(s, {
+        children: /* @__PURE__ */ a(r, {
           "aria-label": o.formatMessage(n.autofillButtonAriaLabel, {
             templateName: t
           }),
           disabled: !c,
-          icon: I,
-          onClick: m,
+          icon: g,
+          onClick: u,
           variant: "icon-logo",
           "data-target-id": "IconButton-autofillButtonAriaLabel"
         })
       }), /* @__PURE__ */ a(i, {
         content: o.formatMessage(n.editButtonTooltip),
-        children: /* @__PURE__ */ a(s, {
+        children: /* @__PURE__ */ a(r, {
           "aria-label": o.formatMessage(n.editButtonAriaLabel, {
             templateName: t
           }),
-          icon: g,
-          onClick: u,
+          icon: p,
+          onClick: m,
           "data-target-id": "IconButton-editButtonAriaLabel"
         })
       })]
@@ -56,5 +55,5 @@ const h = "_metadataInstanceHeader_1vbbg_1", p = "_iconButtonsContainer_1vbbg_7"
   });
 };
 export {
-  j as MetadataInstanceHeader
+  k as MetadataInstanceHeader
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.66.0",
+  "version": "0.66.2",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "fec5f60d64cecfdab83b9ec202aa14114171031f"
+  "gitHead": "68206eae5c0d7a75eebc0c49c911b1cd0b77c419"
 }

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

@@ -1 +1 @@
-._metadataInstanceFormHeader_1b2cc_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)}._metadataInstanceFormHeader_1b2cc_1 ._title_1b2cc_8{width:100%}
+._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_1vbbg_1{display:flex;justify-content:flex-end;height:var(--size-10);width:100%}._metadataInstanceHeader_1vbbg_1 ._iconButtonsContainer_1vbbg_7{display:flex;gap:var(--space-1);justify-content:flex-end;align-self:center;margin-block:0 var(--space-2);width:100%}._metadataInstanceHeader_1vbbg_1 ._title_1vbbg_15{align-self:center;margin-block:var(--space-1) var(--space-3);width:100%}
+._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/styles/truncated-header-text.css

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

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

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