@box/metadata-view 1.53.0 → 1.53.2

package/dist/chunks/types.js

@@ -1,9 +1,11 @@
-let e = /* @__PURE__ */ (function(t) {
+const L = "all";
+let l = /* @__PURE__ */ (function(t) {
   return t.INLINE = "inline", t.COLUMN = "column", t.INLINE_SUBTITLE = "inline-subtitle", t;
-})({}), i = /* @__PURE__ */ (function(t) {
+})({}), e = /* @__PURE__ */ (function(t) {
   return t.GRID = "grid", t.LIST = "list", t;
 })({});
 export {
-  e as I,
-  i as V
+  l as I,
+  L as S,
+  e as V
 };

package/dist/esm/index.js

@@ -1,56 +1,59 @@
 import { MetadataView as o } from "./lib/metadata-view.js";
-import { I as a, V as i } from "../chunks/types.js";
-import { ActionBar as m } from "./lib/components/action-bar/action-bar.js";
-import { FilterRow as x } from "./lib/components/filter-row/filter-row.js";
-import { FormFilterChip as n } from "./lib/components/filter-row/form-filter-chip.js";
-import { MetadataFilterChip as F } from "./lib/components/filter-row/metadata-filter-chip.js";
-import { SelectFilterChip as C } from "./lib/components/filter-row/select-filter-chip.js";
-import { PredefinedFilterName as c } from "./lib/components/filter-row/predefinedFilters/index.js";
+import { I as a, S as i, V as p } from "../chunks/types.js";
+import { ActionBar as f } from "./lib/components/action-bar/action-bar.js";
+import { FilterRow as d } from "./lib/components/filter-row/filter-row.js";
+import { FormFilterChip as l } from "./lib/components/filter-row/form-filter-chip.js";
+import { MetadataFilterChip as M } from "./lib/components/filter-row/metadata-filter-chip.js";
+import { SelectFilterChip as s } from "./lib/components/filter-row/select-filter-chip.js";
+import { PredefinedFilterName as S } from "./lib/components/filter-row/predefinedFilters/index.js";
 import { Filter as P } from "./lib/components/filter-sidepanel/filter.js";
 import { FilterSidePanel as w } from "./lib/components/filter-sidepanel/filter-side-panel.js";
-import { ItemActionMenu as I } from "./lib/components/item-action-menu/item-action-menu.js";
-import { MetadataGrid as B } from "./lib/components/metadata-grid/metadata-grid.js";
-import { MetadataTable as b } from "./lib/components/metadata-table/metadata-table.js";
-import { InlineEditingCell as A } from "./lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
-import { TableRenderer as k } from "./lib/components/metadata-table/table-renderer.js";
-import { MetadataFileChip as E } from "./lib/components/metadata-value/metadata-file-chip.js";
-import { MetadataFileField as L } from "./lib/components/metadata-value/metadata-file-field.js";
+import { ItemActionMenu as L } from "./lib/components/item-action-menu/item-action-menu.js";
+import { MetadataGrid as A } from "./lib/components/metadata-grid/metadata-grid.js";
+import { MetadataTable as E } from "./lib/components/metadata-table/metadata-table.js";
+import { InlineEditingCell as T } from "./lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
+import { TableRenderer as u } from "./lib/components/metadata-table/table-renderer.js";
+import { MetadataFileChip as D } from "./lib/components/metadata-value/metadata-file-chip.js";
+import { MetadataFileField as H } from "./lib/components/metadata-value/metadata-file-field.js";
 import { MetadataLocationField as O } from "./lib/components/metadata-value/metadata-location-field.js";
-import { MetadataRadioField as q } from "./lib/components/metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as y } from "./lib/components/metadata-value/metadata-search-field.js";
-import { Pagination as H } from "./lib/components/pagination/pagination.js";
+import { MetadataRadioField as j } from "./lib/components/metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as v } from "./lib/components/metadata-value/metadata-search-field.js";
+import { Pagination as z } from "./lib/components/pagination/pagination.js";
 import { MarkerBasedPagination as K } from "./lib/components/pagination/marker-based-pagination.js";
 import { OffsetBasedPagination as U } from "./lib/components/pagination/offset-based-pagination.js";
 import { PaginationControls as X } from "./lib/components/pagination/pagination-controls.js";
 import { SortDropdown as Z } from "./lib/components/sort-dropdown/sort-dropdown.js";
-import { Case as $, SwitchCase as ee } from "./lib/components/switch-case/switch-case.js";
+import { Case as ee, SwitchCase as re } from "./lib/components/switch-case/switch-case.js";
+import { Header as te } from "./lib/components/header/header.js";
 export {
-  m as ActionBar,
-  $ as Case,
+  f as ActionBar,
+  ee as Case,
   P as Filter,
-  x as FilterRow,
+  d as FilterRow,
   w as FilterSidePanel,
-  n as FormFilterChip,
+  l as FormFilterChip,
+  te as Header,
   a as IconColumnVariant,
-  A as InlineEditingCell,
-  I as ItemActionMenu,
+  T as InlineEditingCell,
+  L as ItemActionMenu,
   K as MarkerBasedPagination,
-  E as MetadataFileChip,
-  L as MetadataFileField,
-  F as MetadataFilterChip,
-  B as MetadataGrid,
+  D as MetadataFileChip,
+  H as MetadataFileField,
+  M as MetadataFilterChip,
+  A as MetadataGrid,
   O as MetadataLocationField,
-  q as MetadataRadioField,
-  y as MetadataSearchField,
-  b as MetadataTable,
+  j as MetadataRadioField,
+  v as MetadataSearchField,
+  E as MetadataTable,
   o as MetadataView,
   U as OffsetBasedPagination,
-  H as Pagination,
+  z as Pagination,
   X as PaginationControls,
-  c as PredefinedFilterName,
-  C as SelectFilterChip,
+  S as PredefinedFilterName,
+  i as SELECT_ALL,
+  s as SelectFilterChip,
   Z as SortDropdown,
-  ee as SwitchCase,
-  k as TableRenderer,
-  i as ViewMode
+  re as SwitchCase,
+  u as TableRenderer,
+  p as ViewMode
 };

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

@@ -0,0 +1,79 @@
+import { Text as m, PageHeader as n, IconButton as _, Status as x } from "@box/blueprint-web";
+import { XMark as y } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as H } from "react-intl";
+import { SwitchCase as b, Case as u } from "../switch-case/switch-case.js";
+import o from "./messages.js";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import '../../../../styles/header.css';const L = "_viewHeader_11wvf_1", M = "_titleBar_11wvf_5", C = "_clearSelectionButton_11wvf_11", t = {
+  viewHeader: L,
+  titleBar: M,
+  clearSelectionButton: C
+};
+function z({
+  title: r,
+  itemCount: i,
+  isItemCountVisible: h = !0,
+  onClearSelection: S,
+  selectionCount: l = 0,
+  isSelectionCountVisible: f = !0,
+  selectedItemName: s
+}) {
+  const {
+    formatMessage: c
+  } = H(), d = f && l > 0, g = h && i != null;
+  if (!r && !d)
+    return null;
+  const [v, B] = s ? [o.singleItemSelected, {
+    name: s
+  }] : [o.itemsSelected, {
+    count: l
+  }], p = c(v, {
+    ...B,
+    b: (w) => /* @__PURE__ */ e(m, {
+      color: "textOnLightDefault",
+      variant: "bodyLargeBold",
+      as: "span",
+      children: w
+    })
+  });
+  return /* @__PURE__ */ e(n.Root, {
+    variant: "inline",
+    sticky: !1,
+    className: t.viewHeader,
+    children: /* @__PURE__ */ a(b, {
+      children: [/* @__PURE__ */ a(u, {
+        condition: d,
+        children: [/* @__PURE__ */ e(n.Corner, {
+          children: /* @__PURE__ */ e(_, {
+            "aria-label": c(o.clearSelectionAriaLabel),
+            icon: y,
+            onClick: S,
+            size: "small",
+            variant: "small-utility",
+            className: t.clearSelectionButton
+          })
+        }), /* @__PURE__ */ e(n.StartElements, {
+          children: /* @__PURE__ */ e(m, {
+            as: "span",
+            color: "textOnLightSecondary",
+            variant: "bodyLarge",
+            children: p
+          })
+        })]
+      }), /* @__PURE__ */ e(u, {
+        condition: !!r,
+        children: /* @__PURE__ */ a("div", {
+          className: t.titleBar,
+          children: [r, g && /* @__PURE__ */ e(x, {
+            className: t.itemCount,
+            colorIndex: 0,
+            text: String(i)
+          })]
+        })
+      })]
+    })
+  });
+}
+export {
+  z as Header
+};

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

@@ -0,0 +1,4 @@
+import { Header as o } from "./header.js";
+export {
+  o as Header
+};

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

@@ -0,0 +1,18 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  clearSelectionAriaLabel: {
+    id: "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel",
+    defaultMessage: "Clear selection"
+  },
+  itemsSelected: {
+    id: "groupSharedFeatures.metadataView.header.itemsSelected",
+    defaultMessage: "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}"
+  },
+  singleItemSelected: {
+    id: "groupSharedFeatures.metadataView.header.singleItemSelected",
+    defaultMessage: "<b>{name}</b> is selected"
+  }
+});
+export {
+  t as default
+};

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

