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

package/components/table/model/resolveTableClassConfig.d.ts

@@ -0,0 +1,48 @@
+import { TableCardsStyleSettings } from '../TableCard';
+import { TableViewType } from '../Table.types';
+import { TableViewFlags } from './tableViewModel.types';
+type TableStyleClassSwitches = {
+    hasShadow: boolean;
+    hasBorder: boolean;
+    hasRounded: boolean;
+};
+type TableCardClasses = {
+    rowClassName?: string;
+    cellClassName?: string;
+    labelClassName?: string;
+    contentClassName?: string;
+};
+type ResolveTableClassConfigProps = {
+    viewType: TableViewType;
+    hover?: boolean;
+    shadow?: boolean;
+    border?: boolean;
+    rounded?: boolean;
+    className?: string;
+    cardsStyle?: TableCardsStyleSettings;
+};
+type ResolveTableBaseClassNameProps = {
+    viewType: TableViewType;
+    condensed?: boolean;
+    striped?: boolean;
+    gridLines?: boolean;
+    className?: string;
+    tableUseOverflow: boolean;
+    flags: TableViewFlags;
+    hasHover: boolean;
+    styleClassSwitches: TableStyleClassSwitches;
+};
+export declare const resolveTableStyleClassSwitches: (props: {
+    shadow?: boolean;
+    border?: boolean;
+    rounded?: boolean;
+    className?: string;
+}) => TableStyleClassSwitches;
+export declare const resolveTableClassConfig: (props: ResolveTableClassConfigProps) => {
+    hasHover: boolean;
+    isTableView: boolean;
+    styleClassSwitches: TableStyleClassSwitches;
+    cardClasses: TableCardClasses;
+};
+export declare const resolveTableBaseClassName: (props: ResolveTableBaseClassNameProps) => string;
+export {};

package/components/table/model/resolveTableClassConfig.js

@@ -0,0 +1,64 @@
+import { mergeClassNameOverrides as c } from "../../../utils/mergeClassNameOverrides.js";
+import b from "../../../utils/classNames.js";
+const m = {
+  TABLE: "table-view-table",
+  SINGLE_CARD: "table-view-single-card",
+  MULTI_CARDS: "table-view-multi-cards"
+}, w = (s) => s?.split(" ").map((l) => l.trim()).filter(Boolean) ?? [], C = (s) => s === "shadow" || s.startsWith("shadow-") ? "shadow" : s === "border-radius" || s.startsWith("border-radius-") ? "rounded" : s, u = (s) => {
+  const { shadow: l, border: r, rounded: o, className: t } = s, d = b(l && "shadow", r && "border", o && "rounded"), i = w(t).map(C).join(" "), e = c(d, i), a = new Set(w(e));
+  return {
+    hasShadow: !!l && a.has("shadow"),
+    hasBorder: !!r && a.has("border"),
+    hasRounded: !!o && a.has("rounded")
+  };
+}, f = (s) => {
+  const { viewType: l, hover: r = !1, shadow: o = !1, border: t = !0, rounded: d = !0, className: i, cardsStyle: e } = s, a = l === "TABLE", n = r, h = u({ shadow: o, border: t, rounded: d, className: i });
+  return {
+    hasHover: n,
+    isTableView: a,
+    styleClassSwitches: h,
+    cardClasses: {
+      rowClassName: a ? void 0 : b(
+        h.hasShadow && "shadow-default",
+        h.hasBorder && "border",
+        e?.className
+      ),
+      cellClassName: a ? void 0 : e?.rowClassName,
+      labelClassName: a ? void 0 : e?.labelClassName,
+      contentClassName: a ? void 0 : e?.contentClassName
+    }
+  };
+}, N = (s) => {
+  const {
+    viewType: l,
+    condensed: r = !1,
+    striped: o = !1,
+    gridLines: t = !1,
+    className: d,
+    tableUseOverflow: i,
+    flags: e,
+    hasHover: a,
+    styleClassSwitches: n
+  } = s;
+  return b(
+    "table",
+    m[l],
+    a && "table-hover",
+    r && "table-condensed",
+    e.isTableView && t && "table-grid-lines",
+    e.isTableView && o && "table-striped",
+    e.isTableView && n.hasShadow && "shadow-default",
+    e.isTableView && n.hasBorder && "border",
+    n.hasRounded && "table-rounded",
+    e.isTableView && (e.hasHeader ? "table-has-head" : "table-no-head"),
+    e.isTableView && e.hasFooter && "table-has-footer",
+    e.isTableView && i && "table-allow-horizontal-overflow",
+    d
+  );
+};
+export {
+  N as resolveTableBaseClassName,
+  f as resolveTableClassConfig,
+  u as resolveTableStyleClassSwitches
+};
+//# sourceMappingURL=resolveTableClassConfig.js.map

