@box/metadata-view 0.39.4 → 0.41.0

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

@@ -1,59 +1,84 @@
-import { useState as v } from "react";
-import { useIntl as F } from "react-intl";
-import { Popover as e, FilterChip as r, Button as l } from "@box/blueprint-web";
-import { useFormikContext as g } from "formik";
-import m from "../esm/lib/components/filter-row/messages.js";
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import '../styles/form-filter-chip.css';const y = "_popoverFooter_6tqyh_1", _ = "_filterChipGroup_6tqyh_9", b = {
-  popoverFooter: y,
-  filterChipGroup: _
-}, j = ({
-  children: c,
-  formRef: h,
-  icon: i,
-  id: n,
-  name: u,
-  selected: d
+import { Popover as n, FilterChip as i, Button as v } from "@box/blueprint-web";
+import { useFormikContext as R, getIn as r } from "formik";
+import { useState as f, useMemo as V } from "react";
+import { useIntl as G } from "react-intl";
+import g from "../esm/lib/components/filter-row/messages.js";
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import '../styles/form-filter-chip.css';const M = "_popoverFooter_z1gpu_1", j = "_popoverContent_z1gpu_9", N = "_filterChipGroup_z1gpu_13", h = {
+  popoverFooter: M,
+  popoverContent: j,
+  filterChipGroup: N
+}, H = ({
+  children: y,
+  formRef: C,
+  icon: u,
+  id: e,
+  name: F
 }) => {
   const {
-    formatMessage: s
-  } = F(), [f, p] = v(!1), a = g(), C = () => {
-    a.handleSubmit(), p(!1);
-  };
-  return /* @__PURE__ */ o("div", {
-    children: /* @__PURE__ */ t(e.Root, {
-      onOpenChange: p,
-      open: f,
-      children: [/* @__PURE__ */ o(e.Trigger, {
-        children: /* @__PURE__ */ t(r.TriggerChip, {
-          selected: d,
-          value: n,
-          children: [i && /* @__PURE__ */ o(r.Icon, {
-            icon: i
-          }), /* @__PURE__ */ o(r.Label, {
-            children: u
-          }), /* @__PURE__ */ o(r.DropdownIndicator, {})]
-        }, n)
-      }), /* @__PURE__ */ t(e.ContentContainer, {
+    formatMessage: c
+  } = G(), [T, m] = f(!1), {
+    handleSubmit: $,
+    setFieldValue: s,
+    resetForm: D,
+    values: t
+  } = R(), _ = () => {
+    $(), m(!1);
+  }, [b, S] = f(t), z = (a) => {
+    m(a), a ? S(t) : D({
+      values: b
+    });
+  }, B = () => {
+    s(`metadata.fields.${e}.value.enum`, []), s(`metadata.fields.${e}.value.range`, {}), s(`metadata.fields.${e}.value.relativeType`, void 0), s(`metadata.fields.${e}.value.relativeDays`, void 0), s(`metadata.fields.${e}.value.customType`, "anyTime"), s(`metadata.fields.${e}.value.customDays`, void 0);
+  }, I = () => {
+    const a = r(t, `metadata.fields.${e}.value.customType`), o = a && a !== "anyTime" && a !== "customRange", d = r(t, `metadata.fields.${e}.value.relativeType`), x = d && d !== "customRange", O = r(t, `metadata.fields.${e}.value.range.gt`) || r(t, `metadata.fields.${e}.value.range.lt`);
+    return (o || x) && !O;
+  }, k = V(() => {
+    const a = r(t, `metadata.fields.${e}.fieldType`);
+    if (a === "string" || a === "float") {
+      const o = r(t, `metadata.fields.${e}.value.enum`);
+      return o && o.length > 0 && !!o[0];
+    }
+    if (a === "date") {
+      const o = r(t, `metadata.fields.${e}.value.range`);
+      return o && (o.gt || o.lt);
+    }
+    return !1;
+  }, [t, e]);
+  return /* @__PURE__ */ l("div", {
+    children: /* @__PURE__ */ p(n.Root, {
+      onOpenChange: z,
+      open: T,
+      children: [/* @__PURE__ */ l(n.Trigger, {
+        children: /* @__PURE__ */ p(i.TriggerChip, {
+          selected: k,
+          value: e,
+          children: [u && /* @__PURE__ */ l(i.Icon, {
+            icon: u
+          }), /* @__PURE__ */ l(i.Label, {
+            children: F
+          }), /* @__PURE__ */ l(i.DropdownIndicator, {})]
+        }, e)
+      }), /* @__PURE__ */ p(n.ContentContainer, {
         align: "start",
-        container: h.current,
-        children: [/* @__PURE__ */ o(e.MainContent, {
-          children: c
-        }), /* @__PURE__ */ t(e.Footer, {
-          className: b.popoverFooter,
-          children: [/* @__PURE__ */ o(l, {
-            onClick: () => {
-              a.setFieldValue(`metadata.fields.${n}.value.enum`, []);
-            },
+        className: h.popoverContent,
+        container: C.current,
+        children: [/* @__PURE__ */ l(n.MainContent, {
+          children: y
+        }), /* @__PURE__ */ p(n.Footer, {
+          className: h.popoverFooter,
+          children: [/* @__PURE__ */ l(v, {
+            onClick: B,
             size: "small",
             variant: "secondary",
-            children: s(m.clearButton)
-          }), /* @__PURE__ */ o(l, {
-            onClick: C,
+            children: c(g.clearButton)
+          }), /* @__PURE__ */ l(v, {
+            disabled: I(),
+            onClick: _,
             size: "small",
             type: "submit",
             variant: "primary",
-            children: s(m.applyButton)
+            children: c(g.applyButton)
           })]
         })]
       })]
@@ -61,6 +86,6 @@ import '../styles/form-filter-chip.css';const y = "_popoverFooter_6tqyh_1", _ =
   });
 };
 export {
-  j as F,
-  b as s
+  H as F,
+  h as s
 };

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

@@ -1,43 +1,48 @@
-import { FilterChip as e } from "@box/blueprint-web";
-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
+import { FilterChip as t } from "@box/blueprint-web";
+import { Filter as S } from "@box/blueprint-web-assets/icons/Line";
+import { useFormikContext as I } from "formik";
+import { useState as O, useMemo as x } from "react";
+import { useIntl as b } from "react-intl";
+import j from "../filter-sidepanel/filter-sidepanel.js";
+import { getInitialFieldValues as M } from "./initial-field-values.js";
+import k from "./messages.js";
+import { jsxs as F, Fragment as A, jsx as l } from "react/jsx-runtime";
+const D = ({
+  filterGroups: r
 }) => {
   const {
-    formatMessage: s
-  } = c(), [n, r] = f(!1), a = () => r(!0);
-  return /* @__PURE__ */ o(g, {
+    formatMessage: f
+  } = b(), {
+    values: i
+  } = I(), [a, n] = O(!1), d = () => n(!0), v = ([o, e]) => {
+    var m, u, p, c, g, h;
+    return ((m = e.value) == null ? void 0 : m.enum) && e.value.enum.length > 0 && !!e.value.enum[0] || ((u = e.value) == null ? void 0 : u.range) && (((c = (p = e.value) == null ? void 0 : p.range) == null ? void 0 : c.gt) || ((h = (g = e.value) == null ? void 0 : g.range) == null ? void 0 : h.lt));
+  }, s = x(() => Object.entries(i.metadata.fields).filter(v).length, [i]);
+  return /* @__PURE__ */ F(A, {
     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
+      a && /* @__PURE__ */ l(j, {
+        filterGroups: r,
+        getInitialFormValues: () => M(r.flatMap(({
+          filters: o
+        }) => o)),
+        isOpen: a,
+        onIsOpenChange: n
       }),
-      /* @__PURE__ */ o(e.ChipButton, {
-        onClick: a,
+      /* @__PURE__ */ F(t.ChipButton, {
+        onClick: d,
         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()
+        children: [/* @__PURE__ */ l(t.Icon, {
+          icon: S
+        }), /* @__PURE__ */ l(t.Label, {
+          children: f(k.allFilters)
+        }), s > 0 ? /* @__PURE__ */ l(t.Status, {
+          children: s.toString()
         }) : null]
       })
     ]
   });
 };
 export {
-  M as default
+  D as default
 };

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

@@ -1,61 +1,53 @@
-import { FilterChip as I } from "@box/blueprint-web";
-import { Formik as S, Form as v } from "formik";
-import { useState as R, useEffect as g, useRef as w } from "react";
-import C from "./all-filters-chip.js";
-import { getInitialFieldValues as G } from "./initial-field-values.js";
-import { MetadataFilterChip as b } from "./metadata-filter-chip.js";
-import { usePredefinedFilter as j } from "./predefinedFilters/use-predefined-filter.js";
-import { s as x } from "../../../../chunks/form-filter-chip.js";
-import { jsx as l, jsxs as V } from "react/jsx-runtime";
-const p = (s) => Object.entries(s).filter(([r, t]) => {
+import { FilterChip as d } from "@box/blueprint-web";
+import { Formik as c, Form as h } from "formik";
+import { useRef as F } from "react";
+import R from "./all-filters-chip.js";
+import { getInitialFieldValues as v } from "./initial-field-values.js";
+import { MetadataFilterChip as G } from "./metadata-filter-chip.js";
+import { usePredefinedFilter as b } from "./predefinedFilters/use-predefined-filter.js";
+import { s as g } from "../../../../chunks/form-filter-chip.js";
+import { jsx as l, jsxs as j } from "react/jsx-runtime";
+const z = (o) => Object.entries(o).filter(([t, r]) => {
   var i;
-  return ((i = t.value) == null ? void 0 : i.enum) && t.value.enum.length > 0 && t.value.enum[0] !== "";
-}).map(([r]) => r), q = ({
-  predefinedFilterOptions: s,
-  filterGroups: r = [],
-  initialFilterValues: t,
+  return ((i = r.value) == null ? void 0 : i.enum) && r.value.enum.length > 0 && r.value.enum[0] !== "";
+}).map(([t]) => t), A = ({
+  predefinedFilterOptions: o,
+  filterGroups: t = [],
+  initialFilterValues: r,
   isAllFiltersDisabled: i,
-  onFilterSubmit: o
+  onFilterSubmit: m
 }) => {
-  const [a, n] = R([]), f = j(s), F = ({
+  const p = b(o), u = ({
     metadata: {
       fields: e
     }
   }) => {
-    const h = p(e);
-    n(h), o && o(e);
-  }, m = [...f, ...r], u = m.flatMap(({
+    m && m(e);
+  }, s = [...p, ...t], a = s.flatMap(({
     filters: e
-  }) => e), d = G(u, t);
-  g(() => {
-    const e = p(d.metadata.fields);
-    n(e);
-  }, []);
-  const c = w(null);
-  return /* @__PURE__ */ l(S, {
+  }) => e), f = v(a, r), n = F(null);
+  return /* @__PURE__ */ l(c, {
     enableReinitialize: !0,
-    initialValues: d,
-    onSubmit: F,
-    children: /* @__PURE__ */ l(v, {
-      ref: c,
-      children: /* @__PURE__ */ V(I.Group, {
-        className: x.filterChipGroup,
+    initialValues: f,
+    onSubmit: u,
+    children: /* @__PURE__ */ l(h, {
+      ref: n,
+      children: /* @__PURE__ */ j(d.Group, {
+        className: g.filterChipGroup,
         name: "metadata-view-filters",
         type: "multiple",
-        children: [i ? null : /* @__PURE__ */ l(C, {
-          activeFilterCount: a.length,
-          filterGroups: m
-        }), u.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ l(b, {
+        children: [i ? null : /* @__PURE__ */ l(R, {
+          filterGroups: s
+        }), a.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ l(G, {
           filterOption: e,
-          formRef: c,
-          selected: a.includes(e.id)
+          formRef: n
         }, e.id))]
       })
     })
   });
 };
 export {
-  q as FilterRow,
-  q as default,
-  p as getSelectedFilterIds
+  A as FilterRow,
+  A as default,
+  z as getSelectedFilterIds
 };

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

@@ -1,7 +1,7 @@
-import "react";
-import "react-intl";
 import "@box/blueprint-web";
 import "formik";
+import "react";
+import "react-intl";
 import { F as e, F as f } from "../../../../chunks/form-filter-chip.js";
 import "./messages.js";
 import "react/jsx-runtime";

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

@@ -1,19 +1,21 @@
-const r = (t) => ({
-  key: t,
-  id: t
-}), c = ({
-  fieldType: t,
-  options: e
-}) => ["enum", "multiSelect"].includes(t) ? (e || []).map(r) : [], l = (t, e) => ({
+const c = (e) => ({
+  key: e,
+  id: e
+}), o = ({
+  fieldType: e,
+  options: n
+}) => ["enum", "multiSelect"].includes(e) ? (n || []).map(c) : [], l = (e, n) => ({
   metadata: {
-    fields: t.reduce((a, n) => {
+    fields: e.reduce((a, t) => {
       var i;
-      const u = (i = e == null ? void 0 : e[n.id]) == null ? void 0 : i.value, o = {
-        enum: []
+      const u = (i = n == null ? void 0 : n[t.id]) == null ? void 0 : i.value, d = {
+        enum: [],
+        customType: "anyTime"
       };
-      return a[n.id] = {
-        value: u || o,
-        options: c(n)
+      return a[t.id] = {
+        value: u || d,
+        fieldType: t.fieldType,
+        options: o(t)
       }, a;
     }, {})
   }

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

@@ -1,56 +1,73 @@
-import { MetadataStringField as d } from "@box/metadata-filter";
-import { F as p } from "../../../../chunks/form-filter-chip.js";
-import { SelectFilterChip as f } from "./select-filter-chip.js";
-import { MetadataFileChip as u } from "../metadata-value/metadata-file-chip.js";
+import { MetadataStringField as f, MetadataDateField as F } from "@box/metadata-filter";
+import { useIntl as h } from "react-intl";
+import { F as n } from "../../../../chunks/form-filter-chip.js";
+import { SelectFilterChip as C } from "./select-filter-chip.js";
+import { MetadataFileChip as M } from "../metadata-value/metadata-file-chip.js";
 import { jsx as t } from "react/jsx-runtime";
-const S = ({
-  filterOption: n,
-  formRef: a,
-  selected: m
+const y = ({
+  filterOption: s,
+  formRef: i
 }) => {
   const {
-    fieldType: r,
-    icon: l,
+    canUseRelativeDates: c,
+    customDateFilterOptions: d,
+    fieldType: o,
+    icon: r,
     id: e,
-    name: i,
-    options: s,
-    variant: c
-  } = n, o = `metadata.fields.${e}`;
-  switch (r) {
+    name: a,
+    options: m,
+    variant: p
+  } = s, {
+    locale: u
+  } = h(), l = `metadata.fields.${e}`;
+  switch (o) {
     case "date":
+      return /* @__PURE__ */ t(n, {
+        formRef: i,
+        icon: r,
+        id: e,
+        name: a,
+        children: /* @__PURE__ */ t(F, {
+          canUseRelativeDates: c,
+          customDateFilterOptions: d,
+          direction: "vertical",
+          fieldNamePrefix: l,
+          label: a,
+          locale: u
+        })
+      }, e);
     case "float":
     case "string":
-      return /* @__PURE__ */ t(p, {
-        formRef: a,
-        icon: l,
+      return /* @__PURE__ */ t(n, {
+        formRef: i,
+        icon: r,
         id: e,
-        name: i,
-        selected: m,
-        children: /* @__PURE__ */ t(d, {
-          fieldNamePrefix: o,
-          label: i
+        name: a,
+        children: /* @__PURE__ */ t(f, {
+          fieldNamePrefix: l,
+          label: a
         })
       }, e);
     case "multiSelect":
-      if (c === "file")
-        return /* @__PURE__ */ t(u, {
+      if (p === "file")
+        return /* @__PURE__ */ t(M, {
           id: e
         });
     case "enum":
-      return /* @__PURE__ */ t(f, {
-        fieldNamePrefix: o,
-        formRef: a,
-        icon: l,
+      return /* @__PURE__ */ t(C, {
+        fieldNamePrefix: l,
+        formRef: i,
+        icon: r,
         id: e,
-        name: i,
-        options: s,
-        type: r
+        name: a,
+        options: m,
+        type: o
       });
     default:
       return null;
   }
 };
 export {
-  S as MetadataFilterChip,
-  S as default
+  y as MetadataFilterChip,
+  y as default
 };

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

@@ -1,9 +1,9 @@
-import { MetadataStringField as o, MetadataMultiSelectField as s, MetadataEnumField as f, MetadataDateField as m } from "@box/metadata-filter";
-import { useIntl as c } from "react-intl";
+import { MetadataStringField as o, MetadataMultiSelectField as f, MetadataEnumField as s, MetadataDateField as m } from "@box/metadata-filter";
+import { useIntl as n } from "react-intl";
 import { MetadataFileField as F } from "../metadata-value/metadata-file-field.js";
 import { MetadataLocationField as M } from "../metadata-value/metadata-location-field.js";
-import { MetadataSearchField as x } from "../metadata-value/metadata-search-field.js";
-import { MetadataRadioField as S } from "../metadata-value/metadata-radio-field.js";
+import { MetadataRadioField as x } from "../metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as S } from "../metadata-value/metadata-search-field.js";
 import { jsx as t } from "react/jsx-runtime";
 const i = (e) => `metadata.fields.${e}`, b = ({
   id: e,
@@ -13,7 +13,7 @@ const i = (e) => `metadata.fields.${e}`, b = ({
 }) => {
   switch (r) {
     case "search":
-      return /* @__PURE__ */ t(x, {
+      return /* @__PURE__ */ t(S, {
         id: e,
         name: a,
         placeholder: l
@@ -38,7 +38,7 @@ const i = (e) => `metadata.fields.${e}`, b = ({
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(s, {
+      return /* @__PURE__ */ t(f, {
         fieldNamePrefix: i(e),
         label: a || "",
         portalElement: r
@@ -49,27 +49,27 @@ const i = (e) => `metadata.fields.${e}`, b = ({
   name: a,
   parentRef: l,
   variant: r,
-  renderer: d,
-  triggerCallback: n
+  renderer: c,
+  triggerCallback: d
 }) => {
   const {
     locale: u
-  } = c();
+  } = n();
   switch (r) {
     case "file":
       return /* @__PURE__ */ t(M, {
         id: e,
-        renderer: d,
-        triggerSetValueCallback: n
+        renderer: c,
+        triggerSetValueCallback: d
       });
     case "radio":
-      return /* @__PURE__ */ t(S, {
+      return /* @__PURE__ */ t(x, {
         id: e,
         name: a
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(f, {
+      return /* @__PURE__ */ t(s, {
         fieldNamePrefix: i(e),
         label: a || "",
         locale: u,
@@ -77,22 +77,25 @@ const i = (e) => `metadata.fields.${e}`, b = ({
       });
   }
 }, P = ({
-  id: e,
-  customLabels: a,
-  variant: l
+  customLabels: e,
+  canUseRelativeDates: a,
+  customDateFilterOptions: l,
+  id: r,
+  name: c
 }) => {
   const {
-    locale: r
-  } = c();
+    locale: d
+  } = n();
   return /* @__PURE__ */ t(m, {
-    canUseRelativeDates: l === "relative",
-    customFieldLabels: a,
+    canUseRelativeDates: a,
+    customDateFilterOptions: l,
+    customFieldLabels: e,
     direction: "vertical",
-    fieldNamePrefix: i(e),
-    label: "",
-    locale: r
+    fieldNamePrefix: i(r),
+    label: c || "",
+    locale: d
   });
-}, R = ({
+}, k = ({
   ...e
 }) => {
   switch (e.fieldType) {
@@ -101,6 +104,10 @@ const i = (e) => `metadata.fields.${e}`, b = ({
       return /* @__PURE__ */ t(b, {
         ...e
       });
+    case "date":
+      return /* @__PURE__ */ t(P, {
+        ...e
+      });
     case "multiSelect":
       return /* @__PURE__ */ t(g, {
         ...e
@@ -109,14 +116,10 @@ const i = (e) => `metadata.fields.${e}`, b = ({
       return /* @__PURE__ */ t(h, {
         ...e
       });
-    case "date":
-      return /* @__PURE__ */ t(P, {
-        ...e
-      });
     default:
       return null;
   }
 };
 export {
-  R as default
+  k as default
 };

package/dist/esm/lib/components/metadata-table/messages.js

@@ -1,5 +1,5 @@
 import { defineMessages as e } from "react-intl";
-const s = e({
+const a = e({
   listView: {
     id: "groupSharedFeatures.metadataView.itemList.listView",
     defaultMessage: "List view"
@@ -7,8 +7,12 @@ const s = e({
   selectAll: {
     id: "groupSharedFeatures.metadataView.itemList.selectAll",
     defaultMessage: "Select all"
+  },
+  unselectedOptionLabel: {
+    id: "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel",
+    defaultMessage: "--"
   }
 });
 export {
-  s as default
+  a as default
 };