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

package/components/table/TableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableToolbar = ({ className, children }: PropsWithChildren<TableToolbarProps>) => (\n    <div className={classNames('table-toolbar', className)}>{children}</div>\n);\n\nexport default TableToolbar;\n"],"names":["TableToolbar","className","children","jsx","classNames"],"mappings":";;AAWA,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,UAAAC,EAAA,MAC/B,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAW,iBAAiBH,CAAS,GAAI,UAAAC,EAAA,CAAS;"}
+{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport classNames from '../../utils/classNames';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = ({ className, children }: PropsWithChildren<TableToolbarProps>) => {\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n\n    const [toolbarContainerRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    useLayoutEffect(() => {\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, leftColumns.length, rightColumns.length, toolbarInlineSize]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={toolbarRef}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n"],"names":["isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","className","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","toolbarContainerRef","toolbarInlineSize","useResizeObserver","toolbarColumns","leftColumns","column","rightColumns","useLayoutEffect","toolbarElement","nextHasWrappedRows","jsx","classNames","jsxs"],"mappings":";;;;;AAyBA,MAAMA,IAA8B,CAACC,MACjCC,EAAeD,CAAK,KAAKA,EAAM,SAASE,GAEtCC,IAAwB,CAACC,MAA4D;AACvF,QAAMC,IAAuC,CAAA;AAE7C,aAAWL,KAASM,EAAS,QAAQF,CAAQ,GAAG;AAC5C,QAAIH,EAAeD,CAAK,KAAKA,EAAM,SAASO,GAAU;AAClD,YAAMC,IAAkBL,EAAsBH,EAAM,MAAM,QAAQ;AAElE,UAAI,CAACQ;AACD,eAAO;AAGX,MAAAH,EAAQ,KAAK,GAAGG,CAAe;AAC/B;AAAA,IACJ;AAEA,QAAI,CAACT,EAA4BC,CAAK;AAClC,aAAO;AAGX,IAAAK,EAAQ,KAAKL,CAAK;AAAA,EACtB;AAEA,SAAOK;AACX,GAEMI,IAAsB,CAACC,MAA4C;AACrE,MAAI,CAACA;AACD,WAAO;AAGX,QAAMC,IAAe,MAAM,KAAKD,EAAiB,QAAQ;AAEzD,MAAIC,EAAa,SAAS;AACtB,WAAO;AAGX,QAAMC,KAAmBD,EAAa,CAAC,GAAG,aAAa,MAAMA,EAAa,CAAC,GAAG,gBAAgB;AAE9F,SAAOA,EAAa,KAAK,CAAAE,MAAeA,EAAY,YAAYA,EAAY,iBAAiBD,CAAe;AAChH,GAEME,IAAe,CAAC,EAAE,WAAAC,GAAW,UAAAX,QAAqD;AACpF,QAAMY,IAAaC,EAA8B,IAAI,GAC/CC,IAAeD,EAA8B,IAAI,GACjDE,IAAgBF,EAA8B,IAAI,GAElD,CAACG,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpD,CAACC,KAAuB,EAAE,YAAYC,EAAA,CAAmB,IAAIC,EAAA,GAE7DC,IAAiBvB,EAAsBC,CAAQ,GAE/CuB,KAAeD,KAAkB,CAAA,GAAI,OAAO,CAAAE,MAAUA,EAAO,MAAM,oBAAoB,OAAO,GAC9FC,KAAgBH,KAAkB,CAAA,GAAI,OAAO,CAAAE,MAAUA,EAAO,MAAM,oBAAoB,OAAO;AAiBrG,SAfAE,EAAgB,MAAM;AAClB,UAAMC,IAAiBf,EAAW;AAElC,IAAAe,GAAgB,UAAU,IAAI,yBAAyB;AAEvD,UAAMC,IACFvB,EAAoBc,EAAoB,OAAO,KAC/Cd,EAAoBS,EAAa,OAAO,KACxCT,EAAoBU,EAAc,OAAO;AAE7C,IAAAY,GAAgB,UAAU,OAAO,yBAAyB,GAE1DV,EAAkBW,CAAkB;AAAA,EACxC,GAAG,CAAC5B,GAAUuB,EAAY,QAAQE,EAAa,QAAQL,CAAiB,CAAC,GAEpEE,GAAgB,SAKjB,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAW,iBAAiBd,KAAkB,0BAA0BL,CAAS;AAAA,MAC5F,KAAKC;AAAA,MAEL,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,2BAA0B,KAAKZ,GACzC,UAAA;AAAA,QAAAI,EAAY,SAAS,KAClB,gBAAAM,EAAC,OAAA,EAAI,WAAU,4BAA2B,KAAKf,GAC1C,UAAAS,EAAA,CACL;AAAA,QAEHE,EAAa,SAAS,KACnB,gBAAAI,EAAC,SAAI,WAAU,6BAA4B,KAAKd,GAC3C,UAAAU,EAAA,CACL;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,EAAA,sBAnBI,OAAA,EAAI,WAAWK,EAAW,iBAAiBnB,CAAS,GAAI,UAAAX,GAAS;AAsBjF;"}

package/components/table/TableToolbarColumn.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type TableToolbarColumnHorizontalAlign = 'left' | 'right';
+export type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';
+export type TableToolbarColumnProps = {
+    /**
+     * Controls whether the column is rendered in the left or right toolbar group.
+     *
+     * @default 'left'
+     */
+    horizontalAlign?: TableToolbarColumnHorizontalAlign;
+    /**
+     * Vertically centers this toolbar column within its group.
+     *
+     * @default 'end'
+     */
+    verticalAlign?: TableToolbarColumnVerticalAlign;
+    /**
+     * Optional label rendered above the column content.
+     */
+    label?: ReactNode;
+    /**
+     * Optional class names for the column wrapper.
+     */
+    className?: string;
+    /**
+     * Adds the default toolbar separator styling for the column.
+     */
+    separator?: boolean;
+};
+declare const TableToolbarColumn: (props: PropsWithChildren<TableToolbarColumnProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableToolbarColumn;

package/components/table/TableToolbarColumn.js

@@ -0,0 +1,33 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import c from "../../utils/classNames.js";
+const p = (a) => {
+  const {
+    horizontalAlign: m,
+    label: l,
+    className: o,
+    separator: e,
+    verticalAlign: r = "end",
+    children: n,
+    ...s
+  } = a;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...s,
+      className: c(
+        "table-toolbar-column",
+        `align-self-${r}`,
+        e && "table-toolbar-column-separator",
+        o
+      ),
+      children: [
+        l ? /* @__PURE__ */ i("label", { className: "table-toolbar-label", children: l }) : null,
+        n
+      ]
+    }
+  );
+};
+export {
+  p as default
+};
+//# sourceMappingURL=TableToolbarColumn.js.map

package/components/table/TableToolbarColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbarColumn.js","sources":["../../../src/components/table/TableToolbarColumn.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TableToolbarColumnHorizontalAlign = 'left' | 'right';\nexport type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';\n\nexport type TableToolbarColumnProps = {\n    /**\n     * Controls whether the column is rendered in the left or right toolbar group.\n     *\n     * @default 'left'\n     */\n    horizontalAlign?: TableToolbarColumnHorizontalAlign;\n\n    /**\n     * Vertically centers this toolbar column within its group.\n     *\n     * @default 'end'\n     */\n    verticalAlign?: TableToolbarColumnVerticalAlign;\n\n    /**\n     * Optional label rendered above the column content.\n     */\n    label?: ReactNode;\n\n    /**\n     * Optional class names for the column wrapper.\n     */\n    className?: string;\n\n    /**\n     * Adds the default toolbar separator styling for the column.\n     */\n    separator?: boolean;\n};\n\nconst TableToolbarColumn = (props: PropsWithChildren<TableToolbarColumnProps>) => {\n    const {\n        horizontalAlign: _horizontalAlign,\n        label,\n        className,\n        separator,\n        verticalAlign = 'end',\n        children,\n        ...remainingProps\n    } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-toolbar-column',\n                `align-self-${verticalAlign}`,\n                separator && 'table-toolbar-column-separator',\n                className\n            )}\n        >\n            {label ? <label className='table-toolbar-label'>{label}</label> : null}\n            {children}\n        </div>\n    );\n};\n\nexport default TableToolbarColumn;\n"],"names":["TableToolbarColumn","props","_horizontalAlign","label","className","separator","verticalAlign","children","remainingProps","jsxs","classNames","jsx"],"mappings":";;AAsCA,MAAMA,IAAqB,CAACC,MAAsD;AAC9E,QAAM;AAAA,IACF,iBAAiBC;AAAA,IACjB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP;AAEJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACP;AAAA,QACA,cAAcJ,CAAa;AAAA,QAC3BD,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGH,UAAA;AAAA,QAAAD,IAAQ,gBAAAQ,EAAC,SAAA,EAAM,WAAU,uBAAuB,aAAM,IAAW;AAAA,QACjEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/components/table/TableViewToggles.d.ts