package/components/table/model/resolveTableClassConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveTableClassConfig.js","sources":["../../../../src/components/table/model/resolveTableClassConfig.ts"],"sourcesContent":["import { mergeClassNameOverrides } from '../../../mergeClassNameOverrides';\nimport classNames from '../../../utils/classNames';\nimport type { TableCardsStyleSettings } from '../TableCard';\nimport type { TableViewType } from '../Table.types';\nimport type { TableViewFlags } from './tableViewModel.types';\n\ntype TableStyleClassSwitches = {\n    hasShadow: boolean;\n    hasBorder: boolean;\n    hasRounded: boolean;\n};\n\ntype TableCardClasses = {\n    rowClassName?: string;\n    cellClassName?: string;\n    labelClassName?: string;\n    contentClassName?: string;\n};\n\ntype ResolveTableClassConfigProps = {\n    viewType: TableViewType;\n    hover?: boolean;\n    shadow?: boolean;\n    border?: boolean;\n    rounded?: boolean;\n    className?: string;\n    cardsStyle?: TableCardsStyleSettings;\n};\n\ntype ResolveTableBaseClassNameProps = {\n    viewType: TableViewType;\n    condensed?: boolean;\n    striped?: boolean;\n    gridLines?: boolean;\n    className?: string;\n    tableUseOverflow: boolean;\n    flags: TableViewFlags;\n    hasHover: boolean;\n    styleClassSwitches: TableStyleClassSwitches;\n};\n\nconst viewTypeClassNameMap: Record<TableViewType, string> = {\n    TABLE: 'table-view-table',\n    SINGLE_CARD: 'table-view-single-card',\n    MULTI_CARDS: 'table-view-multi-cards',\n};\n\nconst splitClassNameTokens = (value?: string) =>\n    value\n        ?.split(' ')\n        .map(classNameToken => classNameToken.trim())\n        .filter(Boolean) ?? [];\n\nconst normalizeTableStyleOverrideToken = (token: string) => {\n    if (token === 'shadow' || token.startsWith('shadow-')) {\n        return 'shadow';\n    }\n\n    if (token === 'border-radius' || token.startsWith('border-radius-')) {\n        return 'rounded';\n    }\n\n    return token;\n};\n\nexport const resolveTableStyleClassSwitches = (props: {\n    shadow?: boolean;\n    border?: boolean;\n    rounded?: boolean;\n    className?: string;\n}): TableStyleClassSwitches => {\n    const { shadow, border, rounded, className } = props;\n    const defaultStyleClasses = classNames(shadow && 'shadow', border && 'border', rounded && 'rounded');\n\n    const overrideClasses = splitClassNameTokens(className).map(normalizeTableStyleOverrideToken).join(' ');\n    const mergedStyleClasses = mergeClassNameOverrides(defaultStyleClasses, overrideClasses);\n    const mergedStyleClassSet = new Set(splitClassNameTokens(mergedStyleClasses));\n\n    return {\n        hasShadow: !!shadow && mergedStyleClassSet.has('shadow'),\n        hasBorder: !!border && mergedStyleClassSet.has('border'),\n        hasRounded: !!rounded && mergedStyleClassSet.has('rounded'),\n    };\n};\n\nexport const resolveTableClassConfig = (\n    props: ResolveTableClassConfigProps\n): {\n    hasHover: boolean;\n    isTableView: boolean;\n    styleClassSwitches: TableStyleClassSwitches;\n    cardClasses: TableCardClasses;\n} => {\n    const { viewType, hover = false, shadow = false, border = true, rounded = true, className, cardsStyle } = props;\n    const isTableView = viewType === 'TABLE';\n    const hasHover = hover;\n    const styleClassSwitches = resolveTableStyleClassSwitches({ shadow, border, rounded, className });\n\n    return {\n        hasHover,\n        isTableView,\n        styleClassSwitches,\n        cardClasses: {\n            rowClassName: !isTableView\n                ? classNames(\n                      styleClassSwitches.hasShadow && 'shadow-default',\n                      styleClassSwitches.hasBorder && 'border',\n                      cardsStyle?.className\n                  )\n                : undefined,\n            cellClassName: !isTableView ? cardsStyle?.rowClassName : undefined,\n            labelClassName: !isTableView ? cardsStyle?.labelClassName : undefined,\n            contentClassName: !isTableView ? cardsStyle?.contentClassName : undefined,\n        },\n    };\n};\n\nexport const resolveTableBaseClassName = (props: ResolveTableBaseClassNameProps) => {\n    const {\n        viewType,\n        condensed = false,\n        striped = false,\n        gridLines = false,\n        className,\n        tableUseOverflow,\n        flags,\n        hasHover,\n        styleClassSwitches,\n    } = props;\n\n    return classNames(\n        'table',\n        viewTypeClassNameMap[viewType],\n        hasHover && 'table-hover',\n        condensed && 'table-condensed',\n        flags.isTableView && gridLines && 'table-grid-lines',\n        flags.isTableView && striped && 'table-striped',\n        flags.isTableView && styleClassSwitches.hasShadow && 'shadow-default',\n        flags.isTableView && styleClassSwitches.hasBorder && 'border',\n        styleClassSwitches.hasRounded && 'table-rounded',\n        flags.isTableView && (flags.hasHeader ? 'table-has-head' : 'table-no-head'),\n        flags.isTableView && flags.hasFooter && 'table-has-footer',\n        flags.isTableView && tableUseOverflow && 'table-allow-horizontal-overflow',\n        className\n    );\n};\n"],"names":["viewTypeClassNameMap","splitClassNameTokens","value","classNameToken","normalizeTableStyleOverrideToken","token","resolveTableStyleClassSwitches","props","shadow","border","rounded","className","defaultStyleClasses","classNames","overrideClasses","mergedStyleClasses","mergeClassNameOverrides","mergedStyleClassSet","resolveTableClassConfig","viewType","hover","cardsStyle","isTableView","hasHover","styleClassSwitches","resolveTableBaseClassName","condensed","striped","gridLines","tableUseOverflow","flags"],"mappings":";;AAyCA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAEMC,IAAuB,CAACC,MAC1BA,GACM,MAAM,GAAG,EACV,IAAI,CAAAC,MAAkBA,EAAe,MAAM,EAC3C,OAAO,OAAO,KAAK,CAAA,GAEtBC,IAAmC,CAACC,MAClCA,MAAU,YAAYA,EAAM,WAAW,SAAS,IACzC,WAGPA,MAAU,mBAAmBA,EAAM,WAAW,gBAAgB,IACvD,YAGJA,GAGEC,IAAiC,CAACC,MAKhB;AAC3B,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,MAAcJ,GACzCK,IAAsBC,EAAWL,KAAU,UAAUC,KAAU,UAAUC,KAAW,SAAS,GAE7FI,IAAkBb,EAAqBU,CAAS,EAAE,IAAIP,CAAgC,EAAE,KAAK,GAAG,GAChGW,IAAqBC,EAAwBJ,GAAqBE,CAAe,GACjFG,IAAsB,IAAI,IAAIhB,EAAqBc,CAAkB,CAAC;AAE5E,SAAO;AAAA,IACH,WAAW,CAAC,CAACP,KAAUS,EAAoB,IAAI,QAAQ;AAAA,IACvD,WAAW,CAAC,CAACR,KAAUQ,EAAoB,IAAI,QAAQ;AAAA,IACvD,YAAY,CAAC,CAACP,KAAWO,EAAoB,IAAI,SAAS;AAAA,EAAA;AAElE,GAEaC,IAA0B,CACnCX,MAMC;AACD,QAAM,EAAE,UAAAY,GAAU,OAAAC,IAAQ,IAAO,QAAAZ,IAAS,IAAO,QAAAC,IAAS,IAAM,SAAAC,IAAU,IAAM,WAAAC,GAAW,YAAAU,EAAA,IAAed,GACpGe,IAAcH,MAAa,SAC3BI,IAAWH,GACXI,IAAqBlB,EAA+B,EAAE,QAAAE,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW;AAEhG,SAAO;AAAA,IACH,UAAAY;AAAA,IACA,aAAAD;AAAA,IACA,oBAAAE;AAAA,IACA,aAAa;AAAA,MACT,cAAeF,IAMT,SALAT;AAAA,QACIW,EAAmB,aAAa;AAAA,QAChCA,EAAmB,aAAa;AAAA,QAChCH,GAAY;AAAA,MAAA;AAAA,MAGtB,eAAgBC,IAAyC,SAA3BD,GAAY;AAAA,MAC1C,gBAAiBC,IAA2C,SAA7BD,GAAY;AAAA,MAC3C,kBAAmBC,IAA6C,SAA/BD,GAAY;AAAA,IAAmB;AAAA,EACpE;AAER,GAEaI,IAA4B,CAAClB,MAA0C;AAChF,QAAM;AAAA,IACF,UAAAY;AAAA,IACA,WAAAO,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,WAAAjB;AAAA,IACA,kBAAAkB;AAAA,IACA,OAAAC;AAAA,IACA,UAAAP;AAAA,IACA,oBAAAC;AAAA,EAAA,IACAjB;AAEJ,SAAOM;AAAA,IACH;AAAA,IACAb,EAAqBmB,CAAQ;AAAA,IAC7BI,KAAY;AAAA,IACZG,KAAa;AAAA,IACbI,EAAM,eAAeF,KAAa;AAAA,IAClCE,EAAM,eAAeH,KAAW;AAAA,IAChCG,EAAM,eAAeN,EAAmB,aAAa;AAAA,IACrDM,EAAM,eAAeN,EAAmB,aAAa;AAAA,IACrDA,EAAmB,cAAc;AAAA,IACjCM,EAAM,gBAAgBA,EAAM,YAAY,mBAAmB;AAAA,IAC3DA,EAAM,eAAeA,EAAM,aAAa;AAAA,IACxCA,EAAM,eAAeD,KAAoB;AAAA,IACzClB;AAAA,EAAA;AAER;"}

