@box/metadata-view 0.21.0 → 0.22.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/metadata-view.js

@@ -1,56 +1,58 @@
-import { useState as h } from "react";
-import M from "./components/error-state/error-state.js";
-import S from "./components/pagination/pagination.js";
-import { MetadataGrid as w } from "./components/metadata-grid/metadata-grid.js";
-import { V as t } from "../../chunks/types.js";
-import { SwitchCase as I, Case as e } from "./components/switch-case/switch-case.js";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useState as w } from "react";
+import u from "./components/error-state/error-state.js";
+import V from "./components/pagination/pagination.js";
+import { MetadataGrid as C } from "./components/metadata-grid/metadata-grid.js";
+import { SwitchCase as I, Case as n } from "./components/switch-case/switch-case.js";
+import { V as o } from "../../chunks/types.js";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { ActionBar as T } from "./components/action-bar/action-bar.js";
-import V from "./components/empty-state/empty-state.js";
-import C from "./components/metadata-table/metadata-table.js";
-import '../../styles/metadata-view.css';const L = {};
-function b({
-  actionBarProps: d,
-  tableProps: r,
-  hasError: c,
-  onRefresh: s,
-  initialViewMode: l = t.LIST,
-  ...n
+import y from "./components/empty-state/empty-state.js";
+import L from "./components/metadata-table/metadata-table.js";
+import '../../styles/metadata-view.css';const g = {};
+function A({
+  actionBarProps: a,
+  columns: c,
+  tableProps: m,
+  hasError: l,
+  onRefresh: p,
+  initialViewMode: f = o.LIST,
+  ...r
 }) {
-  const [i, a] = h(l), p = () => {
-    i === t.LIST ? a(t.GRID) : a(t.LIST);
-  }, f = !r.isLoading && n.items.length === 0;
-  return /* @__PURE__ */ m("div", {
-    className: L.container,
-    children: [/* @__PURE__ */ o(T, {
-      ...d,
-      onViewModeClick: p,
-      viewMode: i
-    }), /* @__PURE__ */ m(I, {
-      children: [/* @__PURE__ */ o(e, {
-        condition: c,
-        children: /* @__PURE__ */ o(M, {
-          onRefresh: s
+  const [e, d] = w(f), h = () => {
+    e === o.LIST ? d(o.GRID) : d(o.LIST);
+  }, M = !m.isLoading && r.items.length === 0, S = a.sortDropdownProps && c.filter((i) => i.type !== "multiSelect" && i.type !== "enum").map((i) => i.textValue);
+  return /* @__PURE__ */ s("div", {
+    className: g.container,
+    children: [/* @__PURE__ */ t(T, {
+      ...a,
+      onViewModeClick: h,
+      sortableColumnNames: S,
+      viewMode: e
+    }), /* @__PURE__ */ s(I, {
+      children: [/* @__PURE__ */ t(n, {
+        condition: l,
+        children: /* @__PURE__ */ t(u, {
+          onRefresh: p
         })
-      }), /* @__PURE__ */ o(e, {
-        condition: f,
-        children: /* @__PURE__ */ o(V, {})
-      }), /* @__PURE__ */ o(e, {
-        condition: i === t.LIST,
-        children: /* @__PURE__ */ o(C, {
-          ...n,
-          ...r
+      }), /* @__PURE__ */ t(n, {
+        condition: M,
+        children: /* @__PURE__ */ t(y, {})
+      }), /* @__PURE__ */ t(n, {
+        condition: e === o.LIST,
+        children: /* @__PURE__ */ t(L, {
+          ...r,
+          ...m
         })
-      }), /* @__PURE__ */ o(e, {
-        condition: i === t.GRID,
-        children: /* @__PURE__ */ o(w, {
-          ...n
+      }), /* @__PURE__ */ t(n, {
+        condition: e === o.GRID,
+        children: /* @__PURE__ */ t(C, {
+          ...r
         })
       })]
-    }), /* @__PURE__ */ o(S, {})]
+    }), /* @__PURE__ */ t(V, {})]
   });
 }
 export {
-  b as MetadataView,
-  b as default
+  A as MetadataView,
+  A as default
 };

package/dist/styles/action-bar.css

@@ -1 +1 @@
-._actionBar_17enr_1{display:flex;justify-content:space-between}
+._actionBar_1bpah_1{display:flex;justify-content:space-between}._additionalActions_1bpah_6{display:flex}

package/dist/types/lib/components/action-bar/action-bar.d.ts

@@ -1,8 +1,11 @@
 import { FilterRowProps } from '../filter-row';
 import { ViewMode } from '../../types';
+import { SortDropdownProps } from './sort-dropdown';
 export interface ActionBarProps extends FilterRowProps {
     onViewModeClick?: () => void;
     viewMode?: ViewMode;
+    sortableColumnNames: string[];
+    sortDropdownProps?: SortDropdownProps;
 }
-export declare const ActionBar: ({ onViewModeClick, viewMode, ...rest }: ActionBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionBar: ({ onViewModeClick, viewMode, sortableColumnNames, sortDropdownProps, ...rest }: ActionBarProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionBar;

package/dist/types/lib/components/action-bar/sort-dropdown.d.ts

@@ -0,0 +1,8 @@
+import { SortDirection } from 'react-aria-components';
+export interface SortDropdownProps {
+    onSortChange: (sortByColumn: string) => void;
+    sortableColumnNames: string[];
+    sortByColumn: string;
+    sortDirection: SortDirection;
+}
+export declare const SortDropdown: ({ onSortChange, sortableColumnNames, sortByColumn, sortDirection }: SortDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/metadata-view.d.ts

@@ -1,12 +1,13 @@
 import { MetadataTableProps } from './components/metadata-table';
 import { ActionBarProps } from './components/action-bar';
-import { MetadataProps, ViewMode } from './types';
+import { ViewMode, Column, MetadataProps } from './types';
 export interface MetadataViewProps extends MetadataProps {
-    actionBarProps: Omit<ActionBarProps, 'onViewModeChange' | 'viewMode'>;
+    columns: Column[];
+    actionBarProps: Omit<ActionBarProps, 'onViewModeChange' | 'viewMode' | 'sortableColumnNames'>;
     hasError?: boolean;
     initialViewMode?: ViewMode;
     onRefresh?: () => void;
     tableProps: Omit<MetadataTableProps, 'items' | 'itemActionMenuProps'>;
 }
-export declare function MetadataView({ actionBarProps, tableProps, hasError, onRefresh, initialViewMode, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, onRefresh, initialViewMode, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
 export default MetadataView;

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

@@ -1,14 +1,28 @@
 import { Item } from '@box/types';
+import { SortDirection } from 'react-aria-components';
+import { ActionBarProps } from '../components/action-bar/action-bar';
+import { SortDropdownProps } from '../components/action-bar/sort-dropdown';
+import { FilterRowProps } from '../components/filter-row/filter-row';
 import { FilterOption } from '../components/filter-row/types';
+import { MetadataTableProps } from '../components/metadata-table';
+import { MetadataViewProps } from '../metadata-view';
 import { Column } from '../types';
 export declare const mockActiveFilterIds: string[];
 export declare const mockColumnData: Column[];
 export declare const mockFilterOptions: FilterOption[];
 export declare const mockFilterOptionsNoSelection: FilterOption[];
 export declare const mockFilterOptionsWithCustomFilterChips: FilterOption[];
+export declare const mockFilterOptionsWithoutAlias: FilterOption[];
 export declare const mockFilterOptionsWithInvalidType: FilterOption[];
 export declare const mockMetadata: Item[];
-export declare const mockFilterRowArgs: {
-    filterOptions: FilterOption[];
-    onFilterSubmit: () => void;
+export declare const mockSortableColumnNames: string[];
+export declare const mockSortDropdownProps: SortDropdownProps;
+export declare const mockFilterRowArgs: FilterRowProps;
+export declare const mockActionBarProps: ActionBarProps;
+export declare const mockTableProps: MetadataTableProps;
+export declare const mockMetadataViewProps: MetadataViewProps;
+export type SortArgs = {
+    column: string;
+    direction: SortDirection;
 };
+export declare const defaultSortArgs: SortArgs;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.21.0",
+    "version": "0.22.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -11,6 +11,7 @@
         "formik": "^2.4.5",
         "lodash": "^4.17.15",
         "react": "^18.0.0",
+        "react-aria-components": "^1.7.1",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
@@ -18,8 +19,8 @@
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.57.0",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.13.0",
-        "@box/metadata-filter": "^1.14.0",
+        "@box/item-icon": "^0.13.2",
+        "@box/metadata-filter": "^1.14.2",
         "@box/storybook-utils": "0.13.11",
         "@box/types": "0.2.0",
         "react-intl": "^6.4.2"