@acmekit/ui 4.1.1

package/dist/cjs/blocks/data-table/components/data-table-sorting-menu.js

@@ -0,0 +1,95 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableSortingMenu = void 0;
+const tslib_1 = require("tslib");
+const use_data_table_context_1 = require("../../data-table/context/use-data-table-context");
+const dropdown_menu_1 = require("../../../components/dropdown-menu");
+const icon_button_1 = require("../../../components/icon-button");
+const skeleton_1 = require("../../../components/skeleton");
+const tooltip_1 = require("../../../components/tooltip");
+const icons_1 = require("@acmekit/icons");
+const React = tslib_1.__importStar(require("react"));
+/**
+ * This component adds a sorting menu to the data table, allowing users
+ * to sort the table's data.
+ */
+const DataTableSortingMenu = (props) => {
+    const { instance } = (0, use_data_table_context_1.useDataTableContext)();
+    const sortableColumns = instance
+        .getAllColumns()
+        .filter((column) => column.getCanSort());
+    const sorting = instance.getSorting();
+    const selectedColumn = React.useMemo(() => {
+        return sortableColumns.find((column) => column.id === (sorting === null || sorting === void 0 ? void 0 : sorting.id));
+    }, [sortableColumns, sorting]);
+    const setKey = React.useCallback((key) => {
+        instance.setSorting((prev) => { var _a; return ({ id: key, desc: (_a = prev === null || prev === void 0 ? void 0 : prev.desc) !== null && _a !== void 0 ? _a : false }); });
+    }, [instance]);
+    const setDesc = React.useCallback((desc) => {
+        instance.setSorting((prev) => {
+            var _a;
+            return ({
+                id: (_a = prev === null || prev === void 0 ? void 0 : prev.id) !== null && _a !== void 0 ? _a : "",
+                desc: desc === "true",
+            });
+        });
+    }, [instance]);
+    if (!instance.enableSorting) {
+        throw new Error("DataTable.SortingMenu was rendered but sorting is not enabled. Make sure to pass sorting to 'useDataTable'");
+    }
+    if (!sortableColumns.length) {
+        throw new Error("DataTable.SortingMenu was rendered but there are no sortable columns. Make sure to set `enableSorting` to true on at least one column.");
+    }
+    if (instance.showSkeleton) {
+        return React.createElement(DataTableSortingMenuSkeleton, null);
+    }
+    const Wrapper = props.tooltip ? tooltip_1.Tooltip : React.Fragment;
+    const wrapperProps = props.tooltip ? { content: props.tooltip } : {};
+    return (React.createElement(dropdown_menu_1.DropdownMenu, null,
+        React.createElement(Wrapper, { ...wrapperProps },
+            React.createElement(dropdown_menu_1.DropdownMenu.Trigger, { asChild: true },
+                React.createElement(icon_button_1.IconButton, { size: "small" },
+                    React.createElement(icons_1.DescendingSorting, null)))),
+        React.createElement(dropdown_menu_1.DropdownMenu.Content, { side: "bottom" },
+            React.createElement(dropdown_menu_1.DropdownMenu.RadioGroup, { value: sorting === null || sorting === void 0 ? void 0 : sorting.id, onValueChange: setKey }, sortableColumns.map((column) => {
+                return (React.createElement(dropdown_menu_1.DropdownMenu.RadioItem, { onSelect: (e) => e.preventDefault(), value: column.id, key: column.id }, getSortLabel(column)));
+            })),
+            sorting && (React.createElement(React.Fragment, null,
+                React.createElement(dropdown_menu_1.DropdownMenu.Separator, null),
+                React.createElement(dropdown_menu_1.DropdownMenu.RadioGroup, { value: (sorting === null || sorting === void 0 ? void 0 : sorting.desc) ? "true" : "false", onValueChange: setDesc },
+                    React.createElement(dropdown_menu_1.DropdownMenu.RadioItem, { onSelect: (e) => e.preventDefault(), value: "false", className: "flex items-center gap-2" },
+                        React.createElement(icons_1.ArrowUpMini, { className: "text-ui-fg-subtle" }),
+                        getSortDescriptor("asc", selectedColumn)),
+                    React.createElement(dropdown_menu_1.DropdownMenu.RadioItem, { onSelect: (e) => e.preventDefault(), value: "true", className: "flex items-center gap-2" },
+                        React.createElement(icons_1.ArrowDownMini, { className: "text-ui-fg-subtle" }),
+                        getSortDescriptor("desc", selectedColumn))))))));
+};
+exports.DataTableSortingMenu = DataTableSortingMenu;
+DataTableSortingMenu.displayName = "DataTable.SortingMenu";
+function getSortLabel(column) {
+    var _a, _b, _c;
+    const meta = column.columnDef.meta;
+    let headerValue = undefined;
+    if (typeof column.columnDef.header === "string") {
+        headerValue = column.columnDef.header;
+    }
+    return (_c = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.___sortMetaData) === null || _a === void 0 ? void 0 : _a.sortLabel) !== null && _b !== void 0 ? _b : headerValue) !== null && _c !== void 0 ? _c : column.id;
+}
+function getSortDescriptor(direction, column) {
+    var _a, _b, _c, _d;
+    if (!column) {
+        return null;
+    }
+    const meta = column.columnDef.meta;
+    switch (direction) {
+        case "asc":
+            return (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.___sortMetaData) === null || _a === void 0 ? void 0 : _a.sortAscLabel) !== null && _b !== void 0 ? _b : "A-Z";
+        case "desc":
+            return (_d = (_c = meta === null || meta === void 0 ? void 0 : meta.___sortMetaData) === null || _c === void 0 ? void 0 : _c.sortDescLabel) !== null && _d !== void 0 ? _d : "Z-A";
+    }
+}
+const DataTableSortingMenuSkeleton = () => {
+    return React.createElement(skeleton_1.Skeleton, { className: "size-7" });
+};
+//# sourceMappingURL=data-table-sorting-menu.js.map

