@box/metadata-view 0.36.3 → 0.37.1

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

@@ -1,30 +1,19 @@
-const t = (i) => ({
+const u = (e) => ({
+  key: e,
+  id: e
+}), a = ({
+  fieldType: e,
+  options: t
+}) => ["enum", "multiSelect"].includes(e) ? (t || []).map(u) : [], l = (e) => ({
   metadata: {
-    fields: i.reduce((l, e) => {
-      let a;
-      switch (e.fieldType) {
-        case "date":
-        case "float":
-        case "string":
-          a = [""];
-          break;
-        case "enum":
-        case "multiSelect":
-          if (e.variant === "file") {
-            a = [];
-            break;
-          }
-          e.options && (a = [...e.options]);
-          break;
-        default:
-          a = null;
-      }
-      return l[e.id] = {
-        value: a
-      }, l;
-    }, {})
+    fields: e.reduce((i, n) => (i[n.id] = {
+      value: {
+        enum: []
+      },
+      options: a(n)
+    }, i), {})
   }
 });
 export {
-  t as getInitialFieldValues
+  l as getInitialFieldValues
 };

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

@@ -17,6 +17,7 @@ const S = ({
     variant: c
   } = n, o = `metadata.fields.${e}`;
   switch (r) {
+    case "date":
     case "float":
     case "string":
       return /* @__PURE__ */ t(p, {
@@ -30,7 +31,6 @@ const S = ({
           label: i
         })
       }, e);
-    case "date":
     case "multiSelect":
       if (c === "file")
         return /* @__PURE__ */ t(u, {

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

@@ -1,54 +1,54 @@
-import { useState as a } from "react";
-import { useFormikContext as O } from "formik";
-import { DropdownMenu as c, FilterChip as o } from "@box/blueprint-web";
-import { useIntl as S } from "react-intl";
-import V from "./messages.js";
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-const T = ({
-  fieldNamePrefix: d,
-  formRef: C,
-  icon: h,
-  id: m,
-  name: s,
-  options: i,
-  type: f
+import { useState as w } from "react";
+import { useFormikContext as I } from "formik";
+import { DropdownMenu as a, FilterChip as c } from "@box/blueprint-web";
+import { useIntl as O } from "react-intl";
+import y from "./messages.js";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+const L = ({
+  fieldNamePrefix: h,
+  formRef: u,
+  icon: l,
+  id: o,
+  name: i,
+  options: s,
+  type: d
 }) => {
   const {
-    formatMessage: g
-  } = S(), [b, k] = a(!1), [w, p] = a(s), [l, x] = a(/* @__PURE__ */ new Set()), {
-    setFieldValue: F,
-    submitForm: v
-  } = O(), I = async (r, n) => {
-    const e = new Set(l);
-    f === "enum" ? e.clear() : e.delete(n), r && e.add(n), x(e), e.size > 0 ? p(g(V.chipNameWithCount, {
-      name: s,
-      count: e.size
-    })) : p(s), F(`${d}.value.enum`, Array.from(e)), v();
+    formatMessage: p
+  } = O(), [f, C] = w(!1), {
+    values: g,
+    setFieldValue: v,
+    submitForm: k
+  } = I(), x = g.metadata.fields[o].value.enum, e = new Set(x), F = e.size > 0 ? p(y.chipNameWithCount, {
+    name: i,
+    count: e.size
+  }) : i, b = async (r, n) => {
+    d === "enum" ? e.clear() : e.delete(n), r && e.add(n), await v(`${h}.value.enum`, Array.from(e)), k();
   };
-  return /* @__PURE__ */ u(c.Root, {
-    onOpenChange: k,
-    open: b,
-    children: [/* @__PURE__ */ t(c.Trigger, {
+  return /* @__PURE__ */ m(a.Root, {
+    onOpenChange: C,
+    open: f,
+    children: [/* @__PURE__ */ t(a.Trigger, {
       asChild: !0,
-      children: /* @__PURE__ */ u(o.TriggerChip, {
-        selected: l.size > 0,
-        value: m,
-        children: [h && /* @__PURE__ */ t(o.Icon, {
-          icon: h
-        }), /* @__PURE__ */ t(o.Label, {
-          children: w
-        }), /* @__PURE__ */ t(o.DropdownIndicator, {})]
-      }, m)
-    }), /* @__PURE__ */ t(c.Content, {
-      container: C.current,
-      children: i == null ? void 0 : i.map((r) => /* @__PURE__ */ t(c.CheckboxItem, {
-        checked: l.has(r),
-        onCheckedChange: (n) => I(n, r),
+      children: /* @__PURE__ */ m(c.TriggerChip, {
+        selected: e.size > 0,
+        value: o,
+        children: [l && /* @__PURE__ */ t(c.Icon, {
+          icon: l
+        }), /* @__PURE__ */ t(c.Label, {
+          children: F
+        }), /* @__PURE__ */ t(c.DropdownIndicator, {})]
+      }, o)
+    }), /* @__PURE__ */ t(a.Content, {
+      container: u.current,
+      children: s == null ? void 0 : s.map((r) => /* @__PURE__ */ t(a.CheckboxItem, {
+        checked: e.has(r),
+        onCheckedChange: (n) => b(n, r),
         children: r
       }, r))
     })]
   });
 };
 export {
-  T as SelectFilterChip
+  L as SelectFilterChip
 };

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

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

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

@@ -1,89 +1,122 @@
-import { MetadataStringField as r } from "@box/metadata-filter";
-import { MetadataFileField as d } from "../metadata-value/metadata-file-field.js";
-import { MetadataLocationField as c } from "../metadata-value/metadata-location-field.js";
-import { MetadataSearchField as u } from "../metadata-value/metadata-search-field.js";
+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 { 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 { jsx as t } from "react/jsx-runtime";
-const m = ({
+const i = (e) => `metadata.fields.${e}`, b = ({
   id: e,
   name: a,
   placeholder: l,
-  variant: i
+  variant: r
 }) => {
-  switch (i) {
+  switch (r) {
     case "search":
-      return /* @__PURE__ */ t(u, {
+      return /* @__PURE__ */ t(x, {
         id: e,
         name: a,
         placeholder: l
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(r, {
-        fieldNamePrefix: `metadata.fields.${e}`,
+      return /* @__PURE__ */ t(o, {
+        fieldNamePrefix: i(e),
         label: a || ""
       });
   }
-}, n = ({
+}, g = ({
   id: e,
   name: a,
-  variant: l
+  variant: l,
+  parentRef: r
 }) => {
   switch (l) {
     case "file":
-      return /* @__PURE__ */ t(d, {
+      return /* @__PURE__ */ t(F, {
         id: e
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(r, {
-        fieldNamePrefix: `metadata.fields.${e}`,
-        label: a || ""
+      return /* @__PURE__ */ t(s, {
+        fieldNamePrefix: i(e),
+        label: a || "",
+        portalElement: r
       });
   }
-}, s = ({
+}, h = ({
   id: e,
   name: a,
-  variant: l,
-  renderer: i,
-  triggerCallback: f
+  parentRef: l,
+  variant: r,
+  renderer: d,
+  triggerCallback: n
 }) => {
-  switch (l) {
+  const {
+    locale: u
+  } = c();
+  switch (r) {
     case "file":
-      return /* @__PURE__ */ t(c, {
+      return /* @__PURE__ */ t(M, {
+        id: e,
+        renderer: d,
+        triggerSetValueCallback: n
+      });
+    case "radio":
+      return /* @__PURE__ */ t(S, {
         id: e,
-        renderer: i,
-        triggerSetValueCallback: f
+        name: a
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(r, {
-        fieldNamePrefix: `metadata.fields.${e}`,
-        label: a || ""
+      return /* @__PURE__ */ t(f, {
+        fieldNamePrefix: i(e),
+        label: a || "",
+        locale: u,
+        portalElement: l
       });
   }
-}, b = ({
+}, P = ({
+  id: e,
+  customLabels: a,
+  variant: l
+}) => {
+  const {
+    locale: r
+  } = c();
+  return /* @__PURE__ */ t(m, {
+    canUseRelativeDates: l === "relative",
+    customFieldLabels: a,
+    direction: "vertical",
+    fieldNamePrefix: i(e),
+    label: "",
+    locale: r
+  });
+}, R = ({
   ...e
 }) => {
   switch (e.fieldType) {
     case "string":
-      return /* @__PURE__ */ t(m, {
+    case "float":
+      return /* @__PURE__ */ t(b, {
         ...e
       });
     case "multiSelect":
-      return /* @__PURE__ */ t(n, {
+      return /* @__PURE__ */ t(g, {
         ...e
       });
     case "enum":
-      return /* @__PURE__ */ t(s, {
+      return /* @__PURE__ */ t(h, {
         ...e
       });
-    default:
-      return /* @__PURE__ */ t(r, {
-        fieldNamePrefix: `metadata.fields.${e.id}`,
-        label: e.name || ""
+    case "date":
+      return /* @__PURE__ */ t(P, {
+        ...e
       });
+    default:
+      return null;
   }
 };
 export {
-  b as default
+  R as default
 };

package/dist/esm/lib/components/metadata-value/metadata-file-chip.js

@@ -1,22 +1,24 @@
-import { BoxItemTypeSelectorQuickFilter as i } from "@box/box-item-type-selector";
-import { useFormikContext as r } from "formik";
-import { jsx as u } from "react/jsx-runtime";
-const d = ({
+import { BoxItemTypeSelectorQuickFilter as u } from "@box/box-item-type-selector";
+import { useFormikContext as s } from "formik";
+import { jsx as p } from "react/jsx-runtime";
+const f = ({
   id: e
 }) => {
+  var t, l;
   const {
-    values: t,
-    setFieldValue: o,
-    submitForm: a
-  } = r(), l = t.metadata.fields[e].value.enum;
-  return /* @__PURE__ */ u(i, {
+    values: o,
+    setFieldValue: a,
+    submitForm: m
+  } = s(), i = (l = (t = o.metadata.fields[e]) == null ? void 0 : t.value) == null ? void 0 : l.enum;
+  return /* @__PURE__ */ p(u, {
+    allowAllOptionsSelect: !0,
     applyButtonType: "submit",
-    onApply: (m) => {
-      o(`metadata.fields.${e}.value.enum`, m), a();
+    onApply: (r) => {
+      a(`metadata.fields.${e}.value.enum`, r), m();
     },
-    selected: l || []
+    selected: i || []
   });
 };
 export {
-  d as MetadataFileChip
+  f as MetadataFileChip
 };

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

@@ -1,20 +1,21 @@
-import { BoxItemTypeSelector as m } from "@box/box-item-type-selector";
-import { useFormikContext as r } from "formik";
-import { jsx as i } from "react/jsx-runtime";
-const d = ({
+import { BoxItemTypeSelector as i } from "@box/box-item-type-selector";
+import { useFormikContext as n } from "formik";
+import { jsx as s } from "react/jsx-runtime";
+const f = ({
   id: e
 }) => {
+  var t, o;
   const {
-    values: t,
-    setFieldValue: o
-  } = r(), a = t.metadata.fields[e].value.enum;
-  return /* @__PURE__ */ i(m, {
-    onSelectionChange: (l) => {
-      o(`metadata.fields.${e}.value.enum`, l);
+    values: a,
+    setFieldValue: l
+  } = n(), m = (o = (t = a.metadata.fields[e]) == null ? void 0 : t.value) == null ? void 0 : o.enum;
+  return /* @__PURE__ */ s(i, {
+    onSelectionChange: (r) => {
+      l(`metadata.fields.${e}.value.enum`, r);
     },
-    selected: a || []
+    selected: m || []
   });
 };
 export {
-  d as MetadataFileField
+  f as MetadataFileField
 };

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

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

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

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

package/dist/types/lib/components/filter-row/initial-field-values.d.ts

@@ -1,9 +1,10 @@
-import { MetadataFormFieldValue } from '@box/metadata-filter';
+import { MetadataTemplateFieldOption, MetadataFormFieldValue } from '@box/metadata-filter';
 import { FilterOption } from './types';
 export declare const getInitialFieldValues: (filterOptions: FilterOption[]) => {
     metadata: {
         fields: Record<string, {
             value: MetadataFormFieldValue;
+            options?: Array<MetadataTemplateFieldOption>;
         }>;
     };
 };

package/dist/types/lib/components/filter-row/types.d.ts

@@ -6,6 +6,7 @@ export interface FilterGroup {
     toggleable: boolean;
 }
 export interface FilterOption {
+    customLabels?: string[];
     fieldType: MetadataFieldType;
     icon?: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, 'ref'> & React.RefAttributes<SVGSVGElement>>;
     id: string;

package/dist/types/lib/components/filter-sidepanel/filter.d.ts

@@ -1,3 +1,6 @@
 import { FilterOption } from '../filter-row/types';
-declare const Filter: ({ ...props }: FilterOption) => import("react/jsx-runtime").JSX.Element;
+interface FilterProps extends FilterOption {
+    parentRef: HTMLElement;
+}
+declare const Filter: ({ ...props }: FilterProps) => import("react/jsx-runtime").JSX.Element;
 export default Filter;

package/dist/types/lib/components/metadata-value/metadata-radio-field.d.ts

@@ -0,0 +1,6 @@
+interface MetadataSearchFieldProps {
+    id: string;
+    name: string;
+}
+export declare const MetadataRadioField: ({ id, name }: MetadataSearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/lib/types.d.ts

@@ -2,7 +2,7 @@ import { ColumnProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
 import { ItemActionMenuProps } from './components/item-action-menu';
 export type MetadataFieldType = 'date' | 'enum' | 'float' | 'multiSelect' | 'string';
-export type FilterVariant = 'default' | 'search' | 'file';
+export type FilterVariant = 'default' | 'search' | 'file' | 'radio' | 'relative';
 export interface Column extends Partial<ColumnProps> {
     cellRenderer?: (item: Item, column: Column) => React.ReactNode | undefined;
     headerRenderer?: (name: string, column: Column) => React.ReactNode | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.36.3",
+    "version": "0.37.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -20,10 +20,10 @@
     "devDependencies": {
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.63.0",
-        "@box/box-item-type-selector": "^0.63.6",
+        "@box/box-item-type-selector": "^0.63.7",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.17.9",
-        "@box/metadata-filter": "^1.18.6",
+        "@box/item-icon": "^0.17.10",
+        "@box/metadata-filter": "^1.18.7",
         "@box/storybook-utils": "0.13.18",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",