@drivenets/design-system 0.0.2 → 0.0.3

package/dist/components/ds-table/ds-table.types.d.ts

@@ -0,0 +1,333 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+import { RowAction, SecondaryRowAction } from "./components/ds-table-cell/ds-table-cell.types.js";
+import "./components/ds-table-cell/index.js";
+import React from "react";
+import { ColumnDef, ColumnFiltersState, SortingState, Table, VisibilityState } from "@tanstack/react-table";
+
+//#region src/components/ds-table/ds-table.types.d.ts
+/**
+ * Row size variants based on Figma design specifications
+ */
+type DsTableRowSize = 'small' | 'medium' | 'large';
+/**
+ * Parameters passed to the onScroll callback in virtualized tables.
+ */
+interface ScrollParams {
+  /** The current vertical scroll position from the top of the scrollable content (in pixels) */
+  scrollOffset: number;
+  /** The total height of all content in the virtualized table (in pixels) */
+  totalContentHeight: number;
+  /** The visible height of the table container (in pixels) */
+  viewportHeight: number;
+}
+/**
+ * API for programmatically controlling a DsTable component.
+ * This interface provides methods to interact with the table's selection, sorting, filtering, and pagination features.
+ *
+ * @template TData - The type of data items in the table
+ *
+ * @example
+ * ```tsx
+ * const tableRef = useRef<DsTableApi<Person>>(null);
+ *
+ * // Select a specific row
+ * tableRef.current?.selectRow('row-1');
+ *
+ * // Select multiple rows
+ * tableRef.current?.selectRows(['row-1', 'row-2', 'row-3']);
+ *
+ * // Get all selected rows
+ * const selected = tableRef.current?.getSelectedRows();
+ * ```
+ */
+interface DsTableApi<TData> {
+  /**
+   * Selects a single row by its ID.
+   *
+   * @param rowId - The unique identifier of the row to select
+   *
+   * @example
+   * ```tsx
+   * tableRef.current?.selectRow('user-123');
+   * ```
+   */
+  selectRow: (rowId: string) => void;
+  /**
+   * Deselects a single row by its ID.
+   *
+   * @param rowId - The unique identifier of the row to deselect
+   *
+   * @example
+   * ```tsx
+   * tableRef.current?.deselectRow('user-123');
+   * ```
+   */
+  deselectRow: (rowId: string) => void;
+  /**
+   * Selects all visible rows in the table.
+   * This includes rows that are currently filtered or paginated.
+   *
+   * @example
+   * ```tsx
+   * tableRef.current?.selectAllRows();
+   * ```
+   */
+  selectAllRows: () => void;
+  /**
+   * Deselects all rows in the table.
+   * Clears the current selection state.
+   *
+   * @example
+   * ```tsx
+   * tableRef.current?.deselectAllRows();
+   * ```
+   */
+  deselectAllRows: () => void;
+  /**
+   * Selects multiple rows by their IDs.
+   *
+   * @param rowIds - Array of unique identifiers for the rows to select
+   *
+   * @example
+   * ```tsx
+   * tableRef.current?.selectRows(['user-1', 'user-2', 'user-3']);
+   * ```
+   */
+  selectRows: (rowIds: string[]) => void;
+  /**
+   * Returns an array of all currently selected row data.
+   *
+   * @returns Array of selected row data objects
+   *
+   * @example
+   * ```tsx
+   * const selectedUsers = tableRef.current?.getSelectedRows();
+   * console.log('Selected users:', selectedUsers);
+   * ```
+   */
+  getSelectedRows: () => TData[];
+}
+/**
+ * Represents a bulk action that can be performed on multiple selected rows
+ */
+interface Action<TData> {
+  /**
+   * Icon to be displayed for the action
+   */
+  icon: IconType;
+  /**
+   * Label text for the action
+   */
+  label: string;
+  /**
+   * Function to be called when the action is clicked, receives the selected rows as parameter
+   */
+  onClick: (rows: TData[]) => void;
+}
+interface DsDataTableProps<TData, TValue> {
+  /**
+   * Ref to the table API
+   */
+  ref?: React.RefObject<DsTableApi<TData> | null>;
+  /**
+   * Columns of the table
+   */
+  columns: ColumnDef<TData, TValue>[];
+  /**
+   * Data of the table
+   */
+  data: TData[];
+  /**
+   * Whether the table is virtualized
+   * @default false
+   */
+  virtualized?: boolean;
+  /**
+   * Options for the virtualized table
+   */
+  virtualizedOptions?: {
+    /**
+     * Estimate size of the table
+     */
+    estimateSize?: number;
+    /**
+     * Overscan of the table
+     */
+    overscan?: number;
+  };
+  /**
+   * Class name of the table
+   */
+  className?: string;
+  /**
+   * Function to handle row click
+   */
+  onRowClick?: (row: TData) => void;
+  /**
+   * Function to handle row double click
+   */
+  onRowDoubleClick?: (row: TData) => void;
+  /**
+   * ID of the currently active row (useful for showing drawer/panel associations)
+   * When set, the row with this ID will be visually highlighted with a persistent active state
+   * @example
+   * ```tsx
+   * const [activeRowId, setActiveRowId] = useState<string | null>(null);
+   * const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+   *
+   * <DsTable
+   *   activeRowId={isDrawerOpen ? activeRowId : null}
+   *   onRowClick={(row) => {
+   *     setActiveRowId(row.id);
+   *     setIsDrawerOpen(true);
+   *   }}
+   * />
+   * ```
+   */
+  activeRowId?: string | null;
+  /**
+   * Empty state of the table
+   */
+  emptyState?: React.ReactNode;
+  /**
+   * Whether the table has sticky header
+   */
+  stickyHeader?: boolean;
+  /**
+   * Whether the table has zebra stripes
+   */
+  zebra?: boolean;
+  /**
+   * Whether the table has bordered cells
+   */
+  bordered?: boolean;
+  /**
+   * Whether the table is full width
+   */
+  fullWidth?: boolean;
+  /**
+   * Whether the table has highlight on hover
+   */
+  highlightOnHover?: boolean;
+  /**
+   * Row size variant (small: 36px, medium: 48px, large: 64px)
+   * @default 'medium'
+   */
+  rowSize?: DsTableRowSize;
+  /**
+   * Whether the table is expandable or if an individual row should be expandable
+   */
+  expandable?: boolean | ((row: TData) => boolean);
+  /**
+   * Function to render the expanded row
+   */
+  renderExpandedRow?: (row: TData) => React.ReactNode;
+  /**
+   * Function to handle table creation
+   */
+  onTableCreated?: (table: Table<TData>) => void;
+  /**
+   * Whether the table rows are selectable. Can be a boolean or a function that receives row data and returns whether it can be selected.
+   * @default false
+   * @example
+   * ```tsx
+   * // Enable selection for all rows
+   * selectable={true}
+   *
+   * // Disable selection for rows where status is 'archived'
+   * selectable={(rowData) => rowData.status !== 'archived'}
+   *
+   * // Limit selection to max 3 rows (note: use state to track current selection)
+   * selectable={(rowData) => {
+   *   // This will be called for each row during render
+   *   const selectedIds = Object.keys(rowSelection).filter(id => rowSelection[id]);
+   *   return selectedIds.includes(rowData.id) || selectedIds.length < 3;
+   * }}
+   * ```
+   */
+  selectable?: boolean | ((rowData: TData) => boolean);
+  /**
+   * Whether to show the select/deselect all checkbox in the header
+   * @default true
+   */
+  showSelectAllCheckbox?: boolean;
+  /**
+   * Function to handle selection change
+   */
+  onSelectionChange?: (selectedRows: Record<string, boolean>) => void;
+  /**
+   * Function to handle sorting change
+   */
+  onSortingChange?: (sorting: SortingState) => void;
+  /**
+   * Function to handle scroll events in virtualized tables.
+   * Called when the user scrolls within the table container.
+   *
+   * @param params - Scroll parameters containing scroll position and dimensions
+   *
+   * @example
+   * ```tsx
+   * const handleScroll = ({ scrollOffset, totalContentHeight, viewportHeight }) => {
+   *   const distanceFromBottom = totalContentHeight - scrollOffset - viewportHeight;
+   *   if (distanceFromBottom < 500) {
+   *     // Fetch more data when within 500px of bottom
+   *     fetchNextPage();
+   *   }
+   * };
+   * ```
+   */
+  onScroll?: (params: ScrollParams) => void;
+  /**
+   * Actions to be shown in the bulk actions
+   */
+  actions?: Action<TData>[];
+  /**
+   * Primary actions to be shown on each row (on hover)
+   */
+  primaryRowActions?: RowAction<TData>[];
+  /**
+   * Secondary actions to be shown in a dropdown on each row (on hover)
+   */
+  secondaryRowActions?: SecondaryRowAction<TData>[];
+  /**
+   * Whether the table rows are reorderable via drag & drop
+   * @note This feature does not work when virtualization is enabled
+   */
+  reorderable?: boolean;
+  /**
+   * Callback when the order of rows changes via drag & drop
+   */
+  onOrderChange?: (newData: TData[]) => void;
+  /**
+   * External column filters state
+   */
+  columnFilters?: ColumnFiltersState;
+  /**
+   * Callback when column filters change
+   */
+  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+  /**
+   * External column visibility state
+   * @example
+   * ```tsx
+   * const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+   *   age: false, // hide age column
+   *   status: true, // show status column
+   * });
+   *
+   * <DsTable
+   *   columnVisibility={columnVisibility}
+   *   onColumnVisibilityChange={setColumnVisibility}
+   * />
+   * ```
+   */
+  columnVisibility?: VisibilityState;
+  /**
+   * Callback when column visibility changes
+   */
+  onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+}
+//#endregion
+export { Action, DsDataTableProps, DsTableApi, DsTableRowSize, ScrollParams };
+//# sourceMappingURL=ds-table.types.d.ts.map

