@box/metadata-view 0.23.0 → 0.23.2

package/dist/chunks/string-filter-chip.js

@@ -0,0 +1,69 @@
+import { Popover as o, FilterChip as t, Button as m } from "@box/blueprint-web";
+import { MetadataStringField as C } from "@box/metadata-filter";
+import { useState as v } from "react";
+import { useIntl as F } from "react-intl";
+import { useFormikContext as g } from "formik";
+import c from "../esm/lib/components/filter-row/messages.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import '../styles/string-filter-chip.css';const y = "_popoverFooter_6tqyh_1", _ = "_filterChipGroup_6tqyh_9", b = {
+  popoverFooter: y,
+  filterChipGroup: _
+}, O = ({
+  formRef: d,
+  id: r,
+  name: n,
+  selected: h,
+  icon: a
+}) => {
+  const {
+    formatMessage: l
+  } = F(), [f, s] = v(!1), p = g(), u = () => {
+    p.handleSubmit(), s(!1);
+  };
+  return /* @__PURE__ */ e("div", {
+    children: /* @__PURE__ */ i(o.Root, {
+      onOpenChange: s,
+      open: f,
+      children: [/* @__PURE__ */ e(o.Trigger, {
+        children: /* @__PURE__ */ i(t.TriggerChip, {
+          selected: h,
+          value: r,
+          children: [a && /* @__PURE__ */ e(t.Icon, {
+            icon: a
+          }), /* @__PURE__ */ e(t.Label, {
+            children: n
+          }), /* @__PURE__ */ e(t.DropdownIndicator, {})]
+        }, r)
+      }), /* @__PURE__ */ i(o.ContentContainer, {
+        align: "start",
+        container: d.current,
+        children: [/* @__PURE__ */ e(o.MainContent, {
+          children: /* @__PURE__ */ e(C, {
+            fieldNamePrefix: `metadata.fields.${r}`,
+            label: n
+          })
+        }), /* @__PURE__ */ i(o.Footer, {
+          className: b.popoverFooter,
+          children: [/* @__PURE__ */ e(m, {
+            onClick: () => {
+              p.setFieldValue(`metadata.fields.${r}.value.enum`, []);
+            },
+            size: "small",
+            variant: "secondary",
+            children: l(c.clearButton)
+          }), /* @__PURE__ */ e(m, {
+            onClick: u,
+            size: "small",
+            type: "submit",
+            variant: "primary",
+            children: l(c.applyButton)
+          })]
+        })]
+      })]
+    })
+  });
+};
+export {
+  O as S,
+  b as s
+};

package/dist/esm/lib/components/action-bar/action-bar.js

@@ -1,45 +1,47 @@
-import { Button as l } from "@box/blueprint-web";
-import { Grid as p } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as f } from "react-intl";
-import { V as r } from "../../../../chunks/types.js";
+import { Button as d } from "@box/blueprint-web";
+import { Grid as f } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as p } from "react-intl";
+import { V as s } from "../../../../chunks/types.js";
 import n from "./messages.js";