package/dist/cjs/blocks/data-table/components/data-table-sorting-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sorting-menu.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-sorting-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport {\n  DataTableColumn,\n  DataTableSortableColumnDefMeta,\n} from \"@/blocks/data-table/types\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { Skeleton } from \"@/components/skeleton\"\nimport { Tooltip } from \"@/components/tooltip\"\nimport { ArrowDownMini, ArrowUpMini, DescendingSorting } from \"@acmekit/icons\"\nimport * as React from \"react\"\n\ninterface DataTableSortingMenuProps {\n  /**\n   * The tooltip to show when hovering over the sorting menu.\n   */\n  tooltip?: string\n}\n\n/**\n * This component adds a sorting menu to the data table, allowing users\n * to sort the table's data.\n */\nconst DataTableSortingMenu = (props: DataTableSortingMenuProps) => {\n  const { instance } = useDataTableContext()\n\n  const sortableColumns = instance\n    .getAllColumns()\n    .filter((column) => column.getCanSort())\n\n  const sorting = instance.getSorting()\n\n  const selectedColumn = React.useMemo(() => {\n    return sortableColumns.find((column) => column.id === sorting?.id)\n  }, [sortableColumns, sorting])\n\n  const setKey = React.useCallback(\n    (key: string) => {\n      instance.setSorting((prev) => ({ id: key, desc: prev?.desc ?? false }))\n    },\n    [instance]\n  )\n\n  const setDesc = React.useCallback(\n    (desc: string) => {\n      instance.setSorting((prev) => ({\n        id: prev?.id ?? \"\",\n        desc: desc === \"true\",\n      }))\n    },\n    [instance]\n  )\n\n  if (!instance.enableSorting) {\n    throw new Error(\n      \"DataTable.SortingMenu was rendered but sorting is not enabled. Make sure to pass sorting to 'useDataTable'\"\n    )\n  }\n\n  if (!sortableColumns.length) {\n    throw new Error(\n      \"DataTable.SortingMenu was rendered but there are no sortable columns. Make sure to set `enableSorting` to true on at least one column.\"\n    )\n  }\n\n  if (instance.showSkeleton) {\n    return <DataTableSortingMenuSkeleton />\n  }\n\n  const Wrapper = props.tooltip ? Tooltip : React.Fragment\n  const wrapperProps = props.tooltip ? { content: props.tooltip } : ({} as any)\n\n  return (\n    <DropdownMenu>\n      <Wrapper {...wrapperProps}>\n        <DropdownMenu.Trigger asChild>\n          <IconButton size=\"small\">\n            <DescendingSorting />\n          </IconButton>\n        </DropdownMenu.Trigger>\n      </Wrapper>\n      <DropdownMenu.Content side=\"bottom\">\n        <DropdownMenu.RadioGroup value={sorting?.id} onValueChange={setKey}>\n          {sortableColumns.map((column) => {\n            return (\n              <DropdownMenu.RadioItem\n                onSelect={(e) => e.preventDefault()}\n                value={column.id}\n                key={column.id}\n              >\n                {getSortLabel(column)}\n              </DropdownMenu.RadioItem>\n            )\n          })}\n        </DropdownMenu.RadioGroup>\n        {sorting && (\n          <React.Fragment>\n            <DropdownMenu.Separator />\n            <DropdownMenu.RadioGroup\n              value={sorting?.desc ? \"true\" : \"false\"}\n              onValueChange={setDesc}\n            >\n              <DropdownMenu.RadioItem\n                onSelect={(e) => e.preventDefault()}\n                value=\"false\"\n                className=\"flex items-center gap-2\"\n              >\n                <ArrowUpMini className=\"text-ui-fg-subtle\" />\n                {getSortDescriptor(\"asc\", selectedColumn)}\n              </DropdownMenu.RadioItem>\n              <DropdownMenu.RadioItem\n                onSelect={(e) => e.preventDefault()}\n                value=\"true\"\n                className=\"flex items-center gap-2\"\n              >\n                <ArrowDownMini className=\"text-ui-fg-subtle\" />\n                {getSortDescriptor(\"desc\", selectedColumn)}\n              </DropdownMenu.RadioItem>\n            </DropdownMenu.RadioGroup>\n          </React.Fragment>\n        )}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  )\n}\nDataTableSortingMenu.displayName = \"DataTable.SortingMenu\"\n\nfunction getSortLabel(column: DataTableColumn<any, unknown>) {\n  const meta = column.columnDef.meta as\n    | DataTableSortableColumnDefMeta\n    | undefined\n  let headerValue: string | undefined = undefined\n\n  if (typeof column.columnDef.header === \"string\") {\n    headerValue = column.columnDef.header\n  }\n\n  return meta?.___sortMetaData?.sortLabel ?? headerValue ?? column.id\n}\n\nfunction getSortDescriptor(\n  direction: \"asc\" | \"desc\",\n  column?: DataTableColumn<any, unknown>\n) {\n  if (!column) {\n    return null\n  }\n\n  const meta = column.columnDef.meta as\n    | DataTableSortableColumnDefMeta\n    | undefined\n\n  switch (direction) {\n    case \"asc\":\n      return meta?.___sortMetaData?.sortAscLabel ?? \"A-Z\"\n    case \"desc\":\n      return meta?.___sortMetaData?.sortDescLabel ?? \"Z-A\"\n  }\n}\n\nconst DataTableSortingMenuSkeleton = () => {\n  return <Skeleton className=\"size-7\" />\n}\n\nexport { DataTableSortingMenu }\nexport type { DataTableSortingMenuProps }\n"]}

package/dist/cjs/blocks/data-table/components/data-table-table.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { DataTableEmptyStateProps } from "../types";
+interface DataTableTableProps {
+    /**
+     * The empty state to display when the table is empty.
+     */
+    emptyState?: DataTableEmptyStateProps;
+}
+/**
+ * This component renders the table in a data table, supporting advanced features.
+ */
+declare const DataTableTable: {
+    (props: DataTableTableProps): React.JSX.Element;
+    displayName: string;
+};
+export { DataTableTable };
+export type { DataTableEmptyStateProps, DataTableTableProps };
+//# sourceMappingURL=data-table-table.d.ts.map

package/dist/cjs/blocks/data-table/components/data-table-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-table.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAwB9B,OAAO,EAGL,wBAAwB,EACzB,MAAM,UAAU,CAAA;AAKjB,UAAU,mBAAmB;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAA;CACtC;AAED;;GAEG;AACH,QAAA,MAAM,cAAc;YAAW,mBAAmB;;CA6djD,CAAA;AA0ED,OAAO,EAAE,cAAc,EAAE,CAAA;AACzB,YAAY,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/cjs/blocks/data-table/components/data-table-table.js