package/dist/components/ds-table/ds-table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-table.types.d.ts","names":[],"sources":["../../../src/components/ds-table/ds-table.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAcY,cAAA;AAAZ;AAKA;AA6BA;AA4EiB,UAzGA,YAAA,CAyGM;EAiBN;EAIiB,YAAA,EAAA,MAAA;EAAX;EAAhB,kBAAM,EAAA,MAAA;EAKO;EAAO,cAAA,EAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;AAiMA,UAvSV,UAuSU,CAAA,KAAA,CAAA,CAAA;EAKV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAtOO;;;;;UAMP;;;;QAIV;;;;;;;;kBAUU;;UAGA;;;;QAIV,KAAA,CAAM,UAAU,WAAW;;;;WAKxB,UAAU,OAAO;;;;QAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+Ba;;;;2BAKM;;;;;;;;;;;;;;;;;;;;;;eAwBZ,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;YA+BT;;;;gCAKoB;;;;4BAKJ,UAAU,KAAA,CAAM;;;;2BAKjB,MAAM;;;;;;;;;;;;;;;;;;;;oCAqBG;;;;;;;;;qCAWC;;;;8BAKP;;;;;;;;;;;;;;;;;;sBAmBR;;;;YAKV,OAAO;;;;sBAKG,UAAU;;;;wBAKR,mBAAmB;;;;;;;;;4BAWf;;;;kBAKV;;;;oCAKkB;;;;;;;;;;;;;;;;qBAiBf;;;;0CAKqB"}

