@klodd/kommers-ds 0.1.0

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 kommers_icons_1 = require("@klodd/kommers-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(kommers_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(kommers_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(kommers_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 \"@klodd/kommers-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;;CAufjD,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,302 @@
+"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-auto 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-auto 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-auto 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 =\n        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-auto 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 =\n                            header.column.getToggleSortingHandler()\n\n                          const isActionHeader = header.id === \"action\"\n                          const isSelectHeader = header.id === \"select\"\n                          const isSpecialHeader =\n                            isActionHeader || isSelectHeader\n                          const isDraggable = !isSpecialHeader\n\n                          const Wrapper = canSort ? \"button\" : \"div\"\n                          const isFirstColumn = hasSelect\n                            ? idx === 1\n                            : idx === 0\n\n                          // Get header alignment from column metadata\n                          const headerAlign =\n                            (header.column.columnDef.meta as any)\n                              ?.___alignMetaData?.headerAlign || \"left\"\n                          const isRightAligned = headerAlign === \"right\"\n                          const isCenterAligned = headerAlign === \"center\"\n\n                          const HeaderCellComponent = isDraggable\n                            ? DataTableSortableHeaderCell\n                            : 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 ||\n                                  (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={\n                                  canSort\n                                    ? (e) => e.stopPropagation()\n                                    : undefined\n                                }\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\":\n                                      !isRightAligned && !isCenterAligned,\n                                    \"justify-end\": isRightAligned,\n                                    \"justify-center\": isCenterAligned,\n                                  }\n                                )}\n                              >\n                                {canSort && isRightAligned && (\n                                  <DataTableSortingIcon\n                                    direction={sortDirection}\n                                  />\n                                )}\n                                {flexRender(\n                                  header.column.columnDef.header,\n                                  header.getContext()\n                                )}\n                                {canSort && !isRightAligned && (\n                                  <DataTableSortingIcon\n                                    direction={sortDirection}\n                                  />\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\n                            ? idx === 1\n                            : 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 ||\n                                    (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-auto 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 =\n                        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 =\n                        (header.column.columnDef.meta as any)?.___alignMetaData\n                          ?.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={\n                              canSort ? (e) => e.stopPropagation() : undefined\n                            }\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      <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-auto 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