package/components/table/model/tableViewModel.types.d.ts

@@ -0,0 +1,153 @@
+import { ReactNode } from 'react';
+import { TableColumnDefinition, TableHorizontalAlign, TableSortDirection, TableVerticalAlign } from '../Table.types';
+export type TableViewColumn<RowType extends Record<string, unknown>> = {
+    key: string;
+    label: ReactNode;
+    mobileLabel: string;
+    horizontalAlign?: TableHorizontalAlign;
+    className?: string;
+    headerClassName?: string;
+    hideOnMobile?: boolean;
+    sortable?: boolean;
+    sortDirection?: TableSortDirection;
+    areaName: string;
+    source: TableColumnDefinition<RowType>;
+};
+export type TableViewHeaderColumn<RowType extends Record<string, unknown>> = {
+    key: string | number;
+    columnKey?: string;
+    label: ReactNode;
+    icon?: string;
+    filter?: ReactNode;
+    hideLabel?: boolean;
+    horizontalAlign?: TableHorizontalAlign;
+    verticalAlign?: TableVerticalAlign;
+    className?: string;
+    headerClassName?: string;
+    hideOnMobile?: boolean;
+    draggable?: boolean;
+    resizeable?: boolean;
+    sortable?: boolean;
+    sortDirection?: TableSortDirection;
+    rowStart: number;
+    rowSpan: number;
+    columnStart: number;
+    colSpan: number;
+    source?: TableColumnDefinition<RowType>;
+};
+export type TableViewHeader<RowType extends Record<string, unknown>> = {
+    rowCount: number;
+    totalColumnCount: number;
+    columns: TableViewHeaderColumn<RowType>[];
+};
+export type TableViewCell = {
+    key: string;
+    content: ReactNode;
+    mobileLabel: string;
+    horizontalAlign?: TableHorizontalAlign;
+    verticalAlign?: TableVerticalAlign;
+    className?: string;
+    contentClassName?: string;
+    resolvedClassName?: string;
+    hideOnMobile?: boolean;
+    columnStart: number;
+    colSpan: number;
+    preventRowClick?: boolean;
+};
+export type TableViewFooterCell = {
+    key: string;
+    content: ReactNode;
+    horizontalAlign?: TableHorizontalAlign;
+    verticalAlign?: TableVerticalAlign;
+    className?: string;
+    hideOnMobile?: boolean;
+    columnStart: number;
+    colSpan: number;
+};
+export type TableDataViewRow<RowType extends Record<string, unknown>> = {
+    kind: 'data';
+    key: string | number;
+    rowIndex: number;
+    data: RowType;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+    noHover?: boolean;
+    resolvedClassName?: string;
+    selected?: boolean;
+    cells: TableViewCell[];
+};
+export type TableExpandedDataViewRow<RowType extends Record<string, unknown>> = {
+    kind: 'expanded';
+    key: string | number;
+    parentKey?: string | number;
+    rowIndex: number;
+    data: RowType;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+    noHover?: boolean;
+    resolvedClassName?: string;
+    selected?: boolean;
+    cells: TableViewCell[];
+};
+export type TableSpacerViewRow = {
+    kind: 'spacer';
+    key: string | number;
+    className?: string;
+    noHover?: boolean;
+};
+export type TableExpandedContentViewRow<RowType extends Record<string, unknown>> = {
+    kind: 'expanded-full-width';
+    key: string | number;
+    parentKey?: string | number;
+    content: ReactNode;
+    className?: string;
+    noHover?: boolean;
+};
+export type TableGroupViewRow = {
+    kind: 'group';
+    key: string | number;
+    content: ReactNode;
+    sticky?: boolean;
+    className?: string;
+    noHover?: boolean;
+};
+export type TableGroupFooterViewRow = {
+    kind: 'group-footer';
+    key: string | number;
+    content: ReactNode;
+    className?: string;
+    noHover?: boolean;
+};
+export type TableEmptyViewRow = {
+    kind: 'empty';
+    key: 'empty';
+    content: ReactNode;
+};
+export type TableViewRow<RowType extends Record<string, unknown>> = TableDataViewRow<RowType> | TableExpandedDataViewRow<RowType> | TableSpacerViewRow | TableExpandedContentViewRow<RowType> | TableGroupViewRow | TableGroupFooterViewRow | TableEmptyViewRow;
+export type TableViewFooter = {
+    className?: string;
+    content?: ReactNode;
+    cells?: TableViewFooterCell[];
+};
+export type TableViewCardClasses = {
+    rowClassName?: string;
+    cellClassName?: string;
+    labelClassName?: string;
+    contentClassName?: string;
+};
+export type TableViewFlags = {
+    hasHeader: boolean;
+    hasFooter: boolean;
+    isClickable: boolean;
+    isTableView: boolean;
+};
+export type TableViewModel<RowType extends Record<string, unknown>> = {
+    columns: TableViewColumn<RowType>[];
+    header?: TableViewHeader<RowType>;
+    rows: TableViewRow<RowType>[];
+    footer?: TableViewFooter;
+    flags: TableViewFlags;
+    cardClasses: TableViewCardClasses;
+};

