@d4gger/design-system 3.0.0 → 4.0.0

package/dist/components/data-list.css

@@ -70,9 +70,16 @@
   --dsx-data-list-marker-size: 2.25em;
 }
 
+/* Unordered marker is a drawn dot, not a text glyph: a radial fill at a
+   fixed fraction of the marker box, so it scales with item size for free —
+   no compounding, no font-dependent glyph rendering. Ordered numerals stay
+   text (counter) at natural size. */
 .dsx-data-list[data-list-type='unordered'] > .dsx-data-list__item::before {
-  content: '\2022';
-  font-size: 1.1em;
+  content: '';
+  background: radial-gradient(circle closest-side, currentColor 100%, transparent 100%);
+  background-size: 32% 32%;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .dsx-data-list[data-list-type='ordered'] > .dsx-data-list__item::before {
@@ -83,8 +90,10 @@
 /* ── Item body — offset for marker breathing room ──────── */
 
 .dsx-data-list__item-body {
+  box-sizing: border-box;
   display: flex;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
   gap: var(--dsx-space-md);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   padding-inline-start: var(--dsx-space-2xl);
@@ -99,6 +108,7 @@
 
 .dsx-data-list__media {
   flex-shrink: 0;
+  align-self: flex-start;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -117,6 +127,7 @@
 }
 
 .dsx-data-list__item[data-size='xs'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-xs);
   min-height: var(--dsx-size-lg);
 }
 
@@ -125,10 +136,12 @@
 }
 
 .dsx-data-list__item[data-size='md'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-md);
   min-height: var(--dsx-size-2xl);
 }
 
 .dsx-data-list__item[data-size='lg'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-lg);
   min-height: var(--dsx-size-3xl);
 }
 
@@ -148,11 +161,12 @@
 .dsx-data-list__content {
   display: grid;
   gap: var(--dsx-space-xs);
-  flex: 1;
+  flex: 1 1 8rem;
   min-width: 0;
 }
 
 .dsx-data-list__text {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
@@ -162,6 +176,7 @@
 }
 
 .dsx-data-list__metadata {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface-variant);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);

package/dist/components/data-table.css

@@ -6,6 +6,7 @@
 
 .dsx-data-table {
   width: 100%;
+  min-width: 0;
   overflow: hidden;
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-lg);
@@ -53,10 +54,90 @@
 /* ── Toolbar: shares container background, bottom separator ────────── */
 
 .dsx-data-table-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dsx-space-md);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
   background: var(--dsx-color-surface);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