@@ -0,0 +1,291 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableTable = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const table_1 = require("../../../components/table");
+const react_table_1 = require("@tanstack/react-table");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const use_data_table_context_1 = require("../../data-table/context/use-data-table-context");
+const skeleton_1 = require("../../../components/skeleton");
+const text_1 = require("../../../components/text");
+const clx_1 = require("../../../utils/clx");
+const types_1 = require("../types");
+const data_table_sorting_icon_1 = require("./data-table-sorting-icon");
+const data_table_sortable_header_cell_1 = require("./data-table-sortable-header-cell");
+const data_table_non_sortable_header_cell_1 = require("./data-table-non-sortable-header-cell");
+/**
+ * This component renders the table in a data table, supporting advanced features.
+ */
+const DataTableTable = (props) => {
+    const hoveredRowId = React.useRef(null);
+    const isKeyDown = React.useRef(false);
+    const [showStickyBorder, setShowStickyBorder] = React.useState(false);
+    const scrollableRef = React.useRef(null);
+    const { instance } = (0, use_data_table_context_1.useDataTableContext)();
+    const pageIndex = instance.pageIndex;
+    const columns = instance.getAllColumns();
+    const hasSelect = columns.find((c) => c.id === "select");
+    const hasActions = columns.find((c) => c.id === "action");
+    // Create list of all column IDs for SortableContext
+    // Use current order if available, otherwise use default order
+    const sortableItems = React.useMemo(() => {
+        if (instance.columnOrder && instance.columnOrder.length > 0) {
+            return instance.columnOrder;
+        }
+        return columns.map(col => col.id);
+    }, [columns, instance.columnOrder]);
+    // Setup drag-and-drop sensors
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (active.id !== (over === null || over === void 0 ? void 0 : over.id) && (over === null || over === void 0 ? void 0 : over.id)) {
+            const activeId = active.id;
+            const overId = over.id;
+            // Don't allow dragging fixed columns
+            if (activeId === "select" || activeId === "action") {
+                return;
+            }
+            // Don't allow dropping on fixed columns
+            if (overId === "select" || overId === "action") {
+                return;
+            }
+            // Use the current column order from the instance
+            const currentOrder = instance.columnOrder && instance.columnOrder.length > 0
+                ? instance.columnOrder
+                : columns.map(col => col.id);
+            const oldIndex = currentOrder.indexOf(activeId);
+            const newIndex = currentOrder.indexOf(overId);
+            if (oldIndex !== -1 && newIndex !== -1) {
+                const newOrder = (0, sortable_1.arrayMove)(currentOrder, oldIndex, newIndex);
+                instance.setColumnOrderFromArray(newOrder);
+            }
+        }
+    };
+    React.useEffect(() => {
+        const onKeyDownHandler = (event) => {
+            // If an editable element is focused, we don't want to select a row
+            const isEditableElementFocused = getIsEditableElementFocused();
+            if (event.key.toLowerCase() === "x" &&
+                hoveredRowId &&
+                !isKeyDown.current &&
+                !isEditableElementFocused) {
+                isKeyDown.current = true;
+                const row = instance
+                    .getRowModel()
+                    .rows.find((r) => r.id === hoveredRowId.current);
+                if (row && row.getCanSelect()) {
+                    row.toggleSelected();
+                }
+            }
+        };
+        const onKeyUpHandler = (event) => {
+            if (event.key.toLowerCase() === "x") {
+                isKeyDown.current = false;
+            }
+        };
+        document.addEventListener("keydown", onKeyDownHandler);
+        document.addEventListener("keyup", onKeyUpHandler);
+        return () => {
+            document.removeEventListener("keydown", onKeyDownHandler);
+            document.removeEventListener("keyup", onKeyUpHandler);
+        };
+    }, [hoveredRowId, instance]);
+    const handleHorizontalScroll = (e) => {
+        const scrollLeft = e.currentTarget.scrollLeft;
+        if (scrollLeft > 0) {
+            setShowStickyBorder(true);
+        }
+        else {
+            setShowStickyBorder(false);
+        }
+    };
+    React.useEffect(() => {
+        var _a;
+        (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scroll({ top: 0, left: 0 });
+    }, [pageIndex]);
+    if (instance.showSkeleton) {
+        return React.createElement(DataTableTableSkeleton, { pageSize: instance.pageSize });
+    }
+    return (React.createElement("div", { className: "flex w-full flex-1 flex-col overflow-hidden" },
+        instance.emptyState === types_1.DataTableEmptyState.POPULATED && (instance.enableColumnOrder ? (React.createElement(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd },
+            React.createElement("div", { ref: scrollableRef, onScroll: handleHorizontalScroll, className: "min-h-0 w-full flex-1 overflow-auto overscroll-none border-y" },
+                React.createElement(table_1.Table, { className: "relative isolate w-full" },
+                    React.createElement(table_1.Table.Header, { className: "shadow-ui-border-base sticky inset-x-0 top-0 z-[1] w-full border-b-0 border-t-0 shadow-[0_1px_1px_0]", style: { transform: "translate3d(0,0,0)" } }, instance.getHeaderGroups().map((headerGroup) => (React.createElement(table_1.Table.Row, { key: headerGroup.id, className: (0, clx_1.clx)("border-b-0", {
+                            "[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap": hasActions,
+                            "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap": hasSelect,
+                        }) },
+                        React.createElement(sortable_1.SortableContext, { items: sortableItems, strategy: sortable_1.horizontalListSortingStrategy }, headerGroup.headers.map((header, idx) => {
+                            var _a, _b;
+                            const canSort = header.column.getCanSort();
+                            const sortDirection = header.column.getIsSorted();
+                            const sortHandler = header.column.getToggleSortingHandler();
+                            const isActionHeader = header.id === "action";
+                            const isSelectHeader = header.id === "select";
+                            const isSpecialHeader = isActionHeader || isSelectHeader;
+                            const isDraggable = !isSpecialHeader;
+                            const Wrapper = canSort ? "button" : "div";
+                            const isFirstColumn = hasSelect ? idx === 1 : idx === 0;
+                            // Get header alignment from column metadata
+                            const headerAlign = ((_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.___alignMetaData) === null || _b === void 0 ? void 0 : _b.headerAlign) || 'left';
+                            const isRightAligned = headerAlign === 'right';
+                            const isCenterAligned = headerAlign === 'center';
+                            const HeaderCellComponent = isDraggable ? data_table_sortable_header_cell_1.DataTableSortableHeaderCell : data_table_non_sortable_header_cell_1.DataTableNonSortableHeaderCell;
+                            return (React.createElement(HeaderCellComponent, { key: header.id, id: header.id, isFirstColumn: isFirstColumn, className: (0, clx_1.clx)("whitespace-nowrap", {
+                                    "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]": isSelectHeader,
+                                    "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]": isActionHeader,
+                                    "after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isFirstColumn,
+                                    "after:bg-ui-border-base": showStickyBorder && isFirstColumn,
+                                    "bg-ui-bg-subtle sticky": isFirstColumn || isSelectHeader,
+                                    "left-0": isSelectHeader || (isFirstColumn && !hasSelect),
+                                    "left-[calc(20px+24px+24px)]": isFirstColumn && hasSelect,
+                                }), style: !isSpecialHeader
+                                    ? {
+                                        width: header.column.columnDef.size,
+                                        maxWidth: header.column.columnDef.maxSize,
+                                        minWidth: header.column.columnDef.minSize,
+                                    }
+                                    : undefined },
+                                React.createElement(Wrapper, { type: canSort ? "button" : undefined, onClick: canSort ? sortHandler : undefined, onMouseDown: canSort ? (e) => e.stopPropagation() : undefined, className: (0, clx_1.clx)("group flex cursor-default items-center gap-2", {
+                                        "cursor-pointer": canSort,
+                                        "w-full": isRightAligned || isCenterAligned,
+                                        "w-fit": !isRightAligned && !isCenterAligned,
+                                        "justify-end": isRightAligned,
+                                        "justify-center": isCenterAligned,
+                                    }) },
+                                    canSort && isRightAligned && (React.createElement(data_table_sorting_icon_1.DataTableSortingIcon, { direction: sortDirection })),
+                                    (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()),
+                                    canSort && !isRightAligned && (React.createElement(data_table_sorting_icon_1.DataTableSortingIcon, { direction: sortDirection })))));
+                        })))))),
+                    React.createElement(table_1.Table.Body, { className: "border-b-0 border-t-0" }, instance.getRowModel().rows.map((row) => {
+                        return (React.createElement(table_1.Table.Row, { key: row.id, onMouseEnter: () => (hoveredRowId.current = row.id), onMouseLeave: () => (hoveredRowId.current = null), onClick: (e) => { var _a; return (_a = instance.onRowClick) === null || _a === void 0 ? void 0 : _a.call(instance, e, row); }, className: (0, clx_1.clx)("group/row last-of-type:border-b-0", {
+                                "cursor-pointer": !!instance.onRowClick,
+                            }) }, row.getVisibleCells().map((cell, idx) => {
+                            const isSelectCell = cell.column.id === "select";
+                            const isActionCell = cell.column.id === "action";
+                            const isSpecialCell = isSelectCell || isActionCell;
+                            const isFirstColumn = hasSelect ? idx === 1 : idx === 0;
+                            return (React.createElement(table_1.Table.Cell, { key: cell.id, className: (0, clx_1.clx)("items-stretch truncate whitespace-nowrap", {
+                                    "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]": isSelectCell,
+                                    "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]": isActionCell,
+                                    "bg-ui-bg-base group-hover/row:bg-ui-bg-base-hover transition-fg sticky h-full": isFirstColumn || isSelectCell,
+                                    "after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isFirstColumn,
+                                    "after:bg-ui-border-base": showStickyBorder && isFirstColumn,
+                                    "left-0": isSelectCell || (isFirstColumn && !hasSelect),
+                                    "left-[calc(20px+24px+24px)]": isFirstColumn && hasSelect,
+                                }), style: !isSpecialCell
+                                    ? {
+                                        width: cell.column.columnDef.size,
+                                        maxWidth: cell.column.columnDef.maxSize,
+                                        minWidth: cell.column.columnDef.minSize,
+                                    }
+                                    : undefined }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+                        })));
+                    })))))) : (React.createElement("div", { ref: scrollableRef, onScroll: handleHorizontalScroll, className: "min-h-0 w-full flex-1 overflow-auto overscroll-none border-y" },
+            React.createElement(table_1.Table, { className: "relative isolate w-full" },
+                React.createElement(table_1.Table.Header, { className: "shadow-ui-border-base sticky inset-x-0 top-0 z-[1] w-full border-b-0 border-t-0 shadow-[0_1px_1px_0]", style: { transform: "translate3d(0,0,0)" } }, instance.getHeaderGroups().map((headerGroup) => (React.createElement(table_1.Table.Row, { key: headerGroup.id, className: (0, clx_1.clx)("border-b-0", {
+                        "[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap": hasActions,
+                        "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap": hasSelect,
+                    }) }, headerGroup.headers.map((header, idx) => {
+                    var _a, _b;
+                    const canSort = header.column.getCanSort();
+                    const sortDirection = header.column.getIsSorted();
+                    const sortHandler = header.column.getToggleSortingHandler();
+                    const isActionHeader = header.id === "action";
+                    const isSelectHeader = header.id === "select";
+                    const isSpecialHeader = isActionHeader || isSelectHeader;
+                    const Wrapper = canSort ? "button" : "div";
+                    const isFirstColumn = hasSelect ? idx === 1 : idx === 0;
+                    // Get header alignment from column metadata
+                    const headerAlign = ((_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.___alignMetaData) === null || _b === void 0 ? void 0 : _b.headerAlign) || 'left';
+                    const isRightAligned = headerAlign === 'right';
+                    const isCenterAligned = headerAlign === 'center';
+                    return (React.createElement(table_1.Table.HeaderCell, { key: header.id, className: (0, clx_1.clx)("whitespace-nowrap", {
+                            "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]": isSelectHeader,
+                            "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]": isActionHeader,
+                            "after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isFirstColumn,
+                            "after:bg-ui-border-base": showStickyBorder && isFirstColumn,
+                            "bg-ui-bg-subtle sticky": isFirstColumn || isSelectHeader,
+                            "left-0": isSelectHeader || (isFirstColumn && !hasSelect),
+                            "left-[calc(20px+24px+24px)]": isFirstColumn && hasSelect,
+                        }), style: !isSpecialHeader
+                            ? {
+                                width: header.column.columnDef.size,
+                                maxWidth: header.column.columnDef.maxSize,
+                                minWidth: header.column.columnDef.minSize,
+                            }
+                            : undefined },
+                        React.createElement(Wrapper, { type: canSort ? "button" : undefined, onClick: canSort ? sortHandler : undefined, onMouseDown: canSort ? (e) => e.stopPropagation() : undefined, className: (0, clx_1.clx)("group flex cursor-default items-center gap-2", {
+                                "cursor-pointer": canSort,
+                                "w-full": isRightAligned || isCenterAligned,
+                                "w-fit": !isRightAligned && !isCenterAligned,
+                                "justify-end": isRightAligned,
+                                "justify-center": isCenterAligned,
+                            }) },
+                            canSort && isRightAligned && (React.createElement(data_table_sorting_icon_1.DataTableSortingIcon, { direction: sortDirection })),
+                            (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()),
+                            canSort && !isRightAligned && (React.createElement(data_table_sorting_icon_1.DataTableSortingIcon, { direction: sortDirection })))));
+                }))))),
+                React.createElement(table_1.Table.Body, { className: "border-b-0 border-t-0" }, instance.getRowModel().rows.map((row) => {
+                    return (React.createElement(table_1.Table.Row, { key: row.id, onMouseEnter: () => (hoveredRowId.current = row.id), onMouseLeave: () => (hoveredRowId.current = null), onClick: (e) => { var _a; return (_a = instance.onRowClick) === null || _a === void 0 ? void 0 : _a.call(instance, e, row); }, className: (0, clx_1.clx)("group/row last-of-type:border-b-0", {
+                            "cursor-pointer": !!instance.onRowClick,
+                        }) }, row.getVisibleCells().map((cell, idx) => {
+                        const isSelectCell = cell.column.id === "select";
+                        const isActionCell = cell.column.id === "action";
+                        const isSpecialCell = isSelectCell || isActionCell;
+                        const isFirstColumn = hasSelect ? idx === 1 : idx === 0;
+                        return (React.createElement(table_1.Table.Cell, { key: cell.id, className: (0, clx_1.clx)("items-stretch truncate whitespace-nowrap", {
+                                "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]": isSelectCell,
+                                "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]": isActionCell,
+                                "bg-ui-bg-base group-hover/row:bg-ui-bg-base-hover transition-fg sticky h-full": isFirstColumn || isSelectCell,
+                                "after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isFirstColumn,
+                                "after:bg-ui-border-base": showStickyBorder && isFirstColumn,
+                                "left-0": isSelectCell || (isFirstColumn && !hasSelect),
+                                "left-[calc(20px+24px+24px)]": isFirstColumn && hasSelect,
+                            }), style: !isSpecialCell
+                                ? {
+                                    width: cell.column.columnDef.size,
+                                    maxWidth: cell.column.columnDef.maxSize,
+                                    minWidth: cell.column.columnDef.minSize,
+                                }
+                                : undefined }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+                    })));
+                })))))),
+        React.createElement(DataTableEmptyStateDisplay, { state: instance.emptyState, props: props.emptyState })));
+};
+exports.DataTableTable = DataTableTable;
+DataTableTable.displayName = "DataTable.Table";
+const DefaultEmptyStateContent = ({ heading, description, }) => (React.createElement("div", { className: "flex size-full flex-col items-center justify-center gap-2" },
+    React.createElement(text_1.Text, { size: "base", weight: "plus" }, heading),
+    React.createElement(text_1.Text, null, description)));
+const DataTableEmptyStateDisplay = ({ state, props, }) => {
+    var _a;
+    if (state === types_1.DataTableEmptyState.POPULATED) {
+        return null;
+    }
+    const content = state === types_1.DataTableEmptyState.EMPTY ? props === null || props === void 0 ? void 0 : props.empty : props === null || props === void 0 ? void 0 : props.filtered;
+    return (React.createElement("div", { className: "flex min-h-[250px] w-full flex-1 flex-col items-center justify-center border-y px-6 py-4" }, (_a = content === null || content === void 0 ? void 0 : content.custom) !== null && _a !== void 0 ? _a : (React.createElement(DefaultEmptyStateContent, { heading: content === null || content === void 0 ? void 0 : content.heading, description: content === null || content === void 0 ? void 0 : content.description }))));
+};
+const DataTableTableSkeleton = ({ pageSize = 10, }) => {
+    return (React.createElement("div", { className: "flex w-full flex-1 flex-col overflow-hidden" },
+        React.createElement("div", { className: "min-h-0 w-full flex-1 overscroll-none border-y" },
+            React.createElement("div", { className: "flex flex-col divide-y" },
+                React.createElement(skeleton_1.Skeleton, { className: "h-12 w-full" }),
+                Array.from({ length: pageSize }, (_, i) => i).map((row) => (React.createElement(skeleton_1.Skeleton, { key: row, className: "h-12 w-full rounded-none" })))))));
+};
+function getIsEditableElementFocused() {
+    const activeElement = !!document ? document.activeElement : null;
+    const isEditableElementFocused = activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement ||
+        (activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute("contenteditable")) === "true";
+    return isEditableElementFocused;
+}
+//# sourceMappingURL=data-table-table.js.map

package/dist/cjs/blocks/data-table/components/data-table-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-table.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-table.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Table } from \"@/components/table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  DragEndEvent,\n} from \"@dnd-kit/core\"\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  horizontalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\n\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { Skeleton } from \"@/components/skeleton\"\nimport { Text } from \"@/components/text\"\nimport { clx } from \"@/utils/clx\"\nimport {\n  DataTableEmptyState,\n  DataTableEmptyStateContent,\n  DataTableEmptyStateProps,\n} from \"../types\"\nimport { DataTableSortingIcon } from \"./data-table-sorting-icon\"\nimport { DataTableSortableHeaderCell } from \"./data-table-sortable-header-cell\"\nimport { DataTableNonSortableHeaderCell } from \"./data-table-non-sortable-header-cell\"\n\ninterface DataTableTableProps {\n  /**\n   * The empty state to display when the table is empty.\n   */\n  emptyState?: DataTableEmptyStateProps\n}\n\n/**\n * This component renders the table in a data table, supporting advanced features.\n */\nconst DataTableTable = (props: DataTableTableProps) => {\n  const hoveredRowId = React.useRef<string | null>(null)\n  const isKeyDown = React.useRef(false)\n\n  const [showStickyBorder, setShowStickyBorder] = React.useState(false)\n  const scrollableRef = React.useRef<HTMLDivElement>(null)\n\n  const { instance } = useDataTableContext()\n\n  const pageIndex = instance.pageIndex\n\n  const columns = instance.getAllColumns()\n\n  const hasSelect = columns.find((c) => c.id === \"select\")\n  const hasActions = columns.find((c) => c.id === \"action\")\n\n  // Create list of all column IDs for SortableContext\n  // Use current order if available, otherwise use default order\n  const sortableItems = React.useMemo(() => {\n    if (instance.columnOrder && instance.columnOrder.length > 0) {\n      return instance.columnOrder\n    }\n    return columns.map(col => col.id)\n  }, [columns, instance.columnOrder])\n\n  // Setup drag-and-drop sensors\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 8,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (active.id !== over?.id && over?.id) {\n      const activeId = active.id as string\n      const overId = over.id as string\n\n      // Don't allow dragging fixed columns\n      if (activeId === \"select\" || activeId === \"action\") {\n        return\n      }\n\n      // Don't allow dropping on fixed columns\n      if (overId === \"select\" || overId === \"action\") {\n        return\n      }\n\n      // Use the current column order from the instance\n      const currentOrder = instance.columnOrder && instance.columnOrder.length > 0\n        ? instance.columnOrder\n        : columns.map(col => col.id)\n\n      const oldIndex = currentOrder.indexOf(activeId)\n      const newIndex = currentOrder.indexOf(overId)\n\n      if (oldIndex !== -1 && newIndex !== -1) {\n        const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n        instance.setColumnOrderFromArray(newOrder)\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    const onKeyDownHandler = (event: KeyboardEvent) => {\n      // If an editable element is focused, we don't want to select a row\n      const isEditableElementFocused = getIsEditableElementFocused()\n\n      if (\n        event.key.toLowerCase() === \"x\" &&\n        hoveredRowId &&\n        !isKeyDown.current &&\n        !isEditableElementFocused\n      ) {\n        isKeyDown.current = true\n\n        const row = instance\n          .getRowModel()\n          .rows.find((r) => r.id === hoveredRowId.current)\n\n        if (row && row.getCanSelect()) {\n          row.toggleSelected()\n        }\n      }\n    }\n\n    const onKeyUpHandler = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === \"x\") {\n        isKeyDown.current = false\n      }\n    }\n\n    document.addEventListener(\"keydown\", onKeyDownHandler)\n    document.addEventListener(\"keyup\", onKeyUpHandler)\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDownHandler)\n      document.removeEventListener(\"keyup\", onKeyUpHandler)\n    }\n  }, [hoveredRowId, instance])\n\n  const handleHorizontalScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const scrollLeft = e.currentTarget.scrollLeft\n\n    if (scrollLeft > 0) {\n      setShowStickyBorder(true)\n    } else {\n      setShowStickyBorder(false)\n    }\n  }\n\n  React.useEffect(() => {\n    scrollableRef.current?.scroll({ top: 0, left: 0 })\n  }, [pageIndex])\n\n  if (instance.showSkeleton) {\n    return <DataTableTableSkeleton pageSize={instance.pageSize} />\n  }\n\n  return (\n    <div className=\"flex w-full flex-1 flex-col overflow-hidden\">\n      {instance.emptyState === DataTableEmptyState.POPULATED && (\n        instance.enableColumnOrder ? (\n          <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragEnd={handleDragEnd}\n          >\n            <div\n              ref={scrollableRef}\n              onScroll={handleHorizontalScroll}\n              className=\"min-h-0 w-full flex-1 overflow-auto overscroll-none border-y\"\n            >\n              <Table className=\"relative isolate w-full\">\n                <Table.Header\n                  className=\"shadow-ui-border-base sticky inset-x-0 top-0 z-[1] w-full border-b-0 border-t-0 shadow-[0_1px_1px_0]\"\n                  style={{ transform: \"translate3d(0,0,0)\" }}\n                >\n                  {instance.getHeaderGroups().map((headerGroup) => (\n                    <Table.Row\n                      key={headerGroup.id}\n                      className={clx(\"border-b-0\", {\n                        \"[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap\":\n                          hasActions,\n                        \"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap\":\n                          hasSelect,\n                      })}\n                    >\n                      <SortableContext\n                        items={sortableItems}\n                        strategy={horizontalListSortingStrategy}\n                      >\n                        {headerGroup.headers.map((header, idx) => {\n                          const canSort = header.column.getCanSort()\n                          const sortDirection = header.column.getIsSorted()\n                          const sortHandler = header.column.getToggleSortingHandler()\n\n                          const isActionHeader = header.id === \"action\"\n                          const isSelectHeader = header.id === \"select\"\n                          const isSpecialHeader = isActionHeader || isSelectHeader\n                          const isDraggable = !isSpecialHeader\n\n                          const Wrapper = canSort ? \"button\" : \"div\"\n                          const isFirstColumn = hasSelect ? idx === 1 : idx === 0\n\n                          // Get header alignment from column metadata\n                          const headerAlign = (header.column.columnDef.meta as any)?.___alignMetaData?.headerAlign || 'left'\n                          const isRightAligned = headerAlign === 'right'\n                          const isCenterAligned = headerAlign === 'center'\n\n                          const HeaderCellComponent = isDraggable ? DataTableSortableHeaderCell : DataTableNonSortableHeaderCell\n\n                          return (\n                            <HeaderCellComponent\n                              key={header.id}\n                              id={header.id}\n                              isFirstColumn={isFirstColumn}\n                              className={clx(\"whitespace-nowrap\", {\n                                \"w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]\":\n                                  isSelectHeader,\n                                \"w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]\":\n                                  isActionHeader,\n                                \"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']\":\n                                  isFirstColumn,\n                                \"after:bg-ui-border-base\":\n                                  showStickyBorder && isFirstColumn,\n                                \"bg-ui-bg-subtle sticky\":\n                                  isFirstColumn || isSelectHeader,\n                                \"left-0\":\n                                  isSelectHeader || (isFirstColumn && !hasSelect),\n                                \"left-[calc(20px+24px+24px)]\":\n                                  isFirstColumn && hasSelect,\n                              })}\n                              style={\n                                !isSpecialHeader\n                                  ? {\n                                    width: header.column.columnDef.size,\n                                    maxWidth: header.column.columnDef.maxSize,\n                                    minWidth: header.column.columnDef.minSize,\n                                  }\n                                  : undefined\n                              }\n                            >\n                              <Wrapper\n                                type={canSort ? \"button\" : undefined}\n                                onClick={canSort ? sortHandler : undefined}\n                                onMouseDown={canSort ? (e) => e.stopPropagation() : undefined}\n                                className={clx(\n                                  \"group flex cursor-default items-center gap-2\",\n                                  {\n                                    \"cursor-pointer\": canSort,\n                                    \"w-full\": isRightAligned || isCenterAligned,\n                                    \"w-fit\": !isRightAligned && !isCenterAligned,\n                                    \"justify-end\": isRightAligned,\n                                    \"justify-center\": isCenterAligned,\n                                  }\n                                )}\n                              >\n                                {canSort && isRightAligned && (\n                                  <DataTableSortingIcon direction={sortDirection} />\n                                )}\n                                {flexRender(\n                                  header.column.columnDef.header,\n                                  header.getContext()\n                                )}\n                                {canSort && !isRightAligned && (\n                                  <DataTableSortingIcon direction={sortDirection} />\n                                )}\n                              </Wrapper>\n                            </HeaderCellComponent>\n                          )\n                        })}\n                      </SortableContext>\n                    </Table.Row>\n                  ))}\n                </Table.Header>\n                <Table.Body className=\"border-b-0 border-t-0\">\n                  {instance.getRowModel().rows.map((row) => {\n                    return (\n                      <Table.Row\n                        key={row.id}\n                        onMouseEnter={() => (hoveredRowId.current = row.id)}\n                        onMouseLeave={() => (hoveredRowId.current = null)}\n                        onClick={(e) => instance.onRowClick?.(e, row)}\n                        className={clx(\"group/row last-of-type:border-b-0\", {\n                          \"cursor-pointer\": !!instance.onRowClick,\n                        })}\n                      >\n                        {row.getVisibleCells().map((cell, idx) => {\n                          const isSelectCell = cell.column.id === \"select\"\n                          const isActionCell = cell.column.id === \"action\"\n                          const isSpecialCell = isSelectCell || isActionCell\n\n                          const isFirstColumn = hasSelect ? idx === 1 : idx === 0\n\n                          return (\n                            <Table.Cell\n                              key={cell.id}\n                              className={clx(\n                                \"items-stretch truncate whitespace-nowrap\",\n                                {\n                                  \"w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]\":\n                                    isSelectCell,\n                                  \"w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]\":\n                                    isActionCell,\n                                  \"bg-ui-bg-base group-hover/row:bg-ui-bg-base-hover transition-fg sticky h-full\":\n                                    isFirstColumn || isSelectCell,\n                                  \"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']\":\n                                    isFirstColumn,\n                                  \"after:bg-ui-border-base\":\n                                    showStickyBorder && isFirstColumn,\n                                  \"left-0\":\n                                    isSelectCell || (isFirstColumn && !hasSelect),\n                                  \"left-[calc(20px+24px+24px)]\":\n                                    isFirstColumn && hasSelect,\n                                }\n                              )}\n                              style={\n                                !isSpecialCell\n                                  ? {\n                                    width: cell.column.columnDef.size,\n                                    maxWidth: cell.column.columnDef.maxSize,\n                                    minWidth: cell.column.columnDef.minSize,\n                                  }\n                                  : undefined\n                              }\n                            >\n                              {flexRender(\n                                cell.column.columnDef.cell,\n                                cell.getContext()\n                              )}\n                            </Table.Cell>\n                          )\n                        })}\n                      </Table.Row>\n                    )\n                  })}\n                </Table.Body>\n              </Table>\n            </div>\n          </DndContext>\n        ) : (\n          <div\n            ref={scrollableRef}\n            onScroll={handleHorizontalScroll}\n            className=\"min-h-0 w-full flex-1 overflow-auto overscroll-none border-y\"\n          >\n            <Table className=\"relative isolate w-full\">\n              <Table.Header\n                className=\"shadow-ui-border-base sticky inset-x-0 top-0 z-[1] w-full border-b-0 border-t-0 shadow-[0_1px_1px_0]\"\n                style={{ transform: \"translate3d(0,0,0)\" }}\n              >\n                {instance.getHeaderGroups().map((headerGroup) => (\n                  <Table.Row\n                    key={headerGroup.id}\n                    className={clx(\"border-b-0\", {\n                      \"[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap\":\n                        hasActions,\n                      \"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap\":\n                        hasSelect,\n                    })}\n                  >\n                    {headerGroup.headers.map((header, idx) => {\n                      const canSort = header.column.getCanSort()\n                      const sortDirection = header.column.getIsSorted()\n                      const sortHandler = header.column.getToggleSortingHandler()\n\n                      const isActionHeader = header.id === \"action\"\n                      const isSelectHeader = header.id === \"select\"\n                      const isSpecialHeader = isActionHeader || isSelectHeader\n\n                      const Wrapper = canSort ? \"button\" : \"div\"\n                      const isFirstColumn = hasSelect ? idx === 1 : idx === 0\n\n                      // Get header alignment from column metadata\n                      const headerAlign = (header.column.columnDef.meta as any)?.___alignMetaData?.headerAlign || 'left'\n                      const isRightAligned = headerAlign === 'right'\n                      const isCenterAligned = headerAlign === 'center'\n\n                      return (\n                        <Table.HeaderCell\n                          key={header.id}\n                          className={clx(\"whitespace-nowrap\", {\n                            \"w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]\":\n                              isSelectHeader,\n                            \"w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]\":\n                              isActionHeader,\n                            \"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']\":\n                              isFirstColumn,\n                            \"after:bg-ui-border-base\":\n                              showStickyBorder && isFirstColumn,\n                            \"bg-ui-bg-subtle sticky\":\n                              isFirstColumn || isSelectHeader,\n                            \"left-0\":\n                              isSelectHeader || (isFirstColumn && !hasSelect),\n                            \"left-[calc(20px+24px+24px)]\":\n                              isFirstColumn && hasSelect,\n                          })}\n                          style={\n                            !isSpecialHeader\n                              ? {\n                                width: header.column.columnDef.size,\n                                maxWidth: header.column.columnDef.maxSize,\n                                minWidth: header.column.columnDef.minSize,\n                              }\n                              : undefined\n                          }\n                        >\n                          <Wrapper\n                            type={canSort ? \"button\" : undefined}\n                            onClick={canSort ? sortHandler : undefined}\n                            onMouseDown={canSort ? (e) => e.stopPropagation() : undefined}\n                            className={clx(\n                              \"group flex cursor-default items-center gap-2\",\n                              {\n                                \"cursor-pointer\": canSort,\n                                \"w-full\": isRightAligned || isCenterAligned,\n                                \"w-fit\": !isRightAligned && !isCenterAligned,\n                                \"justify-end\": isRightAligned,\n                                \"justify-center\": isCenterAligned,\n                              }\n                            )}\n                          >\n                            {canSort && isRightAligned && (\n                              <DataTableSortingIcon direction={sortDirection} />\n                            )}\n                            {flexRender(\n                              header.column.columnDef.header,\n                              header.getContext()\n                            )}\n                            {canSort && !isRightAligned && (\n                              <DataTableSortingIcon direction={sortDirection} />\n                            )}\n                          </Wrapper>\n                        </Table.HeaderCell>\n                      )\n                    })}\n                  </Table.Row>\n                ))}\n              </Table.Header>\n              <Table.Body className=\"border-b-0 border-t-0\">\n                {instance.getRowModel().rows.map((row) => {\n                  return (\n                    <Table.Row\n                      key={row.id}\n                      onMouseEnter={() => (hoveredRowId.current = row.id)}\n                      onMouseLeave={() => (hoveredRowId.current = null)}\n                      onClick={(e) => instance.onRowClick?.(e, row)}\n                      className={clx(\"group/row last-of-type:border-b-0\", {\n                        \"cursor-pointer\": !!instance.onRowClick,\n                      })}\n                    >\n                      {row.getVisibleCells().map((cell, idx) => {\n                        const isSelectCell = cell.column.id === \"select\"\n                        const isActionCell = cell.column.id === \"action\"\n                        const isSpecialCell = isSelectCell || isActionCell\n\n                        const isFirstColumn = hasSelect ? idx === 1 : idx === 0\n\n                        return (\n                          <Table.Cell\n                            key={cell.id}\n                            className={clx(\n                              \"items-stretch truncate whitespace-nowrap\",\n                              {\n                                \"w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]\":\n                                  isSelectCell,\n                                \"w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]\":\n                                  isActionCell,\n                                \"bg-ui-bg-base group-hover/row:bg-ui-bg-base-hover transition-fg sticky h-full\":\n                                  isFirstColumn || isSelectCell,\n                                \"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']\":\n                                  isFirstColumn,\n                                \"after:bg-ui-border-base\":\n                                  showStickyBorder && isFirstColumn,\n                                \"left-0\":\n                                  isSelectCell || (isFirstColumn && !hasSelect),\n                                \"left-[calc(20px+24px+24px)]\":\n                                  isFirstColumn && hasSelect,\n                              }\n                            )}\n                            style={\n                              !isSpecialCell\n                                ? {\n                                  width: cell.column.columnDef.size,\n                                  maxWidth: cell.column.columnDef.maxSize,\n                                  minWidth: cell.column.columnDef.minSize,\n                                }\n                                : undefined\n                            }\n                          >\n                            {flexRender(\n                              cell.column.columnDef.cell,\n                              cell.getContext()\n                            )}\n                          </Table.Cell>\n                        )\n                      })}\n                    </Table.Row>\n                  )\n                })}\n              </Table.Body>\n            </Table>\n          </div>\n        )\n      )}\n      <DataTableEmptyStateDisplay\n        state={instance.emptyState}\n        props={props.emptyState}\n      />\n    </div>\n  )\n}\nDataTableTable.displayName = \"DataTable.Table\"\n\ninterface DataTableEmptyStateDisplayProps {\n  state: DataTableEmptyState\n  props?: DataTableEmptyStateProps\n}\n\nconst DefaultEmptyStateContent = ({\n  heading,\n  description,\n}: DataTableEmptyStateContent) => (\n  <div className=\"flex size-full flex-col items-center justify-center gap-2\">\n    <Text size=\"base\" weight=\"plus\">\n      {heading}\n    </Text>\n    <Text>{description}</Text>\n  </div>\n)\n\nconst DataTableEmptyStateDisplay = ({\n  state,\n  props,\n}: DataTableEmptyStateDisplayProps) => {\n  if (state === DataTableEmptyState.POPULATED) {\n    return null\n  }\n\n  const content =\n    state === DataTableEmptyState.EMPTY ? props?.empty : props?.filtered\n\n  return (\n    <div className=\"flex min-h-[250px] w-full flex-1 flex-col items-center justify-center border-y px-6 py-4\">\n      {content?.custom ?? (\n        <DefaultEmptyStateContent\n          heading={content?.heading}\n          description={content?.description}\n        />\n      )}\n    </div>\n  )\n}\n\ninterface DataTableTableSkeletonProps {\n  pageSize?: number\n}\n\nconst DataTableTableSkeleton = ({\n  pageSize = 10,\n}: DataTableTableSkeletonProps) => {\n  return (\n    <div className=\"flex w-full flex-1 flex-col overflow-hidden\">\n      <div className=\"min-h-0 w-full flex-1 overscroll-none border-y\">\n        <div className=\"flex flex-col divide-y\">\n          <Skeleton className=\"h-12 w-full\" />\n          {Array.from({ length: pageSize }, (_, i) => i).map((row) => (\n            <Skeleton key={row} className=\"h-12 w-full rounded-none\" />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction getIsEditableElementFocused() {\n  const activeElement = !!document ? document.activeElement : null\n  const isEditableElementFocused =\n    activeElement instanceof HTMLInputElement ||\n    activeElement instanceof HTMLTextAreaElement ||\n    activeElement?.getAttribute(\"contenteditable\") === \"true\"\n\n  return isEditableElementFocused\n}\n\nexport { DataTableTable }\nexport type { DataTableEmptyStateProps, DataTableTableProps }\n"]}