@@ -14,14 +14,15 @@ import { TableRenderer as A } from "./metadata-table/table-renderer.js";
 import { MetadataFileChip as T } from "./metadata-value/metadata-file-chip.js";
 import { MetadataFileField as u } from "./metadata-value/metadata-file-field.js";
 import { MetadataLocationField as E } from "./metadata-value/metadata-location-field.js";
-import { MetadataRadioField as L } from "./metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as O } from "./metadata-value/metadata-search-field.js";
-import { Pagination as q } from "./pagination/pagination.js";
-import { MarkerBasedPagination as y } from "./pagination/marker-based-pagination.js";
-import { OffsetBasedPagination as H } from "./pagination/offset-based-pagination.js";
+import { MetadataRadioField as H } from "./metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as N } from "./metadata-value/metadata-search-field.js";
+import { Pagination as j } from "./pagination/pagination.js";
+import { MarkerBasedPagination as v } from "./pagination/marker-based-pagination.js";
+import { OffsetBasedPagination as z } from "./pagination/offset-based-pagination.js";
 import { PaginationControls as K } from "./pagination/pagination-controls.js";
 import { SortDropdown as U } from "./sort-dropdown/sort-dropdown.js";
 import { Case as W, SwitchCase as X } from "./switch-case/switch-case.js";