package/dist/components/ds-table/hooks/use-drag-and-drop.cjs

@@ -0,0 +1,54 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __dnd_kit_sortable = require("@dnd-kit/sortable");
+let __dnd_kit_core = require("@dnd-kit/core");
+let __dnd_kit_modifiers = require("@dnd-kit/modifiers");
+
+//#region src/components/ds-table/hooks/use-drag-and-drop.tsx
+const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__dnd_kit_core.DndContext, {
+	collisionDetection: __dnd_kit_core.closestCenter,
+	modifiers: [__dnd_kit_modifiers.restrictToVerticalAxis],
+	onDragEnd,
+	sensors,
+	children
+});
+const SortableWrapper = ({ children, items }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__dnd_kit_sortable.SortableContext, {
+	items,
+	strategy: __dnd_kit_sortable.verticalListSortingStrategy,
+	children
+});
+function useDragAndDrop({ isDragEnabled, onOrderChange, items }) {
+	const dataIds = react.default.useMemo(() => items.map((row) => row.id), [items]);
+	const sensors = (0, __dnd_kit_core.useSensors)((0, __dnd_kit_core.useSensor)(__dnd_kit_core.MouseSensor, {}), (0, __dnd_kit_core.useSensor)(__dnd_kit_core.TouchSensor, {}), (0, __dnd_kit_core.useSensor)(__dnd_kit_core.KeyboardSensor, {}));
+	const handleDragEnd = react.default.useCallback((event) => {
+		const { active, over } = event;
+		if (active.id !== over?.id) {
+			const oldIndex = items.findIndex((row) => row.id === active.id);
+			const newIndex = items.findIndex((row) => row.id === over?.id);
+			if (oldIndex !== -1 && newIndex !== -1) {
+				const newData = (0, __dnd_kit_sortable.arrayMove)(items, oldIndex, newIndex);
+				onOrderChange?.(newData);
+			}
+		}
+	}, [items, onOrderChange]);
+	return {
+		DragWrapper: react.default.useMemo(() => isDragEnabled ? ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, {
+			onDragEnd: handleDragEnd,
+			sensors,
+			children
+		}) : react.default.Fragment, [
+			isDragEnabled,
+			handleDragEnd,
+			sensors
+		]),
+		SortableWrapper: react.default.useMemo(() => isDragEnabled ? ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableWrapper, {
+			items: dataIds,
+			children
+		}) : react.default.Fragment, [isDragEnabled, dataIds])
+	};
+}
+
+//#endregion
+exports.useDragAndDrop = useDragAndDrop;

