@box/metadata-view 0.21.1 → 0.23.0

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

@@ -1,37 +1,45 @@
-import { Button as n } from "@box/blueprint-web";
-import { Grid as m } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as c } from "react-intl";
-import { V as t } from "../../../../chunks/types.js";
-import a from "./messages.js";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { FilterRow as d } from "../filter-row/filter-row.js";
-import '../../../../styles/action-bar.css';const f = "_actionBar_17enr_1", p = {
-  actionBar: f
-}, x = ({
-  onViewModeClick: s,
-  viewMode: i,
-  ...e
+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 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
 }) => {
   const {
-    formatMessage: o
-  } = c();
-  return /* @__PURE__ */ l("div", {
-    className: p.actionBar,
-    children: [/* @__PURE__ */ r("div", {
-      children: /* @__PURE__ */ r(d, {
-        ...e
-      })
-    }), /* @__PURE__ */ r("div", {
-      children: /* @__PURE__ */ r(n, {
-        "aria-label": i === t.GRID ? o(a.switchToListView) : o(a.switchToGridView),
-        icon: m,
-        onClick: s,
-        variant: i === t.GRID ? "primary" : "tertiary"
+    formatMessage: a
+  } = f();
+  return /* @__PURE__ */ s("div", {
+    className: c.actionBar,
+    children: [/* @__PURE__ */ i("div", {
+      children: /* @__PURE__ */ i(B, {
+        ...d
       })
+    }), /* @__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"
+      })]
     })]
   });
 };
 export {
-  x as ActionBar,
-  x as default
+  I as ActionBar,
+  I as default
 };

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

@@ -0,0 +1,33 @@
+import { DropdownMenu as r, TriggerButton as p } from "@box/blueprint-web";
+import { ArrowUp as c, ArrowDown as l } from "@box/blueprint-web-assets/icons/Fill";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+const w = ({
+  onSortChange: i,
+  sortableColumnNames: a,
+  sortByColumn: e,
+  sortDirection: d
+}) => {
+  const n = d === "ascending" ? "up" : "down";
+  return /* @__PURE__ */ s(r.Root, {
+    children: [/* @__PURE__ */ o(r.Trigger, {
+      children: /* @__PURE__ */ o(p, {
+        caretDirection: n,
+        label: e,
+        startIcon: n === "up" ? c : l,
+        variant: "tertiary"
+      })
+    }), /* @__PURE__ */ o(r.Content, {
+      children: /* @__PURE__ */ o(r.RadioGroup, {
+        onValueChange: i,
+        value: e,
+        children: a.map((t) => /* @__PURE__ */ o(r.RadioSelectItem, {
+          value: t,
+          children: t
+        }, t))
+      })
+    })]
+  });
+};
+export {
+  w as SortDropdown
+};

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

@@ -1,36 +1,43 @@
 import { FilterChip as e } from "@box/blueprint-web";
-import { Filter as a } from "@box/blueprint-web-assets/icons/Line";
-import { useState as p } from "react";
-import { useIntl as m } from "react-intl";
-import c from "../filter-sidepanel/filter-sidepanel.js";
-import d from "./messages.js";
-import { jsxs as n, Fragment as f, jsx as t } from "react/jsx-runtime";
-const I = ({
-  activeFilterCount: l
+import { Filter as m } from "@box/blueprint-web-assets/icons/Line";
+import { useState as f } from "react";
+import { useIntl as c } from "react-intl";
+import d from "../filter-sidepanel/filter-sidepanel.js";
+import { getInitialFieldValues as h } from "./initial-field-values.js";
+import u from "./messages.js";
+import { jsxs as o, Fragment as g, jsx as t } from "react/jsx-runtime";
+const M = ({
+  activeFilterCount: i,
+  filterGroups: l
 }) => {
   const {
-    formatMessage: r
-  } = m(), [o, i] = p(!1), s = () => i(!0);
-  return /* @__PURE__ */ n(f, {
-    children: [/* @__PURE__ */ t(c, {
-      isOpen: o,
-      onFilterSubmit: () => {
-        i(!1);
-      },
-      onIsOpenChange: i
-    }), /* @__PURE__ */ n(e.ChipButton, {
-      onClick: s,
-      value: "all-filters-chip-btn",
-      children: [/* @__PURE__ */ t(e.Icon, {
-        icon: a
-      }), /* @__PURE__ */ t(e.Label, {
-        children: r(d.allFilters)
-      }), l > 0 ? /* @__PURE__ */ t(e.Status, {
-        children: l.toString()
-      }) : null]
-    })]
+    formatMessage: s
+  } = c(), [n, r] = f(!1), a = () => r(!0);
+  return /* @__PURE__ */ o(g, {
+    children: [
+      // We need to initialize the sidepanel state at the moment it is opened
+      n && /* @__PURE__ */ t(d, {
+        filterGroups: l,
+        getInitialFormValues: () => h(l.flatMap(({
+          filters: p
+        }) => p)),
+        isOpen: n,
+        onIsOpenChange: r
+      }),
+      /* @__PURE__ */ o(e.ChipButton, {
+        onClick: a,
+        value: "all-filters-chip-btn",
+        children: [/* @__PURE__ */ t(e.Icon, {
+          icon: m
+        }), /* @__PURE__ */ t(e.Label, {
+          children: s(u.allFilters)
+        }), i > 0 ? /* @__PURE__ */ t(e.Status, {
+          children: i.toString()
+        }) : null]
+      })
+    ]
   });
 };
 export {
-  I as default
+  M as default
 };

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

@@ -1,86 +1,75 @@
-import { FilterChip as s } from "@box/blueprint-web";
-import { Formik as p, Form as f } from "formik";
-import { useState as S, useRef as g } from "react";
-import v from "./all-filters-chip.js";
-import { StringFilterChip as b } from "./string-filter-chip.js";
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-const w = (e, c, n) => {
+import { FilterChip as n } from "@box/blueprint-web";
+import { Formik as C, 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 { 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 {
     icon: i
   } = e;
   switch (e.fieldType) {
     case "float":
     case "string":
-      return /* @__PURE__ */ r(b, {
-        formRef: n,
+      return /* @__PURE__ */ r(j, {
+        formRef: m,
         icon: i,
         id: e.id,
         name: e.name,
-        selected: c
+        selected: a
       }, e.id);
     case "date":
     case "enum":
     case "multiSelect":
-      return /* @__PURE__ */ d(s.Chip, {
+      return /* @__PURE__ */ p(n.Chip, {
         value: e.id,
-        children: [i && /* @__PURE__ */ r(s.Icon, {
+        children: [i && /* @__PURE__ */ r(n.Icon, {
           icon: i
-        }), /* @__PURE__ */ r(s.Label, {
+        }), /* @__PURE__ */ r(n.Label, {
           children: e.name
         })]
       }, e.id);
     default:
       return null;
   }
-}, T = ({
-  filterOptions: e,
-  isAllFiltersDisabled: c,
-  onFilterSubmit: n
+}, _ = ({
+  disabledPredefinedFilters: e = [],
+  filterGroups: a,
+  isAllFiltersDisabled: m,
+  onFilterSubmit: i
 }) => {
-  const [i, u] = S([]), o = ([t, a]) => {
-    var l;
-    return ((l = a.value) == null ? void 0 : l.enum) && a.value.enum.length > 0;
-  }, h = ({
+  const [o, h] = I([]), f = x(e), F = ([t, l]) => {
+    var s;
+    return ((s = l.value) == null ? void 0 : s.enum) && l.value.enum.length > 0;
+  }, S = ({
     metadata: {
       fields: t
     }
   }) => {
-    const a = Object.entries(t).filter(o).map(([l]) => l);
-    u(a), n(t);
-  }, F = {
-    metadata: {
-      fields: e.reduce((t, a) => {
-        let l;
-        switch (a.fieldType) {
-          case "string":
-          case "float":
-            l = [""];
-            break;
-          default:
-            l = null;
-        }
-        return t[a.id] = {
-          value: l
-        }, t;
-      }, {})
-    }
-  }, m = g(null);
-  return /* @__PURE__ */ r(p, {
-    initialValues: F,
-    onSubmit: h,
-    children: /* @__PURE__ */ r(f, {
-      ref: m,
-      children: /* @__PURE__ */ d(s.Group, {
+    const l = Object.entries(t).filter(F).map(([s]) => s);
+    h(l), i(t);
+  }, c = [...f, ...a], d = c.flatMap(({
+    filters: t
+  }) => t), g = R(d), u = b(null);
+  return /* @__PURE__ */ r(C, {
+    initialValues: g,
+    onSubmit: S,
+    children: /* @__PURE__ */ r(v, {
+      ref: u,
+      children: /* @__PURE__ */ p(n.Group, {
         name: "metadata-view-filters",
         type: "multiple",
-        children: [c ? null : /* @__PURE__ */ r(v, {
-          activeFilterCount: i.length
-        }), e.map((t) => w(t, i.includes(t.id), m))]
+        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))]
       })
     })
   });
 };
 export {
-  T as FilterRow,
-  T as default
+  _ as FilterRow,
+  _ as default
 };

package/dist/esm/lib/components/filter-row/initial-field-values.js

@@ -0,0 +1,21 @@
+const u = (i) => ({
+  metadata: {
+    fields: i.reduce((a, l) => {
+      let e;
+      switch (l.fieldType) {
+        case "string":
+        case "float":
+          e = [""];
+          break;
+        default:
+          e = null;
+      }
+      return a[l.id] = {
+        value: e
+      }, a;
+    }, {})
+  }
+});
+export {
+  u as getInitialFieldValues
+};

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

@@ -1,5 +1,5 @@
 import { defineMessages as e } from "react-intl";
-const a = e({
+const t = e({
   applyButton: {
     id: "groupSharedFeatures.metadataView.filterRow.applyButton",
     defaultMessage: "Apply"
@@ -15,8 +15,12 @@ const a = e({
   allFilters: {
     id: "groupSharedFeatures.metadataView.filterRow.AllFilters",
     defaultMessage: "All Filters"
+  },
+  keywordSearchFilterPlaceholder: {
+    id: "groupSharedFeatures.metadataView.filterRow.keywordSearchFilterPlaceholder",
+    defaultMessage: "Enter keywords"
   }
 });
 export {
-  a as default
+  t as default
 };

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

@@ -0,0 +1,23 @@
+import { useIntl as l } from "react-intl";
+import o from "./messages.js";
+const a = {
+  fieldType: "string",
+  id: "keyword-filter",
+  name: "",
+  selected: !1,
+  variant: "search"
+}, i = (r) => r.reduce((e, t) => (e[t] = !0, e), {}), c = (r) => {
+  const {
+    formatMessage: e
+  } = l(), t = i(r), s = [];
+  return t.keywordSearchFilterGroup || s.push({
+    filters: [{
+      ...a,
+      placeholder: e(o.keywordSearchFilterPlaceholder)
+    }],
+    togglable: !1
+  }), s;
+};
+export {
+  c as usePredefinedFilter
+};

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

@@ -1,43 +1,71 @@
-import { SidePanel as e } from "@box/blueprint-web";
-import { useIntl as c } from "react-intl";
-import l from "./messages.js";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-const p = ({
-  isOpen: t,
-  onIsOpenChange: a,
-  onFilterSubmit: i
+import { SidePanel as t, Accordion as c } from "@box/blueprint-web";
+import { useIntl as b } from "react-intl";
+import { useFormikContext as y } from "formik";
+import { useState as g } from "react";
+import x from "./filter.js";
+import o from "./messages.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+const O = ({
+  filterGroups: n,
+  isOpen: u,
+  onIsOpenChange: i,
+  getInitialFormValues: h
 }) => {
   const {
-    formatMessage: o
-  } = c(), s = () => {
+    formatMessage: r
+  } = b(), {
+    handleSubmit: p,
+    resetForm: s,
+    values: F
+  } = y(), [f] = g(F), C = () => {
+    s({
+      values: h()
+    });
+  }, v = (l) => {
+    s({
+      values: f
+    }), i(l);
+  }, S = () => {
+    p(), i(!1);
   };
-  return /* @__PURE__ */ r(e, {
-    onOpenChange: a,
-    open: t,
+  return /* @__PURE__ */ e(t, {
+    onOpenChange: v,
+    open: u,
     variant: "overlay",
-    children: /* @__PURE__ */ r(e.Overlay, {
-      children: /* @__PURE__ */ n(e.Content, {
-        children: [/* @__PURE__ */ r(e.Header, {
-          children: o(l.filtersHeader)
-        }), /* @__PURE__ */ r(e.ScrollableContainer, {
-          children: /* @__PURE__ */ r("div", {
-            children: "Placeholder for filter controls"
+    children: /* @__PURE__ */ e(t.Overlay, {
+      children: /* @__PURE__ */ d(t.Content, {
+        children: [/* @__PURE__ */ e(t.Header, {
+          children: r(o.filtersHeader)
+        }), /* @__PURE__ */ e(t.ScrollableContainer, {
+          children: /* @__PURE__ */ e(c, {
+            defaultValue: n.map((l, a) => `item-${a}`),
+            type: "multiple",
+            children: n.map((l, a) => /* @__PURE__ */ e(c.Item, {
+              ...l.togglable ? {} : {
+                fixed: "true"
+              },
+              title: l.title,
+              value: `item-${a}`,
+              children: l.filters.map((m) => /* @__PURE__ */ e(x, {
+                ...m
+              }, m.id))
+            }, `accordion-item-${l.title || "unnamed"}`))
           })
-        }), /* @__PURE__ */ n(e.Footer, {
-          children: [/* @__PURE__ */ r(e.Footer.SecondaryButton, {
-            onClick: s,
-            children: o(l.clearAllButton)
-          }), /* @__PURE__ */ r(e.Footer.PrimaryButton, {
-            onClick: i,
-            children: o(l.showResultsButton)
+        }), /* @__PURE__ */ d(t.Footer, {
+          children: [/* @__PURE__ */ e(t.Footer.SecondaryButton, {
+            onClick: C,
+            children: r(o.clearAllButton)
+          }), /* @__PURE__ */ e(t.Footer.PrimaryButton, {
+            onClick: S,
+            children: r(o.showResultsButton)
           })]
-        }), /* @__PURE__ */ r(e.Close, {
-          "aria-label": o(l.closeAriaLabel)
+        }), /* @__PURE__ */ e(t.Close, {
+          "aria-label": r(o.closeAriaLabel)
         })]
       })
     })
   });
 };
 export {
-  p as default
+  O as default
 };

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

@@ -0,0 +1,38 @@
+import { MetadataStringField as t } from "@box/metadata-filter";
+import { MetadataSearchField as i } from "../metadata-search-field/metadata-search-field.js";
+import { jsx as a } from "react/jsx-runtime";
+const d = ({
+  ...e
+}) => {
+  switch (e.variant) {
+    case "search":
+      return /* @__PURE__ */ a(i, {
+        id: e.id,
+        name: e.name,
+        placeholder: e.placeholder
+      });
+    case "default":
+    default:
+      return /* @__PURE__ */ a(t, {
+        fieldNamePrefix: `metadata.fields.${e.id}`,
+        label: e.name
+      });
+  }
+}, m = ({
+  ...e
+}) => {
+  switch (e.fieldType) {
+    case "string":
+      return /* @__PURE__ */ a(d, {
+        ...e
+      });
+    default:
+      return /* @__PURE__ */ a(t, {
+        fieldNamePrefix: `metadata.fields.${e.id}`,
+        label: e.name
+      });
+  }
+};
+export {
+  m as default
+};

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

@@ -0,0 +1,14 @@
+import { defineMessages as a } from "react-intl";
+const r = a({
+  searchInputAriaLabel: {
+    id: "groupSharedFeatures.metadataView.metadataSearchField.searchInputAriaLabel",
+    defaultMessage: "Search"
+  },
+  searchInputClearAriaLabel: {
+    id: "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel",
+    defaultMessage: "Clear"
+  }
+});
+export {
+  r as default
+};

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

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