package/dist/cjs/blocks/data-table/components/data-table-toolbar.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+interface DataTableToolbarTranslations {
+    /**
+     * The label for the clear all filters button
+     * @default "Clear all"
+     */
+    clearAll?: string;
+    /**
+     * The tooltip for the sorting menu
+     */
+    sort?: string;
+    /**
+     * The tooltip for the columns menu
+     */
+    columns?: string;
+}
+interface DataTableToolbarProps {
+    /**
+     * Additional classes to pass to the wrapper `div` of the component.
+     */
+    className?: string;
+    /**
+     * The children to show in the toolbar.
+     */
+    children?: React.ReactNode;
+    /**
+     * The translations of strings in the toolbar.
+     */
+    translations?: DataTableToolbarTranslations;
+    /**
+     * Custom content to render in the filter bar
+     */
+    filterBarContent?: React.ReactNode;
+}
+/**
+ * Toolbar shown for the data table.
+ */
+declare const DataTableToolbar: (props: DataTableToolbarProps) => React.JSX.Element;
+export { DataTableToolbar };
+export type { DataTableToolbarProps, DataTableToolbarTranslations };
+//# sourceMappingURL=data-table-toolbar.d.ts.map

package/dist/cjs/blocks/data-table/components/data-table-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,4BAA4B;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,qBAAqB;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,4BAA4B,CAAA;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC;AAED;;GAEG;AACH,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAmBrD,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,qBAAqB,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/cjs/blocks/data-table/components/data-table-toolbar.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableToolbar = void 0;
+const tslib_1 = require("tslib");
+const data_table_filter_bar_1 = require("../../data-table/components/data-table-filter-bar");
+const use_data_table_context_1 = require("../../data-table/context/use-data-table-context");
+const clx_1 = require("../../../utils/clx");
+const React = tslib_1.__importStar(require("react"));
+/**
+ * Toolbar shown for the data table.
+ */
+const DataTableToolbar = (props) => {
+    var _a, _b, _c;
+    const { instance } = (0, use_data_table_context_1.useDataTableContext)();
+    const hasFilters = instance.getFilters().length > 0;
+    return (React.createElement("div", { className: "flex flex-col divide-y" },
+        React.createElement("div", { className: (0, clx_1.clx)("flex items-center px-6 py-4", props.className) }, props.children),
+        React.createElement(data_table_filter_bar_1.DataTableFilterBar, { clearAllFiltersLabel: (_a = props.translations) === null || _a === void 0 ? void 0 : _a.clearAll, alwaysShow: hasFilters, sortingTooltip: (_b = props.translations) === null || _b === void 0 ? void 0 : _b.sort, columnsTooltip: (_c = props.translations) === null || _c === void 0 ? void 0 : _c.columns }, props.filterBarContent)));
+};
+exports.DataTableToolbar = DataTableToolbar;
+//# sourceMappingURL=data-table-toolbar.js.map