-import { SortDropdown as h } from "./sort-dropdown.js";
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { FilterRow as B } from "../filter-row/filter-row.js";
-import '../../../../styles/action-bar.css';const _ = "_actionBar_1bpah_1", w = "_additionalActions_1bpah_6", c = {
-  actionBar: _,
-  additionalActions: w
-}, I = ({
-  onViewModeClick: m,
-  viewMode: o,
-  sortableColumnNames: e,
-  sortDropdownProps: t,
-  ...d
+import { SortDropdown as w } from "./sort-dropdown.js";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { FilterRow as _ } from "../filter-row/filter-row.js";
+import '../../../../styles/action-bar.css';const R = "_actionBar_1jgp4_1", B = "_filterRow_1jgp4_8", g = "_additionalActions_1jgp4_13", o = {
+  actionBar: R,
+  filterRow: B,
+  additionalActions: g
+}, y = ({
+  onViewModeClick: e,
+  viewMode: t,
+  sortableColumnNames: m,
+  sortDropdownProps: r,
+  ...l
 }) => {
   const {
     formatMessage: a
-  } = f();
-  return /* @__PURE__ */ s("div", {
-    className: c.actionBar,
+  } = p();
+  return /* @__PURE__ */ c("div", {
+    className: o.actionBar,
     children: [/* @__PURE__ */ i("div", {
-      children: /* @__PURE__ */ i(B, {
-        ...d
+      className: o.filterRow,
+      children: /* @__PURE__ */ i(_, {
+        ...l
       })
-    }), /* @__PURE__ */ s("div", {
-      className: c.additionalActions,
-      children: [t && /* @__PURE__ */ i(h, {
-        ...t,
-        sortableColumnNames: e
-      }), /* @__PURE__ */ i(l, {
-        "aria-label": o === r.GRID ? a(n.switchToListView) : a(n.switchToGridView),
-        icon: p,
-        onClick: m,
-        variant: o === r.GRID ? "primary" : "tertiary"
+    }), /* @__PURE__ */ c("div", {
+      className: o.additionalActions,
+      children: [r && /* @__PURE__ */ i(w, {
+        ...r,
+        sortableColumnNames: m
+      }), /* @__PURE__ */ i(d, {
+        "aria-label": t === s.GRID ? a(n.switchToListView) : a(n.switchToGridView),
+        icon: f,
+        onClick: e,
+        variant: t === s.GRID ? "primary" : "tertiary"
       })]
     })]
   });
 };
 export {
-  I as ActionBar,
-  I as default
+  y as ActionBar,
+  y as default
 };

package/dist/esm/lib/components/filter-row/filter-row.js

@@ -1,12 +1,12 @@
-import { FilterChip as n } from "@box/blueprint-web";
-import { Formik as C, Form as v } from "formik";
+import { FilterChip as a } from "@box/blueprint-web";
+import { Formik as g, Form as v } from "formik";
 import { useState as I, useRef as b } from "react";
 import w from "./all-filters-chip.js";
-import { getInitialFieldValues as R } from "./initial-field-values.js";
-import { StringFilterChip as j } from "./string-filter-chip.js";
+import { getInitialFieldValues as G } from "./initial-field-values.js";
+import { s as R, S as j } from "../../../../chunks/string-filter-chip.js";
 import { usePredefinedFilter as x } from "./use-predefined-filter.js";
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
-const G = (e, a, m) => {
+const y = (e, n, m) => {
   const {
     icon: i
   } = e;
@@ -18,16 +18,16 @@ const G = (e, a, m) => {
         icon: i,
         id: e.id,
         name: e.name,
-        selected: a
+        selected: n
       }, e.id);
     case "date":
     case "enum":
     case "multiSelect":
-      return /* @__PURE__ */ p(n.Chip, {
+      return /* @__PURE__ */ p(a.Chip, {
         value: e.id,
-        children: [i && /* @__PURE__ */ r(n.Icon, {
+        children: [i && /* @__PURE__ */ r(a.Icon, {
           icon: i
-        }), /* @__PURE__ */ r(n.Label, {
+        }), /* @__PURE__ */ r(a.Label, {
           children: e.name
         })]
       }, e.id);
@@ -36,7 +36,7 @@ const G = (e, a, m) => {
   }
 }, _ = ({
   disabledPredefinedFilters: e = [],
-  filterGroups: a,
+  filterGroups: n,
   isAllFiltersDisabled: m,
   onFilterSubmit: i
 }) => {
@@ -50,21 +50,22 @@ const G = (e, a, m) => {
   }) => {
     const l = Object.entries(t).filter(F).map(([s]) => s);
     h(l), i(t);
-  }, c = [...f, ...a], d = c.flatMap(({
+  }, c = [...f, ...n], d = c.flatMap(({
     filters: t
-  }) => t), g = R(d), u = b(null);
-  return /* @__PURE__ */ r(C, {
-    initialValues: g,
+  }) => t), C = G(d), u = b(null);
+  return /* @__PURE__ */ r(g, {
+    initialValues: C,
     onSubmit: S,
     children: /* @__PURE__ */ r(v, {
       ref: u,
-      children: /* @__PURE__ */ p(n.Group, {
+      children: /* @__PURE__ */ p(a.Group, {
+        className: R.filterChipGroup,
         name: "metadata-view-filters",
         type: "multiple",
         children: [m ? null : /* @__PURE__ */ r(w, {
           activeFilterCount: o.length,
           filterGroups: c
-        }), d.filter((t) => t.shouldRenderChip).map((t) => G(t, o.includes(t.id), u))]
+        }), d.filter((t) => t.shouldRenderChip).map((t) => y(t, o.includes(t.id), u))]
       })
     })
   });

package/dist/esm/lib/components/filter-row/string-filter-chip.js

@@ -1,67 +1,11 @@
-import { Popover as o, FilterChip as t, Button as m } from "@box/blueprint-web";
-import { MetadataStringField as v } from "@box/metadata-filter";
-import { useState as g } from "react";
-import { useIntl as F } from "react-intl";
-import { useFormikContext as C } from "formik";
-import c from "./messages.js";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import '../../../../styles/string-filter-chip.css';const b = "_popoverFooter_1tgko_1", k = {
-  popoverFooter: b
-}, P = ({
-  formRef: d,
-  id: r,
-  name: i,
-  selected: f,
-  icon: a
-}) => {
-  const {
-    formatMessage: l
-  } = F(), [h, s] = g(!1), p = C(), u = () => {
-    p.handleSubmit(), s(!1);
-  };
-  return /* @__PURE__ */ e("div", {
-    children: /* @__PURE__ */ n(o.Root, {
-      onOpenChange: s,
-      open: h,
-      children: [/* @__PURE__ */ e(o.Trigger, {
-        children: /* @__PURE__ */ n(t.TriggerChip, {
-          selected: f,
-          value: r,
-          children: [a && /* @__PURE__ */ e(t.Icon, {
-            icon: a
-          }), /* @__PURE__ */ e(t.Label, {
-            children: i
-          }), /* @__PURE__ */ e(t.DropdownIndicator, {})]
-        }, r)
-      }), /* @__PURE__ */ n(o.ContentContainer, {
-        align: "start",
-        container: d.current,
-        children: [/* @__PURE__ */ e(o.MainContent, {
-          children: /* @__PURE__ */ e(v, {
-            fieldNamePrefix: `metadata.fields.${r}`,
-            label: i
-          })
-        }), /* @__PURE__ */ n(o.Footer, {
-          className: k.popoverFooter,
-          children: [/* @__PURE__ */ e(m, {
-            onClick: () => {
-              p.setFieldValue(`metadata.fields.${r}.value.enum`, []);
-            },
-            size: "small",
-            variant: "secondary",
-            children: l(c.clearButton)
-          }), /* @__PURE__ */ e(m, {
-            onClick: u,
-            size: "small",
-            type: "submit",
-            variant: "primary",
-            children: l(c.applyButton)
-          })]
-        })]
-      })]
-    })
-  });
-};
+import "@box/blueprint-web";
+import "@box/metadata-filter";
+import "react";
+import "react-intl";
+import "formik";
+import { S as f } from "../../../../chunks/string-filter-chip.js";
+import "./messages.js";
+import "react/jsx-runtime";
 export {
-  P as StringFilterChip
+  f as StringFilterChip
 };

package/dist/esm/lib/metadata-view.js

@@ -1,54 +1,59 @@
 import { useState as w } from "react";
 import u from "./components/error-state/error-state.js";
 import V from "./components/pagination/pagination.js";
-import { MetadataGrid as C } from "./components/metadata-grid/metadata-grid.js";
-import { SwitchCase as I, Case as n } from "./components/switch-case/switch-case.js";
+import { MetadataGrid as I } from "./components/metadata-grid/metadata-grid.js";
+import { SwitchCase as T, Case as i } from "./components/switch-case/switch-case.js";
 import { V as o } from "../../chunks/types.js";
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { ActionBar as T } from "./components/action-bar/action-bar.js";
-import y from "./components/empty-state/empty-state.js";
-import L from "./components/metadata-table/metadata-table.js";
-import '../../styles/metadata-view.css';const g = {};
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { ActionBar as y } from "./components/action-bar/action-bar.js";
+import L from "./components/empty-state/empty-state.js";
+import g from "./components/metadata-table/metadata-table.js";
+import '../../styles/metadata-view.css';const x = "_contentContainer_19ns1_8", s = {
+  contentContainer: x
+};
 function A({
   actionBarProps: a,
-  columns: c,
+  columns: l,
   tableProps: m,
-  hasError: l,
-  onRefresh: p,
-  initialViewMode: f = o.LIST,
+  hasError: p,
+  onRefresh: f,
+  initialViewMode: h = o.LIST,
   ...r
 }) {
-  const [e, d] = w(f), h = () => {
-    e === o.LIST ? d(o.GRID) : d(o.LIST);
-  }, M = !m.isLoading && r.items.length === 0, S = a.sortDropdownProps && c.filter((i) => i.type !== "multiSelect" && i.type !== "enum").map((i) => i.textValue);
-  return /* @__PURE__ */ s("div", {
-    className: g.container,
-    children: [/* @__PURE__ */ t(T, {
+  const [e, c] = w(h), C = () => {
+    e === o.LIST ? c(o.GRID) : c(o.LIST);
+  }, M = !m.isLoading && r.items.length === 0, S = a.sortDropdownProps && l.filter((n) => n.type !== "multiSelect" && n.type !== "enum").map((n) => n.textValue);
+  return /* @__PURE__ */ d("div", {
+    className: s.container,
+    children: [/* @__PURE__ */ t(y, {
       ...a,
-      onViewModeClick: h,
+      onViewModeClick: C,
       sortableColumnNames: S,
       viewMode: e
-    }), /* @__PURE__ */ s(I, {
-      children: [/* @__PURE__ */ t(n, {
-        condition: l,
-        children: /* @__PURE__ */ t(u, {
-          onRefresh: p
-        })
-      }), /* @__PURE__ */ t(n, {
-        condition: M,
-        children: /* @__PURE__ */ t(y, {})
-      }), /* @__PURE__ */ t(n, {
-        condition: e === o.LIST,
-        children: /* @__PURE__ */ t(L, {
-          ...r,
-          ...m
-        })
-      }), /* @__PURE__ */ t(n, {
-        condition: e === o.GRID,
-        children: /* @__PURE__ */ t(C, {
-          ...r
-        })
-      })]
+    }), /* @__PURE__ */ t("div", {
+      className: s.contentContainer,
+      children: /* @__PURE__ */ d(T, {
+        children: [/* @__PURE__ */ t(i, {
+          condition: p,
+          children: /* @__PURE__ */ t(u, {
+            onRefresh: f
+          })
+        }), /* @__PURE__ */ t(i, {
+          condition: M,
+          children: /* @__PURE__ */ t(L, {})
+        }), /* @__PURE__ */ t(i, {
+          condition: e === o.LIST,
+          children: /* @__PURE__ */ t(g, {
+            ...r,
+            ...m
+          })
+        }), /* @__PURE__ */ t(i, {
+          condition: e === o.GRID,
+          children: /* @__PURE__ */ t(I, {
+            ...r
+          })
+        })]
+      })
     }), /* @__PURE__ */ t(V, {})]
   });
 }

package/dist/styles/action-bar.css

@@ -1 +1 @@
-._actionBar_1bpah_1{display:flex;justify-content:space-between}._additionalActions_1bpah_6{display:flex}
+._actionBar_1jgp4_1{display:flex;justify-content:space-between;padding:var(--space-4) 0}@media (max-width: 390px){._filterRow_1jgp4_8{display:none}}._additionalActions_1jgp4_13{display:flex;height:var(--size-8)}@media (max-width: 390px){._additionalActions_1jgp4_13{flex-grow:1;justify-content:space-between}}

package/dist/styles/metadata-view.css

@@ -0,0 +1 @@
+._contentContainer_19ns1_8{overflow:auto}

package/dist/styles/string-filter-chip.css

@@ -1 +1 @@
-._popoverFooter_1tgko_1{display:flex;flex-direction:row;gap:var(--space-2);align-items:center;justify-content:flex-end}
+._popoverFooter_6tqyh_1{display:flex;flex-direction:row;gap:var(--space-2);align-items:center;justify-content:flex-end}._filterChipGroup_6tqyh_9{display:flex;flex-wrap:wrap}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.23.0",
+    "version": "0.23.2",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -19,8 +19,8 @@
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.57.0",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.13.3",
-        "@box/metadata-filter": "^1.14.3",
+        "@box/item-icon": "^0.13.5",
+        "@box/metadata-filter": "^1.14.5",
         "@box/storybook-utils": "0.13.11",
         "@box/types": "0.2.0",
         "react-intl": "^6.4.2"