@@ -11,7 +11,7 @@ export type TableViewTogglesProps = {
      * - `'TABLE'`
      * - `TableViewToggles.VIEW_TYPE_TABLE`
      * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`
-     * - `TableViewToggles.VIEW_TYPE_CARD`
+     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`
      */
     viewType?: TableViewTogglesViewType;
     /**
@@ -24,9 +24,9 @@ export type TableViewTogglesProps = {
      * - `'TABLE'`
      * - `TableViewToggles.VIEW_TYPE_TABLE`
      * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`
-     * - `TableViewToggles.VIEW_TYPE_CARD`
+     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`
      *
-     * @default TableViewToggles.VIEW_TYPE
+     * @default TableViewToggles.VIEW_TYPE_TABLE
      */
     initialViewType?: TableViewTogglesViewType;
     /**
@@ -45,16 +45,34 @@ export type TableViewTogglesProps = {
     onViewTypeChange: (viewType: TableViewTogglesViewType) => void;
     /**
      * Optional tooltip content for table view button.
+     *
+     * @deprecated Use `tableViewLabel` instead.
      */
     tableViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional label content for the table view select item.
+     */
+    tableViewLabel?: string | ReactNode;
     /**
      * Optional tooltip content for single card view button.
+     *
+     * @deprecated Use `singleCardViewLabel` instead.
      */
     singleCardViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional label content for the single card view select item.
+     */
+    singleCardViewLabel?: string | ReactNode;
     /**
      * Optional tooltip content for multi card view button.
+     *
+     * @deprecated Use `multiCardsViewLabel` instead.
      */
     multiCardsViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional label content for the multi cards view select item.
+     */
+    multiCardsViewLabel?: string | ReactNode;
     /**
      * Disables all buttons.
      *

package/components/table/TableViewToggles.js

@@ -1,95 +1,67 @@
-import { jsxs as E, jsx as t } from "react/jsx-runtime";
-import { useState as f, useEffect as g } from "react";
-import { noop as _ } from "es-toolkit/compat";
-import u from "../../utils/classNames.js";
-import A from "../overlay/OverlayTrigger.js";
-import I from "../tooltip/Tooltip.js";
-const L = (i, e) => /* @__PURE__ */ t(
-  A,
-  {
-    placement: "bottom",
-    overlay: /* @__PURE__ */ t(I, { id: "tooltip", allowOnTouch: !0, children: i }),
-    children: e
-  }
-), h = {
+import { jsx as i } from "react/jsx-runtime";
+import { useState as y, useEffect as N } from "react";
+import { noop as u } from "es-toolkit/compat";
+import S from "../../utils/classNames.js";
+import f from "../selects/Select.js";
+const o = {
   TABLE: "rioglyph-table-view",
   SINGLE_CARD: "rioglyph-th-list",
   MULTI_CARDS: "rioglyph-split-view"
-}, w = (i) => {
-  const { viewType: e, currentViewType: s, disabledViewTypes: n, tooltipContent: l, onClick: r, disabled: p } = i;
-  if (n.includes(e))
-    return null;
-  const a = u(
-    "btn btn-default btn-icon-only",
-    p && "disabled pointer-events-none",
-    e === s && "active"
-  ), o = /* @__PURE__ */ t("button", { className: a, type: "button", onClick: () => r(e), children: /* @__PURE__ */ t("span", { className: `rioglyph ${h[e]}` }) });
-  return l ? L(l, o) : o;
-}, y = (i) => {
+}, s = (r) => {
   const {
-    viewType: e,
-    initialViewType: s = "TABLE",
-    disabledViewTypes: n = [],
-    onViewTypeChange: l = _,
-    tableViewTooltipContent: r,
-    singleCardViewTooltipContent: p,
-    multiCardsViewTooltipContent: a,
-    disabled: o = !1,
-    className: C,
-    ...V
-  } = i, [T, d] = f(s);
-  g(() => {
-    e && d(e);
-  }, [e]);
-  const c = (m) => {
-    d(m), l(m);
-  }, b = u(
-    "TableViewToggles",
-    "btn-group",
-    "display-flex",
-    "flex-row",
-    C && C
-  );
-  return /* @__PURE__ */ E("div", { ...V, className: b, children: [
-    /* @__PURE__ */ t(
-      w,
-      {
-        viewType: "TABLE",
-        currentViewType: T,
-        disabledViewTypes: n,
-        tooltipContent: r,
-        onClick: c,
-        disabled: o
-      }
-    ),
-    /* @__PURE__ */ t(
-      w,
-      {
-        viewType: "SINGLE_CARD",
-        currentViewType: T,
-        disabledViewTypes: n,
-        tooltipContent: p,
-        onClick: c,
-        disabled: o
-      }
-    ),
-    /* @__PURE__ */ t(
-      w,
-      {
-        viewType: "MULTI_CARDS",
-        currentViewType: T,
-        disabledViewTypes: n,
-        tooltipContent: a,
-        onClick: c,
-        disabled: o
-      }
-    )
-  ] });
+    viewType: l,
+    initialViewType: p = "TABLE",
+    disabledViewTypes: T = [],
+    onViewTypeChange: c = u,
+    tableViewTooltipContent: m,
+    tableViewLabel: d,
+    singleCardViewTooltipContent: w,
+    singleCardViewLabel: C,
+    multiCardsViewTooltipContent: L,
+    multiCardsViewLabel: g,
+    disabled: E = !1,
+    className: a,
+    ...I
+  } = r, [V, t] = y(p);
+  N(() => {
+    l && t(l);
+  }, [l]);
+  const b = (e) => {
+    t(e), c(e);
+  }, n = [
+    {
+      id: "TABLE",
+      label: d ?? m ?? "",
+      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.TABLE}` })
+    },
+    {
+      id: "SINGLE_CARD",
+      label: C ?? w ?? "",
+      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.SINGLE_CARD}` })
+    },
+    {
+      id: "MULTI_CARDS",
+      label: g ?? L ?? "",
+      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.MULTI_CARDS}` })
+    }
+  ], A = n.filter((e) => !T.includes(e.id)), _ = n.some((e) => e.label), h = S("TableViewToggles", a && a);
+  return /* @__PURE__ */ i("div", { ...I, className: h, children: /* @__PURE__ */ i("div", { className: "form-group margin-bottom-0", children: /* @__PURE__ */ i(
+    f,
+    {
+      options: A,
+      value: [V],
+      onChange: (e) => e && b(e.id),
+      disabled: E,
+      showSelectedItemIcon: !0,
+      pullRight: !0,
+      dropdownClassName: _ ? void 0 : "width-auto"
+    }
+  ) }) });
 };
-y.VIEW_TYPE_TABLE = "TABLE";
-y.VIEW_TYPE_SINGLE_CARD = "SINGLE_CARD";
-y.VIEW_TYPE_MULTI_CARDS = "MULTI_CARDS";
+s.VIEW_TYPE_TABLE = "TABLE";
+s.VIEW_TYPE_SINGLE_CARD = "SINGLE_CARD";
+s.VIEW_TYPE_MULTI_CARDS = "MULTI_CARDS";
 export {
-  y as default
+  s as default
 };
 //# sourceMappingURL=TableViewToggles.js.map

package/components/table/TableViewToggles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\n\n// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration\n\nconst wrapWithTooltip = (tooltipContent: ReactNode, element: JSX.Element) => (\n    <OverlayTrigger\n        placement='bottom'\n        overlay={\n            <Tooltip id='tooltip' allowOnTouch>\n                {tooltipContent}\n            </Tooltip>\n        }\n    >\n        {element}\n    </OverlayTrigger>\n);\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TypeButtonProps = {\n    viewType: TableViewTogglesViewType;\n    currentViewType: TableViewTogglesViewType;\n    disabledViewTypes: TableViewTogglesViewType[];\n    tooltipContent: ReactNode;\n    onClick: (vt: TableViewTogglesViewType) => void;\n    disabled: boolean;\n};\n\nconst TypeButton = (props: TypeButtonProps) => {\n    const { viewType, currentViewType, disabledViewTypes, tooltipContent, onClick, disabled } = props;\n\n    if (disabledViewTypes.includes(viewType)) {\n        return null;\n    }\n\n    const classes = classNames(\n        'btn btn-default btn-icon-only',\n        disabled && 'disabled pointer-events-none',\n        viewType === currentViewType && 'active'\n    );\n\n    const button = (\n        <button className={classes} type='button' onClick={() => onClick(viewType)}>\n            <span className={`rioglyph ${typeIcons[viewType]}`} />\n        </button>\n    );\n\n    return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_CARD`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_CARD`\n     *\n     * @default TableViewToggles.VIEW_TYPE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        singleCardViewTooltipContent,\n        multiCardsViewTooltipContent,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const wrapperClassNames = classNames(\n        'TableViewToggles',\n        'btn-group',\n        'display-flex',\n        'flex-row',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <TypeButton\n                viewType='TABLE'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={tableViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='SINGLE_CARD'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={singleCardViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='MULTI_CARDS'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={multiCardsViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["wrapWithTooltip","tooltipContent","element","jsx","OverlayTrigger","Tooltip","typeIcons","TypeButton","props","viewType","currentViewType","disabledViewTypes","onClick","disabled","classes","classNames","button","TableViewToggles","initialViewType","onViewTypeChange","noop","tableViewTooltipContent","singleCardViewTooltipContent","multiCardsViewTooltipContent","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","wrapperClassNames","jsxs"],"mappings":";;;;;;AASA,MAAMA,IAAkB,CAACC,GAA2BC,MAChD,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,SACI,gBAAAD,EAACE,GAAA,EAAQ,IAAG,WAAU,cAAY,IAC7B,UAAAJ,GACL;AAAA,IAGH,UAAAC;AAAA,EAAA;AACL,GAGEI,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAWMC,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,mBAAAC,GAAmB,gBAAAV,GAAgB,SAAAW,GAAS,UAAAC,MAAaL;AAE5F,MAAIG,EAAkB,SAASF,CAAQ;AACnC,WAAO;AAGX,QAAMK,IAAUC;AAAA,IACZ;AAAA,IACAF,KAAY;AAAA,IACZJ,MAAaC,KAAmB;AAAA,EAAA,GAG9BM,sBACD,UAAA,EAAO,WAAWF,GAAS,MAAK,UAAS,SAAS,MAAMF,EAAQH,CAAQ,GACrE,UAAA,gBAAAN,EAAC,UAAK,WAAW,YAAYG,EAAUG,CAAQ,CAAC,IAAI,EAAA,CACxD;AAGJ,SAAOR,IAAiBD,EAAgBC,GAAgBe,CAAM,IAAIA;AACtE,GAkFMC,IAAmB,CAACT,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAS,IAAkB;AAAA,IAClB,mBAAAP,IAAoB,CAAA;AAAA,IACpB,kBAAAQ,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,UAAAV,IAAW;AAAA,IACX,WAAAW;AAAA,IACA,GAAGC;AAAA,EAAA,IACHjB,GAEE,CAACkB,GAAkBC,CAAmB,IAAIC,EAASV,CAAe;AAGxE,EAAAW,EAAU,MAAM;AACZ,IAAIpB,KACAkB,EAAoBlB,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMqB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBZ,EAAiBY,CAAE;AAAA,EACvB,GAEMC,IAAoBjB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAS,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAS,EAAC,OAAA,EAAK,GAAGR,GAAgB,WAAWO,GAChC,UAAA;AAAA,IAAA,gBAAA7B;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBU;AAAA,QAChB,SAASS;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBW;AAAA,QAChB,SAASQ;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBY;AAAA,QAChB,SAASO;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAGAI,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}
+{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select, { type SelectOption } from '../selects/Select';\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TableViewToggleOption = SelectOption & {\n    id: TableViewTogglesViewType;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     *\n     * @default TableViewToggles.VIEW_TYPE_TABLE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     *\n     * @deprecated Use `tableViewLabel` instead.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the table view select item.\n     */\n    tableViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     *\n     * @deprecated Use `singleCardViewLabel` instead.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the single card view select item.\n     */\n    singleCardViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     *\n     * @deprecated Use `multiCardsViewLabel` instead.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the multi cards view select item.\n     */\n    multiCardsViewLabel?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        tableViewLabel,\n        singleCardViewTooltipContent,\n        singleCardViewLabel,\n        multiCardsViewTooltipContent,\n        multiCardsViewLabel,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const allOptions: TableViewToggleOption[] = [\n        {\n            id: 'TABLE',\n            label: tableViewLabel ?? tableViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.TABLE}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.SINGLE_CARD}`} />,\n        },\n        {\n            id: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.MULTI_CARDS}`} />,\n        },\n    ];\n\n    const options = allOptions.filter(option => !disabledViewTypes.includes(option.id));\n    const hasOptionLabels = allOptions.some(option => option.label);\n\n    const wrapperClassNames = classNames('TableViewToggles', className && className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='form-group margin-bottom-0'>\n                <Select\n                    options={options}\n                    value={[internalViewType]}\n                    onChange={item => item && setViewType(item.id as TableViewTogglesViewType)}\n                    disabled={disabled}\n                    showSelectedItemIcon\n                    pullRight\n                    dropdownClassName={!hasOptionLabels ? 'width-auto' : undefined}\n                />\n            </div>\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["typeIcons","TableViewToggles","props","viewType","initialViewType","disabledViewTypes","onViewTypeChange","noop","tableViewTooltipContent","tableViewLabel","singleCardViewTooltipContent","singleCardViewLabel","multiCardsViewTooltipContent","multiCardsViewLabel","disabled","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","allOptions","jsx","options","option","hasOptionLabels","wrapperClassNames","classNames","Select","item"],"mappings":";;;;;AAMA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GA2GMC,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC,IAAoB,CAAA;AAAA,IACpB,kBAAAC,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAkBC,CAAmB,IAAIC,EAASf,CAAe;AAGxE,EAAAgB,EAAU,MAAM;AACZ,IAAIjB,KACAe,EAAoBf,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMkB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBhB,EAAiBgB,CAAE;AAAA,EACvB,GAEMC,IAAsC;AAAA,IACxC;AAAA,MACI,IAAI;AAAA,MACJ,OAAOd,KAAkBD,KAA2B;AAAA,MACpD,MAAM,gBAAAgB,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,KAAK,GAAA,CAAI;AAAA,IAAA;AAAA,IAE1D;AAAA,MACI,IAAI;AAAA,MACJ,OAAOW,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAc,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,IAAI;AAAA,MACJ,OAAOa,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAY,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,EAChE,GAGEyB,IAAUF,EAAW,OAAO,CAAAG,MAAU,CAACrB,EAAkB,SAASqB,EAAO,EAAE,CAAC,GAC5EC,IAAkBJ,EAAW,KAAK,CAAAG,MAAUA,EAAO,KAAK,GAExDE,IAAoBC,EAAW,oBAAoBd,KAAaA,CAAS;AAE/E,SACI,gBAAAS,EAAC,SAAK,GAAGR,GAAgB,WAAWY,GAChC,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,8BACX,UAAA,gBAAAA;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,SAAAL;AAAA,MACA,OAAO,CAACR,CAAgB;AAAA,MACxB,UAAU,CAAAc,MAAQA,KAAQV,EAAYU,EAAK,EAA8B;AAAA,MACzE,UAAAjB;AAAA,MACA,sBAAoB;AAAA,MACpB,WAAS;AAAA,MACT,mBAAoBa,IAAiC,SAAf;AAAA,IAAe;AAAA,EAAA,GAE7D,EAAA,CACJ;AAER;AAGA1B,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}

package/components/table/context/TableInteractionContext.d.ts

@@ -0,0 +1,26 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { TableRowData, TableRowId, TableSortDirection } from '../Table.types';
+/**
+ * User-facing table interaction state and callbacks consumed by header/body cells.
+ *
+ * These values are conceptually different from the normalized render model:
+ * they describe selection, sorting, and row activation/click behavior rather than
+ * the structural table draft.
+ */
+export type TableInteractionContextValue<RowType extends TableRowData> = {
+    showSelectionColumn?: boolean;
+    selectedRowIdSet: Set<TableRowId>;
+    selectionHeaderContent?: ReactNode;
+    isAllRowsSelected?: boolean;
+    isSomeRowsSelected?: boolean;
+    onToggleAllSelection?: () => void;
+    onToggleRowSelection?: (rowId: TableRowId) => void;
+    activeRowId?: TableRowId;
+    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;
+    onRowClick?: (row: RowType, rowIndex: number) => void;
+    isClickable: boolean;
+    onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
+};
+export declare const TableInteractionContext: import('react').Context<TableInteractionContextValue<TableRowData> | null>;
+export declare const useOptionalTableInteractionContext: <RowType extends TableRowData>() => TableInteractionContextValue<RowType> | null;
+export declare const useTableInteractionContext: <RowType extends TableRowData>() => TableInteractionContextValue<RowType>;

package/components/table/context/TableInteractionContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as e } from "react";
+const n = t(null), a = () => e(n);
+export {
+  n as TableInteractionContext,
+  a as useOptionalTableInteractionContext
+};
+//# sourceMappingURL=TableInteractionContext.js.map

package/components/table/context/TableInteractionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableInteractionContext.js","sources":["../../../../src/components/table/context/TableInteractionContext.tsx"],"sourcesContent":["import { createContext, useContext, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';\n\nimport type { TableRowData, TableRowId, TableSortDirection } from '../Table.types';\n\n/**\n * User-facing table interaction state and callbacks consumed by header/body cells.\n *\n * These values are conceptually different from the normalized render model:\n * they describe selection, sorting, and row activation/click behavior rather than\n * the structural table draft.\n */\nexport type TableInteractionContextValue<RowType extends TableRowData> = {\n    showSelectionColumn?: boolean;\n    selectedRowIdSet: Set<TableRowId>;\n    selectionHeaderContent?: ReactNode;\n    isAllRowsSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    onToggleAllSelection?: () => void;\n    onToggleRowSelection?: (rowId: TableRowId) => void;\n    activeRowId?: TableRowId;\n    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    isClickable: boolean;\n    onSortChange?: (\n        columnKey: string,\n        direction: TableSortDirection,\n        event: ReactMouseEvent<HTMLButtonElement>\n    ) => void;\n};\n\nexport const TableInteractionContext = createContext<TableInteractionContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableInteractionContext = <RowType extends TableRowData>() =>\n    useContext(TableInteractionContext) as TableInteractionContextValue<RowType> | null;\n\nexport const useTableInteractionContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableInteractionContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table interaction context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableInteractionContext","createContext","useOptionalTableInteractionContext","useContext"],"mappings":";AA8BO,MAAMA,IAA0BC,EAAiE,IAAI,GAE/FC,IAAqC,MAC9CC,EAAWH,CAAuB;"}

package/components/table/context/TableLayoutContext.d.ts

@@ -0,0 +1,25 @@
+import { PointerEvent as ReactPointerEvent, RefObject, UIEvent as ReactUIEvent } from 'react';
+import { DragEndEvent } from '@dnd-kit/core';
+/**
+ * Layout and column-behavior context.
+ *
+ * This groups scroll synchronization, sticky-column metadata, and drag/resize
+ * callbacks so header/footer/cell components do not need the full render model
+ * just to participate in layout behavior.
+ */
+export type TableLayoutContextValue = {
+    handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;
+    tableHeadRowRef: RefObject<HTMLDivElement>;
+    tableFooterRowRef: RefObject<HTMLDivElement>;
+    draggableColumnKeys?: string[];
+    lastResizableColumnKey?: string;
+    resettableColumnKeys?: Set<string>;
+    stickyLeftColumnCount?: number;
+    stickyFooter?: boolean;
+    onColumnDragEnd?: (event: DragEndEvent) => void;
+    onColumnResizeReset?: (columnKey: string) => void;
+    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+export declare const TableLayoutContext: import('react').Context<TableLayoutContextValue | null>;
+export declare const useOptionalTableLayoutContext: () => TableLayoutContextValue | null;
+export declare const useTableLayoutContext: () => TableLayoutContextValue;

package/components/table/context/TableLayoutContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(null), a = () => o(e);
+export {
+  e as TableLayoutContext,
+  a as useOptionalTableLayoutContext
+};
+//# sourceMappingURL=TableLayoutContext.js.map

package/components/table/context/TableLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayoutContext.js","sources":["../../../../src/components/table/context/TableLayoutContext.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    type PointerEvent as ReactPointerEvent,\n    type RefObject,\n    type UIEvent as ReactUIEvent,\n} from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\n/**\n * Layout and column-behavior context.\n *\n * This groups scroll synchronization, sticky-column metadata, and drag/resize\n * callbacks so header/footer/cell components do not need the full render model\n * just to participate in layout behavior.\n */\nexport type TableLayoutContextValue = {\n    handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;\n    tableHeadRowRef: RefObject<HTMLDivElement>;\n    tableFooterRowRef: RefObject<HTMLDivElement>;\n    draggableColumnKeys?: string[];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys?: Set<string>;\n    stickyLeftColumnCount?: number;\n    stickyFooter?: boolean;\n    onColumnDragEnd?: (event: DragEndEvent) => void;\n    onColumnResizeReset?: (columnKey: string) => void;\n    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;\n};\n\nexport const TableLayoutContext = createContext<TableLayoutContextValue | null>(null);\n\nexport const useOptionalTableLayoutContext = () => useContext(TableLayoutContext);\n\nexport const useTableLayoutContext = () => {\n    const context = useOptionalTableLayoutContext();\n\n    if (!context) {\n        throw new Error('Table layout context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableLayoutContext","createContext","useOptionalTableLayoutContext","useContext"],"mappings":";AA8BO,MAAMA,IAAqBC,EAA8C,IAAI,GAEvEC,IAAgC,MAAMC,EAAWH,CAAkB;"}

package/components/table/context/TableRenderConfigContext.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { MotionProps } from 'motion/react';
+import { TableCellClassName, TableExpandedRowAnimation, TableRowClassName, TableRowData, TableViewType } from '../Table.types';
+import { TableViewCardClasses } from '../model/tableView.types';
+/**
+ * Render-facing table configuration.
+ *
+ * These values come from public table props and are forwarded into row/cell/header
+ * components during rendering. They are separate from the normalized render model,
+ * which lives in `TableRenderContext`.
+ */
+export type TableRenderConfigContextValue<RowType extends TableRowData> = {
+    viewType: TableViewType;
+    isTableView: boolean;
+    cardClasses: TableViewCardClasses;
+    noRowsState: ReactNode;
+    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);
+    rowClassName?: TableRowClassName<RowType>;
+    cellClassName?: TableCellClassName<RowType>;
+    rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);
+    expandedRowAnimation?: TableExpandedRowAnimation;
+    virtualizedRows?: boolean;
+    virtualizationOverscan?: number;
+};
+export declare const TableRenderConfigContext: import('react').Context<TableRenderConfigContextValue<TableRowData> | null>;
+export declare const useOptionalTableRenderConfigContext: <RowType extends TableRowData>() => TableRenderConfigContextValue<RowType> | null;
+export declare const useTableRenderConfigContext: <RowType extends TableRowData>() => TableRenderConfigContextValue<RowType>;

package/components/table/context/TableRenderConfigContext.js

@@ -0,0 +1,7 @@
+import { createContext as e, useContext as t } from "react";
+const n = e(null), r = () => t(n);
+export {
+  n as TableRenderConfigContext,
+  r as useOptionalTableRenderConfigContext
+};
+//# sourceMappingURL=TableRenderConfigContext.js.map

package/components/table/context/TableRenderConfigContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRenderConfigContext.js","sources":["../../../../src/components/table/context/TableRenderConfigContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\nimport type { MotionProps } from 'motion/react';\n\nimport type {\n    TableCellClassName,\n    TableExpandedRowAnimation,\n    TableRowClassName,\n    TableRowData,\n    TableViewType,\n} from '../Table.types';\nimport type { TableViewCardClasses } from '../model/tableView.types';\n\n/**\n * Render-facing table configuration.\n *\n * These values come from public table props and are forwarded into row/cell/header\n * components during rendering. They are separate from the normalized render model,\n * which lives in `TableRenderContext`.\n */\nexport type TableRenderConfigContextValue<RowType extends TableRowData> = {\n    viewType: TableViewType;\n    isTableView: boolean;\n    cardClasses: TableViewCardClasses;\n    noRowsState: ReactNode;\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);\n    rowClassName?: TableRowClassName<RowType>;\n    cellClassName?: TableCellClassName<RowType>;\n    rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);\n    expandedRowAnimation?: TableExpandedRowAnimation;\n    virtualizedRows?: boolean;\n    virtualizationOverscan?: number;\n};\n\nexport const TableRenderConfigContext = createContext<TableRenderConfigContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderConfigContext = <RowType extends TableRowData>() =>\n    useContext(TableRenderConfigContext) as TableRenderConfigContextValue<RowType> | null;\n\nexport const useTableRenderConfigContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableRenderConfigContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table render config context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableRenderConfigContext","createContext","useOptionalTableRenderConfigContext","useContext"],"mappings":";AAiCO,MAAMA,IAA2BC,EAAkE,IAAI,GAEjGC,IAAsC,MAC/CC,EAAWH,CAAwB;"}

package/components/table/context/TableRenderContext.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+import { TableColumnDefinition, TableHorizontalAlign, TableRowData, TableRowId, TableVerticalAlign } from '../Table.types';
+import { TableViewHeader } from '../model/tableView.types';
+export type RenderHeaderColumn<RowType extends TableRowData> = {
+    id: string;
+    columnKey?: string;
+    label: ReactNode;
+    icon?: string;
+    filter?: ReactNode;
+    hideLabel?: boolean;
+    width?: number | string;
+    mobileLabel?: string;
+    horizontalAlign?: TableHorizontalAlign;
+    verticalAlign?: TableVerticalAlign;
+    headerClassName?: string;
+    hideOnMobile?: boolean;
+    sortable?: boolean;
+    draggable?: boolean;
+    resizeable?: boolean;
+    minResizeWidth?: number;
+    maxResizeWidth?: number;
+    row: number;
+    colSpan: number;
+    rowSpan: number;
+    source?: RowType;
+};
+/**
+ * Mutable draft of the current render pass.
+ *
+ * The table keeps React composability, but still needs a normalized table model
+ * for features such as header placement, footer detection, virtualization, and
+ * stable body-row rendering.
+ *
+ * The table therefore works in two internal stages:
+ * 1. Header/body/footer sub-components register the structure they produce into this draft.
+ * 2. `Table` promotes that draft into stable draft state and renders from that.
+ *
+ * The draft is intentionally recreated on every render pass and must not be treated
+ * as persistent state.
+ */
+export type TableRenderDraft<RowType extends TableRowData> = {
+    headerColumns: RenderHeaderColumn<RowType>[];
+    bodyRows: {
+        rowId: TableRowId;
+        rowIndex: number;
+        kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';
+        disabled?: boolean;
+        render: () => ReactNode;
+    }[];
+    bodyMaxHeight?: string;
+    hasFooter?: boolean;
+    hasFooterCells?: boolean;
+    hasExpandableRows?: boolean;
+};
+export type RenderBodyRow<RowType extends TableRowData> = Omit<TableRenderDraft<RowType>['bodyRows'][number], 'render'>;
+/**
+ * Structural render context.
+ *
+ * This context only carries the normalized render model built from the current
+ * render pass. Public render configuration such as `rowClassName` or card/table
+ * view mode lives in `TableRenderConfigContext`.
+ */
+export type TableRenderContextValue<RowType extends TableRowData> = {
+    header?: TableViewHeader<RowType>;
+    columns: RenderHeaderColumn<RowType>[];
+    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;
+    columnIndexByKey: Map<string, number>;
+    bodyRows: RenderBodyRow<RowType>[];
+    renderBodyRow?: (row: RenderBodyRow<RowType>) => ReactNode;
+    renderDraft: TableRenderDraft<RowType>;
+    hasFooterCells?: boolean;
+    hasExpandableRows?: boolean;
+    /**
+     * Switches body rows into the registration pass.
+     *
+     * While this flag is true, row components register their normalized metadata in
+     * `renderDraft.bodyRows` and return `null` instead of rendering DOM directly.
+     * `TableBody` then performs the second pass by rendering the collected rows
+     * through `renderBodyRow(...)`.
+     */
+    isRegisteringBodyRows?: boolean;
+};
+export declare const TableRenderContext: import('react').Context<TableRenderContextValue<TableRowData> | null>;
+export declare const useOptionalTableRenderContext: <RowType extends TableRowData>() => TableRenderContextValue<RowType> | null;
+export declare const useTableRenderContext: <RowType extends TableRowData>() => TableRenderContextValue<RowType>;

package/components/table/context/TableRenderContext.js

@@ -0,0 +1,7 @@
+import { createContext as e, useContext as t } from "react";
+const n = e(null), r = () => t(n);
+export {
+  n as TableRenderContext,
+  r as useOptionalTableRenderContext
+};
+//# sourceMappingURL=TableRenderContext.js.map

package/components/table/context/TableRenderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRenderContext.js","sources":["../../../../src/components/table/context/TableRenderContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\n\nimport type {\n    TableColumnDefinition,\n    TableHorizontalAlign,\n    TableRowData,\n    TableRowId,\n    TableVerticalAlign,\n} from '../Table.types';\nimport type { TableViewHeader } from '../model/tableView.types';\n\nexport type RenderHeaderColumn<RowType extends TableRowData> = {\n    id: string;\n    columnKey?: string;\n    label: ReactNode;\n    icon?: string;\n    filter?: ReactNode;\n    hideLabel?: boolean;\n    width?: number | string;\n    mobileLabel?: string;\n    horizontalAlign?: TableHorizontalAlign;\n    verticalAlign?: TableVerticalAlign;\n    headerClassName?: string;\n    hideOnMobile?: boolean;\n    sortable?: boolean;\n    draggable?: boolean;\n    resizeable?: boolean;\n    minResizeWidth?: number;\n    maxResizeWidth?: number;\n    row: number;\n    colSpan: number;\n    rowSpan: number;\n    source?: RowType;\n};\n\n/**\n * Mutable draft of the current render pass.\n *\n * The table keeps React composability, but still needs a normalized table model\n * for features such as header placement, footer detection, virtualization, and\n * stable body-row rendering.\n *\n * The table therefore works in two internal stages:\n * 1. Header/body/footer sub-components register the structure they produce into this draft.\n * 2. `Table` promotes that draft into stable draft state and renders from that.\n *\n * The draft is intentionally recreated on every render pass and must not be treated\n * as persistent state.\n */\nexport type TableRenderDraft<RowType extends TableRowData> = {\n    headerColumns: RenderHeaderColumn<RowType>[];\n    bodyRows: {\n        rowId: TableRowId;\n        rowIndex: number;\n        kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';\n        disabled?: boolean;\n        render: () => ReactNode;\n    }[];\n    bodyMaxHeight?: string;\n    hasFooter?: boolean;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n};\n\nexport type RenderBodyRow<RowType extends TableRowData> = Omit<TableRenderDraft<RowType>['bodyRows'][number], 'render'>;\n\n/**\n * Structural render context.\n *\n * This context only carries the normalized render model built from the current\n * render pass. Public render configuration such as `rowClassName` or card/table\n * view mode lives in `TableRenderConfigContext`.\n */\nexport type TableRenderContextValue<RowType extends TableRowData> = {\n    header?: TableViewHeader<RowType>;\n    columns: RenderHeaderColumn<RowType>[];\n    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;\n    columnIndexByKey: Map<string, number>;\n    bodyRows: RenderBodyRow<RowType>[];\n    renderBodyRow?: (row: RenderBodyRow<RowType>) => ReactNode;\n    renderDraft: TableRenderDraft<RowType>;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n    /**\n     * Switches body rows into the registration pass.\n     *\n     * While this flag is true, row components register their normalized metadata in\n     * `renderDraft.bodyRows` and return `null` instead of rendering DOM directly.\n     * `TableBody` then performs the second pass by rendering the collected rows\n     * through `renderBodyRow(...)`.\n     */\n    isRegisteringBodyRows?: boolean;\n};\n\nexport const TableRenderContext = createContext<TableRenderContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderContext = <RowType extends TableRowData>() =>\n    useContext(TableRenderContext) as TableRenderContextValue<RowType> | null;\n\nexport const useTableRenderContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableRenderContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table render context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableRenderContext","createContext","useOptionalTableRenderContext","useContext"],"mappings":";AA8FO,MAAMA,IAAqBC,EAA4D,IAAI,GAErFC,IAAgC,MACzCC,EAAWH,CAAkB;"}

package/components/table/context/TableStructureContext.d.ts

@@ -0,0 +1,31 @@
+import { TableHtmlAttributes, TableRowData, TableRowId } from '../Table.types';
+export type TableSection = 'header' | 'body' | 'footer';
+export type TableBodyContextValue = {
+    nextRowIndex: () => number;
+};
+export type TableHeaderContextValue = {
+    nextHeaderRowIndex: () => number;
+};
+export type TableHeaderRowContextValue = {
+    row: number;
+};
+export type TableRenderRowContextValue = {
+    nextColumnIndex: (explicitColumnIndex?: number, span?: number) => number;
+    rowIndex: number;
+    rowId: TableRowId;
+    rowData: TableRowData;
+};
+export declare const TableSectionContext: import('react').Context<TableSection | null>;
+export declare const TableBodyContext: import('react').Context<TableBodyContextValue | null>;
+export declare const TableHeaderContext: import('react').Context<TableHeaderContextValue | null>;
+export declare const TableHeaderRowContext: import('react').Context<TableHeaderRowContextValue | null>;
+export declare const TableRowContext: import('react').Context<TableRenderRowContextValue | null>;
+export declare const useOptionalTableSection: () => TableSection | null;
+export declare const useTableBodyContext: () => TableBodyContextValue | null;
+export declare const useTableHeaderContext: () => TableHeaderContextValue | null;
+export declare const useTableHeaderRowContext: () => TableHeaderRowContextValue | null;
+export declare const useTableRowContext: <RowType extends TableRowData>() => (Omit<TableRenderRowContextValue, "rowData"> & {
+    rowData: RowType;
+}) | null;
+export declare const isTableHtmlAttribute: (key: string) => boolean;
+export declare const extractTableHtmlAttributes: (props: Record<string, unknown>) => TableHtmlAttributes;