@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.1

package/components/table/render/header/resolveHeaderCellStyle.js

@@ -0,0 +1,9 @@
+const t = (r, a, e) => ({
+  gridColumn: `${r.columnStart + (a ? 1 : 0)} / span ${r.colSpan}`,
+  gridRow: `${r.rowStart} / span ${r.rowSpan}`,
+  ...e
+});
+export {
+  t as resolveHeaderCellStyle
+};
+//# sourceMappingURL=resolveHeaderCellStyle.js.map

package/components/table/render/header/resolveHeaderCellStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveHeaderCellStyle.js","sources":["../../../../../src/components/table/render/header/resolveHeaderCellStyle.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { HeaderColumn } from './TableHeader.types';\n\nexport const resolveHeaderCellStyle = <RowType extends Record<string, unknown>>(\n    column: HeaderColumn<RowType>,\n    showSelectionColumn?: boolean,\n    extraStyle?: CSSProperties\n) => ({\n    gridColumn: `${column.columnStart + (showSelectionColumn ? 1 : 0)} / span ${column.colSpan}`,\n    gridRow: `${column.rowStart} / span ${column.rowSpan}`,\n    ...extraStyle,\n});\n"],"names":["resolveHeaderCellStyle","column","showSelectionColumn","extraStyle"],"mappings":"AAIO,MAAMA,IAAyB,CAClCC,GACAC,GACAC,OACE;AAAA,EACF,YAAY,GAAGF,EAAO,eAAeC,IAAsB,IAAI,EAAE,WAAWD,EAAO,OAAO;AAAA,EAC1F,SAAS,GAAGA,EAAO,QAAQ,WAAWA,EAAO,OAAO;AAAA,EACpD,GAAGE;AACP;"}

package/components/table/selection/useTableSelection.d.ts

@@ -0,0 +1,82 @@
+import { TableRowId } from '../Table.types';
+/**
+ * Configuration for `useTableSelection`.
+ */
+export type UseTableSelectionOptions<RowType extends Record<string, unknown>> = {
+    /**
+     * Data rows that participate in active-row and selection state.
+     */
+    rows: RowType[];
+    /**
+     * Optional key accessor used to derive stable row ids.
+     *
+     * If omitted, the row index is used as a fallback.
+     */
+    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => TableRowId);
+    /**
+     * Optional initially active row id.
+     */
+    initialActiveRowId?: TableRowId;
+    /**
+     * Optional initially selected row ids.
+     */
+    initialSelectedRowIds?: TableRowId[];
+};
+/**
+ * Selection and active-row state returned by `useTableSelection`.
+ */
+export type UseTableSelectionReturn = {
+    /**
+     * Currently active row id.
+     */
+    activeRowId?: TableRowId;
+    /**
+     * Currently selected row ids.
+     */
+    selectedRowIds: TableRowId[];
+    /**
+     * Whether at least one row is currently selected.
+     */
+    hasSelection: boolean;
+    /**
+     * Whether all current rows are selected.
+     */
+    isAllSelected: boolean;
+    /**
+     * Checks whether a given row id is currently selected.
+     */
+    isRowSelected: (rowId: TableRowId) => boolean;
+    /**
+     * Sets the current active row id.
+     */
+    setActiveRowId: (rowId: TableRowId | undefined) => void;
+    /**
+     * Replaces the current selection with the provided row ids.
+     */
+    setSelectedRowIds: (rowIds: TableRowId[]) => void;
+    /**
+     * Toggles selection state for a single row id.
+     */
+    toggleRowSelection: (rowId: TableRowId) => void;
+    /**
+     * Selects or deselects all current rows.
+     *
+     * If `shouldSelect` is omitted, the hook toggles based on the current
+     * all-selected state.
+     */
+    toggleAllSelection: (shouldSelect?: boolean) => void;
+    /**
+     * Clears the current selection.
+     */
+    clearSelection: () => void;
+};
+/**
+ * Small helper hook for controlled table demos and simple table integrations
+ * that need active-row state plus checkbox selection state.
+ *
+ * The hook derives stable row ids from `rows` and `rowKey`, keeps the active
+ * row and selection in sync when rows change, and provides convenience helpers
+ * for single-row and all-row toggling.
+ */
+declare const useTableSelection: <RowType extends Record<string, unknown>>(props: UseTableSelectionOptions<RowType>) => UseTableSelectionReturn;
+export default useTableSelection;

package/components/table/selection/useTableSelection.js

@@ -0,0 +1,35 @@
+import { useMemo as d, useState as r, useEffect as y } from "react";
+import { resolveRowKey as v } from "../model/resolveRowMeta.js";
+const K = (S) => {
+  const { rows: n, rowKey: i, initialActiveRowId: w, initialSelectedRowIds: f = [] } = S, l = d(() => n.map((e, t) => v(e, t, i)), [n, i]), c = d(() => new Set(l), [l]), [g, a] = r(w), [o, s] = r(f);
+  y(() => {
+    s((e) => e.filter((t) => c.has(t))), a(
+      (e) => e !== void 0 && c.has(e) ? e : void 0
+    );
+  }, [c]);
+  const m = (e) => {
+    s(
+      (t) => t.includes(e) ? t.filter((R) => R !== e) : [...t, e]
+    );
+  }, u = (e = !l.every((t) => o.includes(t))) => {
+    s(e ? l : []);
+  }, h = () => {
+    s([]);
+  };
+  return {
+    activeRowId: g,
+    selectedRowIds: o,
+    hasSelection: o.length > 0,
+    isAllSelected: l.length > 0 && l.every((e) => o.includes(e)),
+    isRowSelected: (e) => o.includes(e),
+    setActiveRowId: a,
+    setSelectedRowIds: s,
+    toggleRowSelection: m,
+    toggleAllSelection: u,
+    clearSelection: h
+  };
+};
+export {
+  K as default
+};
+//# sourceMappingURL=useTableSelection.js.map

