@box/metadata-view 0.23.1 → 0.24.0

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

@@ -0,0 +1,66 @@
+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
+}) => {
+  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, {
+        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`, []);
+            },
+            size: "small",
+            variant: "secondary",
+            children: s(m.clearButton)
+          }), /* @__PURE__ */ o(l, {
+            onClick: C,
+            size: "small",
+            type: "submit",
+            variant: "primary",
+            children: s(m.applyButton)
+          })]
+        })]
+      })]
+    })
+  });
+};
+export {
+  j as F,
+  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/error-state/error-state.js

@@ -1,5 +1,5 @@
 import { EmptyState as r, Text as a } from "@box/blueprint-web";
-import { Unplugged as s } from "@box/blueprint-web-assets/illustrations/Medium/";
+import { Unplugged as s } from "@box/blueprint-web-assets/illustrations/Medium";
 import { useIntl as i } from "react-intl";
 import o from "./messages.js";
 import { jsx as t } from "react/jsx-runtime";

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

@@ -1,75 +1,53 @@
-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(j, {
-        formRef: m,
-        icon: i,
-        id: e.id,
-        name: e.name,
-        selected: a
-      }, e.id);
-    case "date":
-    case "enum":
-    case "multiSelect":
-      return /* @__PURE__ */ p(n.Chip, {
-        value: e.id,
-        children: [i && /* @__PURE__ */ r(n.Icon, {
-          icon: i
-        }), /* @__PURE__ */ r(n.Label, {
-          children: e.name
-        })]
-      }, e.id);
-    default:
-      return null;
-  }
-}, _ = ({
-  disabledPredefinedFilters: e = [],
+import { useState as S, useRef as C } from "react";
+import { Formik as v, Form as G } from "formik";
+import { FilterChip as I } from "@box/blueprint-web";
+import R from "./all-filters-chip.js";
+import { getInitialFieldValues as b } from "./initial-field-values.js";
+import { MetadataFilterChip as g } from "./metadata-filter-chip.js";
+import { usePredefinedFilter as j } from "./use-predefined-filter.js";
+import { s as w } from "../../../../chunks/form-filter-chip.js";
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+const z = ({
+  disabledPredefinedFilters: n = [],
   filterGroups: a,
-  isAllFiltersDisabled: m,
-  onFilterSubmit: i
+  isAllFiltersDisabled: d,
+  onFilterSubmit: p
 }) => {
-  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 = ({
+  const [l, u] = S([]), c = j(n), f = ([e, t]) => {
+    var r;
+    return ((r = t.value) == null ? void 0 : r.enum) && t.value.enum.length > 0;
+  }, F = ({
     metadata: {
-      fields: t
+      fields: e
     }
   }) => {
-    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, {
+    const t = Object.entries(e).filter(f).map(([r]) => r);
+    u(t), p(e);
+  }, s = [...c, ...a], o = s.flatMap(({
+    filters: e
+  }) => e), h = b(o), m = C(null);
+  return /* @__PURE__ */ i(v, {
+    initialValues: h,
+    onSubmit: F,
+    children: /* @__PURE__ */ i(G, {
+      ref: m,
+      children: /* @__PURE__ */ x(I.Group, {
+        className: w.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))]
+        children: [d ? null : /* @__PURE__ */ i(R, {
+          activeFilterCount: l.length,
+          filterGroups: s
+        }), o.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ i(g, {
+          filterOption: e,
+          formRef: m,
+          selected: l.includes(e.id)
+        }, e.id))]
       })
     })
   });
 };
 export {
-  _ as FilterRow,
-  _ as default
+  z as FilterRow,
+  z as default
 };

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

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

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

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

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

@@ -19,6 +19,10 @@ const t = e({
   keywordSearchFilterPlaceholder: {
     id: "groupSharedFeatures.metadataView.filterRow.keywordSearchFilterPlaceholder",
     defaultMessage: "Enter keywords"
+  },
+  chipNameWithCount: {
+    id: "groupSharedFeatures.metadataView.filterRow.chipNameWithCount",
+    defaultMessage: "{name} ({count})"
   }
 });
 export {

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

@@ -0,0 +1,50 @@
+import { MetadataStringField as m } from "@box/metadata-filter";
+import { F as d } from "../../../../chunks/form-filter-chip.js";
+import { SelectFilterChip as p } from "./select-filter-chip.js";
+import { jsx as a } from "react/jsx-runtime";
+const x = ({
+  filterOption: s,
+  formRef: i,
+  selected: n
+}) => {
+  const {
+    fieldType: r,
+    icon: l,
+    id: e,
+    name: t,
+    options: c
+  } = s, o = `metadata.fields.${e}`;
+  switch (r) {
+    case "float":
+    case "string":
+      return /* @__PURE__ */ a(d, {
+        formRef: i,
+        icon: l,
+        id: e,
+        name: t,
+        selected: n,
+        children: /* @__PURE__ */ a(m, {
+          fieldNamePrefix: o,
+          label: t
+        })
+      }, e);
+    case "date":
+    case "enum":
+    case "multiSelect":
+      return /* @__PURE__ */ a(p, {
+        fieldNamePrefix: o,
+        formRef: i,
+        icon: l,
+        id: e,
+        name: t,
+        options: c,
+        type: r
+      });
+    default:
+      return null;
+  }
+};
+export {
+  x as MetadataFilterChip,
+  x as default
+};

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

@@ -0,0 +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
+}) => {
+  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();
+  };
+  return /* @__PURE__ */ u(c.Root, {
+    onOpenChange: k,
+    open: b,
+    children: [/* @__PURE__ */ t(c.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: r
+      }, r))
+    })]
+  });
+};
+export {
+  T as SelectFilterChip
+};

package/dist/esm/lib/components/pagination/index.js

@@ -0,0 +1,10 @@
+import { default as t } from "./pagination.js";
+import { default as e } from "./pagination-controls.js";
+import { OffsetBasedPagination as f } from "./offset-based-pagination.js";
+import { MarkerBasedPagination as s } from "./marker-based-pagination.js";
+export {
+  s as MarkerBasedPagination,
+  f as OffsetBasedPagination,
+  t as Pagination,
+  e as PaginationControls
+};

package/dist/esm/lib/components/pagination/marker-based-pagination.js

@@ -0,0 +1,20 @@
+import i from "./pagination-controls.js";
+import { jsx as a } from "react/jsx-runtime";
+const c = ({
+  hasNextMarker: t,
+  hasPrevMarker: e,
+  onMarkerBasedPageChange: o
+}) => /* @__PURE__ */ a(i, {
+  handleNextClick: () => {
+    o(1);
+  },
+  handlePreviousClick: () => {
+    o(-1);
+  },
+  hasNextPage: t,
+  hasPreviousPage: e
+});
+export {
+  c as MarkerBasedPagination,
+  c as default
+};

package/dist/esm/lib/components/pagination/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages as a } from "react-intl";
+const t = a({
+  nextPageButton: {
+    id: "groupSharedFeatures.metadataView.pagination.nextPageButton",
+    defaultMessage: "Next"
+  },
+  pageEntryStatus: {
+    id: "groupSharedFeatures.metadataView.pagination.pageEntryStatus",
+    defaultMessage: "Showing {startEntryIndex} to {endEntryIndex} of {totalCount} entries"
+  },
+  paginationAriaLabel: {
+    id: "groupSharedFeatures.metadataView.pagination.paginationLabel",
+    defaultMessage: "Pagination navigation controls and current page information"
+  },
+  previousPageButton: {
+    id: "groupSharedFeatures.metadataView.pagination.previousPageButton",
+    defaultMessage: "Previous"
+  }
+});
+export {
+  t as default
+};

package/dist/esm/lib/components/pagination/offset-based-pagination.js

@@ -0,0 +1,32 @@
+import h from "./pagination-controls.js";
+import { getOffsetForPage as c } from "./utils.js";
+import { jsx as P } from "react/jsx-runtime";
+const x = ({
+  offset: n,
+  onOffsetChange: o,
+  pageSize: t,
+  totalCount: r
+}) => {
+  const e = Math.ceil(r / t);
+  if (e <= 1)
+    return null;
+  const a = Math.floor(n / t) + 1, s = a > 0 ? Math.min(e, a) : 1, i = s < e, l = s > 1;
+  return /* @__PURE__ */ P(h, {
+    handleNextClick: () => {
+      o(c(s + 1, t, r));
+    },
+    handlePreviousClick: () => {
+      o(c(s - 1, t, r));
+    },
+    hasNextPage: i,
+    hasPageEntryStatus: !0,
+    hasPreviousPage: l,
+    offset: n,
+    pageSize: t,
+    totalCount: r
+  });
+};
+export {
+  x as OffsetBasedPagination,
+  x as default
+};

package/dist/esm/lib/components/pagination/pagination-controls.js

@@ -0,0 +1,53 @@
+import { Button as r } from "@box/blueprint-web";
+import { useIntl as x, FormattedMessage as B } from "react-intl";
+import n from "./messages.js";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import '../../../../styles/pagination-controls.css';const h = "_pagination_1ozaq_1", y = "_paginationButtonContainer_1ozaq_9", i = {
+  pagination: h,
+  paginationButtonContainer: y
+}, E = ({
+  handleNextClick: l,
+  handlePreviousClick: c,
+  hasNextPage: d,
+  hasPageEntryStatus: p,
+  hasPreviousPage: g,
+  offset: o = 0,
+  pageSize: m = 0,
+  totalCount: e = 0
+}) => {
+  const {
+    formatMessage: t
+  } = x(), u = o + 1, v = Math.min(o + m, e);
+  return /* @__PURE__ */ s("div", {
+    "aria-label": t(n.paginationAriaLabel),
+    "aria-live": "polite",
+    className: i.pagination,
+    children: [p && /* @__PURE__ */ a("div", {
+      className: i.paginationText,
+      children: /* @__PURE__ */ a(B, {
+        ...n.pageEntryStatus,
+        values: {
+          startEntryIndex: u,
+          endEntryIndex: v,
+          totalCount: e
+        }
+      })
+    }), /* @__PURE__ */ s("div", {
+      className: i.paginationButtonContainer,
+      children: [/* @__PURE__ */ a(r, {
+        disabled: !g,
+        onClick: c,
+        variant: "secondary",
+        children: t(n.previousPageButton)
+      }), /* @__PURE__ */ a(r, {
+        disabled: !d,
+        onClick: l,
+        variant: "secondary",
+        children: t(n.nextPageButton)
+      })]
+    })]
+  });
+};
+export {
+  E as default
+};

package/dist/esm/lib/components/pagination/pagination.js

@@ -1,7 +1,36 @@
-import { jsx as i } from "react/jsx-runtime";
-const t = () => /* @__PURE__ */ i("div", {
-  children: "Pagination"
-});
+import { MarkerBasedPagination as g } from "./marker-based-pagination.js";
+import { OffsetBasedPagination as p } from "./offset-based-pagination.js";
+import { jsx as r } from "react/jsx-runtime";
+import "./pagination-controls.js";
+const u = ({
+  type: e,
+  ...a
+}) => {
+  if (e === "marker") {
+    const {
+      hasNextMarker: s,
+      hasPrevMarker: f,
+      onMarkerBasedPageChange: m
+    } = a;
+    return /* @__PURE__ */ r(g, {
+      hasNextMarker: s,
+      hasPrevMarker: f,
+      onMarkerBasedPageChange: m
+    });
+  }
+  const {
+    offset: t,
+    onOffsetChange: o,
+    pageSize: n,
+    totalCount: i
+  } = a;
+  return /* @__PURE__ */ r(p, {
+    offset: t,
+    onOffsetChange: o,
+    pageSize: n,
+    totalCount: i
+  });
+};
 export {
-  t as default
+  u as default
 };

package/dist/esm/lib/components/pagination/utils.js

@@ -0,0 +1,7 @@
+const n = (f, e, t) => {
+  const r = (f - 1) * e;
+  return r <= 0 ? 0 : r >= t ? Math.max(t - e, 0) : r;
+};
+export {
+  n as getOffsetForPage
+};