@box/metadata-view 1.17.3 → 1.18.1

package/dist/esm/lib/components/item-action-menu/identifier.js

@@ -0,0 +1,8 @@
+import a from "lodash/camelCase";
+function r(n, e) {
+  const t = n.displayName || "UnknownComponent", o = a(e);
+  return `${t}-${o}`;
+}
+export {
+  r as getDataTargetId
+};

package/dist/esm/lib/components/item-action-menu/item-action-menu.js

@@ -1,110 +1,117 @@
 import { useMemo as $ } from "react";
 import { useIntl as x } from "react-intl";
-import { IconButton as C, DropdownMenu as e, GridList as i } from "@box/blueprint-web";
-import { Ellipsis as _ } from "@box/blueprint-web-assets/icons/Fill";
-import { V as d } from "../../../../chunks/types.js";
-import b from "./messages.js";
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import '../../../../styles/item-action-menu.css';const N = "_tableActionBar_akgtp_1", R = "_actionItemIcon_akgtp_6", S = {
-  tableActionBar: N,
-  actionItemIcon: R
+import { IconButton as f, DropdownMenu as r, GridList as g } from "@box/blueprint-web";
+import { Ellipsis as T } from "@box/blueprint-web-assets/icons/Fill";
+import { V as M } from "../../../../chunks/types.js";
+import _ from "./messages.js";
+import { getDataTargetId as d } from "./identifier.js";
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import '../../../../styles/item-action-menu.css';const A = "_tableActionBar_akgtp_1", N = "_actionItemIcon_akgtp_6", B = {
+  tableActionBar: A,
+  actionItemIcon: N
 };
-function s(t) {
-  return (o) => {
-    o.stopPropagation(), t();
+function b(c) {
+  return (t) => {
+    t.stopPropagation(), c();
   };
 }
 function L({
-  item: t,
-  label: o,
-  onClick: p,
-  icon: r,
-  isDisabled: l
+  item: c,
+  label: t,
+  onClick: l,
+  icon: o,
+  isDisabled: m
 }) {
-  const f = s(() => {
-    p(t);
-  }), I = $(() => (l == null ? void 0 : l(t)) ?? !1, [l, t]);
-  return /* @__PURE__ */ u(e.Item, {
+  const i = b(() => {
+    l(c);
+  }), I = $(() => (m == null ? void 0 : m(c)) ?? !1, [m, c]);
+  return /* @__PURE__ */ p(r.Item, {
+    "data-target-id": d(r.Item, t),
     disabled: I,
-    onClick: f,
-    children: [/* @__PURE__ */ n(r, {
-      className: S.actionItemIcon
-    }), o]
-  }, o);
+    onClick: i,
+    children: [/* @__PURE__ */ a(o, {
+      className: B.actionItemIcon
+    }), t]
+  }, t);
 }
-function P({
-  actions: t,
-  inlineActions: o,
-  isDisabled: p,
-  item: r,
-  onOpenChange: l,
-  subMenuActions: f,
+function W({
+  actions: c,
+  inlineActions: t,
+  isDisabled: l,
+  item: o,
+  onOpenChange: m,
+  subMenuActions: i,
   subMenuTrigger: I,
-  viewMode: h = d.LIST
+  viewMode: h = M.LIST
 }) {
   const {
     formatMessage: k
   } = x(), {
-    label: T,
-    icon: B
+    label: s,
+    icon: C
   } = I || {};
-  return /* @__PURE__ */ u("div", {
-    className: S.tableActionBar,
-    children: [h === d.LIST && (o == null ? void 0 : o.map(({
-      onClick: a,
-      label: m,
-      icon: M,
-      isDisabled: c
-    }) => /* @__PURE__ */ n(C, {
-      "aria-label": m,
-      disabled: (c == null ? void 0 : c(r)) ?? !1,
-      icon: M,
-      onClick: s(() => a(r)),
+  return /* @__PURE__ */ p("div", {
+    className: B.tableActionBar,
+    children: [h === M.LIST && (t == null ? void 0 : t.map(({
+      onClick: n,
+      label: e,
+      icon: S,
+      isDisabled: u
+    }) => /* @__PURE__ */ a(f, {
+      "aria-label": e,
+      "data-target-id": d(f, e),
+      disabled: (u == null ? void 0 : u(o)) ?? !1,
+      icon: S,
+      onClick: b(() => n(o)),
       size: "large"
-    }, `${r.id}-${m}`))), t ? /* @__PURE__ */ u(e.Root, {
-      onOpenChange: l,
-      children: [/* @__PURE__ */ n(e.Trigger, {
-        children: h === d.LIST ? /* @__PURE__ */ n(C, {
-          "aria-label": k(b.actionMenu),
-          disabled: p,
-          icon: _,
+    }, `${o.id}-${e}`))), c ? /* @__PURE__ */ p(r.Root, {
+      onOpenChange: m,
+      children: [/* @__PURE__ */ a(r.Trigger, {
+        children: h === M.LIST ? /* @__PURE__ */ a(f, {
+          "aria-label": k(_.actionMenu),
+          "data-target-id": d(f, "openActionMenu"),
+          disabled: l,
+          icon: T,
           size: "large"
-        }) : /* @__PURE__ */ n(i.ActionIconButton, {
-          "aria-label": k(b.actionMenu),
-          disabled: p,
-          icon: _
+        }) : /* @__PURE__ */ a(g.ActionIconButton, {
+          "aria-label": k(_.actionMenu),
+          "data-target-id": d(g.ActionIconButton, "openActionMenu"),
+          disabled: l,
+          icon: T
         })
-      }), /* @__PURE__ */ u(e.Content, {
+      }), /* @__PURE__ */ p(r.Content, {
         align: "start",
-        children: [t.map((a) => /* @__PURE__ */ n(L, {
-          item: r,
-          ...a
-        }, a.label)), f && I && /* @__PURE__ */ u(e.SubMenuRoot, {
-          children: [/* @__PURE__ */ u(e.SubMenuTrigger, {
-            children: [B && /* @__PURE__ */ n(B, {
-              className: S.actionItemIcon
-            }), T]
-          }), /* @__PURE__ */ n(e.SubMenuContent, {
-            children: f.map((a) => /* @__PURE__ */ n(L, {
-              item: r,
-              ...a
-            }, a.label))
+        children: [c.map((n) => /* @__PURE__ */ a(L, {
+          item: o,
+          ...n
+        }, n.label)), i && I && /* @__PURE__ */ p(r.SubMenuRoot, {
+          children: [/* @__PURE__ */ p(r.SubMenuTrigger, {
+            "data-target-id": d(r.SubMenuTrigger, "openActionSubmenu"),
+            children: [C && /* @__PURE__ */ a(C, {
+              className: B.actionItemIcon
+            }), s]
+          }), /* @__PURE__ */ a(r.SubMenuContent, {
+            children: i.map((n) => /* @__PURE__ */ a(L, {
+              item: o,
+              ...n
+            }, n.label))
           })]
         })]
       })]
-    }) : null, h === d.GRID && (o == null ? void 0 : o.map(({
-      onClick: a,
-      label: m,
-      icon: M,
-      isDisabled: c
-    }) => /* @__PURE__ */ n(i.ActionIconButton, {
-      "aria-label": m,
-      disabled: (c == null ? void 0 : c(r)) ?? !1,
-      icon: M,
-      onClick: () => a(r)
-    }, `${r.id}-${m}`)))]
+    }) : null, h === M.GRID && (t == null ? void 0 : t.map(({
+      onClick: n,
+      label: e,
+      icon: S,
+      isDisabled: u
+    }) => /* @__PURE__ */ a(g.ActionIconButton, {
+      "aria-label": e,
+      "data-target-id": d(g.ActionIconButton, e),
+      disabled: (u == null ? void 0 : u(o)) ?? !1,
+      icon: S,
+      onClick: () => n(o)
+    }, `${o.id}-${e}`)))]
   });
 }
 export {
-  P as ItemActionMenu
+  W as ItemActionMenu
 };

package/dist/esm/lib/components/metadata-value/metadata-checkbox-field.js

@@ -5,12 +5,12 @@ const b = ({
   id: a,
   name: i
 }) => {
-  var l, s, r;
+  var n, s, r;
   const {
-    values: n,
+    values: d,
     setFieldValue: u
-  } = C(), h = ((l = n.metadata.fields[a]) == null ? void 0 : l.options) || [], d = ((r = (s = n.metadata.fields[a]) == null ? void 0 : s.value) == null ? void 0 : r.enum) || [], f = (e, o) => {
-    const t = new Set(d);
+  } = C(), h = ((n = d.metadata.fields[a]) == null ? void 0 : n.options) || [], l = ((r = (s = d.metadata.fields[a]) == null ? void 0 : s.value) == null ? void 0 : r.enum) || [], f = (e, o) => {
+    const t = new Set(l);
     o ? t.add(e) : t.delete(e), u(`metadata.fields.${a}.value.enum`, Array.from(t));
   };
   return /* @__PURE__ */ m(c.Legend, {
@@ -18,9 +18,10 @@ const b = ({
     children: h.map(({
       key: e
     }) => {
-      const o = d.includes(e);
+      const o = l.includes(e);
       return /* @__PURE__ */ m(c.Item, {
         checked: o,
+        "data-target-id": `CheckboxItem-filter_${a}_${e}`,
         label: e,
         onCheckedChange: (t) => {
           f(e, t === !0);

package/dist/esm/lib/components/metadata-value/metadata-location-field.js

@@ -1,44 +1,45 @@
 import { ContentField as f } from "@box/blueprint-web";
 import { useFormikContext as u } from "formik";
 import p from "lodash/noop";
-import { useIntl as h } from "react-intl";
-import C from "./messages.js";
+import { useIntl as C } from "react-intl";
+import h from "./messages.js";
 import { jsx as i } from "react/jsx-runtime";
 import '../../../../styles/metadata-location-field.css';const v = "_metadataLocationFieldTrigger_1d3ch_1", L = {
   metadataLocationFieldTrigger: v
-}, S = ({
-  id: t,
+}, N = ({
+  id: e,
   triggerSetValueCallback: n = p,
-  renderer: s = (a) => a
+  renderer: l = (a) => a
 }) => {
   var r;
   const {
     formatMessage: a
-  } = h(), {
-    values: l,
+  } = C(), {
+    values: s,
     setFieldValue: o
-  } = u(), e = (r = l.metadata.fields[t].value.enum) == null ? void 0 : r[0], m = () => {
-    o(`metadata.fields.${t}.value.enum`, []);
+  } = u(), t = (r = s.metadata.fields[e].value.enum) == null ? void 0 : r[0], m = () => {
+    o(`metadata.fields.${e}.value.enum`, []);
   }, d = () => {
     n((c, F, g = !1) => {
-      o(`metadata.fields.${t}.value.enum[0]`, {
+      o(`metadata.fields.${e}.value.enum[0]`, {
         folderId: c,
         folderName: F,
         isFolderShared: g
       });
     });
   };
-  return s(/* @__PURE__ */ i("div", {
+  return l(/* @__PURE__ */ i("div", {
     className: L.metadataLocationFieldTrigger,
     children: /* @__PURE__ */ i(f, {
-      hintText: a(C.selectFolderHint),
-      isSharedFolder: e == null ? void 0 : e.isFolderShared,
+      "data-target-id": `ContentField-filter_${e}`,
+      hintText: a(h.selectFolderHint),
+      isSharedFolder: t == null ? void 0 : t.isFolderShared,
       onClick: d,
       onClickClearButton: m,
-      title: e == null ? void 0 : e.folderName
+      title: t == null ? void 0 : t.folderName
     })
   }));
 };
 export {
-  S as MetadataLocationField
+  N as MetadataLocationField
 };

package/dist/esm/lib/components/metadata-value/metadata-radio-field.js

@@ -1,31 +1,33 @@
 import { useFormikContext as v } from "formik";
 import { Radio as a } from "@box/blueprint-web";
-import { jsx as l, jsxs as c } from "react/jsx-runtime";
-const b = ({
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+const R = ({
   id: t,
   name: i,
-  placeholder: o
+  placeholder: l
 }) => {
-  var u, m, n, d;
+  var r, m, s, u;
   const {
-    values: s,
-    setFieldValue: r
-  } = v(), f = ((n = (m = (u = s.metadata.fields[t]) == null ? void 0 : u.value) == null ? void 0 : m.enum) == null ? void 0 : n[0]) || "", p = ((d = s.metadata.fields[t]) == null ? void 0 : d.options) || [];
-  return /* @__PURE__ */ l(a.Legend, {
+    values: d,
+    setFieldValue: n
+  } = v(), f = ((s = (m = (r = d.metadata.fields[t]) == null ? void 0 : r.value) == null ? void 0 : m.enum) == null ? void 0 : s[0]) || "", p = ((u = d.metadata.fields[t]) == null ? void 0 : u.options) || [];
+  return /* @__PURE__ */ o(a.Legend, {
     header: i,
     children: /* @__PURE__ */ c(a.Group, {
       loop: !0,
       name: i,
       onValueChange: (e) => {
-        r(`metadata.fields.${t}.value.enum[0]`, e);
+        n(`metadata.fields.${t}.value.enum[0]`, e);
       },
       value: f,
-      children: [o && /* @__PURE__ */ l(a.Item, {
-        label: o,
+      children: [l && /* @__PURE__ */ o(a.Item, {
+        "data-target-id": `RadioItem-filter_${t}_placeholder`,
+        label: l,
         value: ""
-      }, o), p.map(({
+      }, l), p.map(({
         key: e
-      }) => /* @__PURE__ */ l(a.Item, {
+      }) => /* @__PURE__ */ o(a.Item, {
+        "data-target-id": `RadioItem-filter_${t}_${e}`,
         label: e,
         value: e
       }, e))]
@@ -33,5 +35,5 @@ const b = ({
   });
 };
 export {
-  b as MetadataRadioField
+  R as MetadataRadioField
 };

package/dist/esm/lib/components/metadata-value/metadata-search-field.js

@@ -1,31 +1,32 @@
 import { SearchInput as i } from "@box/blueprint-web";
 import { useFormikContext as c } from "formik";
 import { useIntl as f } from "react-intl";
-import l from "./messages.js";
-import { jsx as h } from "react/jsx-runtime";
-const g = ({
+import n from "./messages.js";
+import { jsx as d } from "react/jsx-runtime";
+const b = ({
   id: e,
-  name: n,
+  name: s,
   placeholder: m
 }) => {
-  var o, s;
+  var o, l;
   const {
     formatMessage: t
   } = f(), {
     values: u,
     setFieldValue: r
-  } = c(), a = (s = (o = u.metadata.fields[e]) == null ? void 0 : o.value) == null ? void 0 : s.enum;
-  return /* @__PURE__ */ h(i.Controlled, {
+  } = c(), a = (l = (o = u.metadata.fields[e]) == null ? void 0 : o.value) == null ? void 0 : l.enum;
+  return /* @__PURE__ */ d(i.Controlled, {
+    "data-target-id": `SearchInputControlled-filter_${e}`,
     id: e,
-    name: n,
+    name: s,
     onChange: (p) => r(`metadata.fields.${e}.value.enum[0]`, p.target.value),
     onClearInput: () => r(`metadata.fields.${e}.value.enum`, []),
     placeholder: m,
-    searchInputAriaLabel: t(l.searchInputAriaLabel),
-    searchInputClearAriaLabel: t(l.searchInputClearAriaLabel),
+    searchInputAriaLabel: t(n.searchInputAriaLabel),
+    searchInputClearAriaLabel: t(n.searchInputClearAriaLabel),
     value: (a == null ? void 0 : a[0]) || ""
   });
 };
 export {
-  g as MetadataSearchField
+  b as MetadataSearchField
 };

package/dist/types/lib/components/item-action-menu/identifier.d.ts

@@ -0,0 +1,5 @@
+interface NamedComponent {
+    displayName?: string;
+}
+export declare function getDataTargetId(item: NamedComponent, label: string): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.17.3",
+    "version": "1.18.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.76.2",
@@ -18,12 +18,12 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.98.3",
+        "@box/blueprint-web": "^12.99.0",
         "@box/blueprint-web-assets": "^4.82.0",
-        "@box/box-item-type-selector": "^1.11.2",
+        "@box/box-item-type-selector": "^1.11.3",
         "@box/eslint-plugin-blueprint": "1.0.5",
-        "@box/item-icon": "^2.2.2",
-        "@box/metadata-filter": "^1.48.3",
+        "@box/item-icon": "^2.2.3",
+        "@box/metadata-filter": "^1.49.1",
         "@box/storybook-utils": "0.14.19",
         "@box/types": "2.0.0",
         "@tanstack/react-virtual": "^3.10.8",