package/components/table/native/TableCol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCol.js","sources":["../../../../src/components/table/native/TableCol.tsx"],"sourcesContent":["export type ColumnDetails = { [key: string]: number };\nexport type ColumnDetailsMap = { [key: string]: ColumnDetails };\n\ntype TableColProps = {\n    /**\n     * The width of the column as part of the column details object used for the TableSettingsDialog.\n     */\n    columnDetails?: ColumnDetails;\n\n    /**\n     * Additional classes added to the col tag element.\n     */\n    className?: string;\n};\n\nconst TableCol = ({ columnDetails, className = '', ...remainingProps }: TableColProps) => {\n    const style = columnDetails?.width\n        ? {\n              minWidth: columnDetails.width,\n              width: columnDetails.width,\n          }\n        : {};\n\n    return <col {...remainingProps} style={style} className={className} />;\n};\n\nexport default TableCol;\n"],"names":["TableCol","columnDetails","className","remainingProps","style","jsx"],"mappings":";AAeA,MAAMA,IAAW,CAAC,EAAE,eAAAC,GAAe,WAAAC,IAAY,IAAI,GAAGC,QAAoC;AACtF,QAAMC,IAAQH,GAAe,QACvB;AAAA,IACI,UAAUA,EAAc;AAAA,IACxB,OAAOA,EAAc;AAAA,EAAA,IAEzB,CAAA;AAEN,SAAO,gBAAAI,EAAC,OAAA,EAAK,GAAGF,GAAgB,OAAAC,GAAc,WAAAF,GAAsB;AACxE;"}