package/dist/cjs/blocks/data-table/components/data-table-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-toolbar.tsx"],"names":[],"mappings":";;;;AAAA,gGAAyF;AACzF,+FAAwF;AACxF,qCAAiC;AACjC,qDAA8B;AAqC9B;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;;IACxD,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAmB,GAAE,CAAA;IAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,GAAG,CAAC,CAAA;IAEnD,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,6BAAK,SAAS,EAAE,IAAA,SAAG,EAAC,6BAA6B,EAAE,KAAK,CAAC,SAAS,CAAC,IAChE,KAAK,CAAC,QAAQ,CACX;QACN,oBAAC,0CAAkB,IACjB,oBAAoB,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,QAAQ,EAClD,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,IAAI,EACxC,cAAc,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,IAE1C,KAAK,CAAC,gBAAgB,CACJ,CACjB,CACP,CAAA;AACH,CAAC,CAAA;AAEQ,4CAAgB","sourcesContent":["import { DataTableFilterBar } from \"@/blocks/data-table/components/data-table-filter-bar\"\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { clx } from \"@/utils/clx\"\nimport * as React from \"react\"\n\ninterface DataTableToolbarTranslations {\n  /**\n   * The label for the clear all filters button\n   * @default \"Clear all\"\n   */\n  clearAll?: string\n  /**\n   * The tooltip for the sorting menu\n   */\n  sort?: string\n  /**\n   * The tooltip for the columns menu  \n   */\n  columns?: string\n}\n\ninterface DataTableToolbarProps {\n  /**\n   * Additional classes to pass to the wrapper `div` of the component.\n   */\n  className?: string\n  /**\n   * The children to show in the toolbar.\n   */\n  children?: React.ReactNode\n  /**\n   * The translations of strings in the toolbar.\n   */\n  translations?: DataTableToolbarTranslations\n  /**\n   * Custom content to render in the filter bar\n   */\n  filterBarContent?: React.ReactNode\n}\n\n/**\n * Toolbar shown for the data table.\n */\nconst DataTableToolbar = (props: DataTableToolbarProps) => {\n  const { instance } = useDataTableContext()\n  const hasFilters = instance.getFilters().length > 0\n\n  return (\n    <div className=\"flex flex-col divide-y\">\n      <div className={clx(\"flex items-center px-6 py-4\", props.className)}>\n        {props.children}\n      </div>\n      <DataTableFilterBar\n        clearAllFiltersLabel={props.translations?.clearAll}\n        alwaysShow={hasFilters}\n        sortingTooltip={props.translations?.sort}\n        columnsTooltip={props.translations?.columns}\n      >\n        {props.filterBarContent}\n      </DataTableFilterBar>\n    </div>\n  )\n}\n\nexport { DataTableToolbar }\nexport type { DataTableToolbarProps, DataTableToolbarTranslations }\n\n"]}