+.dsx-data-table-toolbar__search {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+
+.dsx-data-table__toolbar-region {
+  display: grid;
+}
+
+.dsx-data-table-toolbar__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table-toolbar__row-count {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-small-font-family);
+  font-size: var(--dsx-typography-body-small-font-size);
+  font-weight: var(--dsx-typography-body-small-font-weight);
+  white-space: nowrap;
+}
+
+.dsx-data-table__sort-button {
+  position: relative;
+  border-radius: var(--dsx-rounded-sm);
+  transition:
+    color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard),
+    background-color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
+}
+
+.dsx-data-table__sort-button::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: max(100%, var(--dsx-size-md));
+  transform: translateY(-50%);
+}
+
+.dsx-data-table__sort-button:hover {
+  background: var(--dsx-effect-hover-ghost);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-data-table__sort-button:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-data-table__sort-indicator {
+  display: inline-grid;
+  place-items: center;
+  width: var(--dsx-size-sm);
+  height: var(--dsx-size-sm);
+  flex: 0 0 var(--dsx-size-sm);
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-data-table__sort-indicator:where([data-direction='none']) {
+  opacity: 0.55;
+}
+
+.dsx-data-table__sort-indicator:where([data-direction='asc']),
+.dsx-data-table__sort-indicator:where([data-direction='desc']) {
+  color: var(--dsx-color-accent-indicator);
+}
+
 /* ── Pagination: shares container background, top separator ────────── */
 
 .dsx-data-table-pagination {
@@ -64,14 +145,123 @@
   border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
+.dsx-data-table-pagination__info,
+.dsx-data-table-pagination__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-label-small-font-size);
+  white-space: nowrap;
+}
+
+.dsx-data-table-pagination__navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-data-table-pagination__page-size {
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table-pagination__navigation .dsx-pagination__list {
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+.dsx-data-table-pagination__page-status {
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-label-small-font-size);
+  white-space: nowrap;
+}
+
+/* ── Bulk-selection action bar ─────────────────────────────────────── */
+
+.dsx-data-table__bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dsx-space-sm);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
+  background: var(--dsx-color-surface-raised);
+  color: var(--dsx-color-on-surface);
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
+.dsx-data-table__bulk-bar-count {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--dsx-size-md);
+  padding: 0 var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+  white-space: nowrap;
+}
+
+.dsx-data-table__bulk-bar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table__bulk-bar-clear {
+  margin-inline-start: auto;
+}
+
+/* ── Pagination placement ──────────────────────────────────────────── */
+/* Bottom is the default (border-top separator). Top flips the border. */
+
+.dsx-data-table-pagination.dsx-data-table__pagination-top {
+  border-top: 0;
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
 /* ── Empty state ───────────────────────────────────────────────────── */
 
 .dsx-data-table__empty {
   height: var(--dsx-data-table-empty-height);
   text-align: center;
+  vertical-align: middle;
   color: var(--dsx-color-on-surface-variant);
 }
 
+.dsx-data-table__empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  padding: var(--dsx-space-lg) var(--dsx-space-md);
+}
+
+.dsx-data-table__empty-content strong {
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-label-large-font-family);
+  font-size: var(--dsx-typography-label-large-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+}
+
+.dsx-data-table__empty-content span {
+  font-family: var(--dsx-typography-body-small-font-family);
+  font-size: var(--dsx-typography-body-small-font-size);
+}
+
 /* ── Expanded detail row ───────────────────────────────────────────── */
 
 .dsx-data-table [data-expanded-detail='true'] {

package/dist/components/dataTable/DataTable.cjs

@@ -39,24 +39,18 @@ module.exports = __toCommonJS(DataTable_exports);
 var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_Button = require("../button/Button");
 var import_Checkbox = require("../checkbox/Checkbox");
-var import_Input = require("../input/Input");
+var import_Icon = require("../icon/Icon");
 var import_Table = require("../table/Table");
+var import_DataTableContext = require("./DataTableContext");
 var import_dataTable = require("./dataTable.props");
+var import_dataTable2 = require("./dataTable.export");
 var import_DataTableToolbar = require("./DataTableToolbar");
 var import_DataTablePagination = require("./DataTablePagination");
 var import_DataTableFacetedFilter = require("./DataTableFacetedFilter");
 var import_Result = require("../result/Result");
 var import_jsx_runtime = require("react/jsx-runtime");
-const DATA_TABLE_CONTROLS_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-sm)",
-  padding: "var(--dsx-space-md)"
-};
-const DATA_TABLE_SEARCH_STYLE = {
-  width: "100%"
-};
 const DATA_TABLE_SELECTION_CELL_STYLE = {
   width: "1%",
   whiteSpace: "nowrap"
@@ -75,10 +69,6 @@ const DATA_TABLE_HEADER_BUTTON_STYLE = {
   textAlign: "left",
   cursor: "pointer"
 };
-const DATA_TABLE_SORT_ICON_STYLE = {
-  color: "var(--dsx-color-on-surface-variant)",
-  fontSize: "0.875em"
-};
 const DATA_TABLE_EXPAND_CELL_STYLE = {
   width: "1%",
   whiteSpace: "nowrap"
@@ -154,19 +144,7 @@ function getNextSortState(currentSort, columnId) {
   if (!currentSort || currentSort.columnId !== columnId) {
     return { columnId, direction: "asc" };
   }
-  return {
-    columnId,
-    direction: currentSort.direction === "asc" ? "desc" : "asc"
-  };
-}
-function getSortIcon(direction) {
-  if (direction === "asc") {
-    return "\u2191";
-  }
-  if (direction === "desc") {
-    return "\u2193";
-  }
-  return "\u2195";
+  return currentSort.direction === "asc" ? { columnId, direction: "desc" } : null;
 }
 function getColumnValue(column, row, rowIndex) {
   if (column.accessorKey) {
@@ -182,7 +160,7 @@ function DataTableInner(props, forwardedRef) {
     className: propClassName,
     columns,
     data,
-    emptyState = "No results.",
+    emptyState,
     getRowId,
     visibleColumnIds: controlledVisibleColumnIds,
     onVisibleColumnIdsChange,
@@ -191,12 +169,28 @@ function DataTableInner(props, forwardedRef) {
     facetedFilters: controlledFacetedFilters,
     onFacetedFiltersChange,
     toolbar,
+    query: controlledQuery,
+    defaultQuery = "",
+    onQueryChange,
     showToolbar = true,
     showPagination = false,
+    paginationPosition = "bottom",
+    paginationAlign,
+    paginationFirstLast = false,
+    paginationPageInput = false,
+    onTableChange,
+    bulkActions,
     sortBy,
     sortOrder = "asc",
     onSortChange,
+    sorting: controlledSorting,
+    defaultSorting = null,
+    onSortingChange,
+    resetPageOnViewChange = true,
+    clearSelectionOnViewChange = true,
     stickyHeader = false,
+    wrapScrollArea = true,
+    separator = "rules",
     selectedRowIds: controlledSelectedRowIds,
     defaultSelectedRowIds,
     onSelectedRowIdsChange,
@@ -219,9 +213,10 @@ function DataTableInner(props, forwardedRef) {
     },
     import_dataTable.dataTablePropDefs
   );
-  const [query, setQuery] = React.useState("");
-  const [internalSort, setInternalSort] = React.useState(null);
-  const sort = sortBy ? { columnId: sortBy, direction: sortOrder } : internalSort;
+  const [internalQuery, setInternalQuery] = React.useState(defaultQuery);
+  const query = controlledQuery ?? internalQuery;
+  const [internalSort, setInternalSort] = React.useState(defaultSorting);
+  const sort = controlledSorting !== void 0 ? controlledSorting : sortBy ? { columnId: sortBy, direction: sortOrder } : internalSort;
   const [internalSelectedRowIds, setInternalSelectedRowIds] = React.useState(() => new Set(defaultSelectedRowIds));
   const selectedRowIds = controlledSelectedRowIds ?? internalSelectedRowIds;
   const [internalExpandedRowIds, setInternalExpandedRowIds] = React.useState(() => new Set(defaultExpandedRowIds));
@@ -232,10 +227,18 @@ function DataTableInner(props, forwardedRef) {
     page: 1,
     pageSize: 10
   });
-  const visibleColumnIds = controlledVisibleColumnIds ?? new Set(columns.map((col) => col.id));
+  const [internalVisibleColumnIds, setInternalVisibleColumnIds] = React.useState(
+    () => new Set(columns.map((column) => column.id))
+  );
+  const visibleColumnIds = controlledVisibleColumnIds ?? internalVisibleColumnIds;
   const isPaginationControlled = controlledPagination !== void 0;
   const pagination = isPaginationControlled ? controlledPagination : internalPagination;
   const facetedFilters = controlledFacetedFilters ?? [];
+  const facetedFilterSignature = React.useMemo(
+    () => facetedFilters.map((filter) => `${filter.columnId}:${Array.from(filter.selectedValues).sort().join(",")}`).sort().join("|"),
+    [facetedFilters]
+  );
+  const previousFacetedFilterSignature = React.useRef(facetedFilterSignature);
   const rows = React.useMemo(
     () => data.map((row, rowIndex) => ({
       row,
@@ -268,9 +271,12 @@ function DataTableInner(props, forwardedRef) {
   const filteredRows = React.useMemo(() => {
     let result2 = rows;
     if (normalizedQuery) {
-      result2 = result2.filter(
-        ({ row, rowIndex }) => columns.some((column) => stringifyDataTableValue(getColumnValue(column, row, rowIndex)).toLowerCase().includes(normalizedQuery))
-      );
+      result2 = result2.filter(({ row, rowIndex }) => {
+        const matchesRenderedColumns = columns.some((column) => stringifyDataTableValue(
+          getColumnValue(column, row, rowIndex)
+        ).toLowerCase().includes(normalizedQuery));
+        return matchesRenderedColumns || stringifyDataTableValue(row).toLowerCase().includes(normalizedQuery);
+      });
     }
     if (facetedFilterMap.size > 0) {
       result2 = result2.filter(({ row }) => {
@@ -322,10 +328,44 @@ function DataTableInner(props, forwardedRef) {
     () => columns.filter((col) => visibleColumnIds.has(col.id)),
     [columns, visibleColumnIds]
   );
+  const emitTableChange = React.useCallback((action, paginationOverride, sortOverride) => {
+    const resolvedSort = sortOverride !== void 0 ? sortOverride : sort;
+    onTableChange?.(action, {
+      pagination: paginationOverride ?? pagination,
+      sortBy: resolvedSort ? resolvedSort.columnId : null,
+      sortOrder: resolvedSort ? resolvedSort.direction : sortOrder
+    });
+  }, [onTableChange, pagination, sort, sortOrder]);
+  const resetViewState = React.useCallback(() => {
+    const nextPagination = { ...pagination, page: 1 };
+    if (resetPageOnViewChange && pagination.page !== 1) {
+      if (!isPaginationControlled) setInternalPagination(nextPagination);
+      onPaginationChange?.(nextPagination);
+    }
+    if (clearSelectionOnViewChange && selectedRowIds.size > 0) {
+      if (controlledSelectedRowIds === void 0) setInternalSelectedRowIds(/* @__PURE__ */ new Set());
+      onSelectedRowIdsChange?.(/* @__PURE__ */ new Set());
+    }
+    return resetPageOnViewChange ? nextPagination : pagination;
+  }, [
+    clearSelectionOnViewChange,
+    controlledSelectedRowIds,
+    isPaginationControlled,
+    onPaginationChange,
+    onSelectedRowIdsChange,
+    pagination,
+    resetPageOnViewChange,
+    selectedRowIds
+  ]);
   function handleSort(columnId) {
-    const next = getNextSortState(sort, columnId);
-    if (sortBy === void 0) setInternalSort(next);
-    onSortChange?.(next.columnId, next.direction);
+    const next = controlledSorting === void 0 && sortBy !== void 0 ? {
+      columnId,
+      direction: sort?.columnId === columnId && sort.direction === "asc" ? "desc" : "asc"
+    } : getNextSortState(sort, columnId);
+    if (controlledSorting === void 0 && sortBy === void 0) setInternalSort(next);
+    onSortingChange?.(next);
+    if (next) onSortChange?.(next.columnId, next.direction);
+    emitTableChange("sort", resetViewState(), next);
   }
   function updateSelection(updater) {
     const next = updater(selectedRowIds);
@@ -372,6 +412,7 @@ function DataTableInner(props, forwardedRef) {
       setInternalPagination(nextPagination);
     }
     onPaginationChange?.(nextPagination);
+    emitTableChange("paginate", nextPagination);
   }
   function handlePageSizeChange(nextPageSize) {
     const nextPagination = { ...pagination, pageSize: nextPageSize, page: 1 };
@@ -379,20 +420,79 @@ function DataTableInner(props, forwardedRef) {
       setInternalPagination(nextPagination);
     }
     onPaginationChange?.(nextPagination);
+    emitTableChange("paginate", nextPagination);
   }
-  const defaultToolbar = showToolbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: DATA_TABLE_CONTROLS_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Input.Input,
-    {
-      "aria-label": "Search table rows",
-      density: "sm",
-      onChange: (event) => setQuery(event.currentTarget.value),
-      placeholder: "Search rows",
-      style: DATA_TABLE_SEARCH_STYLE,
-      type: "search",
-      value: query
-    }
-  ) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  function handleQueryChange(nextQuery) {
+    if (controlledQuery === void 0) setInternalQuery(nextQuery);
+    onQueryChange?.(nextQuery);
+    emitTableChange("filter", resetViewState());
+  }
+  function handleVisibleColumnIdsChange(nextVisibleColumnIds) {
+    if (controlledVisibleColumnIds === void 0) setInternalVisibleColumnIds(nextVisibleColumnIds);
+    onVisibleColumnIdsChange?.(nextVisibleColumnIds);
+  }
+  function handleClearSelection() {
+    updateSelection(() => /* @__PURE__ */ new Set());
+  }
+  function handleClearFilters() {
+    handleQueryChange("");
+    onFacetedFiltersChange?.([]);
+  }
+  React.useEffect(() => {
+    if (previousFacetedFilterSignature.current === facetedFilterSignature) return;
+    previousFacetedFilterSignature.current = facetedFilterSignature;
+    emitTableChange("filter", resetViewState());
+  }, [emitTableChange, facetedFilterSignature, resetViewState]);
+  const defaultToolbar = showToolbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DataTableToolbar.DataTableToolbar, { "aria-label": "Table tools", role: "group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar.Search, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table-toolbar__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar.RowCount, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar.ColumnVisibility, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar.Export, {})
+    ] })
+  ] }) : null;
+  const showTopPagination = showPagination && (paginationPosition === "top" || paginationPosition === "both");
+  const showBottomPagination = showPagination && (paginationPosition === "bottom" || paginationPosition === "both");
+  const selectedCount = selectedRowIds.size;
+  const showBulkBar = selectionMode === "multiple" && selectedCount > 0;
+  const toolbarContextValue = {
+    columns: columns.map((column) => ({ id: column.id, label: column.header })),
+    exportRows: (format) => (0, import_dataTable2.exportDataTableRows)(
+      format,
+      visibleRows.map(({ row }) => row),
+      visibleColumns
+    ),
+    exportRowsProgressive: (format, onProgress) => (0, import_dataTable2.exportDataTableRowsProgressive)(
+      format,
+      visibleRows.map(({ row }) => row),
+      visibleColumns,
+      onProgress
+    ),
+    filteredRowCount: visibleRows.length,
+    onQueryChange: handleQueryChange,
+    onVisibleColumnIdsChange: handleVisibleColumnIdsChange,
+    query,
+    selectedRowCount: selectedCount,
+    totalRowCount: rows.length,
+    visibleColumnIds
+  };
+  function renderPagination(position) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_DataTablePagination.DataTablePagination,
+      {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        total: visibleRows.length,
+        onPageChange: handlePaginationChange,
+        onPageSizeChange: handlePageSizeChange,
+        align: paginationAlign,
+        showFirstLast: paginationFirstLast,
+        showPageInput: paginationPageInput,
+        className: position === "top" ? "dsx-data-table__pagination-top" : void 0
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ...dataTableProps,
@@ -401,9 +501,20 @@ function DataTableInner(props, forwardedRef) {
       "data-empty": isEmpty ? "true" : void 0,
       "data-size": size,
       "data-sticky-header": stickyHeader ? "true" : void 0,
-      children: [
-        toolbar ?? defaultToolbar,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Table.Table, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DataTableContext.DataTableToolbarContext.Provider, { value: toolbarContextValue, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table__toolbar-region", children: [
+          toolbar ?? defaultToolbar,
+          showBulkBar ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table__bulk-bar", role: "group", "aria-label": "Selected row actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsx-data-table__bulk-bar-count", role: "status", "aria-live": "polite", children: [
+              selectedCount,
+              " selected"
+            ] }),
+            bulkActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-data-table__bulk-bar-actions", children: bulkActions }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { className: "dsx-data-table__bulk-bar-clear", size: "sm", type: "button", variant: "ghost", onClick: handleClearSelection, children: "Deselect all" })
+          ] }) : null
+        ] }),
+        showTopPagination ? renderPagination("top") : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Table.Table, { size, wrapScrollArea, separator, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Table.TableRow, { children: [
             expandedRowRender ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.TableHead, { "aria-label": "Expand row", style: DATA_TABLE_EXPAND_CELL_STYLE }) : null,
             selectionMode === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.TableHead, { "aria-label": "Select rows", style: DATA_TABLE_SELECTION_CELL_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -426,9 +537,23 @@ function DataTableInner(props, forwardedRef) {
                 "data-truncate": column.truncate ? "true" : void 0,
                 "data-hide-below": column.hideBelow,
                 style: { width: typeof column.width === "object" ? void 0 : column.width, minWidth: typeof column.width === "object" ? column.width.min : void 0, maxWidth: typeof column.width === "object" ? column.width.max : void 0 },
-                children: column.sortable !== false ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { style: DATA_TABLE_HEADER_BUTTON_STYLE, type: "button", onClick: () => handleSort(column.id), children: [
+                children: column.sortable !== false ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "dsx-data-table__sort-button", style: DATA_TABLE_HEADER_BUTTON_STYLE, type: "button", onClick: () => handleSort(column.id), children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: column.header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: DATA_TABLE_SORT_ICON_STYLE, children: getSortIcon(sort?.columnId === column.id ? sort.direction : void 0) })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "dsx-data-table__sort-indicator",
+                      "data-direction": sort?.columnId === column.id ? sort.direction : "none",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_Icon.Icon,
+                        {
+                          name: sort?.columnId === column.id ? sort.direction === "asc" ? "arrow-up" : "arrow-down" : "arrow-up-down",
+                          size: "sm"
+                        }
+                      )
+                    }
+                  )
                 ] }) : column.header
               },
               column.id