package/components/table/selection/useTableSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSelection.js","sources":["../../../../src/components/table/selection/useTableSelection.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { resolveRowKey } from '../model/resolveRowMeta';\nimport type { TableRowId } from '../Table.types';\n\n/**\n * Configuration for `useTableSelection`.\n */\nexport type UseTableSelectionOptions<RowType extends Record<string, unknown>> = {\n    /**\n     * Data rows that participate in active-row and selection state.\n     */\n    rows: RowType[];\n\n    /**\n     * Optional key accessor used to derive stable row ids.\n     *\n     * If omitted, the row index is used as a fallback.\n     */\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => TableRowId);\n\n    /**\n     * Optional initially active row id.\n     */\n    initialActiveRowId?: TableRowId;\n\n    /**\n     * Optional initially selected row ids.\n     */\n    initialSelectedRowIds?: TableRowId[];\n};\n\n/**\n * Selection and active-row state returned by `useTableSelection`.\n */\nexport type UseTableSelectionReturn = {\n    /**\n     * Currently active row id.\n     */\n    activeRowId?: TableRowId;\n\n    /**\n     * Currently selected row ids.\n     */\n    selectedRowIds: TableRowId[];\n\n    /**\n     * Whether at least one row is currently selected.\n     */\n    hasSelection: boolean;\n\n    /**\n     * Whether all current rows are selected.\n     */\n    isAllSelected: boolean;\n\n    /**\n     * Checks whether a given row id is currently selected.\n     */\n    isRowSelected: (rowId: TableRowId) => boolean;\n\n    /**\n     * Sets the current active row id.\n     */\n    setActiveRowId: (rowId: TableRowId | undefined) => void;\n\n    /**\n     * Replaces the current selection with the provided row ids.\n     */\n    setSelectedRowIds: (rowIds: TableRowId[]) => void;\n\n    /**\n     * Toggles selection state for a single row id.\n     */\n    toggleRowSelection: (rowId: TableRowId) => void;\n\n    /**\n     * Selects or deselects all current rows.\n     *\n     * If `shouldSelect` is omitted, the hook toggles based on the current\n     * all-selected state.\n     */\n    toggleAllSelection: (shouldSelect?: boolean) => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clearSelection: () => void;\n};\n\n/**\n * Small helper hook for controlled table demos and simple table integrations\n * that need active-row state plus checkbox selection state.\n *\n * The hook derives stable row ids from `rows` and `rowKey`, keeps the active\n * row and selection in sync when rows change, and provides convenience helpers\n * for single-row and all-row toggling.\n */\nconst useTableSelection = <RowType extends Record<string, unknown>>(\n    props: UseTableSelectionOptions<RowType>\n): UseTableSelectionReturn => {\n    const { rows, rowKey, initialActiveRowId, initialSelectedRowIds = [] } = props;\n\n    const rowIds = useMemo(() => rows.map((row, rowIndex) => resolveRowKey(row, rowIndex, rowKey)), [rows, rowKey]);\n    const rowIdSet = useMemo(() => new Set(rowIds), [rowIds]);\n\n    const [activeRowId, setActiveRowId] = useState<TableRowId | undefined>(initialActiveRowId);\n    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>(initialSelectedRowIds);\n\n    useEffect(() => {\n        setSelectedRowIds(previousSelectedRowIds => previousSelectedRowIds.filter(rowId => rowIdSet.has(rowId)));\n        setActiveRowId(previousActiveRowId =>\n            previousActiveRowId !== undefined && rowIdSet.has(previousActiveRowId) ? previousActiveRowId : undefined\n        );\n    }, [rowIdSet]);\n\n    const toggleRowSelection = (rowId: TableRowId) => {\n        setSelectedRowIds(previousSelectedRowIds =>\n            previousSelectedRowIds.includes(rowId)\n                ? previousSelectedRowIds.filter(selectedRowId => selectedRowId !== rowId)\n                : [...previousSelectedRowIds, rowId]\n        );\n    };\n\n    const toggleAllSelection = (shouldSelect = !rowIds.every(rowId => selectedRowIds.includes(rowId))) => {\n        setSelectedRowIds(shouldSelect ? rowIds : []);\n    };\n\n    const clearSelection = () => {\n        setSelectedRowIds([]);\n    };\n\n    return {\n        activeRowId,\n        selectedRowIds,\n        hasSelection: selectedRowIds.length > 0,\n        isAllSelected: rowIds.length > 0 && rowIds.every(rowId => selectedRowIds.includes(rowId)),\n        isRowSelected: rowId => selectedRowIds.includes(rowId),\n        setActiveRowId,\n        setSelectedRowIds,\n        toggleRowSelection,\n        toggleAllSelection,\n        clearSelection,\n    };\n};\n\nexport default useTableSelection;\n"],"names":["useTableSelection","props","rows","rowKey","initialActiveRowId","initialSelectedRowIds","rowIds","useMemo","row","rowIndex","resolveRowKey","rowIdSet","activeRowId","setActiveRowId","useState","selectedRowIds","setSelectedRowIds","useEffect","previousSelectedRowIds","rowId","previousActiveRowId","toggleRowSelection","selectedRowId","toggleAllSelection","shouldSelect","clearSelection"],"mappings":";;AAkGA,MAAMA,IAAoB,CACtBC,MAC0B;AAC1B,QAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,oBAAAC,GAAoB,uBAAAC,IAAwB,CAAA,MAAOJ,GAEnEK,IAASC,EAAQ,MAAML,EAAK,IAAI,CAACM,GAAKC,MAAaC,EAAcF,GAAKC,GAAUN,CAAM,CAAC,GAAG,CAACD,GAAMC,CAAM,CAAC,GACxGQ,IAAWJ,EAAQ,MAAM,IAAI,IAAID,CAAM,GAAG,CAACA,CAAM,CAAC,GAElD,CAACM,GAAaC,CAAc,IAAIC,EAAiCV,CAAkB,GACnF,CAACW,GAAgBC,CAAiB,IAAIF,EAAuBT,CAAqB;AAExF,EAAAY,EAAU,MAAM;AACZ,IAAAD,EAAkB,CAAAE,MAA0BA,EAAuB,OAAO,CAAAC,MAASR,EAAS,IAAIQ,CAAK,CAAC,CAAC,GACvGN;AAAA,MAAe,OACXO,MAAwB,UAAaT,EAAS,IAAIS,CAAmB,IAAIA,IAAsB;AAAA,IAAA;AAAA,EAEvG,GAAG,CAACT,CAAQ,CAAC;AAEb,QAAMU,IAAqB,CAACF,MAAsB;AAC9C,IAAAH;AAAA,MAAkB,CAAAE,MACdA,EAAuB,SAASC,CAAK,IAC/BD,EAAuB,OAAO,CAAAI,MAAiBA,MAAkBH,CAAK,IACtE,CAAC,GAAGD,GAAwBC,CAAK;AAAA,IAAA;AAAA,EAE/C,GAEMI,IAAqB,CAACC,IAAe,CAAClB,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC,MAAM;AAClG,IAAAH,EAAkBQ,IAAelB,IAAS,EAAE;AAAA,EAChD,GAEMmB,IAAiB,MAAM;AACzB,IAAAT,EAAkB,CAAA,CAAE;AAAA,EACxB;AAEA,SAAO;AAAA,IACH,aAAAJ;AAAA,IACA,gBAAAG;AAAA,IACA,cAAcA,EAAe,SAAS;AAAA,IACtC,eAAeT,EAAO,SAAS,KAAKA,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC;AAAA,IACxF,eAAe,CAAAA,MAASJ,EAAe,SAASI,CAAK;AAAA,IACrD,gBAAAN;AAAA,IACA,mBAAAG;AAAA,IACA,oBAAAK;AAAA,IACA,oBAAAE;AAAA,IACA,gBAAAE;AAAA,EAAA;AAER;"}

