@box/metadata-editor 0.66.1 → 0.66.3

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

@@ -1,54 +1,54 @@
-import { TextInput as b } from "@box/blueprint-web";
-import { useFormikContext as C, getIn as R, Field as T } from "formik";
-import { forwardRef as V, useRef as $ } from "react";
-import { fieldDefaultProps as B } from "../constants.js";
-import { useFloatValidation as I } from "./use-float-validation.js";
-import { getFieldLabel as O } from "../../utils.js";
+import { TextInput as C } from "@box/blueprint-web";
+import { useFormikContext as R, getIn as T, Field as V } from "formik";
+import { forwardRef as $, useRef as b } from "react";
+import { getFieldLabel as B } from "../../utils.js";
+import { fieldDefaultProps as I } from "../constants.js";
+import { useFloatValidation as M } from "./use-float-validation.js";
 import { jsx as r } from "react/jsx-runtime";
-const N = /* @__PURE__ */ V(({
+const P = /* @__PURE__ */ $(({
   className: l,
-  description: n,
+  description: i,
   label: o,
-  fieldNamePrefix: i,
-  disableForm: d,
+  fieldNamePrefix: d,
+  disableForm: n,
   updateModePrefix: s
 }, u) => {
   const {
     values: f,
     setFieldValue: m,
     setFieldTouched: c
-  } = C(), t = `${s ?? i}.value`, p = R(f, t), a = $(p), {
+  } = R(), t = `${s ?? d}.value`, p = T(f, t), a = b(p), {
     validateFloats: F
-  } = I(), h = (e) => {
+  } = M(), h = (e) => {
     a.current = e, m(t, e);
   }, v = (e) => {
     c(e, !0);
   };
   return /* @__PURE__ */ r("div", {
     "data-testid": `${o}-field`,
-    children: /* @__PURE__ */ r(T, {
+    children: /* @__PURE__ */ r(V, {
       name: `${t}`,
       validate: () => F(a.current),
       children: ({
         field: e,
         meta: g
-      }) => /* @__PURE__ */ r(b, {
-        ...B,
+      }) => /* @__PURE__ */ r(C, {
+        ...I,
         ...e,
         ref: u,
         className: l,
-        disabled: d,
+        disabled: n,
         error: g.error,
-        label: O(o, n),
+        inputMode: "decimal",
+        label: B(o, i),
         onBlur: () => v(t),
         onChange: (x) => h(x.currentTarget.value),
-        placeholder: "0",
-        type: "number"
+        placeholder: "0"
       })
     })
   });
 });
 export {
-  N as MetadataFloatField,
-  N as default
+  P as MetadataFloatField,
+  P 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.1",
+  "version": "0.66.3",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "322d297c0f3b9276c89abc74a8889e21150482e4"
+  "gitHead": "5bc701e16606e786417f6289c33cf74e17939494"
 }

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;