package/dist/components/ds-table/hooks/use-drag-and-drop.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { SortableContext, arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+
+//#region src/components/ds-table/hooks/use-drag-and-drop.tsx
+const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ jsx(DndContext, {
+	collisionDetection: closestCenter,
+	modifiers: [restrictToVerticalAxis],
+	onDragEnd,
+	sensors,
+	children
+});
+const SortableWrapper = ({ children, items }) => /* @__PURE__ */ jsx(SortableContext, {
+	items,
+	strategy: verticalListSortingStrategy,
+	children
+});
+function useDragAndDrop({ isDragEnabled, onOrderChange, items }) {
+	const dataIds = React.useMemo(() => items.map((row) => row.id), [items]);
+	const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+	const handleDragEnd = React.useCallback((event) => {
+		const { active, over } = event;
+		if (active.id !== over?.id) {
+			const oldIndex = items.findIndex((row) => row.id === active.id);
+			const newIndex = items.findIndex((row) => row.id === over?.id);
+			if (oldIndex !== -1 && newIndex !== -1) {
+				const newData = arrayMove(items, oldIndex, newIndex);
+				onOrderChange?.(newData);
+			}
+		}
+	}, [items, onOrderChange]);
+	return {
+		DragWrapper: React.useMemo(() => isDragEnabled ? ({ children }) => /* @__PURE__ */ jsx(DragWrapper, {
+			onDragEnd: handleDragEnd,
+			sensors,
+			children
+		}) : React.Fragment, [
+			isDragEnabled,
+			handleDragEnd,
+			sensors
+		]),
+		SortableWrapper: React.useMemo(() => isDragEnabled ? ({ children }) => /* @__PURE__ */ jsx(SortableWrapper, {
+			items: dataIds,
+			children
+		}) : React.Fragment, [isDragEnabled, dataIds])
+	};
+}
+
+//#endregion
+export { useDragAndDrop };
+//# sourceMappingURL=use-drag-and-drop.js.map

package/dist/components/ds-table/hooks/use-drag-and-drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag-and-drop.js","names":[],"sources":["../../../../src/components/ds-table/hooks/use-drag-and-drop.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\ttype DragEndEvent,\n\ttype UniqueIdentifier,\n\tclosestCenter,\n\tDndContext,\n\tKeyboardSensor,\n\tMouseSensor,\n\tTouchSensor,\n\tuseSensor,\n\tuseSensors,\n} from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\n\nexport interface UseDragAndDropResult {\n\tDragWrapper: React.ComponentType<React.PropsWithChildren>;\n\tSortableWrapper: React.ComponentType<React.PropsWithChildren>;\n}\n\nexport interface UseDragAndDropOptions<T> {\n\tisDragEnabled: boolean;\n\tonOrderChange?: (newData: T[]) => void;\n\titems: T[];\n}\n\ntype DragWrapperProps = React.PropsWithChildren<{\n\tonDragEnd: (event: DragEndEvent) => void;\n\tsensors: ReturnType<typeof useSensors>;\n}>;\n\nconst DragWrapper = ({ children, onDragEnd, sensors }: DragWrapperProps) => (\n\t<DndContext\n\t\tcollisionDetection={closestCenter}\n\t\tmodifiers={[restrictToVerticalAxis]}\n\t\tonDragEnd={onDragEnd}\n\t\tsensors={sensors}\n\t>\n\t\t{children}\n\t</DndContext>\n);\n\ntype SortableWrapperProps = React.PropsWithChildren<{\n\titems: UniqueIdentifier[];\n}>;\n\nconst SortableWrapper = ({ children, items }: SortableWrapperProps) => (\n\t<SortableContext items={items} strategy={verticalListSortingStrategy}>\n\t\t{children}\n\t</SortableContext>\n);\n\nexport function useDragAndDrop<T extends { id: string }>({\n\tisDragEnabled,\n\tonOrderChange,\n\titems,\n}: UseDragAndDropOptions<T>): UseDragAndDropResult {\n\tconst dataIds = React.useMemo(() => items.map((row) => row.id), [items]);\n\n\tconst sensors = useSensors(\n\t\tuseSensor(MouseSensor, {}),\n\t\tuseSensor(TouchSensor, {}),\n\t\tuseSensor(KeyboardSensor, {}),\n\t);\n\n\tconst handleDragEnd = React.useCallback(\n\t\t(event: DragEndEvent) => {\n\t\t\tconst { active, over } = event;\n\t\t\tif (active.id !== over?.id) {\n\t\t\t\tconst oldIndex = items.findIndex((row) => row.id === active.id);\n\t\t\t\tconst newIndex = items.findIndex((row) => row.id === over?.id);\n\t\t\t\tif (oldIndex !== -1 && newIndex !== -1) {\n\t\t\t\t\tconst newData = arrayMove(items, oldIndex, newIndex);\n\t\t\t\t\tonOrderChange?.(newData);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[items, onOrderChange],\n\t);\n\n\tconst DragWrapperComponent = React.useMemo(\n\t\t() =>\n\t\t\tisDragEnabled\n\t\t\t\t? ({ children }: React.PropsWithChildren) => (\n\t\t\t\t\t\t<DragWrapper onDragEnd={handleDragEnd} sensors={sensors}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</DragWrapper>\n\t\t\t\t\t)\n\t\t\t\t: React.Fragment,\n\t\t[isDragEnabled, handleDragEnd, sensors],\n\t);\n\n\tconst SortableWrapperComponent = React.useMemo(\n\t\t() =>\n\t\t\tisDragEnabled\n\t\t\t\t? ({ children }: React.PropsWithChildren) => (\n\t\t\t\t\t\t<SortableWrapper items={dataIds}>{children}</SortableWrapper>\n\t\t\t\t\t)\n\t\t\t\t: React.Fragment,\n\t\t[isDragEnabled, dataIds],\n\t);\n\n\treturn {\n\t\tDragWrapper: DragWrapperComponent,\n\t\tSortableWrapper: SortableWrapperComponent,\n\t};\n}\n"],"mappings":";;;;;;;AA+BA,MAAM,eAAe,EAAE,UAAU,WAAW,cAC3C,oBAAC;CACA,oBAAoB;CACpB,WAAW,CAAC,uBAAuB;CACxB;CACF;CAER;EACW;AAOd,MAAM,mBAAmB,EAAE,UAAU,YACpC,oBAAC;CAAuB;CAAO,UAAU;CACvC;EACgB;AAGnB,SAAgB,eAAyC,EACxD,eACA,eACA,SACkD;CAClD,MAAM,UAAU,MAAM,cAAc,MAAM,KAAK,QAAQ,IAAI,GAAG,EAAE,CAAC,MAAM,CAAC;CAExE,MAAM,UAAU,WACf,UAAU,aAAa,EAAE,CAAC,EAC1B,UAAU,aAAa,EAAE,CAAC,EAC1B,UAAU,gBAAgB,EAAE,CAAC,CAC7B;CAED,MAAM,gBAAgB,MAAM,aAC1B,UAAwB;EACxB,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,OAAO,OAAO,MAAM,IAAI;GAC3B,MAAM,WAAW,MAAM,WAAW,QAAQ,IAAI,OAAO,OAAO,GAAG;GAC/D,MAAM,WAAW,MAAM,WAAW,QAAQ,IAAI,OAAO,MAAM,GAAG;AAC9D,OAAI,aAAa,MAAM,aAAa,IAAI;IACvC,MAAM,UAAU,UAAU,OAAO,UAAU,SAAS;AACpD,oBAAgB,QAAQ;;;IAI3B,CAAC,OAAO,cAAc,CACtB;AAwBD,QAAO;EACN,aAvB4B,MAAM,cAEjC,iBACI,EAAE,eACH,oBAAC;GAAY,WAAW;GAAwB;GAC9C;IACY,GAEd,MAAM,UACV;GAAC;GAAe;GAAe;GAAQ,CACvC;EAcA,iBAZgC,MAAM,cAErC,iBACI,EAAE,eACH,oBAAC;GAAgB,OAAO;GAAU;IAA2B,GAE7D,MAAM,UACV,CAAC,eAAe,QAAQ,CACxB;EAKA"}

package/dist/components/ds-table/index.cjs

@@ -0,0 +1 @@
+const require_ds_table = require('./ds-table.cjs');

package/dist/components/ds-table/index.d.ts

@@ -0,0 +1,4 @@
+import { RowAction, SecondaryRowAction } from "./components/ds-table-cell/ds-table-cell.types.js";
+import "./components/ds-table-cell/index.js";
+import { Action, DsDataTableProps, DsTableApi, DsTableRowSize, ScrollParams } from "./ds-table.types.js";
+import { DsTable } from "./ds-table.js";

package/dist/components/ds-table/index.js

@@ -0,0 +1 @@
+import ds_table_default from "./ds-table.js";

package/dist/components/ds-table/styles/shared/ds-table-shared.module.cjs

@@ -0,0 +1,17 @@
+
+//#region src/components/ds-table/styles/shared/ds-table-shared.module.scss
+var ds_table_shared_module_default = {
+	"rotate": "_rotate_1vhho_1",
+	"pageButtonIcon": "_pageButtonIcon_1vhho_1",
+	"rotate-45": "_rotate-45_1vhho_1",
+	"rotate-90": "_rotate-90_1vhho_1",
+	"rotate-135": "_rotate-135_1vhho_1",
+	"rotate-180": "_rotate-180_1vhho_1",
+	"rotate-225": "_rotate-225_1vhho_1",
+	"rotate-270": "_rotate-270_1vhho_1",
+	"rotate-315": "_rotate-315_1vhho_1",
+	"checkboxContainer": "_checkboxContainer_1vhho_1"
+};
+
+//#endregion
+exports.default = ds_table_shared_module_default;

package/dist/components/ds-table/styles/shared/ds-table-shared.module.js

@@ -0,0 +1,17 @@
+//#region src/components/ds-table/styles/shared/ds-table-shared.module.scss
+var ds_table_shared_module_default = {
+	"rotate": "_rotate_1vhho_1",
+	"pageButtonIcon": "_pageButtonIcon_1vhho_1",
+	"rotate-45": "_rotate-45_1vhho_1",
+	"rotate-90": "_rotate-90_1vhho_1",
+	"rotate-135": "_rotate-135_1vhho_1",
+	"rotate-180": "_rotate-180_1vhho_1",
+	"rotate-225": "_rotate-225_1vhho_1",
+	"rotate-270": "_rotate-270_1vhho_1",
+	"rotate-315": "_rotate-315_1vhho_1",
+	"checkboxContainer": "_checkboxContainer_1vhho_1"
+};
+
+//#endregion
+export { ds_table_shared_module_default as default };
+//# sourceMappingURL=ds-table-shared.module.js.map

package/dist/components/ds-table/styles/shared/ds-table-shared.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-table-shared.module.js","names":[],"sources":["../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_utilities.scss","../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-table/styles/shared/ds-table-shared.module.scss","../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-table/styles/_variables.scss"],"sourcesContent":["@use '../../../../styles/utilities' as utils;\n@use '../variables' as vars;\n\n.checkboxContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: fit-content;\n\tmargin: auto;\n\theight: 100%;\n}\n\n.pageButtonIcon {\n\tcolor: vars.$expand-toggle-icon-color;\n\t@extend .rotate;\n}\n"],"mappings":""}

package/dist/components/ds-table/utils/column-styling.cjs

@@ -0,0 +1,23 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let __tanstack_react_table = require("@tanstack/react-table");
+
+//#region src/components/ds-table/utils/column-styling.ts
+/**
+* Generates the appropriate style object for a table column/cell based on its size and virtualization state
+*
+* @param columnSize - The size of the column
+* @param virtualized - Whether the table is virtualized
+* @param isLastColumn - Whether this is the last column in the row
+* @returns Style object or undefined if no custom styling is needed
+*/
+const getColumnStyle = (columnSize, virtualized, isLastColumn = false) => {
+	if (!(columnSize !== __tanstack_react_table.defaultColumnSizing.size)) return;
+	if (virtualized) return {
+		flexBasis: `${String(columnSize)}px`,
+		flexGrow: isLastColumn ? 1 : 0
+	};
+	return { width: columnSize };
+};
+
+//#endregion
+exports.getColumnStyle = getColumnStyle;

package/dist/components/ds-table/utils/column-styling.js

@@ -0,0 +1,23 @@
+import { defaultColumnSizing } from "@tanstack/react-table";
+
+//#region src/components/ds-table/utils/column-styling.ts
+/**
+* Generates the appropriate style object for a table column/cell based on its size and virtualization state
+*
+* @param columnSize - The size of the column
+* @param virtualized - Whether the table is virtualized
+* @param isLastColumn - Whether this is the last column in the row
+* @returns Style object or undefined if no custom styling is needed
+*/
+const getColumnStyle = (columnSize, virtualized, isLastColumn = false) => {
+	if (!(columnSize !== defaultColumnSizing.size)) return;
+	if (virtualized) return {
+		flexBasis: `${String(columnSize)}px`,
+		flexGrow: isLastColumn ? 1 : 0
+	};
+	return { width: columnSize };
+};
+
+//#endregion
+export { getColumnStyle };
+//# sourceMappingURL=column-styling.js.map

package/dist/components/ds-table/utils/column-styling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-styling.js","names":[],"sources":["../../../../src/components/ds-table/utils/column-styling.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { defaultColumnSizing } from '@tanstack/react-table';\n\n/**\n * Generates the appropriate style object for a table column/cell based on its size and virtualization state\n *\n * @param columnSize - The size of the column\n * @param virtualized - Whether the table is virtualized\n * @param isLastColumn - Whether this is the last column in the row\n * @returns Style object or undefined if no custom styling is needed\n */\nexport const getColumnStyle = (\n\tcolumnSize: number,\n\tvirtualized?: boolean,\n\tisLastColumn: boolean = false,\n): CSSProperties | undefined => {\n\tconst hasCustomSize = columnSize !== defaultColumnSizing.size;\n\tif (!hasCustomSize) {\n\t\treturn undefined;\n\t}\n\n\tif (virtualized) {\n\t\treturn {\n\t\t\tflexBasis: `${String(columnSize)}px`,\n\t\t\tflexGrow: isLastColumn ? 1 : 0,\n\t\t};\n\t}\n\n\treturn { width: columnSize };\n};\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,kBACZ,YACA,aACA,eAAwB,UACO;AAE/B,KAAI,EADkB,eAAe,oBAAoB,MAExD;AAGD,KAAI,YACH,QAAO;EACN,WAAW,GAAG,OAAO,WAAW,CAAC;EACjC,UAAU,eAAe,IAAI;EAC7B;AAGF,QAAO,EAAE,OAAO,YAAY"}

package/dist/components/ds-table/utils/create-columns-grid-template.cjs

@@ -0,0 +1,11 @@
+
+//#region src/components/ds-table/utils/create-columns-grid-template.ts
+function createColumnsGridTemplate({ columns, selectable }) {
+	return columns.reduce((acc, col) => {
+		acc.push(col.size ? `${String(col.size)}px` : "auto");
+		return acc;
+	}, selectable ? ["max-content"] : []).join(" ");
+}
+
+//#endregion
+exports.createColumnsGridTemplate = createColumnsGridTemplate;

package/dist/components/ds-table/utils/create-columns-grid-template.js

@@ -0,0 +1,11 @@
+//#region src/components/ds-table/utils/create-columns-grid-template.ts
+function createColumnsGridTemplate({ columns, selectable }) {
+	return columns.reduce((acc, col) => {
+		acc.push(col.size ? `${String(col.size)}px` : "auto");
+		return acc;
+	}, selectable ? ["max-content"] : []).join(" ");
+}
+
+//#endregion
+export { createColumnsGridTemplate };
+//# sourceMappingURL=create-columns-grid-template.js.map

package/dist/components/ds-table/utils/create-columns-grid-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-columns-grid-template.js","names":[],"sources":["../../../../src/components/ds-table/utils/create-columns-grid-template.ts"],"sourcesContent":["import type { ColumnDef } from '@tanstack/react-table';\n\ntype Args = {\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcolumns: ColumnDef<any, any>[];\n\tselectable?: boolean;\n};\n\n// In virtualized tables, the rows should all be positioned at the top with a `translateY` offset.\n// We're using a Grid for this rather than `position: absolute` to ensure that each cell aligns with\n// other cells in the same column (mimicking the native table behavior).\nexport function createColumnsGridTemplate({ columns, selectable }: Args): string {\n\treturn columns\n\t\t.reduce<string[]>(\n\t\t\t(acc, col) => {\n\t\t\t\tacc.push(col.size ? `${String(col.size)}px` : 'auto');\n\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\tselectable ? ['max-content'] : [],\n\t\t)\n\t\t.join(' ');\n}\n"],"mappings":";AAWA,SAAgB,0BAA0B,EAAE,SAAS,cAA4B;AAChF,QAAO,QACL,QACC,KAAK,QAAQ;AACb,MAAI,KAAK,IAAI,OAAO,GAAG,OAAO,IAAI,KAAK,CAAC,MAAM,OAAO;AAErD,SAAO;IAER,aAAa,CAAC,cAAc,GAAG,EAAE,CACjC,CACA,KAAK,IAAI"}

package/dist/components/ds-table/utils/merge-refs.cjs

@@ -0,0 +1,13 @@
+
+//#region src/components/ds-table/utils/merge-refs.ts
+const mergeRefs = (...refs) => {
+	return (value) => {
+		refs.filter((r) => !!r).forEach((ref) => {
+			if (typeof ref === "function") ref(value);
+			else ref.current = value;
+		});
+	};
+};
+
+//#endregion
+exports.mergeRefs = mergeRefs;

package/dist/components/ds-table/utils/merge-refs.js

@@ -0,0 +1,13 @@
+//#region src/components/ds-table/utils/merge-refs.ts
+const mergeRefs = (...refs) => {
+	return (value) => {
+		refs.filter((r) => !!r).forEach((ref) => {
+			if (typeof ref === "function") ref(value);
+			else ref.current = value;
+		});
+	};
+};
+
+//#endregion
+export { mergeRefs };
+//# sourceMappingURL=merge-refs.js.map

package/dist/components/ds-table/utils/merge-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-refs.js","names":[],"sources":["../../../../src/components/ds-table/utils/merge-refs.ts"],"sourcesContent":["import type { Ref, RefCallback } from 'react';\n\nexport const mergeRefs = <T>(...refs: Array<Ref<T> | undefined>): RefCallback<T> => {\n\treturn (value) => {\n\t\trefs\n\t\t\t.filter((r) => !!r)\n\t\t\t.forEach((ref) => {\n\t\t\t\tif (typeof ref === 'function') {\n\t\t\t\t\tref(value);\n\t\t\t\t} else {\n\t\t\t\t\tref.current = value;\n\t\t\t\t}\n\t\t\t});\n\t};\n};\n"],"mappings":";AAEA,MAAa,aAAgB,GAAG,SAAoD;AACnF,SAAQ,UAAU;AACjB,OACE,QAAQ,MAAM,CAAC,CAAC,EAAE,CAClB,SAAS,QAAQ;AACjB,OAAI,OAAO,QAAQ,WAClB,KAAI,MAAM;OAEV,KAAI,UAAU;IAEd"}