package/components/table/{TableHead.js → native/TableHead.js}

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import b from "../../utils/classNames.js";
-import l from "./SortArrows.js";
+import b from "../../../utils/classNames.js";
+import l from "../SortArrows.js";
 const y = (o) => {
   const {
     column: t,

package/components/table/native/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","sources":["../../../../src/components/table/native/TableHead.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../../utils/classNames';\nimport SortArrows from '../SortArrows';\n\ntype TableHeadProps = {\n    /**\n     * The unique name of the column used as identifier\n     */\n    column?: string;\n\n    /**\n     * The label that shall be rendered in the table head next to the sorting icons.\n     */\n    label?: string | React.ReactElement;\n\n    /**\n     * The string title of a column used as native title attribute on the th tag.\n     */\n    title?: string;\n\n    /**\n     * The sorting key stored as data attribute for later usage for click events.\n     */\n    sortBy?: string;\n\n    /**\n     * The column sorting direction.\n     */\n    sortDir?: string;\n\n    /**\n     * The click handler for the th tag.\n     */\n    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;\n\n    /**\n     * Additional class names assigned to the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableHead = (props: PropsWithChildren<TableHeadProps>) => {\n    const {\n        column,\n        title,\n        label,\n        sortBy,\n        sortDir,\n        onClick = () => {},\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const tableHeadClassNames = classNames('user-select-none', 'sort-column', className);\n\n    const labelString = typeof label === 'string' ? (label as string) : '';\n    const thTitle = title ?? labelString;\n\n    return (\n        <th\n            {...remainingProps}\n            className={tableHeadClassNames}\n            onClick={onClick}\n            data-field={column}\n            data-sortby={column}\n            title={thTitle}\n        >\n            {label && (\n                <span>\n                    {column !== undefined && sortBy === column ? <SortArrows direction={sortDir} /> : <SortArrows />}\n                    <span>{label}</span>\n                </span>\n            )}\n            {children}\n        </th>\n    );\n};\n\nexport default TableHead;\n"],"names":["TableHead","props","column","title","label","sortBy","sortDir","onClick","className","children","remainingProps","tableHeadClassNames","classNames","jsxs","jsx","SortArrows"],"mappings":";;;AA0CA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAsBC,EAAW,oBAAoB,eAAeJ,CAAS;AAKnF,SACI,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGH;AAAA,MACJ,WAAWC;AAAA,MACX,SAAAJ;AAAA,MACA,cAAYL;AAAA,MACZ,eAAaA;AAAA,MACb,OATQC,MADI,OAAOC,KAAU,WAAYA,IAAmB;AAAA,MAY3D,UAAA;AAAA,QAAAA,uBACI,QAAA,EACI,UAAA;AAAA,UAAAF,MAAW,UAAaG,MAAWH,IAAS,gBAAAY,EAACC,KAAW,WAAWT,EAAA,CAAS,IAAK,gBAAAQ,EAACC,GAAA,CAAA,CAAW;AAAA,UAC9F,gBAAAD,EAAC,UAAM,UAAAV,EAAA,CAAM;AAAA,QAAA,GACjB;AAAA,QAEHK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/components/table/native/TableSettingsColumnButtons.js

@@ -0,0 +1,59 @@
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { noop as a } from "es-toolkit/compat";
+import o from "../../button/Button.js";
+const g = (s) => {
+  const {
+    column: n = "",
+    index: t = 0,
+    columnDetails: m,
+    columnOrder: u = [],
+    openColumnsDetails: p = {},
+    disabled: i,
+    onMoveColumn: r = a,
+    onOpenDetails: c = a
+  } = s;
+  return /* @__PURE__ */ b("div", { className: "table-settings-item-item-buttons", children: [
+    !i && /* @__PURE__ */ l(
+      o,
+      {
+        disabled: t === 0,
+        bsStyle: o.MUTED,
+        bsSize: o.SM,
+        iconOnly: !0,
+        iconName: "rioglyph-arrow-up",
+        "aria-label": "move column up",
+        onClick: (e) => {
+          e.preventDefault(), e.stopPropagation(), r(n, t - 1, !0);
+        }
+      }
+    ),
+    !i && /* @__PURE__ */ l(
+      o,
+      {
+        disabled: t === u.length - 1,
+        bsStyle: o.MUTED,
+        bsSize: o.SM,
+        iconOnly: !0,
+        iconName: "rioglyph-arrow-down",
+        "aria-label": "move column down",
+        onClick: (e) => {
+          e.preventDefault(), e.stopPropagation(), r(n, t + 1, !0);
+        }
+      }
+    ),
+    m && /* @__PURE__ */ l(
+      o,
+      {
+        bsStyle: o.MUTED,
+        bsSize: o.SM,
+        iconOnly: !0,
+        iconName: p[n] ? "rioglyph-remove" : "rioglyph-width",
+        onClick: () => c(n)
+      }
+    )
+  ] });
+};
+export {
+  g as TableSettingsColumnButtons
+};
+//# sourceMappingURL=TableSettingsColumnButtons.js.map

package/components/table/native/TableSettingsColumnButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettingsColumnButtons.js","sources":["../../../../src/components/table/native/TableSettingsColumnButtons.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/compat';\n\nimport type { TableColumnDetails } from './TableSettingsDialog';\nimport Button from '../../button/Button';\n\nexport type TableSettingsColumnButtonsProps = {\n    column: string;\n    index: number;\n    columnOrder: string[];\n    openColumnsDetails: Record<string, string>;\n    disabled?: boolean;\n    columnDetails?: TableColumnDetails;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (column: string) => void;\n};\n\nexport const TableSettingsColumnButtons = (props: TableSettingsColumnButtonsProps) => {\n    const {\n        column = '',\n        index = 0,\n        columnDetails,\n        columnOrder = [],\n        openColumnsDetails = {},\n        disabled,\n        onMoveColumn = noop,\n        onOpenDetails = noop,\n    } = props;\n\n    return (\n        <div className='table-settings-item-item-buttons'>\n            {!disabled && (\n                <Button\n                    disabled={index === 0}\n                    bsStyle={Button.MUTED}\n                    bsSize={Button.SM}\n                    iconOnly\n                    iconName='rioglyph-arrow-up'\n                    aria-label='move column up'\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index - 1, true);\n                    }}\n                />\n            )}\n            {!disabled && (\n                <Button\n                    disabled={index === columnOrder.length - 1}\n                    bsStyle={Button.MUTED}\n                    bsSize={Button.SM}\n                    iconOnly\n                    iconName='rioglyph-arrow-down'\n                    aria-label='move column down'\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index + 1, true);\n                    }}\n                />\n            )}\n            {columnDetails && (\n                <Button\n                    bsStyle={Button.MUTED}\n                    bsSize={Button.SM}\n                    iconOnly\n                    iconName={openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width'}\n                    onClick={() => onOpenDetails(column)}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnButtons","props","column","index","columnDetails","columnOrder","openColumnsDetails","disabled","onMoveColumn","noop","onOpenDetails","jsxs","jsx","Button","event"],"mappings":";;;AAgBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,eAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,oBAAAC,IAAqB,CAAA;AAAA,IACrB,UAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,eAAAC,IAAgBD;AAAA,EAAA,IAChBR;AAEJ,SACI,gBAAAU,EAAC,OAAA,EAAI,WAAU,oCACV,UAAA;AAAA,IAAA,CAACJ,KACE,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,UAAUV,MAAU;AAAA,QACpB,SAASU,EAAO;AAAA,QAChB,QAAQA,EAAO;AAAA,QACf,UAAQ;AAAA,QACR,UAAS;AAAA,QACT,cAAW;AAAA,QACX,SAAS,CAAAC,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNN,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGP,CAACI,KACE,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,UAAUV,MAAUE,EAAY,SAAS;AAAA,QACzC,SAASQ,EAAO;AAAA,QAChB,QAAQA,EAAO;AAAA,QACf,UAAQ;AAAA,QACR,UAAS;AAAA,QACT,cAAW;AAAA,QACX,SAAS,CAAAC,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNN,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGPC,KACG,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,SAASA,EAAO;AAAA,QAChB,QAAQA,EAAO;AAAA,QACf,UAAQ;AAAA,QACR,UAAUP,EAAmBJ,CAAM,IAAI,oBAAoB;AAAA,QAC3D,SAAS,MAAMQ,EAAcR,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GAER;AAER;"}

package/components/table/{TableSettingsColumnDetails.js → native/TableSettingsColumnDetails.js}

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { noop as m } from "es-toolkit/compat";
-import x from "../../utils/classNames.js";
-import N from "../slider/Slider.js";
+import x from "../../../utils/classNames.js";
+import N from "../../slider/Slider.js";
 const j = (r) => {
   const {
     width: e = 0,

package/components/table/native/TableSettingsColumnDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettingsColumnDetails.js","sources":["../../../../src/components/table/native/TableSettingsColumnDetails.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../../utils/classNames';\nimport Slider from '../../slider/Slider';\nimport type { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog';\n\nexport type TableSettingsColumnDetailsProps = TableColumnDetails & {\n    column: string;\n    maxColumnWidth: number;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n};\n\nexport const TableSettingsColumnDetails = (props: TableSettingsColumnDetailsProps) => {\n    const {\n        width = 0,\n        defaultWidth = 0,\n        maxWidth,\n        column,\n        maxColumnWidth,\n        onColumnWidthChange = noop,\n        onResetColumnWidth = noop,\n    } = props;\n\n    const handleWidthInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = event.target.value ? Number.parseInt(event.target.value, 10) : 0;\n        const max = maxWidth || maxColumnWidth;\n        const value = Math.min(parsedValue, max);\n        onColumnWidthChange(column, value);\n    };\n\n    const handleColumnWidthChange = (value: number) => onColumnWidthChange(column, value);\n\n    const handleResetColumnWidth = () => onResetColumnWidth(column);\n\n    const resetWidthButtonClassNames = classNames(\n        'btn',\n        'btn-muted',\n        'btn-icon-only',\n        'btn-sm',\n        'margin-left-10',\n        width === defaultWidth && 'disabled'\n    );\n\n    return (\n        <div className='table-settings-item-body'>\n            <Slider\n                className='margin-bottom-0'\n                value={width}\n                minValue={0}\n                maxValue={maxWidth || maxColumnWidth}\n                step={1}\n                onChange={handleColumnWidthChange}\n            />\n            <div className={resetWidthButtonClassNames} role='button' onClick={handleResetColumnWidth}>\n                <span className='rioglyph rioglyph-revert' />\n            </div>\n            <div className='column-width-input'>\n                <div className='input-group'>\n                    <input\n                        className='form-control text-right padding-right-5 no-controls'\n                        type='number'\n                        value={width || ''}\n                        min={0}\n                        max={maxWidth || maxColumnWidth}\n                        onChange={handleWidthInputChange}\n                    />\n                    <div className='input-group-addon'>px</div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnDetails","props","width","defaultWidth","maxWidth","column","maxColumnWidth","onColumnWidthChange","noop","onResetColumnWidth","handleWidthInputChange","event","parsedValue","value","handleColumnWidthChange","handleResetColumnWidth","resetWidthButtonClassNames","classNames","jsxs","jsx","Slider"],"mappings":";;;;AAcO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC,IAAsBC;AAAA,IACtB,oBAAAC,IAAqBD;AAAA,EAAA,IACrBP,GAEES,IAAyB,CAACC,MAAyC;AACrE,UAAMC,IAAcD,EAAM,OAAO,QAAQ,OAAO,SAASA,EAAM,OAAO,OAAO,EAAE,IAAI,GAE7EE,IAAQ,KAAK,IAAID,GADXR,KAAYE,CACe;AACvC,IAAAC,EAAoBF,GAAQQ,CAAK;AAAA,EACrC,GAEMC,IAA0B,CAACD,MAAkBN,EAAoBF,GAAQQ,CAAK,GAE9EE,IAAyB,MAAMN,EAAmBJ,CAAM,GAExDW,IAA6BC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAUC,KAAgB;AAAA,EAAA;AAG9B,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,4BACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAOlB;AAAA,QACP,UAAU;AAAA,QACV,UAAUE,KAAYE;AAAA,QACtB,MAAM;AAAA,QACN,UAAUQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAA4B,MAAK,UAAS,SAASD,GAC/D,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B,GAC/C;AAAA,sBACC,OAAA,EAAI,WAAU,sBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,OAAOjB,KAAS;AAAA,UAChB,KAAK;AAAA,UACL,KAAKE,KAAYE;AAAA,UACjB,UAAUI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBAAoB,UAAA,KAAA,CAAE;AAAA,IAAA,EAAA,CACzC,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/components/table/{TableSettingsDialog.d.ts → native/TableSettingsDialog.d.ts}

@@ -27,7 +27,7 @@ export type TableColumnsSettings = {
 export type TableColumnDetailsMap = Record<string, TableColumnDetails>;
 export type ColumnLabelStrings = Record<string, string>;
 export type TableSettingsItemProps = {
-    columnLabels?: any;
+    columnLabels?: Record<string, React.ReactNode>;
     autoLabel?: string | React.ReactNode;
     disabledColumns?: string[];
     columnOrder: string[];
@@ -36,14 +36,13 @@ export type TableSettingsItemProps = {
     columnsDetails: TableColumnDetailsMap;
     columnLabelStrings?: ColumnLabelStrings;
     openColumnsDetails?: Record<string, string>;
-    updateColumnLabelStrings?: boolean;
     onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;
     onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;
     onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;
     onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;
     onToggleHideColumn?: (column: string) => void;
 };
-type TableSettingsDialogProps = {
+export type TableSettingsDialogProps = {
     /**
      * Defined whether to show the dialog or not.
      *

package/components/table/native/TableSettingsDialog.js

@@ -0,0 +1,216 @@
+import { jsxs as j, Fragment as Te, jsx as l } from "react/jsx-runtime";
+import { useState as c, useRef as B, useEffect as z } from "react";
+import { isEqual as H } from "es-toolkit/predicate";
+import { isEmpty as V, mapValues as He } from "es-toolkit/compat";
+import { noop as S } from "es-toolkit/function";
+import { arrayMove as Le } from "@dnd-kit/sortable";
+import Fe from "../../../utils/classNames.js";
+import Ie from "../../dialog/Dialog.js";
+import Ae from "../../clearableInput/ClearableInput.js";
+import { TableSettingsDialogFooter as Me } from "./TableSettingsDialogFooter.js";
+import { TableSettingsListContainer as Ee } from "./TableSettingsListContainer.js";
+import { filterColumns as Je } from "./TableSettingsListItem.js";
+const O = 0, _e = 1e3, $e = (L) => {
+  const {
+    show: i = !1,
+    title: D,
+    subtitle: m,
+    className: a,
+    defaultColumnOrder: h = [],
+    defaultHiddenColumns: d = [],
+    defaultColumnDetails: F = {},
+    columnOrder: x = [],
+    hiddenColumns: v = [],
+    columnLabels: P = {},
+    disabledColumns: G = [],
+    columnsDetails: y = {},
+    autoLabel: Q = "",
+    applyButtonText: Y,
+    cancelButtonText: Z,
+    closeButtonText: $,
+    resetButtonText: ee,
+    onColumnChange: b = S,
+    onColumnDetailsChange: U = S,
+    onDiscard: te = S,
+    onApply: ne = S,
+    onHide: W,
+    columnSearchValue: I = "",
+    onSearchChange: w = S,
+    searchPlaceholder: se,
+    notFoundMessage: oe = "",
+    immediateChange: g = !1
+  } = L, [A, N] = c(I), [C, R] = c(x), [f, M] = c(v || d), [u, T] = c(y), [k, le] = c({}), [q, re] = c({}), [ie, p] = c(!1), [ae, E] = c(!1), [Ve, J] = c(!1), _ = B(F), K = B(i);
+  z(() => {
+    (i && !K.current || !i) && N(I), R(x), M(v), T(y);
+    const s = x ?? h, n = v ?? d, o = y ?? {}, r = !H(s, h) || !H(n, d) || de(o);
+    p(r), K.current = i;
+  }, [
+    I,
+    JSON.stringify(x),
+    JSON.stringify(v),
+    JSON.stringify(y),
+    JSON.stringify(h),
+    JSON.stringify(d),
+    i
+  ]);
+  const de = (e) => {
+    const t = (n) => {
+      if (!n)
+        return O;
+      const { width: o, defaultWidth: r } = n;
+      return Number.isFinite(o) ? o : Number.isFinite(r) ? r : O;
+    }, s = (n) => Number.isFinite(n?.defaultWidth) ? n?.defaultWidth : O;
+    return V(_.current) ? Object.values(e).some(
+      (n) => t(n) !== s(n)
+    ) : Object.keys(_.current).some((n) => {
+      const o = _.current[n], r = e[n];
+      return t(r) !== t(o);
+    });
+  }, ue = () => {
+    J(!1);
+  }, ce = (e, t, s) => {
+    const n = C.filter((o) => o !== e);
+    n.splice(t, 0, e), R(n), J(s ? !!e : !1), p(!0), g && b(n, f), setTimeout(ue, 500);
+  }, me = () => E(!0), he = () => E(!1), Ce = (e) => V(F) ? He(e, (t) => {
+    if (Number.isFinite(t.defaultWidth)) {
+      const r = t.defaultWidth;
+      return { ...t, width: r };
+    }
+    const { width: s, defaultWidth: n, ...o } = t;
+    return o;
+  }) : F, fe = () => {
+    const e = Ce(u);
+    R(h), M(d), N(""), p(!1), E(!1), V(u) || T(e), g && (w(""), b(h, d, e));
+  }, ge = () => {
+    w(""), te(), W();
+  }, pe = () => {
+    N(""), w(""), b(C, f, u), ne(C, f, u), W();
+  }, De = (e) => {
+    const s = f.includes(e) ? f.filter((n) => n !== e) : [...f, e];
+    M(s), p(!0), g && b(C, s);
+  }, be = (e) => {
+    const t = e.toLowerCase();
+    N(() => (w(t), t));
+  }, Se = (e, t) => {
+    const s = u[e], n = s ? { ...s, width: t } : {
+      width: t,
+      defaultWidth: O,
+      maxWidth: _e
+    }, o = { ...u, [e]: n };
+    T(o), p(!0), g && U(e, n);
+  }, Oe = (e) => {
+    const t = u[e];
+    if (!t)
+      return;
+    const s = {
+      ...t,
+      width: t.defaultWidth ?? O
+    }, n = { ...u, [e]: s };
+    T(n), g && U(e, s);
+  }, xe = (e) => {
+    const t = { ...k };
+    t[e] ? delete t[e] : t[e] = e, le(t);
+  }, ve = (e, t) => {
+    const { active: s, over: n } = e, o = s.id, r = n?.id;
+    if (o === r)
+      return;
+    const Ne = t.indexOf(String(o)), Re = t.indexOf(String(r)), X = Le(t, Ne, Re);
+    R(X), J(!0), p(!0), g && b(X, f);
+  }, ye = () => {
+    const e = {
+      columnLabels: P,
+      autoLabel: Q,
+      disabledColumns: G,
+      columnOrder: C,
+      hiddenColumns: f,
+      columnSearchValue: A,
+      columnsDetails: u,
+      columnLabelStrings: q,
+      openColumnsDetails: k,
+      onMoveColumn: ce,
+      onOpenDetails: xe,
+      onColumnWidthChange: Se,
+      onResetColumnWidth: Oe,
+      onToggleHideColumn: De
+    }, t = C.filter(
+      (n) => Je(A, n, q)
+    ), s = !H(t, C);
+    return /* @__PURE__ */ j("div", { children: [
+      /* @__PURE__ */ l("div", { className: "table-settings-search", children: /* @__PURE__ */ j("div", { className: "input-group width-100pct", children: [
+        /* @__PURE__ */ l("span", { className: "input-group-addon", children: /* @__PURE__ */ l("span", { className: "rioglyph rioglyph-search" }) }),
+        /* @__PURE__ */ l(
+          Ae,
+          {
+            value: A,
+            onChange: be,
+            placeholder: se
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ l("div", { className: "table-settings-body", children: s ? /* @__PURE__ */ l(
+        Ee,
+        {
+          items: C,
+          onSortEnd: ve,
+          itemProps: { ...e }
+        }
+      ) : /* @__PURE__ */ l("div", { className: "text-center text-color-gray", children: oe }) })
+    ] });
+  }, We = () => /* @__PURE__ */ l(
+    Me,
+    {
+      hasChanged: ie,
+      isResetAll: ae,
+      immediateChange: g,
+      resetButtonText: ee,
+      closeButtonText: $,
+      cancelButtonText: Z,
+      applyButtonText: Y,
+      onHide: W,
+      onResetColumnChanges: me,
+      onDiscardChanges: ge,
+      onApplyChanges: pe,
+      onConfirmResetColumnChanges: fe,
+      onCancelResetColumnChanges: he
+    }
+  );
+  if (!i)
+    return null;
+  const we = Fe("TableSettingsDialog", a);
+  return /* @__PURE__ */ j(Te, { children: [
+    i && /* @__PURE__ */ l(je, { columnLabels: P, setRenderedLabels: re }),
+    /* @__PURE__ */ l(
+      Ie,
+      {
+        show: i,
+        title: D,
+        subtitle: m,
+        onClose: W,
+        body: ye(),
+        footer: We(),
+        className: we
+      }
+    )
+  ] });
+}, je = ({
+  columnLabels: L,
+  setRenderedLabels: i
+}) => {
+  const D = B(null);
+  return z(() => {
+    if (!D.current)
+      return;
+    const m = {};
+    [...D.current.children].forEach((a) => {
+      const h = a.getAttribute("data-key");
+      if (h) {
+        const d = a.textContent?.replace(/\r?\n|\r/g, "").toLowerCase();
+        d && (m[h] = d);
+      }
+    }), i((a) => H(a, m) ? a : m);
+  }), /* @__PURE__ */ l("div", { hidden: !0, ref: D, children: Object.entries(L).map(([m, a]) => /* @__PURE__ */ l("div", { "data-key": m, children: a }, m)) });
+};
+export {
+  $e as default
+};
+//# sourceMappingURL=TableSettingsDialog.js.map