@box/metadata-view 0.37.2 → 0.39.0

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

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

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

@@ -1,4 +1,5 @@
-import { FilterRow as e } from "./filter-row.js";
+import { FilterRow as r, getSelectedFilterIds as l } from "./filter-row.js";
 export {
-  e as FilterRow
+  r as FilterRow,
+  l as getSelectedFilterIds
 };

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

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

package/dist/esm/lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js

@@ -1,37 +1,42 @@
-import { Cell as c, DropdownMenu as l, Button as a } from "@box/blueprint-web";
-import { CaretDown as g } from "@box/blueprint-web-assets/icons/Fill";
-import h from "lodash/get";
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import '../../../../../../styles/inline-editing-cell.css';const E = "_inlineEditingCell_1xsiq_1", p = {
+import { Cell as f, DropdownMenu as r, Button as h } from "@box/blueprint-web";
+import { CaretDown as C } from "@box/blueprint-web-assets/icons/Fill";
+import m from "lodash/get";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import '../../../../../../styles/inline-editing-cell.css';const E = "_inlineEditingCell_1iieg_1", w = {
   inlineEditingCell: E
-}, I = ({
+}, y = ({
   column: n,
-  item: d,
-  onInlineEditChange: r
+  item: l,
+  onInlineEditChange: s,
+  type: c
 }) => {
-  const s = `${n.id}-${d.id}`, e = h(d, n.id) || "--", o = (i, f) => {
-    r(d, i, n.id);
+  const o = `${n.id}-${l.id}`, d = m(l, n.id) || "--", e = typeof d == "string" ? [d] : d, a = (i) => {
+    if (c === "multiSelect") {
+      const g = [...e, i];
+      s(l, g, n.id);
+    }
+    c === "enum" && s(l, i, n.id);
   };
-  return /* @__PURE__ */ t(c, {
-    children: /* @__PURE__ */ C(l.Root, {
-      children: [/* @__PURE__ */ t(l.Trigger, {
-        children: /* @__PURE__ */ t(a, {
-          className: p.inlineEditingCell,
-          icon: g,
+  return /* @__PURE__ */ t(f, {
+    children: /* @__PURE__ */ p(r.Root, {
+      children: [/* @__PURE__ */ t(r.Trigger, {
+        children: /* @__PURE__ */ t(h, {
+          className: w.inlineEditingCell,
+          icon: C,
           variant: "secondary",
-          children: e
+          children: e.join(", ")
         })
-      }), /* @__PURE__ */ t(l.Content, {
+      }), /* @__PURE__ */ t(r.Content, {
         align: "start",
-        children: n.inlineEditingOptions && n.inlineEditingOptions.map((i) => /* @__PURE__ */ t(l.CheckboxItem, {
+        children: n.inlineEditingOptions.map((i) => /* @__PURE__ */ t(r.CheckboxItem, {
           checked: e === i || (e == null ? void 0 : e.includes(i)),
-          onSelect: () => o(i, n.id),
+          onSelect: () => a(i),
           children: i
         }, i))
       })]
     })
-  }, s);
+  }, o);
 };
 export {
-  I as default
+  y as default
 };

package/dist/esm/lib/components/metadata-table/table-body/table-body-with-data.js

@@ -1,174 +1,190 @@
-import { TableBody as y, Row as L, Cell as c, ActionCell as b, Text as N } from "@box/blueprint-web";
-import { ItemTypeIcon as $ } from "@box/item-icon";
+import { TableBody as C, Row as S, Cell as I, ActionCell as b, Text as N } from "@box/blueprint-web";
+import { ItemTypeIcon as L } from "@box/item-icon";
 import x from "clsx";
 import T from "lodash/get";
-import i from "react";
+import d from "react";
 import { I as h } from "../../../../../chunks/types.js";
 import { THUMBNAIL_LIST_VIEW_HEIGHTS as R } from "../../constants.js";
-import S from "./ghost-row/ghost-row.js";
-import { s as f, T as g } from "../../../../../chunks/table-row.js";
+import w from "./ghost-row/ghost-row.js";
+import { s as m, T as g } from "../../../../../chunks/table-row.js";
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import w from "./inline-editing-cell/inline-editing-cell.js";
+import $ from "./inline-editing-cell/inline-editing-cell.js";
 import { ItemActionMenu as B } from "../../item-action-menu/item-action-menu.js";
-const _ = /* @__PURE__ */ i.memo(({
+const _ = /* @__PURE__ */ d.memo(({
   item: t,
   column: e,
-  iconColumnVariant: n
+  iconColumnVariant: l
 }) => {
   const {
     id: o,
-    subtitle: d
-  } = e, a = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(c, {
+    subtitle: a
+  } = e, c = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(I, {
     children: /* @__PURE__ */ u("div", {
-      className: f.tableNameCell,
-      children: [/* @__PURE__ */ r($, {
+      className: m.tableNameCell,
+      children: [/* @__PURE__ */ r(L, {
         item: t
       }), /* @__PURE__ */ u("div", {
         className: x({
-          [f.tableNameCellSubtitle]: n === h.INLINE_SUBTITLE
+          [m.tableNameCellSubtitle]: l === h.INLINE_SUBTITLE
         }),
         children: [/* @__PURE__ */ r(N, {
           as: "span",
           children: T(t, o)
-        }), n === h.INLINE_SUBTITLE && /* @__PURE__ */ r(N, {
+        }), l === h.INLINE_SUBTITLE && /* @__PURE__ */ r(N, {
           as: "span",
           color: "textOnLightSecondary",
-          children: d
+          children: a
         })]
       })]
     })
-  }, a);
-}), k = /* @__PURE__ */ i.memo(({
+  }, c);
+}), k = /* @__PURE__ */ d.memo(({
   item: t,
   column: e
 }) => {
   var o;
-  const n = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(c, {
+  const l = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(I, {
     children: (o = e.cellRenderer) == null ? void 0 : o.call(e, t, e)
-  }, n);
-}), U = /* @__PURE__ */ i.memo(({
+  }, l);
+}), U = /* @__PURE__ */ d.memo(({
   item: t,
   column: e
 }) => {
-  const n = `${e.textValue}-${t.id}`, o = T(t, e.id);
-  return o ? /* @__PURE__ */ r(c, {
+  const l = `${e.textValue}-${t.id}`, o = T(t, e.id);
+  return o ? /* @__PURE__ */ r(I, {
     children: o.join(" ")
-  }, n) : /* @__PURE__ */ r(c, {}, n);
-}), W = /* @__PURE__ */ i.memo(({
+  }, l) : /* @__PURE__ */ r(I, {}, l);
+}), W = /* @__PURE__ */ d.memo(({
   item: t,
   column: e
 }) => {
-  const n = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(c, {
+  const l = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(I, {
     children: /* @__PURE__ */ r(N, {
       as: "span",
       children: T(t, e.id)
     })
-  }, n);
-}), j = /* @__PURE__ */ i.memo(({
+  }, l);
+}), j = /* @__PURE__ */ d.memo(({
   item: t,
   column: e,
-  iconColumnVariant: n,
+  iconColumnVariant: l,
   onInlineEditChange: o
 }) => {
   const {
-    cellRenderer: d,
-    id: a,
+    cellRenderer: a,
+    id: c,
     isInlineEditingEnabled: p,
-    type: I
+    type: s
   } = e;
-  return a === "name" && (n === h.INLINE || n === h.INLINE_SUBTITLE) ? /* @__PURE__ */ r(_, {
-    column: e,
-    iconColumnVariant: n,
-    item: t
-  }) : d ? /* @__PURE__ */ r(k, {
-    column: e,
-    item: t
-  }) : I === "multiSelect" ? /* @__PURE__ */ r(U, {
+  if (c === "name" && (l === h.INLINE || l === h.INLINE_SUBTITLE))
+    return /* @__PURE__ */ r(_, {
+      column: e,
+      iconColumnVariant: l,
+      item: t
+    });
+  if (a)
+    return /* @__PURE__ */ r(k, {
+      column: e,
+      item: t
+    });
+  if (p) {
+    if (s === "multiSelect")
+      return /* @__PURE__ */ r($, {
+        column: e,
+        item: t,
+        onInlineEditChange: o,
+        type: s
+      });
+    if (s === "enum")
+      return /* @__PURE__ */ r($, {
+        column: e,
+        item: t,
+        onInlineEditChange: o,
+        type: s
+      });
+  }
+  return s === "multiSelect" ? /* @__PURE__ */ r(U, {
     column: e,
     item: t
-  }) : p && I === "enum" ? /* @__PURE__ */ r(w, {
-    column: e,
-    item: t,
-    onInlineEditChange: o
   }) : /* @__PURE__ */ r(W, {
     column: e,
     item: t
   });
-}), D = /* @__PURE__ */ i.memo(({
+}), D = /* @__PURE__ */ d.memo(({
   item: t,
   zoomLevel: e
-}) => /* @__PURE__ */ r(c, {
+}) => /* @__PURE__ */ r(I, {
   style: {
     height: R[e]
   },
-  children: /* @__PURE__ */ r($, {
-    className: f.iconCell,
+  children: /* @__PURE__ */ r(L, {
+    className: m.iconCell,
     item: t
   })
-}, `item-type-icon-${t.id}`)), G = /* @__PURE__ */ i.memo(({
+}, `item-type-icon-${t.id}`)), G = /* @__PURE__ */ d.memo(({
   item: t,
   itemActionMenuProps: e
 }) => /* @__PURE__ */ r(b, {
-  children: (n) => e ? /* @__PURE__ */ r(B, {
+  children: (l) => e ? /* @__PURE__ */ r(B, {
     ...e,
     item: t,
-    onOpenChange: n
+    onOpenChange: l
   }) : null
 })), Y = ({
   columns: t,
   iconColumnVariant: e,
-  isSelectAllEnabled: n,
+  isSelectAllEnabled: l,
   items: o,
-  itemActionMenuProps: d,
-  virtualItems: a,
+  itemActionMenuProps: a,
+  virtualItems: c,
   columnCount: p,
-  zoomLevel: I,
-  onInlineEditChange: C
+  zoomLevel: s,
+  onInlineEditChange: y
 }) => {
   const E = e === h.COLUMN;
-  if (a) {
-    const l = (s) => /* @__PURE__ */ r(S, {
+  if (c) {
+    const n = (i) => /* @__PURE__ */ r(w, {
       columnLength: p || 0,
-      rowKey: `ghost-${s}`
-    }), m = (s) => /* @__PURE__ */ r(g, {
+      rowKey: `ghost-${i}`
+    }), f = (i) => /* @__PURE__ */ r(g, {
       columns: t,
       iconColumnVariant: e,
-      isSelectAllEnabled: n,
-      item: s,
-      itemActionMenuProps: d,
-      zoomLevel: I
+      isSelectAllEnabled: l,
+      item: i,
+      itemActionMenuProps: a,
+      zoomLevel: s
     });
-    return /* @__PURE__ */ r(y, {
-      items: a,
+    return /* @__PURE__ */ r(C, {
+      items: c,
       children: ({
-        index: s
-      }) => s >= o.length ? l(s) : m(o[s])
+        index: i
+      }) => i >= o.length ? n(i) : f(o[i])
     });
   }
-  return /* @__PURE__ */ r(y, {
-    items: o.map((l) => ({
-      key: l.id,
-      ...l
+  return /* @__PURE__ */ r(C, {
+    items: o.map((n) => ({
+      key: n.id,
+      ...n
     })),
-    children: (l) => /* @__PURE__ */ u(L, {
-      className: f.tableRow,
-      id: l.id,
+    children: (n) => /* @__PURE__ */ u(S, {
+      className: m.tableRow,
+      id: n.id,
       children: [E && /* @__PURE__ */ r(D, {
-        item: l,
-        zoomLevel: I
-      }), t.map((m) => /* @__PURE__ */ r(j, {
-        column: m,
+        item: n,
+        zoomLevel: s
+      }), t.map((f) => /* @__PURE__ */ r(j, {
+        column: f,
         iconColumnVariant: e,
-        item: l,
-        onInlineEditChange: C
-      }, `${m.textValue}-${l.id}`)), n && /* @__PURE__ */ r(G, {
-        item: l,
-        itemActionMenuProps: d
+        item: n,
+        onInlineEditChange: y
+      }, `${f.textValue}-${n.id}`)), l && /* @__PURE__ */ r(G, {
+        item: n,
+        itemActionMenuProps: a
       })]
-    }, l.id)
+    }, n.id)
   });
 };
 export {

package/dist/styles/inline-editing-cell.css

@@ -1 +1 @@
-._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1{display:inline-flex;gap:var(--space-2);align-items:center;padding:var(--space-1);font-weight:var(--font-weights-regular);background-color:transparent;border:transparent}._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1:hover{background-color:transparent;border:transparent}
+._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1{display:inline-flex;gap:var(--space-2);align-items:center;justify-content:flex-start;width:100%;padding:var(--space-1);font-weight:var(--font-weights-regular);background-color:transparent;border:transparent}._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1:hover{background-color:transparent;border:transparent}._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

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

@@ -1,11 +1,15 @@
-import { MetadataTemplateField } from '@box/metadata-filter';
-import { FilterGroup } from './types';
 import { PredefinedFilterOptions } from './predefinedFilters/types';
+import { FilterGroup, FilterValues } from './types';
 export interface FilterRowProps {
     predefinedFilterOptions?: Partial<PredefinedFilterOptions>;
     filterGroups?: Array<FilterGroup>;
+    initialFilterValues?: FilterValues;
     isAllFiltersDisabled?: boolean;
-    onFilterSubmit?: (fields: MetadataTemplateField[]) => void;
+    onFilterSubmit?: (fields: FilterValues) => void;
 }
-export declare const FilterRow: ({ predefinedFilterOptions, filterGroups: customFilterGroups, isAllFiltersDisabled, onFilterSubmit, }: FilterRowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Extracts selected filter IDs from filter values
+ */
+export declare const getSelectedFilterIds: (fields: FilterValues) => string[];
+export declare const FilterRow: ({ predefinedFilterOptions, filterGroups: customFilterGroups, initialFilterValues: customFilterValues, isAllFiltersDisabled, onFilterSubmit, }: FilterRowProps) => import("react/jsx-runtime").JSX.Element;
 export default FilterRow;

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

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

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

@@ -1,3 +1,4 @@
+import { MetadataFormFieldValue } from '@box/metadata-filter';
 import { ReactNode } from 'react';
 import { FilterVariant, MetadataFieldType } from '../../types';
 export interface FilterGroup {
@@ -26,3 +27,6 @@ export interface FilterChipProps {
     name: string;
     selected: boolean;
 }
+export type FilterValues = Record<string, {
+    value: MetadataFormFieldValue;
+}>;

package/dist/types/lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.d.ts

@@ -3,7 +3,8 @@ import { Column } from '../../../../types';
 interface InlineEditingCellProps {
     column: Column;
     item: Item;
-    onInlineEditChange: (item: Item, value: string, columnId: string) => void;
+    onInlineEditChange: (item: Item, selection: string | string[], columnId: string) => void;
+    type: 'multiSelect' | 'enum';
 }
-declare const InlineEditingCell: ({ column, item, onInlineEditChange }: InlineEditingCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const InlineEditingCell: ({ column, item, onInlineEditChange, type }: InlineEditingCellProps) => import("react/jsx-runtime").JSX.Element;
 export default InlineEditingCell;

package/dist/types/lib/test-utils/mock-data.d.ts

@@ -2,7 +2,7 @@ import { Item } from '@box/types';
 import { SortDirection } from 'react-aria-components';
 import { ActionBarProps } from '../components/action-bar/action-bar';
 import { FilterRowProps } from '../components/filter-row/filter-row';
-import { FilterGroup, FilterOption } from '../components/filter-row/types';
+import { FilterGroup, FilterOption, FilterValues } from '../components/filter-row/types';
 import { ItemActionMenuProps } from '../components/item-action-menu/item-action-menu';
 import { MetadataTableProps } from '../components/metadata-table';
 import { PaginationProps } from '../components/pagination/pagination';
@@ -13,6 +13,7 @@ export declare const getMockFilterGroups: (filters: FilterOption[]) => Array<Fil
 export declare const mockActiveFilterIds: string[];
 export declare const mockColumnData: Column[];
 export declare const mockColumnDataWithInlineEditingEnabled: Column[];
+export declare const mockColumnDataWithInlineEditingEnabledAndMultiSelect: Column[];
 export declare const mockFilterOptions: FilterOption[];
 export declare const mockFilterOptionsNoSelection: FilterOption[];
 export declare const mockFilterOptionsWithCustomFilterChips: FilterOption[];
@@ -91,3 +92,4 @@ export type SortArgs = {
     direction: SortDirection;
 };
 export declare const defaultSortArgs: SortArgs;
+export declare const mockInitialFilterValues: FilterValues;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.37.2",
+    "version": "0.39.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",