+import { Header as Z } from "./header/header.js";
 export {
   o as ActionBar,
   W as Case,
@@ -29,19 +30,20 @@ export {
   a as FilterRow,
   c as FilterSidePanel,
   p as FormFilterChip,
+  Z as Header,
   R as InlineEditingCell,
   s as ItemActionMenu,
-  y as MarkerBasedPagination,
+  v as MarkerBasedPagination,
   T as MetadataFileChip,
   u as MetadataFileField,
   m as MetadataFilterChip,
   g as MetadataGrid,
   E as MetadataLocationField,
-  L as MetadataRadioField,
-  O as MetadataSearchField,
+  H as MetadataRadioField,
+  N as MetadataSearchField,
   w as MetadataTable,
-  H as OffsetBasedPagination,
-  q as Pagination,
+  z as OffsetBasedPagination,
+  j as Pagination,
   K as PaginationControls,
   n as PredefinedFilterName,
   d as SelectFilterChip,

package/dist/esm/lib/hooks/use-header.js

@@ -0,0 +1,38 @@
+import { useState as r, useEffect as h, useCallback as s, useMemo as x } from "react";
+import { S as a } from "../../../chunks/types.js";
+function w({
+  headerProps: f,
+  items: i,
+  selectedKeys: n,
+  isSelectionEnabled: v,
+  onSelectionChange: o
+}) {
+  const [I, c] = r(0), [l, S] = r(void 0), [d, g] = r(0), e = f?.itemCount ?? i.length;
+  h(() => {
+    if (n) {
+      const t = n === a ? e : [...n].length;
+      c(t), t === 1 && S(String([...n][0]));
+    }
+  }, [n, e]);
+  const p = s((t) => {
+    if (!n) {
+      const m = t === a ? e : t.size;
+      c(m), m === 1 && t !== a && S(t.values().next().value);
+    }
+    o?.(t);
+  }, [o, n, e]), C = f?.onClearSelection, E = s(() => {
+    C?.(), o?.(/* @__PURE__ */ new Set()), n || (c(0), g((t) => t + 1));
+  }, [C, o, n]), u = v ? I : 0, L = x(() => u === 1 && l ? i.find((t) => t.id === l)?.name : null, [u, l, i]);
+  return {
+    headerSelectionProps: {
+      onClearSelection: E,
+      selectionCount: u,
+      selectedItemName: L
+    },
+    handleSelectionChange: p,
+    selectionResetKey: d
+  };
+}
+export {
+  w as useHeader
+};

package/dist/esm/lib/index.js

@@ -1,56 +1,59 @@
 import { MetadataView as o } from "./metadata-view.js";
-import { I as a, V as i } from "../../chunks/types.js";
-import { ActionBar as m } from "./components/action-bar/action-bar.js";
-import { FilterRow as x } from "./components/filter-row/filter-row.js";
-import { FormFilterChip as n } from "./components/filter-row/form-filter-chip.js";
-import { MetadataFilterChip as F } from "./components/filter-row/metadata-filter-chip.js";
-import { SelectFilterChip as C } from "./components/filter-row/select-filter-chip.js";
-import { PredefinedFilterName as c } from "./components/filter-row/predefinedFilters/index.js";
+import { I as a, S as i, V as p } from "../../chunks/types.js";
+import { ActionBar as f } from "./components/action-bar/action-bar.js";
+import { FilterRow as d } from "./components/filter-row/filter-row.js";
+import { FormFilterChip as l } from "./components/filter-row/form-filter-chip.js";
+import { MetadataFilterChip as M } from "./components/filter-row/metadata-filter-chip.js";
+import { SelectFilterChip as s } from "./components/filter-row/select-filter-chip.js";
+import { PredefinedFilterName as S } from "./components/filter-row/predefinedFilters/index.js";
 import { Filter as P } from "./components/filter-sidepanel/filter.js";
 import { FilterSidePanel as w } from "./components/filter-sidepanel/filter-side-panel.js";
-import { ItemActionMenu as I } from "./components/item-action-menu/item-action-menu.js";
-import { MetadataGrid as B } from "./components/metadata-grid/metadata-grid.js";
-import { MetadataTable as b } from "./components/metadata-table/metadata-table.js";
-import { InlineEditingCell as A } from "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
-import { TableRenderer as k } from "./components/metadata-table/table-renderer.js";
-import { MetadataFileChip as E } from "./components/metadata-value/metadata-file-chip.js";
-import { MetadataFileField as L } from "./components/metadata-value/metadata-file-field.js";
+import { ItemActionMenu as L } from "./components/item-action-menu/item-action-menu.js";
+import { MetadataGrid as A } from "./components/metadata-grid/metadata-grid.js";
+import { MetadataTable as E } from "./components/metadata-table/metadata-table.js";
+import { InlineEditingCell as T } from "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
+import { TableRenderer as u } from "./components/metadata-table/table-renderer.js";
+import { MetadataFileChip as D } from "./components/metadata-value/metadata-file-chip.js";
+import { MetadataFileField as H } from "./components/metadata-value/metadata-file-field.js";
 import { MetadataLocationField as O } from "./components/metadata-value/metadata-location-field.js";
-import { MetadataRadioField as q } from "./components/metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as y } from "./components/metadata-value/metadata-search-field.js";
-import { Pagination as H } from "./components/pagination/pagination.js";
+import { MetadataRadioField as j } from "./components/metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as v } from "./components/metadata-value/metadata-search-field.js";
+import { Pagination as z } from "./components/pagination/pagination.js";
 import { MarkerBasedPagination as K } from "./components/pagination/marker-based-pagination.js";
 import { OffsetBasedPagination as U } from "./components/pagination/offset-based-pagination.js";
 import { PaginationControls as X } from "./components/pagination/pagination-controls.js";
 import { SortDropdown as Z } from "./components/sort-dropdown/sort-dropdown.js";
-import { Case as $, SwitchCase as ee } from "./components/switch-case/switch-case.js";
+import { Case as ee, SwitchCase as re } from "./components/switch-case/switch-case.js";
+import { Header as te } from "./components/header/header.js";
 export {
-  m as ActionBar,
-  $ as Case,
+  f as ActionBar,
+  ee as Case,
   P as Filter,
-  x as FilterRow,
+  d as FilterRow,
   w as FilterSidePanel,
-  n as FormFilterChip,
+  l as FormFilterChip,
+  te as Header,
   a as IconColumnVariant,
-  A as InlineEditingCell,
-  I as ItemActionMenu,
+  T as InlineEditingCell,
+  L as ItemActionMenu,
   K as MarkerBasedPagination,
-  E as MetadataFileChip,
-  L as MetadataFileField,
-  F as MetadataFilterChip,
-  B as MetadataGrid,
+  D as MetadataFileChip,
+  H as MetadataFileField,
+  M as MetadataFilterChip,
+  A as MetadataGrid,
   O as MetadataLocationField,
-  q as MetadataRadioField,
-  y as MetadataSearchField,
-  b as MetadataTable,
+  j as MetadataRadioField,
+  v as MetadataSearchField,
+  E as MetadataTable,
   o as MetadataView,
   U as OffsetBasedPagination,
-  H as Pagination,
+  z as Pagination,
   X as PaginationControls,
-  c as PredefinedFilterName,
-  C as SelectFilterChip,
+  S as PredefinedFilterName,
+  i as SELECT_ALL,
+  s as SelectFilterChip,
   Z as SortDropdown,
-  ee as SwitchCase,
-  k as TableRenderer,
-  i as ViewMode
+  re as SwitchCase,
+  u as TableRenderer,
+  p as ViewMode
 };

package/dist/esm/lib/metadata-view.js

@@ -1,5 +1,5 @@
-import { V as e, I as O } from "../../chunks/types.js";
-import { ActionBar as Z } from "./components/action-bar/action-bar.js";
+import { V as e, I as F } from "../../chunks/types.js";
+import { ActionBar as U } from "./components/action-bar/action-bar.js";
 import "./components/filter-row/filter-row.js";
 import "./components/filter-row/form-filter-chip.js";
 import "./components/filter-row/metadata-filter-chip.js";
@@ -9,7 +9,7 @@ import "./components/filter-sidepanel/filter.js";
 import "./components/filter-sidepanel/filter-side-panel.js";
 import "./components/item-action-menu/item-action-menu.js";
 import { MetadataGrid as b } from "./components/metadata-grid/metadata-grid.js";
-import { MetadataTable as k } from "./components/metadata-table/metadata-table.js";
+import { MetadataTable as q } from "./components/metadata-table/metadata-table.js";
 import "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
 import "./components/metadata-table/table-renderer.js";
 import "./components/metadata-value/metadata-file-chip.js";
@@ -17,109 +17,131 @@ import "./components/metadata-value/metadata-file-field.js";
 import "./components/metadata-value/metadata-location-field.js";
 import "./components/metadata-value/metadata-radio-field.js";
 import "./components/metadata-value/metadata-search-field.js";
-import { Pagination as z } from "./components/pagination/pagination.js";
+import { Pagination as J } from "./components/pagination/pagination.js";
 import "./components/pagination/marker-based-pagination.js";
 import "./components/pagination/offset-based-pagination.js";
 import "./components/pagination/pagination-controls.js";
 import "./components/sort-dropdown/sort-dropdown.js";
-import { SwitchCase as A, Case as c } from "./components/switch-case/switch-case.js";
-import { TooltipProvider as F } from "@box/blueprint-web";
-import { useState as p, useRef as U, useCallback as q } from "react";
-import { jsx as o, jsxs as v, Fragment as H } from "react/jsx-runtime";
-import { ErrorState as J } from "./components/error-state/error-state.js";
-import K from "./components/empty-state/empty-state.js";
-import '../../styles/metadata-view.css';const Q = "_container_1o9go_5", W = "_contentContainer_1o9go_15", T = {
-  container: Q,
-  contentContainer: W
+import { SwitchCase as Q, Case as s } from "./components/switch-case/switch-case.js";
+import { Header as W } from "./components/header/header.js";
+import { TooltipProvider as X } from "@box/blueprint-web";
+import { useState as d, useRef as Y, useCallback as $ } from "react";
+import { useHeader as B } from "./hooks/use-header.js";
+import { jsx as o, jsxs as _, Fragment as K } from "react/jsx-runtime";
+import { ErrorState as P } from "./components/error-state/error-state.js";
+import oo from "./components/empty-state/empty-state.js";
+import '../../styles/metadata-view.css';const to = "_container_1o9go_5", eo = "_contentContainer_1o9go_15", D = {
+  container: to,
+  contentContainer: eo
 };
-function _o({
-  actionBarProps: r,
-  columns: s,
-  tableProps: i,
-  hasError: V,
-  onRefresh: L,
-  initialViewMode: _ = e.LIST,
-  paginationProps: l,
-  isLoading: d,
-  isSelectAllEnabled: y = !0,
-  isSelectionEnabled: C,
-  areSelectionCheckboxesDisabled: h,
-  ...m
+function Oo({
+  actionBarProps: i,
+  columns: C,
+  tableProps: m,
+  hasError: R,
+  headerProps: a,
+  onRefresh: y,
+  onSelectionChange: x,
+  selectedKeys: c,
+  initialViewMode: G = e.LIST,
+  paginationProps: h,
+  isLoading: f,
+  isSelectAllEnabled: N = !0,
+  isSelectionEnabled: p,
+  areSelectionCheckboxesDisabled: S,
+  ...n
 }) {
-  const [n, f] = p(_), [S, u] = p(void 0), [a, D] = p(0), g = U(null), R = () => {
-    n === e.LIST ? f(e.GRID) : f(e.LIST);
-  }, x = !d && m.items.length === 0, E = r && r.sortDropdownProps && s.filter((t) => t.type !== "multiSelect" && t.type !== "enum" && t.allowsSorting === !0), {
-    iconColumnVariant: M
-  } = i || {}, G = M && M === O.COLUMN, w = i?.onSortChange, N = q(({
+  const [r, g] = d(G), [u, M] = d(void 0), [l, j] = d(0), w = Y(null), {
+    headerSelectionProps: E,
+    handleSelectionChange: I,
+    selectionResetKey: v
+  } = B({
+    headerProps: a,
+    items: n.items,
+    selectedKeys: c,
+    isSelectionEnabled: p,
+    onSelectionChange: x
+  }), H = () => {
+    r === e.LIST ? g(e.GRID) : g(e.LIST);
+  }, O = !f && n.items.length === 0, Z = i && i.sortDropdownProps && C.filter((t) => t.type !== "multiSelect" && t.type !== "enum" && t.allowsSorting === !0), {
+    iconColumnVariant: T
+  } = m || {}, k = T && T === F.COLUMN, V = m?.onSortChange, z = $(({
     column: t,
-    direction: I
+    direction: L
   }) => {
-    u({
+    M({
       column: t,
-      direction: I
-    }), w?.({
+      direction: L
+    }), V?.({
       column: t,
-      direction: I
+      direction: L
     });
-  }, [w]), j = {
-    ...i,
-    sortDescriptor: S,
-    onSortChange: N
+  }, [V]), A = {
+    ...m,
+    sortDescriptor: u,
+    onSortChange: z
   };
-  return /* @__PURE__ */ o(F, {
+  return /* @__PURE__ */ o(X, {
     children: /* @__PURE__ */ o("div", {
-      ref: g,
-      className: T.container,
-      children: V ? /* @__PURE__ */ o(J, {
-        onRefresh: L
-      }) : /* @__PURE__ */ v(H, {
-        children: [/* @__PURE__ */ o(Z, {
-          ...r,
-          containerRef: g,
-          isIconColumnEnabled: G,
-          onSortDescriptorChange: u,
-          onViewModeClick: R,
-          onZoomLevelChange: D,
-          sortableColumns: E,
-          sortDescriptor: S,
-          viewMode: n,
-          zoomLevel: a
+      ref: w,
+      className: D.container,
+      children: R ? /* @__PURE__ */ o(P, {
+        onRefresh: y
+      }) : /* @__PURE__ */ _(K, {
+        children: [a && /* @__PURE__ */ o(W, {
+          ...a,
+          ...E
+        }), /* @__PURE__ */ o(U, {
+          ...i,
+          containerRef: w,
+          isIconColumnEnabled: k,
+          onSortDescriptorChange: M,
+          onViewModeClick: H,
+          onZoomLevelChange: j,
+          sortableColumns: Z,
+          sortDescriptor: u,
+          viewMode: r,
+          zoomLevel: l
         }), /* @__PURE__ */ o("div", {
-          className: T.contentContainer,
-          children: /* @__PURE__ */ v(A, {
-            children: [/* @__PURE__ */ o(c, {
-              condition: x,
-              children: /* @__PURE__ */ o(K, {})
-            }), /* @__PURE__ */ o(c, {
-              condition: n === e.LIST,
-              children: /* @__PURE__ */ o(k, {
-                areSelectionCheckboxesDisabled: h,
-                columns: s,
-                isLoading: d,
-                isSelectAllEnabled: y,
-                selectionMode: C ? "multiple" : "none",
-                zoomLevel: a,
-                ...m,
-                ...j
-              })
-            }), /* @__PURE__ */ o(c, {
-              condition: n === e.GRID,
+          className: D.contentContainer,
+          children: /* @__PURE__ */ _(Q, {
+            children: [/* @__PURE__ */ o(s, {
+              condition: O,
+              children: /* @__PURE__ */ o(oo, {})
+            }), /* @__PURE__ */ o(s, {
+              condition: r === e.LIST,
+              children: /* @__PURE__ */ o(q, {
+                areSelectionCheckboxesDisabled: S,
+                columns: C,
+                isLoading: f,
+                isSelectAllEnabled: N,
+                onSelectionChange: I,
+                selectedKeys: c,
+                selectionMode: p ? "multiple" : "none",
+                zoomLevel: l,
+                ...n,
+                ...A
+              }, v)
+            }), /* @__PURE__ */ o(s, {
+              condition: r === e.GRID,
               children: /* @__PURE__ */ o(b, {
-                areSelectionCheckboxesDisabled: h,
-                selectionMode: C ? "multiple" : "none",
-                zoomLevel: a,
-                ...m
-              })
+                areSelectionCheckboxesDisabled: S,
+                onSelectionChange: I,
+                selectedKeys: c,
+                selectionMode: p ? "multiple" : "none",
+                zoomLevel: l,
+                ...n
+              }, v)
             })]
           })
-        }), l && /* @__PURE__ */ o(z, {
-          ...l
+        }), h && /* @__PURE__ */ o(J, {
+          ...h
         })]
       })
     })
   });
 }
 export {
-  _o as MetadataView,
-  _o as default
+  Oo as MetadataView,
+  Oo as default
 };

package/dist/i18n/bn-IN.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "ফিল্টারগুলি",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "অনুসন্ধান করুন",
   "groupSharedFeatures.metadataView.gridList.gridView": "গ্রিড ভিউ",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "অ্যাকশন মেনু",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "কোনো সমস্যা হয়েছে। অনুগ্রহ করে এই পৃষ্ঠাটি রিফ্রেশ করুন।",

package/dist/i18n/da-DK.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtre",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Søg",
   "groupSharedFeatures.metadataView.gridList.gridView": "Gittervisning",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Handlingsmenu",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Noget gik galt. Opdater denne side.",

package/dist/i18n/de-DE.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filter",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Suchen",
   "groupSharedFeatures.metadataView.gridList.gridView": "Rasteransicht",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Aktionen-Auswahl",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Es ist ein Fehler aufgetreten. Bitte aktualisieren Sie diese Seite.",

package/dist/i18n/en-AU.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filters",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Search",
   "groupSharedFeatures.metadataView.gridList.gridView": "Grid View",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Action menu",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Something went wrong. Please refresh this page.",

package/dist/i18n/en-CA.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filters",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Search",
   "groupSharedFeatures.metadataView.gridList.gridView": "Grid View",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Action menu",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Something went wrong. Please refresh this page.",

package/dist/i18n/en-GB.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filters",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Search",
   "groupSharedFeatures.metadataView.gridList.gridView": "Grid View",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Action menu",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Something went wrong. Please refresh this page.",

package/dist/i18n/en-US.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filters",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Search",
   "groupSharedFeatures.metadataView.gridList.gridView": "Grid View",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Action menu",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Something went wrong. Please refresh this page.",

package/dist/i18n/en-US.properties

@@ -40,6 +40,12 @@ groupSharedFeatures.metadataView.filterSidepanel.filtersHeader = Filters
 groupSharedFeatures.metadataView.filterSidepanel.showResultsButton = Search
 # Label for the grid view of files and folders
 groupSharedFeatures.metadataView.gridList.gridView = Grid View
+# Aria label for the clear selection button
+groupSharedFeatures.metadataView.header.clearSelectionAriaLabel = Clear selection
+# Selection count text in the header when multiple items are selected or item name is unavailable
+groupSharedFeatures.metadataView.header.itemsSelected = {count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}
+# Selection text in the header when a single item is selected, showing the item name
+groupSharedFeatures.metadataView.header.singleItemSelected = <b>{name}</b> is selected
 # Label for the default unselected option in inline editing dropdowns
 groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel = --
 # Label for the action menu for an item in the metadata view list

package/dist/i18n/en-x-pseudo.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "⟦萬萬 ₣ιļťëřś 國國⟧",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "⟦萬 Ŝèǻŗ¢ĥ 國⟧",
   "groupSharedFeatures.metadataView.gridList.gridView": "⟦萬萬 Ğгĭď Víέш 國國⟧",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "⟦ -- ⟧",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "⟦萬萬萬 Āсťïõη mέηü 國國國⟧",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Ŝοměťнįηĝ ώêйτ ώѓолğ. Pľёáŝě ѓêƒґєşĥ ťнίş Ράğε. 國國國國國國國國國國國國國國⟧",

package/dist/i18n/es-419.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtros",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Buscar",
   "groupSharedFeatures.metadataView.gridList.gridView": "Vista de cuadrícula",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menú de acción",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Se ha producido un error. Actualice esta página.",

package/dist/i18n/es-ES.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtros",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Buscar",
   "groupSharedFeatures.metadataView.gridList.gridView": "Vista de cuadrícula",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menú de acción",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Se ha producido un error. Actualice esta página.",

package/dist/i18n/fi-FI.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Suodattimet",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Hae",
   "groupSharedFeatures.metadataView.gridList.gridView": "Ruudukkonäkymä",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Toimintovalikko",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Jokin meni vikaan. Päivitä tämä sivu.",

package/dist/i18n/fr-CA.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtres",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Rechercher",
   "groupSharedFeatures.metadataView.gridList.gridView": "Affichage Grille",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menu des actions",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Une erreur s'est produite. Veuillez actualiser cette page.",

package/dist/i18n/fr-FR.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtres",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Rechercher",
   "groupSharedFeatures.metadataView.gridList.gridView": "Affichage Grille",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menu des actions",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Une erreur s'est produite. Veuillez actualiser cette page.",

package/dist/i18n/hi-IN.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "फ़िल्टर्स",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "खोजें",
   "groupSharedFeatures.metadataView.gridList.gridView": "ग्रिड दृश्य",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "कार्र्यवाही मेनू",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "कुछ गड़बड़ हो गयी। कृपया इस पेज को रिफ्रेश करें।",

package/dist/i18n/it-IT.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtri",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Cerca",
   "groupSharedFeatures.metadataView.gridList.gridView": "Vista griglia",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menu azioni",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Si è verificato un errore. Per favore, aggiorna questa pagina.",

package/dist/i18n/ja-JP.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "フィルタ",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "検索",
   "groupSharedFeatures.metadataView.gridList.gridView": "グリッドビュー",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "アクションメニュー",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "問題が発生しました。このページを更新してください。",

package/dist/i18n/json/src/lib/components/header/messages.json

@@ -0,0 +1 @@
+[{"id":"groupSharedFeatures.metadataView.header.clearSelectionAriaLabel","description":"Aria label for the clear selection button","defaultMessage":"Clear selection"},{"id":"groupSharedFeatures.metadataView.header.itemsSelected","description":"Selection count text in the header when multiple items are selected or item name is unavailable","defaultMessage":"{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}"},{"id":"groupSharedFeatures.metadataView.header.singleItemSelected","description":"Selection text in the header when a single item is selected, showing the item name","defaultMessage":"<b>{name}</b> is selected"}]

package/dist/i18n/ko-KR.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "필터",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "검색",
   "groupSharedFeatures.metadataView.gridList.gridView": "격자 보기",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "작업 메뉴",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "문제가 발생했습니다. 이 페이지를 새로 고침해 주세요.",

package/dist/i18n/nb-NO.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtre",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Søk",
   "groupSharedFeatures.metadataView.gridList.gridView": "Rutenettvisning",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Handlingsvalg",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Noe gikk galt. Oppdater denne siden.",

package/dist/i18n/nl-NL.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filters",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Zoeken",
   "groupSharedFeatures.metadataView.gridList.gridView": "Rasterweergave",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Actiemenu",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Er is iets misgegaan. Gelieve deze pagina te vernieuwen.",

package/dist/i18n/pl-PL.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtry",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Wyszukaj",
   "groupSharedFeatures.metadataView.gridList.gridView": "Widok siatki",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menu operacji",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Wystąpił błąd. Odśwież tę stronę.",

package/dist/i18n/pt-BR.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtros",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Pesquisar",
   "groupSharedFeatures.metadataView.gridList.gridView": "Visualização em grade",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Menu de ação",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Algo saiu errado. Recarregue esta página.",

package/dist/i18n/ru-RU.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Фильтры",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Поиск",
   "groupSharedFeatures.metadataView.gridList.gridView": "Сетка",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Меню действий",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Что-то пошло не так. Обновите эту страницу.",

package/dist/i18n/sv-SE.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filter",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Sök",
   "groupSharedFeatures.metadataView.gridList.gridView": "Rutnätsvy",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "Åtgärdsmeny",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Något gick fel. Uppdatera den här sidan.",

package/dist/i18n/tr-TR.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "Filtreler",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "Ara",
   "groupSharedFeatures.metadataView.gridList.gridView": "Kılavuz Görünümü",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "İşlem menüsü",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "Bir hata oluştu. Lütfen bu sayfayı yenileyin.",

package/dist/i18n/zh-CN.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "筛选",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "搜索",
   "groupSharedFeatures.metadataView.gridList.gridView": "网格视图",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "操作菜单",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "发生错误。请刷新此页面。",

package/dist/i18n/zh-TW.js

@@ -20,6 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.filterSidepanel.filtersHeader": "篩選",
   "groupSharedFeatures.metadataView.filterSidepanel.showResultsButton": "搜尋",
   "groupSharedFeatures.metadataView.gridList.gridView": "方格檢視",
+  "groupSharedFeatures.metadataView.header.clearSelectionAriaLabel": "Clear selection",
+  "groupSharedFeatures.metadataView.header.itemsSelected": "{count, plural, one {<b># item</b> is selected} other {<b># items</b> are selected}}",
+  "groupSharedFeatures.metadataView.header.singleItemSelected": "<b>{name}</b> is selected",
   "groupSharedFeatures.metadataView.inlineEditingCell.unselectedOptionLabel": "--",
   "groupSharedFeatures.metadataView.itemActionMenu.actionMenu": "動作選單",
   "groupSharedFeatures.metadataView.itemList.errorMessage": "出了點問題。請重新整理此頁面。",

package/dist/styles/header.css

@@ -0,0 +1 @@
+._viewHeader_11wvf_1{padding-bottom:var(--space-2)}._titleBar_11wvf_5{display:flex;align-items:center;gap:var(--space-2)}._clearSelectionButton_11wvf_11{border-radius:var(--bp-radius-16);margin-right:var(--space-3)}

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

@@ -0,0 +1,2 @@
+import { HeaderProps } from '../../types';
+export declare function Header({ title, itemCount, isItemCountVisible, onClearSelection, selectionCount, isSelectionCountVisible, selectedItemName, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/header/index.d.ts

@@ -0,0 +1 @@
+export { Header } from './header';

package/dist/types/lib/components/header/messages.d.ts

@@ -0,0 +1,18 @@
+declare const messages: {
+    clearSelectionAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    itemsSelected: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    singleItemSelected: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

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

@@ -8,3 +8,4 @@ export * from './metadata-value';
 export * from './pagination';
 export * from './sort-dropdown';
 export * from './switch-case';
+export * from './header';

package/dist/types/lib/hooks/use-header.d.ts

@@ -0,0 +1,20 @@
+import { Selection } from 'react-aria-components';
+import { Item } from '@box/types';
+import { SELECT_ALL, HeaderProps } from '../types';
+interface UseHeaderParams {
+    headerProps?: HeaderProps;
+    items: Item[];
+    selectedKeys?: typeof SELECT_ALL | Iterable<string | number>;
+    isSelectionEnabled?: boolean;
+    onSelectionChange?: (keys: Selection) => void;
+}
+export declare function useHeader({ headerProps, items, selectedKeys, isSelectionEnabled, onSelectionChange, }: UseHeaderParams): {
+    headerSelectionProps: {
+        onClearSelection: () => void;
+        selectionCount: number;
+        selectedItemName: string;
+    };
+    handleSelectionChange: (keys: Selection) => void;
+    selectionResetKey: number;
+};
+export {};

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

@@ -1,19 +1,3 @@
-import { Selection } from 'react-aria-components';
-import { ActionBarProps, MetadataTableProps, PaginationProps } from './components';
-import { ViewMode, Column, MetadataProps } from './types';
-export interface MetadataViewProps extends MetadataProps {
-    actionBarProps?: Omit<ActionBarProps, 'onViewModeClick' | 'onZoomLevelChange' | 'viewMode'>;
-    columns: Column[];
-    hasError?: boolean;
-    initialViewMode?: ViewMode;
-    onRefresh?: () => void;
-    onSelectionChange?: (keys: Selection) => void;
-    selectedKeys?: 'all' | Iterable<string | number>;
-    isSelectAllEnabled?: boolean;
-    isSelectionEnabled?: boolean;
-    areSelectionCheckboxesDisabled?: boolean;
-    tableProps?: Omit<MetadataTableProps, 'columns' | 'isSelectAllEnabled' | 'items' | 'itemActionMenuProps' | 'onSelectionChange' | 'selectedKeys'>;
-    paginationProps?: PaginationProps;
-}
-export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, onRefresh, initialViewMode, paginationProps, isLoading, isSelectAllEnabled, isSelectionEnabled, areSelectionCheckboxesDisabled, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
+import { MetadataViewProps } from './types';
+export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, headerProps, onRefresh, onSelectionChange, selectedKeys, initialViewMode, paginationProps, isLoading, isSelectAllEnabled, isSelectionEnabled, areSelectionCheckboxesDisabled, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
 export default MetadataView;

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

@@ -7,8 +7,7 @@ import { ItemActionMenuProps } from '../components/item-action-menu/item-action-
 import { MetadataTableProps } from '../components/metadata-table';
 import { PaginationProps } from '../components/pagination/pagination';
 import { SortDropdownProps } from '../components/sort-dropdown/sort-dropdown';
-import { MetadataViewProps } from '../metadata-view';
-import { Column } from '../types';
+import { MetadataViewProps, Column, HeaderProps } from '../types';
 export declare const getMockFilterGroups: (filters: FilterOption[]) => Array<FilterGroup>;
 export declare const mockActiveFilterIds: string[];
 export declare const mockColumnData: Column[];
@@ -98,6 +97,7 @@ export declare const mockActionBarProps: ActionBarProps;
 export declare const mockTableProps: MetadataTableProps;
 export declare const mockItemActionMenuProps: ItemActionMenuProps;
 export declare const mockMetadataViewProps: MetadataViewProps;
+export declare const mockHeaderProps: HeaderProps;
 export type SortArgs = {
     column: string;
     direction: SortDirection;

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

@@ -1,6 +1,9 @@
 import { ColumnProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
+import { Selection } from 'react-aria-components';
+import { ActionBarProps, MetadataTableProps, PaginationProps } from './components';
 import { ItemActionMenuProps } from './components/item-action-menu';
+export declare const SELECT_ALL: "all";
 export type MetadataFieldType = 'date' | 'enum' | 'float' | 'multiSelect' | 'string';
 export type FilterVariant = 'default' | 'search' | 'file' | 'radio' | 'relative' | 'checkbox';
 export interface Column extends Partial<ColumnProps> {
@@ -19,6 +22,23 @@ export declare enum IconColumnVariant {
     COLUMN = "column",
     INLINE_SUBTITLE = "inline-subtitle"
 }
+/** Props for the optional header (title row + selection bar). */
+export interface HeaderProps {
+    /** Custom title content rendered when no items are selected. */
+    title?: React.ReactNode;
+    /** Total item count displayed as a badge next to the title, and used as the selection count when all items are selected. */
+    itemCount: number;
+    /** Whether to show the item count badge next to the title. Defaults to true. */
+    isItemCountVisible?: boolean;
+    /** Whether to show selection bar when rows are selected. Only applicable when isSelectionEnabled is true. Defaults to true. */
+    isSelectionCountVisible?: boolean;
+    /** Called when selection is cleared (e.g. clear control in the header), in addition to internal state being reset. */
+    onClearSelection?: () => void;
+    /** The number of items selected. */
+    selectionCount?: number;
+    /** Name of the selected item, shown instead of the count when exactly one item is selected. */
+    selectedItemName?: string;
+}
 export interface MetadataProps {
     isLoading?: boolean;
     items: Item[];
@@ -28,3 +48,18 @@ export declare enum ViewMode {
     GRID = "grid",
     LIST = "list"
 }
+export interface MetadataViewProps extends MetadataProps {
+    actionBarProps?: Omit<ActionBarProps, 'onViewModeClick' | 'onZoomLevelChange' | 'viewMode'>;
+    columns: Column[];
+    hasError?: boolean;
+    initialViewMode?: ViewMode;
+    onRefresh?: () => void;
+    onSelectionChange?: (keys: Selection) => void;
+    selectedKeys?: typeof SELECT_ALL | Iterable<string | number>;
+    isSelectAllEnabled?: boolean;
+    isSelectionEnabled?: boolean;
+    areSelectionCheckboxesDisabled?: boolean;
+    tableProps?: Omit<MetadataTableProps, 'columns' | 'isSelectAllEnabled' | 'items' | 'itemActionMenuProps' | 'onSelectionChange' | 'selectedKeys'>;
+    paginationProps?: PaginationProps;
+    headerProps?: HeaderProps;
+}

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.53.0",
+    "version": "1.53.2",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^13.11.0",
-        "@box/blueprint-web-assets": "^4.111.0",
-        "@box/box-item-type-selector": "^1.39.0",
-        "@box/item-icon": "^2.31.0",
-        "@box/metadata-filter": "^1.80.0",
+        "@box/blueprint-web": "^13.11.1",
+        "@box/blueprint-web-assets": "^4.111.1",
+        "@box/box-item-type-selector": "^1.39.1",
+        "@box/item-icon": "^2.31.1",
+        "@box/metadata-filter": "^1.80.1",
         "@box/types": "2.1.8",
         "@tanstack/react-virtual": "^3.10.8",
         "formik": "^2.4.5",
@@ -18,13 +18,13 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^13.11.0",
-        "@box/blueprint-web-assets": "^4.111.0",
-        "@box/box-item-type-selector": "^1.39.0",
+        "@box/blueprint-web": "^13.11.1",
+        "@box/blueprint-web-assets": "^4.111.1",
+        "@box/box-item-type-selector": "^1.39.1",
         "@box/eslint-plugin-blueprint": "1.1.6",
-        "@box/item-icon": "^2.31.0",
-        "@box/metadata-filter": "^1.80.0",
-        "@box/storybook-utils": "0.17.0",
+        "@box/item-icon": "^2.31.1",
+        "@box/metadata-filter": "^1.80.1",
+        "@box/storybook-utils": "0.17.1",
         "@box/types": "2.1.8",
         "@tanstack/react-virtual": "^3.10.8",
         "react-intl": "^6.4.2"