@@ -467,19 +592,19 @@ function DataTableInner(props, forwardedRef) {
           }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.TableCell, { className: "dsx-data-table__empty", colSpan: visibleColumns.length + (selectionMode === "multiple" ? 1 : 0) + (expandedRowRender ? 1 : 0), "data-empty": "true", children: result ?? (listState ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Result.Result, { state: listState, children: [
             listState === "loading" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Result.Result.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Result.Result.Illustration, { variant: import_Result.RESULT_ILLUSTRATION_VARIANT_BY_STATE[listState] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Result.Result.Title, { children: listState === "loading" ? "Loading" : listState === "error" ? "Unable to load data" : listState === "no-results" ? "No matching results" : "No data" })
-          ] }) : emptyState) }) }) })
+          ] }) : emptyState ?? (rows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table__empty-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "search", size: "md" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "No matching rows" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Try changing your search or filters." }),
+            normalizedQuery !== "" || facetedFilterSignature !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { size: "sm", type: "button", variant: "ghost", onClick: handleClearFilters, children: "Clear search and filters" }) : null
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table__empty-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "inbox", size: "md" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "No rows yet" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "When rows arrive they will appear here." })
+          ] }))) }) }) })
         ] }),
-        showPagination && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_DataTablePagination.DataTablePagination,
-          {
-            page: pagination.page,
-            pageSize: pagination.pageSize,
-            total: visibleRows.length,
-            onPageChange: handlePaginationChange,
-            onPageSizeChange: handlePageSizeChange
-          }
-        )
-      ]
+        showBottomPagination ? renderPagination("bottom") : null
+      ] })
     }
   );
 }