package/components/table/settings/TableColumnsDropdown.d.ts

@@ -0,0 +1,90 @@
+import { ReactNode } from 'react';
+export type TableColumnsDropdownItem = {
+    /**
+     * Stable unique column key.
+     */
+    key: string;
+    /**
+     * Visible label shown inside the dropdown item.
+     */
+    label: ReactNode;
+    /**
+     * Controls whether the column is currently visible in the table.
+     */
+    visible: boolean;
+    /**
+     * Hides the item from the dropdown list while keeping the column in the configuration.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Disables visibility changes and drag reordering for this item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Enables or disables drag reordering for this item.
+     *
+     * @default true
+     */
+    draggable?: boolean;
+};
+type TableColumnsDropdownBaseProps = {
+    /**
+     * Configurable column items displayed inside the dropdown.
+     */
+    columns: TableColumnsDropdownItem[];
+    /**
+     * Called when drag reordering produces a new column order.
+     */
+    onColumnOrderChange?: (columnOrder: string[]) => void;
+    /**
+     * Called when a column item is toggled visible or hidden.
+     */
+    onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;
+    /**
+     * Called when the reset action is triggered.
+     */
+    onReset?: () => void;
+    /**
+     * Label shown on the dropdown trigger button.
+     */
+    label?: ReactNode;
+    /**
+     * Optional classes for the outer dropdown component.
+     */
+    className?: string;
+    /**
+     * Optional classes for the dropdown toggle button.
+     */
+    toggleClassName?: string;
+    /**
+     * Optional classes for the dropdown menu.
+     */
+    dropdownClassName?: string;
+};
+export type TableColumnsDropdownProps = (TableColumnsDropdownBaseProps & {
+    /**
+     * Shows the reset action at the bottom of the dropdown.
+     */
+    showResetButton: true;
+    /**
+     * Label rendered for the reset action.
+     */
+    resetLabel: ReactNode;
+}) | (TableColumnsDropdownBaseProps & {
+    /**
+     * Hides the reset action.
+     *
+     * @default false
+     */
+    showResetButton?: false;
+    /**
+     * Optional reset label kept for API compatibility when the reset action is hidden.
+     */
+    resetLabel?: ReactNode;
+});
+declare const TableColumnsDropdown: (props: TableColumnsDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default TableColumnsDropdown;

package/components/table/settings/TableColumnsDropdown.js

@@ -0,0 +1,137 @@
+import { jsx as s, jsxs as c, Fragment as k } from "react/jsx-runtime";
+import { useSensors as B, useSensor as w, PointerSensor as M, KeyboardSensor as R, DndContext as A, closestCenter as P } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as G, SortableContext as V, verticalListSortingStrategy as j } from "@dnd-kit/sortable";
+import { useState as x, useEffect as H } from "react";
+import v from "../../../utils/classNames.js";
+import W from "../../../utils/arrayMove.js";
+import z from "../../dropdown/ButtonDropdown.js";
+import { TABLE_HORIZONTAL_SCROLL_EVENT as S } from "../layout/useHorizontalSectionSync.js";
+import F from "./TableColumnsDropdownItem.js";
+const U = 4, C = (o) => o.draggable !== !1 && !o.disabled && !o.hideLabel, Z = (o, t, n) => Math.min(Math.max(o, Math.min(t, n)), Math.max(t, n)), q = (o) => ({ containerNodeRect: t, draggingNodeRect: n, transform: r }) => !t || !n ? {
+  ...r,
+  x: 0
+} : {
+  ...r,
+  x: 0,
+  y: Z(
+    r.y,
+    t.top + o - n.top,
+    t.bottom - o - n.bottom
+  )
+}, J = q(U), Q = (o, t, n) => {
+  const r = o.filter(C).map((a) => a.key), l = r.indexOf(t), i = r.indexOf(n);
+  if (l < 0 || i < 0)
+    return;
+  const p = W(r, l, i);
+  let d = 0;
+  return o.map((a) => {
+    if (!C(a))
+      return a.key;
+    const f = p[d];
+    return d += 1, f ?? a.key;
+  });
+}, ae = (o) => {
+  const {
+    columns: t,
+    onColumnOrderChange: n,
+    onColumnVisibilityChange: r,
+    onReset: l,
+    label: i,
+    resetLabel: p,
+    showResetButton: d = !1,
+    className: a,
+    toggleClassName: f,
+    dropdownClassName: L
+  } = o, [N, m] = x(!1), [O, g] = x(!1), E = typeof n == "function", u = typeof l == "function", y = t.filter((e) => !e.hideLabel);
+  H(() => {
+    const e = () => m(!1);
+    return window.addEventListener(S, e), () => window.removeEventListener(S, e);
+  }, []);
+  const K = B(
+    w(M, { activationConstraint: { distance: 6 } }),
+    w(R, { coordinateGetter: G })
+  ), T = (e) => {
+    g(!0);
+  }, _ = (e) => {
+    g(!1);
+    const D = String(e.active.id), h = e.over ? String(e.over.id) : void 0;
+    if (!h || D === h)
+      return;
+    const b = Q(t, D, h);
+    b && n?.(b);
+  }, I = () => {
+    u && (m(!1), l());
+  };
+  return /* @__PURE__ */ s(
+    z,
+    {
+      title: /* @__PURE__ */ c("span", { className: "display-inline-flex align-items-center gap-5", children: [
+        /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-table-view" }),
+        /* @__PURE__ */ s("span", { children: i })
+      ] }),
+      noCaret: !0,
+      open: N,
+      onOpen: () => m(!0),
+      onClose: () => m(!1),
+      className: a,
+      toggleClassName: f,
+      dropdownClassName: v(
+        "min-width-200 max-height-75vh overflow-y-auto overflow-x-hidden",
+        O && "table-columns-dropdown-dragging",
+        L
+      ),
+      pullRight: !0,
+      customDropdown: /* @__PURE__ */ c(
+        A,
+        {
+          sensors: K,
+          collisionDetection: P,
+          modifiers: [J],
+          onDragStart: T,
+          onDragEnd: _,
+          onDragCancel: () => g(!1),
+          children: [
+            /* @__PURE__ */ s(
+              V,
+              {
+                items: y.map((e) => e.key),
+                strategy: j,
+                children: y.map((e) => /* @__PURE__ */ s(
+                  F,
+                  {
+                    column: e,
+                    isDraggable: E && C(e),
+                    onColumnVisibilityChange: r
+                  },
+                  e.key
+                ))
+              }
+            ),
+            d && /* @__PURE__ */ c(k, { children: [
+              /* @__PURE__ */ s("li", { className: "divider", role: "separator" }),
+              /* @__PURE__ */ s("li", { className: v(!u && "disabled"), role: "presentation", children: /* @__PURE__ */ c(
+                "a",
+                {
+                  className: "display-flex align-items-center gap-10",
+                  role: "menuitem",
+                  "aria-disabled": !u,
+                  onClick: (e) => {
+                    e.preventDefault(), I();
+                  },
+                  children: [
+                    /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-refresh" }),
+                    /* @__PURE__ */ s("span", { children: p })
+                  ]
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ae as default
+};
+//# sourceMappingURL=TableColumnsDropdown.js.map

package/components/table/settings/TableColumnsDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnsDropdown.js","sources":["../../../../src/components/table/settings/TableColumnsDropdown.tsx"],"sourcesContent":["import {\n    closestCenter,\n    DndContext,\n    KeyboardSensor,\n    PointerSensor,\n    type DragStartEvent,\n    type DragEndEvent,\n    type Modifier,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { useEffect, useState, type ReactNode } from 'react';\n\nimport classNames from '../../../utils/classNames';\nimport arrayMove from '../../../utils/arrayMove';\nimport ButtonDropdown from '../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../layout/useHorizontalSectionSync';\nimport TableColumnsDropdownItemComponent from './TableColumnsDropdownItem';\n\nexport type TableColumnsDropdownItem = {\n    /**\n     * Stable unique column key.\n     */\n    key: string;\n\n    /**\n     * Visible label shown inside the dropdown item.\n     */\n    label: ReactNode;\n\n    /**\n     * Controls whether the column is currently visible in the table.\n     */\n    visible: boolean;\n\n    /**\n     * Hides the item from the dropdown list while keeping the column in the configuration.\n     *\n     * @default false\n     */\n    hideLabel?: boolean;\n\n    /**\n     * Disables visibility changes and drag reordering for this item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Enables or disables drag reordering for this item.\n     *\n     * @default true\n     */\n    draggable?: boolean;\n};\n\ntype TableColumnsDropdownBaseProps = {\n    /**\n     * Configurable column items displayed inside the dropdown.\n     */\n    columns: TableColumnsDropdownItem[];\n\n    /**\n     * Called when drag reordering produces a new column order.\n     */\n    onColumnOrderChange?: (columnOrder: string[]) => void;\n\n    /**\n     * Called when a column item is toggled visible or hidden.\n     */\n    onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;\n\n    /**\n     * Called when the reset action is triggered.\n     */\n    onReset?: () => void;\n\n    /**\n     * Label shown on the dropdown trigger button.\n     */\n    label?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: string;\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: string;\n};\n\nexport type TableColumnsDropdownProps =\n    | (TableColumnsDropdownBaseProps & {\n          /**\n           * Shows the reset action at the bottom of the dropdown.\n           */\n          showResetButton: true;\n\n          /**\n           * Label rendered for the reset action.\n           */\n          resetLabel: ReactNode;\n      })\n    | (TableColumnsDropdownBaseProps & {\n          /**\n           * Hides the reset action.\n           *\n           * @default false\n           */\n          showResetButton?: false;\n\n          /**\n           * Optional reset label kept for API compatibility when the reset action is hidden.\n           */\n          resetLabel?: ReactNode;\n      });\n\nconst TABLE_COLUMNS_DROPDOWN_DRAG_PADDING = 4;\n\nconst isColumnDraggable = (column: TableColumnsDropdownItem) =>\n    column.draggable !== false && !column.disabled && !column.hideLabel;\n\nconst clamp = (value: number, min: number, max: number) =>\n    Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));\n\nconst restrictToVerticalDropdownBoundsWithPadding =\n    (padding: number): Modifier =>\n    ({ containerNodeRect, draggingNodeRect, transform }) => {\n        if (!containerNodeRect || !draggingNodeRect) {\n            return {\n                ...transform,\n                x: 0,\n            };\n        }\n\n        return {\n            ...transform,\n            x: 0,\n            y: clamp(\n                transform.y,\n                containerNodeRect.top + padding - draggingNodeRect.top,\n                containerNodeRect.bottom - padding - draggingNodeRect.bottom\n            ),\n        };\n    };\n\nconst restrictToDropdownBounds = restrictToVerticalDropdownBoundsWithPadding(TABLE_COLUMNS_DROPDOWN_DRAG_PADDING);\n\nconst reorderColumns = (columns: TableColumnsDropdownItem[], activeColumnKey: string, overColumnKey: string) => {\n    const draggableColumnKeys = columns.filter(isColumnDraggable).map(column => column.key);\n    const oldIndex = draggableColumnKeys.indexOf(activeColumnKey);\n    const newIndex = draggableColumnKeys.indexOf(overColumnKey);\n\n    if (oldIndex < 0 || newIndex < 0) {\n        return;\n    }\n\n    const nextDraggableColumnKeys = arrayMove(draggableColumnKeys, oldIndex, newIndex);\n    let nextDraggableColumnKeyIndex = 0;\n\n    return columns.map(column => {\n        if (!isColumnDraggable(column)) {\n            return column.key;\n        }\n\n        const nextColumnKey = nextDraggableColumnKeys[nextDraggableColumnKeyIndex];\n        nextDraggableColumnKeyIndex += 1;\n        return nextColumnKey ?? column.key;\n    });\n};\n\nconst TableColumnsDropdown = (props: TableColumnsDropdownProps) => {\n    const {\n        columns,\n        onColumnOrderChange,\n        onColumnVisibilityChange,\n        onReset,\n        label,\n        resetLabel,\n        showResetButton = false,\n        className,\n        toggleClassName,\n        dropdownClassName,\n    } = props;\n\n    const [open, setOpen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n\n    const allowReorder = typeof onColumnOrderChange === 'function';\n    const canReset = typeof onReset === 'function';\n\n    const dropdownColumns = columns.filter(column => !column.hideLabel);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    const sensors = useSensors(\n        useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),\n        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const handleDragStart = (_event: DragStartEvent) => {\n        setIsDragging(true);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        setIsDragging(false);\n\n        const activeColumnKey = String(event.active.id);\n        const overColumnKey = event.over ? String(event.over.id) : undefined;\n\n        if (!overColumnKey || activeColumnKey === overColumnKey) {\n            return;\n        }\n\n        const nextColumnOrder = reorderColumns(columns, activeColumnKey, overColumnKey);\n\n        if (nextColumnOrder) {\n            onColumnOrderChange?.(nextColumnOrder);\n        }\n    };\n\n    const handleReset = () => {\n        if (!canReset) {\n            return;\n        }\n\n        setOpen(false);\n        onReset();\n    };\n\n    return (\n        <ButtonDropdown\n            title={\n                <span className='display-inline-flex align-items-center gap-5'>\n                    <span className='rioglyph rioglyph-table-view' />\n                    <span>{label}</span>\n                </span>\n            }\n            noCaret\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n            className={className}\n            toggleClassName={toggleClassName}\n            dropdownClassName={classNames(\n                'min-width-200 max-height-75vh overflow-y-auto overflow-x-hidden',\n                isDragging && 'table-columns-dropdown-dragging',\n                dropdownClassName\n            )}\n            pullRight\n            customDropdown={\n                <DndContext\n                    sensors={sensors}\n                    collisionDetection={closestCenter}\n                    modifiers={[restrictToDropdownBounds]}\n                    onDragStart={handleDragStart}\n                    onDragEnd={handleDragEnd}\n                    onDragCancel={() => setIsDragging(false)}\n                >\n                    <SortableContext\n                        items={dropdownColumns.map(column => column.key)}\n                        strategy={verticalListSortingStrategy}\n                    >\n                        {dropdownColumns.map(column => (\n                            <TableColumnsDropdownItemComponent\n                                key={column.key}\n                                column={column}\n                                isDraggable={allowReorder && isColumnDraggable(column)}\n                                onColumnVisibilityChange={onColumnVisibilityChange}\n                            />\n                        ))}\n                    </SortableContext>\n                    {showResetButton && (\n                        <>\n                            <li className='divider' role='separator' />\n                            <li className={classNames(!canReset && 'disabled')} role='presentation'>\n                                <a\n                                    className='display-flex align-items-center gap-10'\n                                    role='menuitem'\n                                    aria-disabled={!canReset}\n                                    onClick={event => {\n                                        event.preventDefault();\n                                        handleReset();\n                                    }}\n                                >\n                                    <span className='rioglyph rioglyph-refresh' />\n                                    <span>{resetLabel}</span>\n                                </a>\n                            </li>\n                        </>\n                    )}\n                </DndContext>\n            }\n        />\n    );\n};\n\nexport default TableColumnsDropdown;\n"],"names":["TABLE_COLUMNS_DROPDOWN_DRAG_PADDING","isColumnDraggable","column","clamp","value","min","max","restrictToVerticalDropdownBoundsWithPadding","padding","containerNodeRect","draggingNodeRect","transform","restrictToDropdownBounds","reorderColumns","columns","activeColumnKey","overColumnKey","draggableColumnKeys","oldIndex","newIndex","nextDraggableColumnKeys","arrayMove","nextDraggableColumnKeyIndex","nextColumnKey","TableColumnsDropdown","props","onColumnOrderChange","onColumnVisibilityChange","onReset","label","resetLabel","showResetButton","className","toggleClassName","dropdownClassName","open","setOpen","useState","isDragging","setIsDragging","allowReorder","canReset","dropdownColumns","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragStart","_event","handleDragEnd","event","nextColumnOrder","handleReset","jsx","ButtonDropdown","jsxs","classNames","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","TableColumnsDropdownItemComponent","Fragment"],"mappings":"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"}

package/components/table/settings/TableColumnsDropdownItem.d.ts

@@ -0,0 +1,8 @@
+import { TableColumnsDropdownItem as TableColumnsDropdownColumn } from './TableColumnsDropdown';
+export type TableColumnsDropdownItemProps = {
+    column: TableColumnsDropdownColumn;
+    isDraggable: boolean;
+    onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;
+};
+declare const TableColumnsDropdownItem: (props: TableColumnsDropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TableColumnsDropdownItem;

package/components/table/settings/TableColumnsDropdownItem.js

@@ -0,0 +1,66 @@
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useSortable as h } from "@dnd-kit/sortable";
+import { CSS as u } from "@dnd-kit/utilities";
+import n from "../../../utils/classNames.js";
+import y from "../../checkbox/Checkbox.js";
+const w = (r) => {
+  const { column: e, isDraggable: l, onColumnVisibilityChange: t } = r, { attributes: d, listeners: m, setActivatorNodeRef: c, setNodeRef: p, transform: b, transition: g, isDragging: f } = h({
+    id: e.key,
+    disabled: !l
+  }), s = () => {
+    e.disabled || t?.(e.key, !e.visible);
+  };
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      className: n(e.disabled && "disabled", f && "table-columns-dropdown-item-dragging"),
+      ref: p,
+      role: "presentation",
+      style: { transform: u.Transform.toString(b), transition: g },
+      children: /* @__PURE__ */ o(
+        "a",
+        {
+          className: "display-flex gap-5 align-items-center justify-content-between",
+          role: "menuitemcheckbox",
+          "aria-checked": e.visible,
+          onClick: (i) => {
+            i.preventDefault(), s();
+          },
+          children: [
+            /* @__PURE__ */ o("div", { className: "display-flex gap-10 align-items-center", children: [
+              /* @__PURE__ */ a(
+                y,
+                {
+                  checked: e.visible,
+                  disabled: e.disabled,
+                  onClick: (i) => i.stopPropagation(),
+                  onChange: s,
+                  className: "margin-top--4"
+                }
+              ),
+              /* @__PURE__ */ a("div", { className: "table-columns-dropdown-item-label", children: e.label })
+            ] }),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: n(
+                  "table-columns-dropdown-item-drag-handle",
+                  !l && "table-columns-dropdown-item-drag-handle-disabled"
+                ),
+                ref: c,
+                onClick: (i) => i.stopPropagation(),
+                ...d,
+                ...m,
+                children: /* @__PURE__ */ a("span", { className: "rioglyph rioglyph-drag-n-drop" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  w as default
+};
+//# sourceMappingURL=TableColumnsDropdownItem.js.map

package/components/table/settings/TableColumnsDropdownItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnsDropdownItem.js","sources":["../../../../src/components/table/settings/TableColumnsDropdownItem.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport classNames from '../../../utils/classNames';\nimport Checkbox from '../../checkbox/Checkbox';\nimport type { TableColumnsDropdownItem as TableColumnsDropdownColumn } from './TableColumnsDropdown';\n\nexport type TableColumnsDropdownItemProps = {\n    column: TableColumnsDropdownColumn;\n    isDraggable: boolean;\n    onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;\n};\n\nconst TableColumnsDropdownItem = (props: TableColumnsDropdownItemProps) => {\n    const { column, isDraggable, onColumnVisibilityChange } = props;\n\n    const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: column.key,\n        disabled: !isDraggable,\n    });\n\n    const handleToggleVisibility = () => {\n        if (column.disabled) {\n            return;\n        }\n\n        onColumnVisibilityChange?.(column.key, !column.visible);\n    };\n\n    return (\n        <li\n            className={classNames(column.disabled && 'disabled', isDragging && 'table-columns-dropdown-item-dragging')}\n            ref={setNodeRef}\n            role='presentation'\n            style={{ transform: CSS.Transform.toString(transform), transition }}\n        >\n            <a\n                className='display-flex gap-5 align-items-center justify-content-between'\n                role='menuitemcheckbox'\n                aria-checked={column.visible}\n                onClick={event => {\n                    event.preventDefault();\n                    handleToggleVisibility();\n                }}\n            >\n                <div className='display-flex gap-10 align-items-center'>\n                    <Checkbox\n                        checked={column.visible}\n                        disabled={column.disabled}\n                        onClick={event => event.stopPropagation()}\n                        onChange={handleToggleVisibility}\n                        className='margin-top--4'\n                    />\n                    <div className='table-columns-dropdown-item-label'>{column.label}</div>\n                </div>\n                <div\n                    className={classNames(\n                        'table-columns-dropdown-item-drag-handle',\n                        !isDraggable && 'table-columns-dropdown-item-drag-handle-disabled'\n                    )}\n                    ref={setActivatorNodeRef}\n                    onClick={event => event.stopPropagation()}\n                    {...attributes}\n                    {...listeners}\n                >\n                    <span className='rioglyph rioglyph-drag-n-drop' />\n                </div>\n            </a>\n        </li>\n    );\n};\n\nexport default TableColumnsDropdownItem;\n"],"names":["TableColumnsDropdownItem","props","column","isDraggable","onColumnVisibilityChange","attributes","listeners","setActivatorNodeRef","setNodeRef","transform","transition","isDragging","useSortable","handleToggleVisibility","jsx","classNames","CSS","jsxs","event","Checkbox"],"mappings":";;;;;AAaA,MAAMA,IAA2B,CAACC,MAAyC;AACvE,QAAM,EAAE,QAAAC,GAAQ,aAAAC,GAAa,0BAAAC,EAAA,IAA6BH,GAEpD,EAAE,YAAAI,GAAY,WAAAC,GAAW,qBAAAC,GAAqB,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAY;AAAA,IAC9G,IAAIV,EAAO;AAAA,IACX,UAAU,CAACC;AAAA,EAAA,CACd,GAEKU,IAAyB,MAAM;AACjC,IAAIX,EAAO,YAIXE,IAA2BF,EAAO,KAAK,CAACA,EAAO,OAAO;AAAA,EAC1D;AAEA,SACI,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAWb,EAAO,YAAY,YAAYS,KAAc,sCAAsC;AAAA,MACzG,KAAKH;AAAA,MACL,MAAK;AAAA,MACL,OAAO,EAAE,WAAWQ,EAAI,UAAU,SAASP,CAAS,GAAG,YAAAC,EAAA;AAAA,MAEvD,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,gBAAcf,EAAO;AAAA,UACrB,SAAS,CAAAgB,MAAS;AACd,YAAAA,EAAM,eAAA,GACNL,EAAA;AAAA,UACJ;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,0CACX,UAAA;AAAA,cAAA,gBAAAH;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACG,SAASjB,EAAO;AAAA,kBAChB,UAAUA,EAAO;AAAA,kBACjB,SAAS,CAAAgB,MAASA,EAAM,gBAAA;AAAA,kBACxB,UAAUL;AAAA,kBACV,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEd,gBAAAC,EAAC,OAAA,EAAI,WAAU,qCAAqC,YAAO,MAAA,CAAM;AAAA,YAAA,GACrE;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAWC;AAAA,kBACP;AAAA,kBACA,CAACZ,KAAe;AAAA,gBAAA;AAAA,gBAEpB,KAAKI;AAAA,gBACL,SAAS,CAAAW,MAASA,EAAM,gBAAA;AAAA,gBACvB,GAAGb;AAAA,gBACH,GAAGC;AAAA,gBAEJ,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAAA,CAAgC;AAAA,cAAA;AAAA,YAAA;AAAA,UACpD;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}

package/components/table/shared/getAlignClassName.d.ts

@@ -0,0 +1,3 @@
+import { TableHorizontalAlign, TableVerticalAlign } from '../Table.types';
+export declare const getHorizontalAlignClassName: (align?: TableHorizontalAlign) => "table-align-center" | "table-align-right" | "table-align-left";
+export declare const getVerticalAlignClassName: (align?: TableVerticalAlign) => "table-vertical-align-top" | "table-vertical-align-bottom" | "table-vertical-align-middle";

package/components/table/shared/getAlignClassName.js

@@ -0,0 +1,6 @@
+const e = (t = "left") => t === "center" ? "table-align-center" : t === "right" ? "table-align-right" : "table-align-left", l = (t = "middle") => t === "top" ? "table-vertical-align-top" : t === "bottom" ? "table-vertical-align-bottom" : "table-vertical-align-middle";
+export {
+  e as getHorizontalAlignClassName,
+  l as getVerticalAlignClassName
+};
+//# sourceMappingURL=getAlignClassName.js.map

package/components/table/shared/getAlignClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getAlignClassName.js","sources":["../../../../src/components/table/shared/getAlignClassName.ts"],"sourcesContent":["import type { TableHorizontalAlign, TableVerticalAlign } from '../Table.types';\n\nexport const getHorizontalAlignClassName = (align: TableHorizontalAlign = 'left') => {\n    if (align === 'center') {\n        return 'table-align-center';\n    }\n\n    if (align === 'right') {\n        return 'table-align-right';\n    }\n\n    return 'table-align-left';\n};\n\nexport const getVerticalAlignClassName = (align: TableVerticalAlign = 'middle') => {\n    if (align === 'top') {\n        return 'table-vertical-align-top';\n    }\n\n    if (align === 'bottom') {\n        return 'table-vertical-align-bottom';\n    }\n\n    return 'table-vertical-align-middle';\n};\n"],"names":["getHorizontalAlignClassName","align","getVerticalAlignClassName"],"mappings":"AAEO,MAAMA,IAA8B,CAACC,IAA8B,WAClEA,MAAU,WACH,uBAGPA,MAAU,UACH,sBAGJ,oBAGEC,IAA4B,CAACD,IAA4B,aAC9DA,MAAU,QACH,6BAGPA,MAAU,WACH,gCAGJ;"}

package/components/table/shared/getInteractiveRowProps.d.ts

@@ -0,0 +1,14 @@
+import { KeyboardEventHandler } from 'react';
+type GetInteractiveRowPropsArgs<RowType extends Record<string, unknown>> = {
+    isClickable: boolean;
+    onRowClick?: (row: RowType, rowIndex: number) => void;
+    row: RowType;
+    rowIndex: number;
+};
+export declare const getInteractiveRowProps: <RowType extends Record<string, unknown>>(args: GetInteractiveRowPropsArgs<RowType>) => {
+    isClickableClassName: string | undefined;
+    onClick: (() => void | undefined) | undefined;
+    onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;
+    tabIndex: number | undefined;
+};
+export {};

package/components/table/shared/getInteractiveRowProps.js

@@ -0,0 +1,15 @@
+const r = (t) => {
+  const { isClickable: o, onRowClick: i, row: n, rowIndex: l } = t;
+  return {
+    isClickableClassName: o ? "table-row-clickable" : void 0,
+    onClick: o ? () => i?.(n, l) : void 0,
+    onKeyDown: o ? (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i?.(n, l));
+    } : void 0,
+    tabIndex: o ? 0 : void 0
+  };
+};
+export {
+  r as getInteractiveRowProps
+};
+//# sourceMappingURL=getInteractiveRowProps.js.map

package/components/table/shared/getInteractiveRowProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInteractiveRowProps.js","sources":["../../../../src/components/table/shared/getInteractiveRowProps.ts"],"sourcesContent":["import type { KeyboardEventHandler } from 'react';\n\ntype GetInteractiveRowPropsArgs<RowType extends Record<string, unknown>> = {\n    isClickable: boolean;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    row: RowType;\n    rowIndex: number;\n};\n\nexport const getInteractiveRowProps = <RowType extends Record<string, unknown>>(\n    args: GetInteractiveRowPropsArgs<RowType>\n) => {\n    const { isClickable, onRowClick, row, rowIndex } = args;\n\n    const onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined = isClickable\n        ? event => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  onRowClick?.(row, rowIndex);\n              }\n          }\n        : undefined;\n\n    return {\n        isClickableClassName: isClickable ? 'table-row-clickable' : undefined,\n        onClick: isClickable ? () => onRowClick?.(row, rowIndex) : undefined,\n        onKeyDown,\n        tabIndex: isClickable ? 0 : undefined,\n    };\n};\n"],"names":["getInteractiveRowProps","args","isClickable","onRowClick","row","rowIndex","event"],"mappings":"AASO,MAAMA,IAAyB,CAClCC,MACC;AACD,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,KAAAC,GAAK,UAAAC,MAAaJ;AAWnD,SAAO;AAAA,IACH,sBAAsBC,IAAc,wBAAwB;AAAA,IAC5D,SAASA,IAAc,MAAMC,IAAaC,GAAKC,CAAQ,IAAI;AAAA,IAC3D,WAZgEH,IAC9D,CAAAI,MAAS;AACL,OAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNH,IAAaC,GAAKC,CAAQ;AAAA,IAElC,IACA;AAAA,IAMF,UAAUH,IAAc,IAAI;AAAA,EAAA;AAEpC;"}

package/components/table/shared/resolveTableAria.d.ts

@@ -0,0 +1,2 @@
+export declare const resolveAriaColIndex: (columnStart: number, showSelectionColumn?: boolean) => number;
+export declare const resolveAriaSpan: (span: number) => number | undefined;

package/components/table/shared/resolveTableAria.js

@@ -0,0 +1,6 @@
+const r = (o, e) => o + (e ? 1 : 0), i = (o) => o > 1 ? o : void 0;
+export {
+  r as resolveAriaColIndex,
+  i as resolveAriaSpan
+};
+//# sourceMappingURL=resolveTableAria.js.map

package/components/table/shared/resolveTableAria.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveTableAria.js","sources":["../../../../src/components/table/shared/resolveTableAria.ts"],"sourcesContent":["export const resolveAriaColIndex = (columnStart: number, showSelectionColumn?: boolean) =>\n    columnStart + (showSelectionColumn ? 1 : 0);\n\nexport const resolveAriaSpan = (span: number) => (span > 1 ? span : undefined);\n"],"names":["resolveAriaColIndex","columnStart","showSelectionColumn","resolveAriaSpan","span"],"mappings":"AAAO,MAAMA,IAAsB,CAACC,GAAqBC,MACrDD,KAAeC,IAAsB,IAAI,IAEhCC,IAAkB,CAACC,MAAkBA,IAAO,IAAIA,IAAO;"}

package/components/table/tableSizing.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MIN_COLUMN_WIDTH_PX = 50;
+export declare const MIN_COLUMN_WIDTH = "50px";
+export declare const DEFAULT_MIN_RESIZE_WIDTH_PX = 50;
+export declare const DEFAULT_MAX_RESIZE_WIDTH_PX = 1000;

package/components/table/tableSizing.constants.js

@@ -0,0 +1,8 @@
+const _ = 50, I = "50px", M = 50, N = 1e3;
+export {
+  N as DEFAULT_MAX_RESIZE_WIDTH_PX,
+  M as DEFAULT_MIN_RESIZE_WIDTH_PX,
+  I as MIN_COLUMN_WIDTH,
+  _ as MIN_COLUMN_WIDTH_PX
+};
+//# sourceMappingURL=tableSizing.constants.js.map

package/components/table/tableSizing.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableSizing.constants.js","sources":["../../../src/components/table/tableSizing.constants.ts"],"sourcesContent":["export const MIN_COLUMN_WIDTH_PX = 50;\nexport const MIN_COLUMN_WIDTH = `${MIN_COLUMN_WIDTH_PX}px`;\nexport const DEFAULT_MIN_RESIZE_WIDTH_PX = MIN_COLUMN_WIDTH_PX;\nexport const DEFAULT_MAX_RESIZE_WIDTH_PX = 1000;\n"],"names":["MIN_COLUMN_WIDTH_PX","MIN_COLUMN_WIDTH","DEFAULT_MIN_RESIZE_WIDTH_PX","DEFAULT_MAX_RESIZE_WIDTH_PX"],"mappings":"AAAO,MAAMA,IAAsB,IACtBC,IAAmB,QACnBC,IAA8B,IAC9BC,IAA8B;"}

package/components/teaser/TeaserContainer.js

@@ -1,4 +1,4 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { Children as l } from "react";
 import a from "../../utils/classNames.js";
 const o = (s) => {
@@ -19,8 +19,8 @@ const o = (s) => {
       return "col-12";
   }
 }, p = (s) => {
-  const { className: t, teaserPerRow: e, children: r, columnClassName: n } = s, m = a("teaser-container", "row", "display-flex-sm flex-wrap-sm", t), u = o(e || l.count(r) || 1), i = a(u, n);
-  return /* @__PURE__ */ c("div", { className: m, children: l.map(r, (d) => /* @__PURE__ */ c("div", { className: i, children: d })) });
+  const { className: t, teaserPerRow: e, children: c, columnClassName: n } = s, m = a("teaser-container", "row", "display-flex-sm flex-wrap-sm", t), i = o(e || l.count(c) || 1), u = a(i, n);
+  return /* @__PURE__ */ r("div", { className: m, children: l.map(c, (d) => /* @__PURE__ */ r("div", { className: u, children: d })) });
 };
 export {
   p as default

package/components/teaser/TeaserContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeaserContainer.js","sources":["../../../src/components/teaser/TeaserContainer.tsx"],"sourcesContent":["import { Children, type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst getGridClasses = (amount: number) => {\n    switch (amount) {\n        case 1:\n            return 'col-12';\n        case 2:\n            return 'col-12 col-sm-6';\n        case 3:\n            return 'col-12 col-md-4';\n        case 4:\n            return 'col-12 col-md-6 col-lg-3';\n        case 6:\n            return 'col-12 col-sm-4 col-lg-2';\n        case 12:\n            return 'col-12 col-sm-1';\n        default:\n            return 'col-12';\n    }\n};\n\nexport type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;\n\nexport type TeaserContainerProps = {\n    /**\n     * Defines how many children are rendered into a row.\n     *\n     * If \"teaserPerRow\" is not defined, the container tries to put all children in a row with regard to the\n     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid\n     * classes.\n     *\n     * It is recommended to define \"teasersPerRow\" when having more than 4 teasers.\n     *\n     * Possible values are: `1` `2` `3` `4` `6` `12`\n     */\n    teaserPerRow?: TeasersPerRow;\n\n    /**\n     * Optional string for additional classes added to each column of a child.\n     */\n    columnClassName?: string;\n\n    /**\n     * Optional string for additional classes added to the row.\n     */\n    className?: string;\n};\n\nconst TeaserContainer = (props: PropsWithChildren<TeaserContainerProps>) => {\n    const { className, teaserPerRow, children, columnClassName } = props;\n\n    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);\n\n    const columnClassNames = teaserPerRow\n        ? getGridClasses(teaserPerRow)\n        : getGridClasses(Children.count(children) || 1);\n\n    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);\n\n    return (\n        <div className={rowClassNames}>\n            {Children.map(children, child => {\n                return <div className={aggregatedColumnClassNames}>{child}</div>;\n            })}\n        </div>\n    );\n};\n\nexport default TeaserContainer;\n"],"names":["getGridClasses","amount","TeaserContainer","props","className","teaserPerRow","children","columnClassName","rowClassNames","classNames","columnClassNames","Children","aggregatedColumnClassNames","child","jsx"],"mappings":";;;AAIA,MAAMA,IAAiB,CAACC,MAAmB;AACvC,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GA6BMC,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,UAAAC,GAAU,iBAAAC,MAAoBJ,GAEzDK,IAAgBC,EAAW,oBAAoB,OAAO,gCAAgCL,CAAS,GAE/FM,IACAV,EADmBK,KAEJM,EAAS,MAAML,CAAQ,KAAK,CADhB,GAG3BM,IAA6BH,EAAWC,GAAkBH,CAAe;AAE/E,2BACK,OAAA,EAAI,WAAWC,GACX,UAAAG,EAAS,IAAIL,GAAU,CAAAO,MACb,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAC,GAAM,CAC7D,EAAA,CACL;AAER;"}
+{"version":3,"file":"TeaserContainer.js","sources":["../../../src/components/teaser/TeaserContainer.tsx"],"sourcesContent":["import { Children, type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst getGridClasses = (amount: number) => {\n    switch (amount) {\n        case 1:\n            return 'col-12';\n        case 2:\n            return 'col-12 col-sm-6';\n        case 3:\n            return 'col-12 col-md-4';\n        case 4:\n            return 'col-12 col-md-6 col-lg-3';\n        case 6:\n            return 'col-12 col-sm-4 col-lg-2';\n        case 12:\n            return 'col-12 col-sm-1';\n        default:\n            return 'col-12';\n    }\n};\n\nexport type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;\n\nexport type TeaserContainerProps = {\n    /**\n     * Defines how many children are rendered into a row.\n     *\n     * If \"teaserPerRow\" is not defined, the container tries to put all children in a row with regard to the\n     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid\n     * classes.\n     *\n     * It is recommended to define \"teasersPerRow\" when having more than 4 teasers.\n     *\n     * Possible values are: `1` `2` `3` `4` `6` `12`\n     */\n    teaserPerRow?: TeasersPerRow;\n\n    /**\n     * Optional string for additional classes added to each column of a child.\n     */\n    columnClassName?: string;\n\n    /**\n     * Optional string for additional classes added to the row.\n     */\n    className?: string;\n};\n\nconst TeaserContainer = (props: PropsWithChildren<TeaserContainerProps>) => {\n    const { className, teaserPerRow, children, columnClassName } = props;\n\n    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);\n\n    const columnClassNames = teaserPerRow\n        ? getGridClasses(teaserPerRow)\n        : getGridClasses(Children.count(children) || 1);\n\n    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);\n\n    return (\n        <div className={rowClassNames}>\n            {Children.map(children, child => (\n                <div className={aggregatedColumnClassNames}>{child}</div>\n            ))}\n        </div>\n    );\n};\n\nexport default TeaserContainer;\n"],"names":["getGridClasses","amount","TeaserContainer","props","className","teaserPerRow","children","columnClassName","rowClassNames","classNames","columnClassNames","Children","aggregatedColumnClassNames","jsx","child"],"mappings":";;;AAIA,MAAMA,IAAiB,CAACC,MAAmB;AACvC,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GA6BMC,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,UAAAC,GAAU,iBAAAC,MAAoBJ,GAEzDK,IAAgBC,EAAW,oBAAoB,OAAO,gCAAgCL,CAAS,GAE/FM,IACAV,EADmBK,KAEJM,EAAS,MAAML,CAAQ,KAAK,CADhB,GAG3BM,IAA6BH,EAAWC,GAAkBH,CAAe;AAE/E,SACI,gBAAAM,EAAC,OAAA,EAAI,WAAWL,GACX,YAAS,IAAIF,GAAU,CAAAQ,MACpB,gBAAAD,EAAC,OAAA,EAAI,WAAWD,GAA6B,UAAAE,GAAM,CACtD,GACL;AAER;"}