@rio-cloud/rio-uikit 2.2.0 → 2.2.1

package/components/table/TableSettingsDialog.js

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

package/components/table/TableSettingsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsDialog.js","sources":["../../../src/components/table/TableSettingsDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useRef } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, mapValues } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nimport classNames from '../../utils/classNames';\nimport Dialog from '../dialog/Dialog';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { TableSettingsDialogFooter } from './TableSettingsDialogFooter';\nimport { TableSettingsListContainer } from './TableSettingsListContainer';\nimport { filterColumns } from './TableSettingsListItem';\n\nconst DEFAULT_COLUMN_WIDTH = 0;\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport type TableColumnDetails = {\n    /**\n     * Defined the current width of a column.\n     *\n     * @default 0\n     */\n    width?: number;\n\n    /**\n     * Defined the default width of a column which will be used when resetting to default.\n     *\n     * @default 0\n     */\n    defaultWidth?: number;\n\n    /**\n     * Defined the maximum width of a column.\n     *\n     * @default 1000\n     */\n    maxWidth?: number;\n};\n\nexport type TableColumnsSettings = {\n    columnOrder: string[];\n    hiddenColumns: string[];\n    columnsDetails: TableColumnDetailsMap;\n};\n\nexport type TableColumnDetailsMap = Record<string, TableColumnDetails>;\nexport type ColumnLabelStrings = Record<string, string>;\n\nexport type TableSettingsItemProps = {\n    columnLabels?: any;\n    autoLabel?: string | React.ReactNode;\n    disabledColumns?: string[];\n    columnOrder: string[];\n    hiddenColumns?: string[];\n    columnSearchValue: string;\n    columnsDetails: TableColumnDetailsMap;\n    columnLabelStrings?: ColumnLabelStrings;\n    openColumnsDetails?: Record<string, string>;\n    updateColumnLabelStrings?: boolean;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;\n    onToggleHideColumn?: (column: string) => void;\n};\n\ntype TableSettingsDialogProps = {\n    /**\n     * Defined whether to show the dialog or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The title for the dialog header.\n     */\n    title: React.ReactNode;\n\n    /**\n     * The subtitle for the dialog header.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * List of column names in default order. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultColumnOrder: string[];\n\n    /**\n     * List of hidden columns that are hidden by default. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultHiddenColumns?: string[];\n\n    /**\n     * Initial default configuration for the each columns with regards to column width.\n     * Used to reset to this state when the configuration differs.\n     *\n     * @default {}\n     */\n    defaultColumnDetails?: TableColumnDetailsMap;\n\n    /**\n     * List of column names in current order. The \"columnOrder\" will be returned when the order changes.\n     *\n     * @default []\n     */\n    columnOrder: string[];\n\n    /**\n     * List of column names which are currently hidden. The \"hiddenColumns\n     * will be returned when the order changes.\n     *\n     * @default []\n     */\n    hiddenColumns?: string[];\n\n    /**\n     * List of column labels which will be shown in the table header. These labels are usually\n     * translated labels that can be set as FormattedMessage components for instance.\n     *\n     * The object key is the column name and the object value is the translated message.\n     *\n     * @default {}\n     * @example\n     * { name: <FormattedMessage id='name' /> }\n     */\n    columnLabels: { [name: string]: React.ReactNode };\n\n    /**\n     * Hide a sorted column will result in an error, so disable at least one important fallback column\n     * or the sorted column (fallback column recommended)\n     */\n    disabledColumns: string[];\n\n    /**\n     * Optional object of detail properties to be shown in the details section of the respective\n     * column item. If the prop is not given, the width sections won't be rendered.\n     * The keys of this object are the column names / keys you use to identify a column.\n     */\n    columnsDetails?: TableColumnDetailsMap;\n\n    /**\n     * The label shown when the column width is unset, which means \"auto\".\n     *\n     * @default ''\n     */\n    autoLabel?: string | React.ReactNode;\n\n    /**\n     * Text for the \"apply\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    applyButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"cancel\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"close\" button. This button will only be shown when\n     * `immediateChange` is enabled.\n     */\n    closeButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"reset to default\" button.\n     */\n    resetButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the column order or visibility changes.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnChange?: (columnOrder: string[], hiddenColumns: string[], columnsDetails?: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when a single column details like width changes.\n     *\n     * @param column\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnDetailsChange?: (column: string, columnsDetails: TableColumnDetails) => void;\n\n    /**\n     * Callback function for when the changes are discarded and the dialog should close.\n     * Will not be triggered when `immediateChange` is enabled.\n     *\n     * @returns\n     */\n    onDiscard?: () => void;\n\n    /**\n     * Callback function for when the final changes should be applied and the dialog should close.\n     * Will not be triggered when `immediateChange `is enabled.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onApply?: (columnOrder: string[], hiddenColumns: string[], columnsDetails: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when dialog should close.\n     *\n     * @returns\n     */\n    onHide: () => void;\n\n    /**\n     * Search value which should be set for the search field when the dialog opens.\n     */\n    columnSearchValue?: string;\n\n    /**\n     * Callback function for when the search value changes.\n     *\n     * @param value\n     * @returns\n     */\n    onSearchChange?: (value: string) => void;\n\n    /**\n     * Placeholder text for the search input.\n     */\n    searchPlaceholder: React.ReactNode;\n\n    /**\n     * Message that should be shown when column search result is empty.\n     */\n    notFoundMessage?: string;\n\n    /**\n     * Defines whether or not all changes apply immediately. If so, no cancel and apply buttons are shown.\n     * Enable this if you want to update the table after each change. Be aware of having side effects when\n     * toggling columns where data need to be fetched from the backend.\n     *\n     * @default false\n     */\n    immediateChange?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableSettingsDialog = (props: TableSettingsDialogProps) => {\n    const {\n        show = false,\n        title,\n        subtitle,\n        className,\n        defaultColumnOrder = [],\n        defaultHiddenColumns = [],\n        defaultColumnDetails = {},\n        columnOrder: extColumnOrder = [],\n        hiddenColumns: extHiddenColumns = [],\n        columnLabels = {},\n        disabledColumns = [],\n        columnsDetails: extColumnsDetails = {},\n        autoLabel = '',\n        applyButtonText,\n        cancelButtonText,\n        closeButtonText,\n        resetButtonText,\n        onColumnChange = noop,\n        onColumnDetailsChange = noop,\n        onDiscard = noop,\n        onApply = noop,\n        onHide,\n        columnSearchValue: extColumnSearchValue = '',\n        onSearchChange = noop,\n        searchPlaceholder,\n        notFoundMessage = '',\n        immediateChange = false,\n    } = props;\n\n    const [columnSearchValue, setColumnSearchValue] = useState(extColumnSearchValue);\n    const [columnOrder, setColumnOrder] = useState(extColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState(extHiddenColumns || defaultHiddenColumns);\n\n    const [columnsDetails, setColumnsDetails] = useState(extColumnsDetails);\n    const [openColumnsDetails, setOpenColumnsDetails] = useState<Record<string, string>>({});\n\n    const [columnLabelStrings, setColumnLabelStrings] = useState<ColumnLabelStrings>({});\n    const [updateColumnLabelStrings, setUpdateColumnLabelStrings] = useState(true);\n\n    // Dirty flag for offering to reset changes or to discard them\n    const [hasChanged, setHasChanged] = useState(false);\n    const [isResetAll, setIsResetAll] = useState(false);\n\n    const [movedColumn, setMovedColumn] = useState(false);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const defaultColumnDetailsRef = useRef(defaultColumnDetails);\n\n    // Update items from outside\n    useEffect(() => {\n        setColumnSearchValue(extColumnSearchValue);\n        setColumnOrder(extColumnOrder);\n        setHiddenColumns(extHiddenColumns);\n        setColumnsDetails(extColumnsDetails);\n\n        if (show) {\n            getColumnLabelStringsFromDOM();\n        }\n\n        const externalColumnOrder = extColumnOrder ?? defaultColumnOrder;\n        const externalHiddenColumns = extHiddenColumns ?? defaultHiddenColumns;\n        const externalColumnsDetails = extColumnsDetails ?? {};\n\n        const hasChangesFromDefaults =\n            !isEqual(externalColumnOrder, defaultColumnOrder) ||\n            !isEqual(externalHiddenColumns, defaultHiddenColumns) ||\n            hasColumnsDetailsChanged(externalColumnsDetails);\n        setHasChanged(hasChangesFromDefaults);\n    }, [\n        extColumnSearchValue,\n        extColumnOrder,\n        extHiddenColumns,\n        extColumnsDetails,\n        defaultColumnOrder,\n        defaultHiddenColumns,\n        show,\n    ]);\n\n    const hasColumnsDetailsChanged = (columnsDetailsToCheck: TableColumnDetailsMap) => {\n        if (isEmpty(defaultColumnDetailsRef.current)) {\n            return false;\n        }\n\n        const getEffectiveWidth = (details: TableColumnDetails | undefined) => {\n            if (!details) {\n                return DEFAULT_COLUMN_WIDTH;\n            }\n            const { width, defaultWidth } = details;\n            if (Number.isFinite(width)) {\n                return width as number;\n            }\n            if (Number.isFinite(defaultWidth)) {\n                return defaultWidth as number;\n            }\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        return Object.keys(defaultColumnDetailsRef.current).some(key => {\n            const baseline = defaultColumnDetailsRef.current[key];\n            const current = columnsDetailsToCheck[key];\n            return getEffectiveWidth(current) !== getEffectiveWidth(baseline);\n        });\n    };\n\n    const getColumnLabelStringsFromDOM = () => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // For searching by name we need to get the label from the DOM as it may contain a FormattedMessage\n        const labels = contentRef.current.getElementsByClassName('table-settings-item-label');\n\n        const columnStrings: { [key: string]: string } = {};\n        [...labels].forEach(label => {\n            const dataKey = label.getAttribute('data-key');\n            if (dataKey) {\n                const updatedLabel = label.textContent?.replace(/\\r?\\n|\\r/g, '').toLowerCase();\n                if (updatedLabel) {\n                    columnStrings[dataKey] = updatedLabel;\n                }\n            }\n        });\n\n        setColumnLabelStrings(columnStrings);\n        setUpdateColumnLabelStrings(false);\n    };\n\n    const deleteMovedColumn = () => {\n        setMovedColumn(false);\n    };\n\n    const moveColumnToIndex = (columnName: string, newIndex: number, changeMovedColumn: boolean) => {\n        const newColumnOrder = columnOrder.filter(name => name !== columnName);\n        newColumnOrder.splice(newIndex, 0, columnName);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(changeMovedColumn ? !!columnName : false);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n\n        setTimeout(deleteMovedColumn, 500);\n    };\n\n    const handleResetColumnChanges = () => setIsResetAll(true);\n    const handleCancelResetColumnChanges = () => setIsResetAll(false);\n\n    const resetColumnsDetails = (details: TableColumnDetailsMap) => {\n        // If explicit defaults were provided, return them to keep shape identical to the baseline.\n        if (!isEmpty(defaultColumnDetails)) {\n            return defaultColumnDetails;\n        }\n\n        // Fallback: derive sparse defaults like before\n        return mapValues(details, (singleColumnDetails: TableColumnDetails) => {\n            if (Number.isFinite(singleColumnDetails.defaultWidth)) {\n                const defaultWidth = singleColumnDetails.defaultWidth as number;\n                return { ...singleColumnDetails, width: defaultWidth };\n            }\n\n            const { width: _ignoredWidth, defaultWidth: _ignoredDefaultWidth, ...rest } = singleColumnDetails;\n            return rest;\n        });\n    };\n\n    const resetAllColumnChanges = () => {\n        const defaultColumnsDetails = resetColumnsDetails(columnsDetails);\n\n        setColumnOrder(defaultColumnOrder);\n        setHiddenColumns(defaultHiddenColumns);\n        setColumnSearchValue('');\n        setHasChanged(false);\n        setIsResetAll(false);\n\n        if (!isEmpty(columnsDetails)) {\n            setColumnsDetails(defaultColumnsDetails);\n        }\n\n        if (immediateChange) {\n            onSearchChange('');\n            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);\n        }\n    };\n\n    const discardColumnChanges = () => {\n        onSearchChange('');\n        // onCancel();\n        onDiscard();\n        onHide();\n    };\n\n    const handleManuallyApplyChanges = () => {\n        setColumnSearchValue('');\n\n        onSearchChange('');\n        onColumnChange(columnOrder, hiddenColumns, columnsDetails);\n        onApply(columnOrder, hiddenColumns, columnsDetails);\n        onHide();\n    };\n\n    const toggleHideColumn = (column: string) => {\n        const isHidden = hiddenColumns.includes(column);\n        const newHiddenColumns = isHidden ? hiddenColumns.filter(name => name !== column) : [...hiddenColumns, column];\n\n        setHiddenColumns(newHiddenColumns);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(columnOrder, newHiddenColumns);\n        }\n    };\n\n    const handleSearchChange = (searchValue: string) => {\n        const newSearch = searchValue.toLowerCase();\n\n        setColumnSearchValue(() => {\n            onSearchChange(newSearch);\n            return newSearch;\n        });\n    };\n\n    const handleColumnWidthChange = (column: keyof TableColumnDetailsMap, value: number) => {\n        const previousColumnDetails = columnsDetails[column];\n        const updatedColumnDetails = previousColumnDetails\n            ? { ...previousColumnDetails, width: value }\n            : {\n                  width: value,\n                  defaultWidth: DEFAULT_COLUMN_WIDTH,\n                  maxWidth: MAX_COLUMN_WIDTH,\n              };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleResetColumnWidth = (column: keyof TableColumnDetailsMap) => {\n        const previousColumnDetails = columnsDetails[column];\n        if (!previousColumnDetails) {\n            return;\n        }\n\n        const updatedColumnDetails = {\n            ...previousColumnDetails,\n            width: previousColumnDetails.defaultWidth ?? DEFAULT_COLUMN_WIDTH,\n        };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleOpenColumnsDetails = (columnName: keyof TableColumnDetailsMap) => {\n        const updatedOpenColumnDetails = { ...openColumnsDetails };\n\n        if (updatedOpenColumnDetails[columnName]) {\n            delete updatedOpenColumnDetails[columnName];\n        } else {\n            updatedOpenColumnDetails[columnName] = columnName;\n        }\n\n        setOpenColumnsDetails(updatedOpenColumnDetails);\n    };\n\n    const handleSortEnd = (event: DragEndEvent, previousOrder: string[]) => {\n        const { active, over } = event;\n\n        const activeId = active.id;\n        const overId = over?.id;\n\n        if (activeId === overId) {\n            return;\n        }\n\n        const oldIndex = previousOrder.indexOf(String(activeId));\n        const newIndex = previousOrder.indexOf(String(overId));\n\n        const newColumnOrder = arrayMove(previousOrder, oldIndex, newIndex);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(true);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n    };\n\n    const renderTableSettingsDialogContent = () => {\n        const itemProps = {\n            columnLabels,\n            autoLabel,\n            disabledColumns,\n            columnOrder,\n            hiddenColumns,\n            columnSearchValue,\n            columnsDetails,\n            columnLabelStrings,\n            openColumnsDetails,\n            updateColumnLabelStrings,\n            onMoveColumn: moveColumnToIndex,\n            onOpenDetails: handleOpenColumnsDetails,\n            onColumnWidthChange: handleColumnWidthChange,\n            onResetColumnWidth: handleResetColumnWidth,\n            onToggleHideColumn: toggleHideColumn,\n        };\n\n        const filteredColumns = columnOrder.filter(column =>\n            filterColumns(columnSearchValue, column, columnLabelStrings)\n        );\n\n        const hasItems = !isEqual(filteredColumns, columnOrder);\n\n        return (\n            <div ref={contentRef}>\n                <div className='table-settings-search'>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' />\n                        </span>\n                        <ClearableInput\n                            value={columnSearchValue}\n                            onChange={handleSearchChange}\n                            placeholder={searchPlaceholder}\n                        />\n                    </div>\n                </div>\n                <div className='table-settings-body'>\n                    {hasItems ? (\n                        <TableSettingsListContainer\n                            items={columnOrder}\n                            onSortEnd={handleSortEnd}\n                            itemProps={{ ...itemProps }}\n                        />\n                    ) : (\n                        <div className='text-center text-color-gray'>{notFoundMessage}</div>\n                    )}\n                </div>\n            </div>\n        );\n    };\n\n    const renderTableSettingsDialogFooter = () => {\n        return (\n            <TableSettingsDialogFooter\n                hasChanged={hasChanged}\n                isResetAll={isResetAll}\n                immediateChange={immediateChange}\n                resetButtonText={resetButtonText}\n                closeButtonText={closeButtonText}\n                cancelButtonText={cancelButtonText}\n                applyButtonText={applyButtonText}\n                onHide={onHide}\n                onResetColumnChanges={handleResetColumnChanges}\n                onDiscardChanges={discardColumnChanges}\n                onApplyChanges={handleManuallyApplyChanges}\n                onConfirmResetColumnChanges={resetAllColumnChanges}\n                onCancelResetColumnChanges={handleCancelResetColumnChanges}\n            />\n        );\n    };\n\n    if (!show) {\n        return null;\n    }\n\n    const dialogClassNames = classNames('TableSettingsDialog', className);\n\n    return (\n        <Dialog\n            show={show}\n            title={title}\n            subtitle={subtitle}\n            onClose={onHide}\n            body={renderTableSettingsDialogContent()}\n            footer={renderTableSettingsDialogFooter()}\n            className={dialogClassNames}\n        />\n    );\n};\n\nexport default TableSettingsDialog;\n"],"names":["DEFAULT_COLUMN_WIDTH","MAX_COLUMN_WIDTH","TableSettingsDialog","props","show","title","subtitle","className","defaultColumnOrder","defaultHiddenColumns","defaultColumnDetails","extColumnOrder","extHiddenColumns","columnLabels","disabledColumns","extColumnsDetails","autoLabel","applyButtonText","cancelButtonText","closeButtonText","resetButtonText","onColumnChange","noop","onColumnDetailsChange","onDiscard","onApply","onHide","extColumnSearchValue","onSearchChange","searchPlaceholder","notFoundMessage","immediateChange","columnSearchValue","setColumnSearchValue","useState","columnOrder","setColumnOrder","hiddenColumns","setHiddenColumns","columnsDetails","setColumnsDetails","openColumnsDetails","setOpenColumnsDetails","columnLabelStrings","setColumnLabelStrings","updateColumnLabelStrings","setUpdateColumnLabelStrings","hasChanged","setHasChanged","isResetAll","setIsResetAll","movedColumn","setMovedColumn","contentRef","useRef","defaultColumnDetailsRef","useEffect","getColumnLabelStringsFromDOM","externalColumnOrder","externalHiddenColumns","externalColumnsDetails","hasChangesFromDefaults","isEqual","hasColumnsDetailsChanged","columnsDetailsToCheck","isEmpty","getEffectiveWidth","details","width","defaultWidth","key","baseline","current","labels","columnStrings","label","dataKey","updatedLabel","deleteMovedColumn","moveColumnToIndex","columnName","newIndex","changeMovedColumn","newColumnOrder","name","handleResetColumnChanges","handleCancelResetColumnChanges","resetColumnsDetails","mapValues","singleColumnDetails","_ignoredWidth","_ignoredDefaultWidth","rest","resetAllColumnChanges","defaultColumnsDetails","discardColumnChanges","handleManuallyApplyChanges","toggleHideColumn","column","newHiddenColumns","handleSearchChange","searchValue","newSearch","handleColumnWidthChange","value","previousColumnDetails","updatedColumnDetails","updatedColumnsDetails","handleResetColumnWidth","handleOpenColumnsDetails","updatedOpenColumnDetails","handleSortEnd","event","previousOrder","active","over","activeId","overId","oldIndex","arrayMove","renderTableSettingsDialogContent","itemProps","filteredColumns","filterColumns","hasItems","jsxs","jsx","ClearableInput","TableSettingsListContainer","renderTableSettingsDialogFooter","TableSettingsDialogFooter","dialogClassNames","classNames","Dialog"],"mappings":"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"}
+{"version":3,"file":"TableSettingsDialog.js","sources":["../../../src/components/table/TableSettingsDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useRef } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, mapValues } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nimport classNames from '../../utils/classNames';\nimport Dialog from '../dialog/Dialog';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { TableSettingsDialogFooter } from './TableSettingsDialogFooter';\nimport { TableSettingsListContainer } from './TableSettingsListContainer';\nimport { filterColumns } from './TableSettingsListItem';\n\nconst DEFAULT_COLUMN_WIDTH = 0;\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport type TableColumnDetails = {\n    /**\n     * Defined the current width of a column.\n     *\n     * @default 0\n     */\n    width?: number;\n\n    /**\n     * Defined the default width of a column which will be used when resetting to default.\n     *\n     * @default 0\n     */\n    defaultWidth?: number;\n\n    /**\n     * Defined the maximum width of a column.\n     *\n     * @default 1000\n     */\n    maxWidth?: number;\n};\n\nexport type TableColumnsSettings = {\n    columnOrder: string[];\n    hiddenColumns: string[];\n    columnsDetails: TableColumnDetailsMap;\n};\n\nexport type TableColumnDetailsMap = Record<string, TableColumnDetails>;\nexport type ColumnLabelStrings = Record<string, string>;\n\nexport type TableSettingsItemProps = {\n    columnLabels?: any;\n    autoLabel?: string | React.ReactNode;\n    disabledColumns?: string[];\n    columnOrder: string[];\n    hiddenColumns?: string[];\n    columnSearchValue: string;\n    columnsDetails: TableColumnDetailsMap;\n    columnLabelStrings?: ColumnLabelStrings;\n    openColumnsDetails?: Record<string, string>;\n    updateColumnLabelStrings?: boolean;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;\n    onToggleHideColumn?: (column: string) => void;\n};\n\ntype TableSettingsDialogProps = {\n    /**\n     * Defined whether to show the dialog or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The title for the dialog header.\n     */\n    title: React.ReactNode;\n\n    /**\n     * The subtitle for the dialog header.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * List of column names in default order. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultColumnOrder: string[];\n\n    /**\n     * List of hidden columns that are hidden by default. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultHiddenColumns?: string[];\n\n    /**\n     * Initial default configuration for the each columns with regards to column width.\n     * Used to reset to this state when the configuration differs.\n     *\n     * @default {}\n     */\n    defaultColumnDetails?: TableColumnDetailsMap;\n\n    /**\n     * List of column names in current order. The \"columnOrder\" will be returned when the order changes.\n     *\n     * @default []\n     */\n    columnOrder: string[];\n\n    /**\n     * List of column names which are currently hidden. The \"hiddenColumns\n     * will be returned when the order changes.\n     *\n     * @default []\n     */\n    hiddenColumns?: string[];\n\n    /**\n     * List of column labels which will be shown in the table header. These labels are usually\n     * translated labels that can be set as FormattedMessage components for instance.\n     *\n     * The object key is the column name and the object value is the translated message.\n     *\n     * @default {}\n     * @example\n     * { name: <FormattedMessage id='name' /> }\n     */\n    columnLabels: { [name: string]: React.ReactNode };\n\n    /**\n     * Hide a sorted column will result in an error, so disable at least one important fallback column\n     * or the sorted column (fallback column recommended)\n     */\n    disabledColumns: string[];\n\n    /**\n     * Optional object of detail properties to be shown in the details section of the respective\n     * column item. If the prop is not given, the width sections won't be rendered.\n     * The keys of this object are the column names / keys you use to identify a column.\n     */\n    columnsDetails?: TableColumnDetailsMap;\n\n    /**\n     * The label shown when the column width is unset, which means \"auto\".\n     *\n     * @default ''\n     */\n    autoLabel?: string | React.ReactNode;\n\n    /**\n     * Text for the \"apply\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    applyButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"cancel\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"close\" button. This button will only be shown when\n     * `immediateChange` is enabled.\n     */\n    closeButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"reset to default\" button.\n     */\n    resetButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the column order or visibility changes.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnChange?: (columnOrder: string[], hiddenColumns: string[], columnsDetails?: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when a single column details like width changes.\n     *\n     * @param column\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnDetailsChange?: (column: string, columnsDetails: TableColumnDetails) => void;\n\n    /**\n     * Callback function for when the changes are discarded and the dialog should close.\n     * Will not be triggered when `immediateChange` is enabled.\n     *\n     * @returns\n     */\n    onDiscard?: () => void;\n\n    /**\n     * Callback function for when the final changes should be applied and the dialog should close.\n     * Will not be triggered when `immediateChange `is enabled.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onApply?: (columnOrder: string[], hiddenColumns: string[], columnsDetails: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when dialog should close.\n     *\n     * @returns\n     */\n    onHide: () => void;\n\n    /**\n     * Search value which should be set for the search field when the dialog opens.\n     */\n    columnSearchValue?: string;\n\n    /**\n     * Callback function for when the search value changes.\n     *\n     * @param value\n     * @returns\n     */\n    onSearchChange?: (value: string) => void;\n\n    /**\n     * Placeholder text for the search input.\n     */\n    searchPlaceholder: React.ReactNode;\n\n    /**\n     * Message that should be shown when column search result is empty.\n     */\n    notFoundMessage?: string;\n\n    /**\n     * Defines whether or not all changes apply immediately. If so, no cancel and apply buttons are shown.\n     * Enable this if you want to update the table after each change. Be aware of having side effects when\n     * toggling columns where data need to be fetched from the backend.\n     *\n     * @default false\n     */\n    immediateChange?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableSettingsDialog = (props: TableSettingsDialogProps) => {\n    const {\n        show = false,\n        title,\n        subtitle,\n        className,\n        defaultColumnOrder = [],\n        defaultHiddenColumns = [],\n        defaultColumnDetails = {},\n        columnOrder: extColumnOrder = [],\n        hiddenColumns: extHiddenColumns = [],\n        columnLabels = {},\n        disabledColumns = [],\n        columnsDetails: extColumnsDetails = {},\n        autoLabel = '',\n        applyButtonText,\n        cancelButtonText,\n        closeButtonText,\n        resetButtonText,\n        onColumnChange = noop,\n        onColumnDetailsChange = noop,\n        onDiscard = noop,\n        onApply = noop,\n        onHide,\n        columnSearchValue: extColumnSearchValue = '',\n        onSearchChange = noop,\n        searchPlaceholder,\n        notFoundMessage = '',\n        immediateChange = false,\n    } = props;\n\n    const [columnSearchValue, setColumnSearchValue] = useState(extColumnSearchValue);\n    const [columnOrder, setColumnOrder] = useState(extColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState(extHiddenColumns || defaultHiddenColumns);\n\n    const [columnsDetails, setColumnsDetails] = useState(extColumnsDetails);\n    const [openColumnsDetails, setOpenColumnsDetails] = useState<Record<string, string>>({});\n\n    const [columnLabelStrings, setColumnLabelStrings] = useState<ColumnLabelStrings>({});\n    const [updateColumnLabelStrings, setUpdateColumnLabelStrings] = useState(true);\n\n    // Dirty flag for offering to reset changes or to discard them\n    const [hasChanged, setHasChanged] = useState(false);\n    const [isResetAll, setIsResetAll] = useState(false);\n\n    const [movedColumn, setMovedColumn] = useState(false);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const defaultColumnDetailsRef = useRef(defaultColumnDetails);\n    const previousShowRef = useRef(show);\n\n    // Update items from outside\n    useEffect(() => {\n        const hasJustOpened = show && !previousShowRef.current;\n        const isClosed = !show;\n\n        if (hasJustOpened || isClosed) {\n            setColumnSearchValue(extColumnSearchValue);\n        }\n\n        setColumnOrder(extColumnOrder);\n        setHiddenColumns(extHiddenColumns);\n        setColumnsDetails(extColumnsDetails);\n\n        if (show) {\n            getColumnLabelStringsFromDOM();\n        }\n\n        const externalColumnOrder = extColumnOrder ?? defaultColumnOrder;\n        const externalHiddenColumns = extHiddenColumns ?? defaultHiddenColumns;\n        const externalColumnsDetails = extColumnsDetails ?? {};\n\n        const hasChangesFromDefaults =\n            !isEqual(externalColumnOrder, defaultColumnOrder) ||\n            !isEqual(externalHiddenColumns, defaultHiddenColumns) ||\n            hasColumnsDetailsChanged(externalColumnsDetails);\n        setHasChanged(hasChangesFromDefaults);\n\n        previousShowRef.current = show;\n    }, [\n        extColumnSearchValue,\n        JSON.stringify(extColumnOrder),\n        JSON.stringify(extHiddenColumns),\n        JSON.stringify(extColumnsDetails),\n        JSON.stringify(defaultColumnOrder),\n        JSON.stringify(defaultHiddenColumns),\n        show,\n    ]);\n\n    const hasColumnsDetailsChanged = (columnsDetailsToCheck: TableColumnDetailsMap) => {\n        const getEffectiveWidth = (details: TableColumnDetails | undefined) => {\n            if (!details) {\n                return DEFAULT_COLUMN_WIDTH;\n            }\n            const { width, defaultWidth } = details;\n            if (Number.isFinite(width)) {\n                return width as number;\n            }\n            if (Number.isFinite(defaultWidth)) {\n                return defaultWidth as number;\n            }\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        const getFallbackDefaultWidth = (details: TableColumnDetails | undefined) => {\n            if (Number.isFinite(details?.defaultWidth)) {\n                return details?.defaultWidth as number;\n            }\n\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        if (isEmpty(defaultColumnDetailsRef.current)) {\n            return Object.values(columnsDetailsToCheck).some(\n                details => getEffectiveWidth(details) !== getFallbackDefaultWidth(details)\n            );\n        }\n\n        return Object.keys(defaultColumnDetailsRef.current).some(key => {\n            const baseline = defaultColumnDetailsRef.current[key];\n            const current = columnsDetailsToCheck[key];\n            return getEffectiveWidth(current) !== getEffectiveWidth(baseline);\n        });\n    };\n\n    const getColumnLabelStringsFromDOM = () => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // For searching by name we need to get the label from the DOM as it may contain a FormattedMessage\n        const labels = contentRef.current.getElementsByClassName('table-settings-item-label');\n\n        const columnStrings: { [key: string]: string } = {};\n        [...labels].forEach(label => {\n            const dataKey = label.getAttribute('data-key');\n            if (dataKey) {\n                const updatedLabel = label.textContent?.replace(/\\r?\\n|\\r/g, '').toLowerCase();\n                if (updatedLabel) {\n                    columnStrings[dataKey] = updatedLabel;\n                }\n            }\n        });\n\n        setColumnLabelStrings(columnStrings);\n        setUpdateColumnLabelStrings(false);\n    };\n\n    const deleteMovedColumn = () => {\n        setMovedColumn(false);\n    };\n\n    const moveColumnToIndex = (columnName: string, newIndex: number, changeMovedColumn: boolean) => {\n        const newColumnOrder = columnOrder.filter(name => name !== columnName);\n        newColumnOrder.splice(newIndex, 0, columnName);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(changeMovedColumn ? !!columnName : false);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n\n        setTimeout(deleteMovedColumn, 500);\n    };\n\n    const handleResetColumnChanges = () => setIsResetAll(true);\n    const handleCancelResetColumnChanges = () => setIsResetAll(false);\n\n    const resetColumnsDetails = (details: TableColumnDetailsMap) => {\n        // If explicit defaults were provided, return them to keep shape identical to the baseline.\n        if (!isEmpty(defaultColumnDetails)) {\n            return defaultColumnDetails;\n        }\n\n        // Fallback: derive sparse defaults like before\n        return mapValues(details, (singleColumnDetails: TableColumnDetails) => {\n            if (Number.isFinite(singleColumnDetails.defaultWidth)) {\n                const defaultWidth = singleColumnDetails.defaultWidth as number;\n                return { ...singleColumnDetails, width: defaultWidth };\n            }\n\n            const { width: _ignoredWidth, defaultWidth: _ignoredDefaultWidth, ...rest } = singleColumnDetails;\n            return rest;\n        });\n    };\n\n    const resetAllColumnChanges = () => {\n        const defaultColumnsDetails = resetColumnsDetails(columnsDetails);\n\n        setColumnOrder(defaultColumnOrder);\n        setHiddenColumns(defaultHiddenColumns);\n        setColumnSearchValue('');\n        setHasChanged(false);\n        setIsResetAll(false);\n\n        if (!isEmpty(columnsDetails)) {\n            setColumnsDetails(defaultColumnsDetails);\n        }\n\n        if (immediateChange) {\n            onSearchChange('');\n            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);\n        }\n    };\n\n    const discardColumnChanges = () => {\n        onSearchChange('');\n        // onCancel();\n        onDiscard();\n        onHide();\n    };\n\n    const handleManuallyApplyChanges = () => {\n        setColumnSearchValue('');\n\n        onSearchChange('');\n        onColumnChange(columnOrder, hiddenColumns, columnsDetails);\n        onApply(columnOrder, hiddenColumns, columnsDetails);\n        onHide();\n    };\n\n    const toggleHideColumn = (column: string) => {\n        const isHidden = hiddenColumns.includes(column);\n        const newHiddenColumns = isHidden ? hiddenColumns.filter(name => name !== column) : [...hiddenColumns, column];\n\n        setHiddenColumns(newHiddenColumns);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(columnOrder, newHiddenColumns);\n        }\n    };\n\n    const handleSearchChange = (searchValue: string) => {\n        const newSearch = searchValue.toLowerCase();\n\n        setColumnSearchValue(() => {\n            onSearchChange(newSearch);\n            return newSearch;\n        });\n    };\n\n    const handleColumnWidthChange = (column: keyof TableColumnDetailsMap, value: number) => {\n        const previousColumnDetails = columnsDetails[column];\n        const updatedColumnDetails = previousColumnDetails\n            ? { ...previousColumnDetails, width: value }\n            : {\n                  width: value,\n                  defaultWidth: DEFAULT_COLUMN_WIDTH,\n                  maxWidth: MAX_COLUMN_WIDTH,\n              };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleResetColumnWidth = (column: keyof TableColumnDetailsMap) => {\n        const previousColumnDetails = columnsDetails[column];\n        if (!previousColumnDetails) {\n            return;\n        }\n\n        const updatedColumnDetails = {\n            ...previousColumnDetails,\n            width: previousColumnDetails.defaultWidth ?? DEFAULT_COLUMN_WIDTH,\n        };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleOpenColumnsDetails = (columnName: keyof TableColumnDetailsMap) => {\n        const updatedOpenColumnDetails = { ...openColumnsDetails };\n\n        if (updatedOpenColumnDetails[columnName]) {\n            delete updatedOpenColumnDetails[columnName];\n        } else {\n            updatedOpenColumnDetails[columnName] = columnName;\n        }\n\n        setOpenColumnsDetails(updatedOpenColumnDetails);\n    };\n\n    const handleSortEnd = (event: DragEndEvent, previousOrder: string[]) => {\n        const { active, over } = event;\n\n        const activeId = active.id;\n        const overId = over?.id;\n\n        if (activeId === overId) {\n            return;\n        }\n\n        const oldIndex = previousOrder.indexOf(String(activeId));\n        const newIndex = previousOrder.indexOf(String(overId));\n\n        const newColumnOrder = arrayMove(previousOrder, oldIndex, newIndex);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(true);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n    };\n\n    const renderTableSettingsDialogContent = () => {\n        const itemProps = {\n            columnLabels,\n            autoLabel,\n            disabledColumns,\n            columnOrder,\n            hiddenColumns,\n            columnSearchValue,\n            columnsDetails,\n            columnLabelStrings,\n            openColumnsDetails,\n            updateColumnLabelStrings,\n            onMoveColumn: moveColumnToIndex,\n            onOpenDetails: handleOpenColumnsDetails,\n            onColumnWidthChange: handleColumnWidthChange,\n            onResetColumnWidth: handleResetColumnWidth,\n            onToggleHideColumn: toggleHideColumn,\n        };\n\n        const filteredColumns = columnOrder.filter(column =>\n            filterColumns(columnSearchValue, column, columnLabelStrings)\n        );\n\n        const hasItems = !isEqual(filteredColumns, columnOrder);\n\n        return (\n            <div ref={contentRef}>\n                <div className='table-settings-search'>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' />\n                        </span>\n                        <ClearableInput\n                            value={columnSearchValue}\n                            onChange={handleSearchChange}\n                            placeholder={searchPlaceholder}\n                        />\n                    </div>\n                </div>\n                <div className='table-settings-body'>\n                    {hasItems ? (\n                        <TableSettingsListContainer\n                            items={columnOrder}\n                            onSortEnd={handleSortEnd}\n                            itemProps={{ ...itemProps }}\n                        />\n                    ) : (\n                        <div className='text-center text-color-gray'>{notFoundMessage}</div>\n                    )}\n                </div>\n            </div>\n        );\n    };\n\n    const renderTableSettingsDialogFooter = () => {\n        return (\n            <TableSettingsDialogFooter\n                hasChanged={hasChanged}\n                isResetAll={isResetAll}\n                immediateChange={immediateChange}\n                resetButtonText={resetButtonText}\n                closeButtonText={closeButtonText}\n                cancelButtonText={cancelButtonText}\n                applyButtonText={applyButtonText}\n                onHide={onHide}\n                onResetColumnChanges={handleResetColumnChanges}\n                onDiscardChanges={discardColumnChanges}\n                onApplyChanges={handleManuallyApplyChanges}\n                onConfirmResetColumnChanges={resetAllColumnChanges}\n                onCancelResetColumnChanges={handleCancelResetColumnChanges}\n            />\n        );\n    };\n\n    if (!show) {\n        return null;\n    }\n\n    const dialogClassNames = classNames('TableSettingsDialog', className);\n\n    return (\n        <Dialog\n            show={show}\n            title={title}\n            subtitle={subtitle}\n            onClose={onHide}\n            body={renderTableSettingsDialogContent()}\n            footer={renderTableSettingsDialogFooter()}\n            className={dialogClassNames}\n        />\n    );\n};\n\nexport default TableSettingsDialog;\n"],"names":["DEFAULT_COLUMN_WIDTH","MAX_COLUMN_WIDTH","TableSettingsDialog","props","show","title","subtitle","className","defaultColumnOrder","defaultHiddenColumns","defaultColumnDetails","extColumnOrder","extHiddenColumns","columnLabels","disabledColumns","extColumnsDetails","autoLabel","applyButtonText","cancelButtonText","closeButtonText","resetButtonText","onColumnChange","noop","onColumnDetailsChange","onDiscard","onApply","onHide","extColumnSearchValue","onSearchChange","searchPlaceholder","notFoundMessage","immediateChange","columnSearchValue","setColumnSearchValue","useState","columnOrder","setColumnOrder","hiddenColumns","setHiddenColumns","columnsDetails","setColumnsDetails","openColumnsDetails","setOpenColumnsDetails","columnLabelStrings","setColumnLabelStrings","updateColumnLabelStrings","setUpdateColumnLabelStrings","hasChanged","setHasChanged","isResetAll","setIsResetAll","movedColumn","setMovedColumn","contentRef","useRef","defaultColumnDetailsRef","previousShowRef","useEffect","getColumnLabelStringsFromDOM","externalColumnOrder","externalHiddenColumns","externalColumnsDetails","hasChangesFromDefaults","isEqual","hasColumnsDetailsChanged","columnsDetailsToCheck","getEffectiveWidth","details","width","defaultWidth","getFallbackDefaultWidth","isEmpty","key","baseline","current","labels","columnStrings","label","dataKey","updatedLabel","deleteMovedColumn","moveColumnToIndex","columnName","newIndex","changeMovedColumn","newColumnOrder","name","handleResetColumnChanges","handleCancelResetColumnChanges","resetColumnsDetails","mapValues","singleColumnDetails","_ignoredWidth","_ignoredDefaultWidth","rest","resetAllColumnChanges","defaultColumnsDetails","discardColumnChanges","handleManuallyApplyChanges","toggleHideColumn","column","newHiddenColumns","handleSearchChange","searchValue","newSearch","handleColumnWidthChange","value","previousColumnDetails","updatedColumnDetails","updatedColumnsDetails","handleResetColumnWidth","handleOpenColumnsDetails","updatedOpenColumnDetails","handleSortEnd","event","previousOrder","active","over","activeId","overId","oldIndex","arrayMove","renderTableSettingsDialogContent","itemProps","filteredColumns","filterColumns","hasItems","jsxs","jsx","ClearableInput","TableSettingsListContainer","renderTableSettingsDialogFooter","TableSettingsDialogFooter","dialogClassNames","classNames","Dialog"],"mappings":"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"}

package/components/table/TableSettingsListContainer.js

@@ -1,27 +1,27 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useState as b, useCallback as p } from "react";
 import { useSensors as C, useSensor as n, PointerSensor as x, KeyboardSensor as D, DndContext as f, closestCenter as h } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as v, SortableContext as u, verticalListSortingStrategy as y } from "@dnd-kit/sortable";
+import { sortableKeyboardCoordinates as u, SortableContext as v, verticalListSortingStrategy as y } from "@dnd-kit/sortable";
 import { restrictToVerticalAxis as A } from "@dnd-kit/modifiers";
 import E from "./TableSettingsListItem.js";
 const j = (i) => {
-  const { items: o, itemProps: a, onSortEnd: l } = i, [r, s] = b(null), c = C(
+  const { items: o, itemProps: a, onSortEnd: l } = i, [r, s] = b(null), m = C(
     n(x),
-    n(D, { coordinateGetter: v })
-  ), m = p((t) => {
+    n(D, { coordinateGetter: u })
+  ), c = p((t) => {
     s(t.active.id);
   }, []), d = (t) => {
     s(null), l(t, o);
   }, g = "table-settings-item shadow-smooth-to-bottom z-index-max";
-  return /* @__PURE__ */ e("div", { className: "table-settings-items-container", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("ol", { className: "table-settings-items-container padding-0 margin-0", children: /* @__PURE__ */ e(
     f,
     {
-      sensors: c,
+      sensors: m,
       collisionDetection: h,
       modifiers: [A],
-      onDragStart: m,
+      onDragStart: c,
       onDragEnd: d,
-      children: /* @__PURE__ */ e(u, { items: o, strategy: y, children: o.map((t, S) => /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e(v, { items: o, strategy: y, children: o.map((t, S) => /* @__PURE__ */ e(
         E,
         {
           column: t,

package/components/table/TableSettingsListContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsListContainer.js","sources":["../../../src/components/table/TableSettingsListContainer.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport {\n    closestCenter,\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport type { UniqueIdentifier } from '@dnd-kit/core/dist/types';\n\nimport TableSettingsListItem from './TableSettingsListItem';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nexport type TableSettingsListContainerProps = {\n    items: string[];\n    itemProps: TableSettingsItemProps;\n    onSortEnd: (event: DragEndEvent, previousOrder: string[]) => void;\n};\n\nexport const TableSettingsListContainer = (props: TableSettingsListContainerProps) => {\n    const { items, itemProps, onSortEnd } = props;\n\n    const [activeDraggedColumn, setActiveDraggedColumn] = useState<UniqueIdentifier | null>(null);\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const handleDragStart = useCallback((event: DragStartEvent) => {\n        setActiveDraggedColumn(event.active.id);\n    }, []);\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        setActiveDraggedColumn(null);\n        onSortEnd(event, items);\n    };\n\n    const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';\n\n    return (\n        <div className='table-settings-items-container'>\n            <DndContext\n                sensors={sensors}\n                collisionDetection={closestCenter}\n                modifiers={[restrictToVerticalAxis]}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={items} strategy={verticalListSortingStrategy}>\n                    {items.map((column, index) => (\n                        <TableSettingsListItem\n                            key={column}\n                            column={column}\n                            orderIndex={index}\n                            isActive={activeDraggedColumn === column}\n                            className={activeDraggedColumn === column ? activeClass : ''}\n                            {...itemProps}\n                        />\n                    ))}\n                </SortableContext>\n            </DndContext>\n        </div>\n    );\n};\n"],"names":["TableSettingsListContainer","props","items","itemProps","onSortEnd","activeDraggedColumn","setActiveDraggedColumn","useState","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragStart","useCallback","event","handleDragEnd","activeClass","jsx","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","column","index","TableSettingsListItem"],"mappings":";;;;;;AAwBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM,EAAE,OAAAC,GAAO,WAAAC,GAAW,WAAAC,EAAA,IAAcH,GAElC,CAACI,GAAqBC,CAAsB,IAAIC,EAAkC,IAAI,GAEtFC,IAAUC;AAAA,IACZC,EAAUC,CAAa;AAAA,IACvBD,EAAUE,GAAgB,EAAE,kBAAkBC,GAA6B;AAAA,EAAA,GAGzEC,IAAkBC,EAAY,CAACC,MAA0B;AAC3D,IAAAV,EAAuBU,EAAM,OAAO,EAAE;AAAA,EAC1C,GAAG,CAAA,CAAE,GAECC,IAAgB,CAACD,MAAwB;AAC3C,IAAAV,EAAuB,IAAI,GAC3BF,EAAUY,GAAOd,CAAK;AAAA,EAC1B,GAEMgB,IAAc;AAEpB,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,kCACX,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAAAZ;AAAA,MACA,oBAAoBa;AAAA,MACpB,WAAW,CAACC,CAAsB;AAAA,MAClC,aAAaR;AAAA,MACb,WAAWG;AAAA,MAEX,UAAA,gBAAAE,EAACI,KAAgB,OAAArB,GAAc,UAAUsB,GACpC,UAAAtB,EAAM,IAAI,CAACuB,GAAQC,MAChB,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UAEG,QAAAF;AAAA,UACA,YAAYC;AAAA,UACZ,UAAUrB,MAAwBoB;AAAA,UAClC,WAAWpB,MAAwBoB,IAASP,IAAc;AAAA,UACzD,GAAGf;AAAA,QAAA;AAAA,QALCsB;AAAA,MAAA,CAOZ,EAAA,CACL;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableSettingsListContainer.js","sources":["../../../src/components/table/TableSettingsListContainer.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport {\n    closestCenter,\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport type { UniqueIdentifier } from '@dnd-kit/core/dist/types';\n\nimport TableSettingsListItem from './TableSettingsListItem';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nexport type TableSettingsListContainerProps = {\n    items: string[];\n    itemProps: TableSettingsItemProps;\n    onSortEnd: (event: DragEndEvent, previousOrder: string[]) => void;\n};\n\nexport const TableSettingsListContainer = (props: TableSettingsListContainerProps) => {\n    const { items, itemProps, onSortEnd } = props;\n\n    const [activeDraggedColumn, setActiveDraggedColumn] = useState<UniqueIdentifier | null>(null);\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const handleDragStart = useCallback((event: DragStartEvent) => {\n        setActiveDraggedColumn(event.active.id);\n    }, []);\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        setActiveDraggedColumn(null);\n        onSortEnd(event, items);\n    };\n\n    const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';\n\n    return (\n        <ol className='table-settings-items-container padding-0 margin-0'>\n            <DndContext\n                sensors={sensors}\n                collisionDetection={closestCenter}\n                modifiers={[restrictToVerticalAxis]}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={items} strategy={verticalListSortingStrategy}>\n                    {items.map((column, index) => (\n                        <TableSettingsListItem\n                            key={column}\n                            column={column}\n                            orderIndex={index}\n                            isActive={activeDraggedColumn === column}\n                            className={activeDraggedColumn === column ? activeClass : ''}\n                            {...itemProps}\n                        />\n                    ))}\n                </SortableContext>\n            </DndContext>\n        </ol>\n    );\n};\n"],"names":["TableSettingsListContainer","props","items","itemProps","onSortEnd","activeDraggedColumn","setActiveDraggedColumn","useState","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragStart","useCallback","event","handleDragEnd","activeClass","jsx","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","column","index","TableSettingsListItem"],"mappings":";;;;;;AAwBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM,EAAE,OAAAC,GAAO,WAAAC,GAAW,WAAAC,EAAA,IAAcH,GAElC,CAACI,GAAqBC,CAAsB,IAAIC,EAAkC,IAAI,GAEtFC,IAAUC;AAAA,IACZC,EAAUC,CAAa;AAAA,IACvBD,EAAUE,GAAgB,EAAE,kBAAkBC,GAA6B;AAAA,EAAA,GAGzEC,IAAkBC,EAAY,CAACC,MAA0B;AAC3D,IAAAV,EAAuBU,EAAM,OAAO,EAAE;AAAA,EAC1C,GAAG,CAAA,CAAE,GAECC,IAAgB,CAACD,MAAwB;AAC3C,IAAAV,EAAuB,IAAI,GAC3BF,EAAUY,GAAOd,CAAK;AAAA,EAC1B,GAEMgB,IAAc;AAEpB,SACI,gBAAAC,EAAC,MAAA,EAAG,WAAU,qDACV,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAAAZ;AAAA,MACA,oBAAoBa;AAAA,MACpB,WAAW,CAACC,CAAsB;AAAA,MAClC,aAAaR;AAAA,MACb,WAAWG;AAAA,MAEX,UAAA,gBAAAE,EAACI,KAAgB,OAAArB,GAAc,UAAUsB,GACpC,UAAAtB,EAAM,IAAI,CAACuB,GAAQC,MAChB,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UAEG,QAAAF;AAAA,UACA,YAAYC;AAAA,UACZ,UAAUrB,MAAwBoB;AAAA,UAClC,WAAWpB,MAAwBoB,IAASP,IAAc;AAAA,UACzD,GAAGf;AAAA,QAAA;AAAA,QALCsB;AAAA,MAAA,CAOZ,EAAA,CACL;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableSettingsListItem.js

@@ -7,45 +7,45 @@ import B from "../checkbox/Checkbox.js";
 import E from "../collapse/Collapse.js";
 import { TableSettingsColumnDetails as F } from "./TableSettingsColumnDetails.js";
 import { TableSettingsColumnButtons as P } from "./TableSettingsColumnButtons.js";
-const U = 1e3, X = (o, e, n) => o ? !(n[e] || "").toLowerCase().includes(o.toLowerCase()) : !1, ee = (o) => {
+const U = 1e3, X = (o, e, l) => o ? !(l[e] || "").toLowerCase().includes(o.toLowerCase()) : !1, ee = (o) => {
   const {
     column: e,
-    orderIndex: n,
-    columnLabels: l,
+    orderIndex: l,
+    columnLabels: i,
     autoLabel: c,
     disabledColumns: u = [],
     columnOrder: p,
-    hiddenColumns: f = [],
+    hiddenColumns: b = [],
     columnSearchValue: a,
-    columnsDetails: b,
+    columnsDetails: f,
     columnLabelStrings: C = {},
     openColumnsDetails: r = {},
     updateColumnLabelStrings: m,
-    onColumnWidthChange: g,
-    onResetColumnWidth: h,
+    onColumnWidthChange: h,
+    onResetColumnWidth: g,
     onMoveColumn: N,
     onOpenDetails: S,
     onToggleHideColumn: x = j,
     isActive: v = !1,
     className: L
-  } = o, i = !H(a), { attributes: D, listeners: T, setNodeRef: k, setActivatorNodeRef: w, transform: y, transition: W } = R({
+  } = o, n = !H(a), { attributes: D, listeners: T, setNodeRef: k, setActivatorNodeRef: w, transform: y, transition: W } = R({
     id: e,
-    disabled: i
+    disabled: n
   }), A = {
     transform: $.Transform.toString(y),
     transition: W
   }, I = X(a, e, C) && !m, M = _(
     "table-settings-item",
     m && "opacity-0",
-    I && "position-offscreen",
+    I && "hidden",
     L
-  ), s = b[e];
-  return /* @__PURE__ */ d("div", { className: M, ref: k, style: A, children: [
+  ), s = f[e];
+  return /* @__PURE__ */ d("li", { className: M, ref: k, style: A, children: [
     /* @__PURE__ */ d("div", { className: "table-settings-item-header user-select-none", ref: w, children: [
       /* @__PURE__ */ t("div", { className: "CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3", children: /* @__PURE__ */ t(
         B,
         {
-          checked: !f.includes(e),
+          checked: !b.includes(e),
           onClick: (O) => {
             x(e), O.stopPropagation();
           },
@@ -55,11 +55,11 @@ const U = 1e3, X = (o, e, n) => o ? !(n[e] || "").toLowerCase().includes(o.toLow
       /* @__PURE__ */ t(
         "div",
         {
-          className: `table-settings-item-label ${i ? "no-drag" : ""}`,
+          className: `table-settings-item-label ${n ? "no-drag" : ""}`,
           "data-key": e,
           ...D,
           ...T,
-          children: l[e]
+          children: i[e]
         }
       ),
       s && /* @__PURE__ */ t("div", { className: "column-width-label", children: s.width ? `${s.width}px` : c }),
@@ -67,11 +67,11 @@ const U = 1e3, X = (o, e, n) => o ? !(n[e] || "").toLowerCase().includes(o.toLow
         P,
         {
           column: e,
-          index: n,
+          index: l,
           columnDetails: s,
           columnOrder: p,
           openColumnsDetails: r,
-          disabled: i,
+          disabled: n,
           onMoveColumn: N,
           onOpenDetails: S
         }
@@ -83,8 +83,8 @@ const U = 1e3, X = (o, e, n) => o ? !(n[e] || "").toLowerCase().includes(o.toLow
         ...s,
         column: e,
         maxColumnWidth: U,
-        onColumnWidthChange: g,
-        onResetColumnWidth: h
+        onColumnWidthChange: h,
+        onResetColumnWidth: g
       }
     ) }) })
   ] }, `table-settings-item-${e}`);

package/components/table/TableSettingsListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsListItem.js","sources":["../../../src/components/table/TableSettingsListItem.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Checkbox from '../checkbox/Checkbox';\nimport Collapse from '../collapse/Collapse';\nimport { TableSettingsColumnDetails } from './TableSettingsColumnDetails';\nimport { TableSettingsColumnButtons } from './TableSettingsColumnButtons';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport const filterColumns = (searchValue: string, column: string, columnLabelStrings: Record<string, string>) => {\n    if (!searchValue) {\n        return false;\n    }\n    const label = columnLabelStrings[column] || '';\n    return !label.toLowerCase().includes(searchValue.toLowerCase());\n};\n\nexport type TableSettingsListItemProps = TableSettingsItemProps & {\n    column: string;\n    orderIndex: number;\n    isActive: boolean;\n    className?: string;\n};\n\nconst TableSettingsListItem = (props: TableSettingsListItemProps) => {\n    const {\n        column,\n        orderIndex,\n        columnLabels,\n        autoLabel,\n        disabledColumns = [],\n        columnOrder,\n        hiddenColumns = [],\n        columnSearchValue,\n        columnsDetails,\n        columnLabelStrings = {},\n        openColumnsDetails = {},\n        updateColumnLabelStrings,\n        onColumnWidthChange,\n        onResetColumnWidth,\n        onMoveColumn,\n        onOpenDetails,\n        onToggleHideColumn = noop,\n        isActive = false,\n        className,\n    } = props;\n\n    const isSortingDisabled = !isEmpty(columnSearchValue);\n\n    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({\n        id: column,\n        disabled: isSortingDisabled,\n    });\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    // Filter out items which don't match the search value.\n    // Note that we need to render all items at least once at the beginning in order to get their DOM labels\n    // otherwise the search won't work when initial search value is provided via props.\n    const isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;\n\n    const itemClassNames = classNames(\n        'table-settings-item',\n        updateColumnLabelStrings && 'opacity-0',\n        isFiltered && 'position-offscreen',\n        className\n    );\n\n    const columnDetails = columnsDetails[column];\n\n    return (\n        <div className={itemClassNames} key={`table-settings-item-${column}`} ref={setNodeRef} style={style}>\n            <div className='table-settings-item-header user-select-none' ref={setActivatorNodeRef}>\n                <div className='CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3'>\n                    <Checkbox\n                        checked={!hiddenColumns.includes(column)}\n                        onClick={event => {\n                            onToggleHideColumn(column);\n                            event.stopPropagation();\n                        }}\n                        disabled={disabledColumns.includes(column)}\n                    />\n                </div>\n                <div\n                    className={`table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`}\n                    data-key={column}\n                    {...attributes}\n                    {...listeners}\n                >\n                    {columnLabels[column]}\n                </div>\n                {columnDetails && (\n                    <div className='column-width-label'>\n                        {columnDetails.width ? `${columnDetails.width}px` : autoLabel}\n                    </div>\n                )}\n                <TableSettingsColumnButtons\n                    column={column}\n                    index={orderIndex}\n                    columnDetails={columnDetails}\n                    columnOrder={columnOrder}\n                    openColumnsDetails={openColumnsDetails}\n                    disabled={isSortingDisabled}\n                    onMoveColumn={onMoveColumn}\n                    onOpenDetails={onOpenDetails}\n                />\n            </div>\n            {columnDetails && !isActive && (\n                <Collapse open={!!openColumnsDetails[column]}>\n                    <div>\n                        <TableSettingsColumnDetails\n                            {...columnDetails}\n                            column={column}\n                            maxColumnWidth={MAX_COLUMN_WIDTH}\n                            onColumnWidthChange={onColumnWidthChange}\n                            onResetColumnWidth={onResetColumnWidth}\n                        />\n                    </div>\n                </Collapse>\n            )}\n        </div>\n    );\n};\n\nexport default TableSettingsListItem;\n"],"names":["MAX_COLUMN_WIDTH","filterColumns","searchValue","column","columnLabelStrings","TableSettingsListItem","props","orderIndex","columnLabels","autoLabel","disabledColumns","columnOrder","hiddenColumns","columnSearchValue","columnsDetails","openColumnsDetails","updateColumnLabelStrings","onColumnWidthChange","onResetColumnWidth","onMoveColumn","onOpenDetails","onToggleHideColumn","noop","isActive","className","isSortingDisabled","isEmpty","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","useSortable","style","CSS","isFiltered","itemClassNames","classNames","columnDetails","jsxs","jsx","Checkbox","event","TableSettingsColumnButtons","Collapse","TableSettingsColumnDetails"],"mappings":"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"}
+{"version":3,"file":"TableSettingsListItem.js","sources":["../../../src/components/table/TableSettingsListItem.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Checkbox from '../checkbox/Checkbox';\nimport Collapse from '../collapse/Collapse';\nimport { TableSettingsColumnDetails } from './TableSettingsColumnDetails';\nimport { TableSettingsColumnButtons } from './TableSettingsColumnButtons';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport const filterColumns = (searchValue: string, column: string, columnLabelStrings: Record<string, string>) => {\n    if (!searchValue) {\n        return false;\n    }\n    const label = columnLabelStrings[column] || '';\n    return !label.toLowerCase().includes(searchValue.toLowerCase());\n};\n\nexport type TableSettingsListItemProps = TableSettingsItemProps & {\n    column: string;\n    orderIndex: number;\n    isActive: boolean;\n    className?: string;\n};\n\nconst TableSettingsListItem = (props: TableSettingsListItemProps) => {\n    const {\n        column,\n        orderIndex,\n        columnLabels,\n        autoLabel,\n        disabledColumns = [],\n        columnOrder,\n        hiddenColumns = [],\n        columnSearchValue,\n        columnsDetails,\n        columnLabelStrings = {},\n        openColumnsDetails = {},\n        updateColumnLabelStrings,\n        onColumnWidthChange,\n        onResetColumnWidth,\n        onMoveColumn,\n        onOpenDetails,\n        onToggleHideColumn = noop,\n        isActive = false,\n        className,\n    } = props;\n\n    const isSortingDisabled = !isEmpty(columnSearchValue);\n\n    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({\n        id: column,\n        disabled: isSortingDisabled,\n    });\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    // Filter out items which don't match the search value.\n    // Note that we need to render all items at least once at the beginning in order to get their DOM labels\n    // otherwise the search won't work when initial search value is provided via props.\n    const isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;\n\n    const itemClassNames = classNames(\n        'table-settings-item',\n        updateColumnLabelStrings && 'opacity-0',\n        isFiltered && 'hidden',\n        className\n    );\n\n    const columnDetails = columnsDetails[column];\n\n    return (\n        <li className={itemClassNames} key={`table-settings-item-${column}`} ref={setNodeRef} style={style}>\n            <div className='table-settings-item-header user-select-none' ref={setActivatorNodeRef}>\n                <div className='CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3'>\n                    <Checkbox\n                        checked={!hiddenColumns.includes(column)}\n                        onClick={event => {\n                            onToggleHideColumn(column);\n                            event.stopPropagation();\n                        }}\n                        disabled={disabledColumns.includes(column)}\n                    />\n                </div>\n                <div\n                    className={`table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`}\n                    data-key={column}\n                    {...attributes}\n                    {...listeners}\n                >\n                    {columnLabels[column]}\n                </div>\n                {columnDetails && (\n                    <div className='column-width-label'>\n                        {columnDetails.width ? `${columnDetails.width}px` : autoLabel}\n                    </div>\n                )}\n                <TableSettingsColumnButtons\n                    column={column}\n                    index={orderIndex}\n                    columnDetails={columnDetails}\n                    columnOrder={columnOrder}\n                    openColumnsDetails={openColumnsDetails}\n                    disabled={isSortingDisabled}\n                    onMoveColumn={onMoveColumn}\n                    onOpenDetails={onOpenDetails}\n                />\n            </div>\n            {columnDetails && !isActive && (\n                <Collapse open={!!openColumnsDetails[column]}>\n                    <div>\n                        <TableSettingsColumnDetails\n                            {...columnDetails}\n                            column={column}\n                            maxColumnWidth={MAX_COLUMN_WIDTH}\n                            onColumnWidthChange={onColumnWidthChange}\n                            onResetColumnWidth={onResetColumnWidth}\n                        />\n                    </div>\n                </Collapse>\n            )}\n        </li>\n    );\n};\n\nexport default TableSettingsListItem;\n"],"names":["MAX_COLUMN_WIDTH","filterColumns","searchValue","column","columnLabelStrings","TableSettingsListItem","props","orderIndex","columnLabels","autoLabel","disabledColumns","columnOrder","hiddenColumns","columnSearchValue","columnsDetails","openColumnsDetails","updateColumnLabelStrings","onColumnWidthChange","onResetColumnWidth","onMoveColumn","onOpenDetails","onToggleHideColumn","noop","isActive","className","isSortingDisabled","isEmpty","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","useSortable","style","CSS","isFiltered","itemClassNames","classNames","columnDetails","jsxs","jsx","Checkbox","event","TableSettingsColumnButtons","Collapse","TableSettingsColumnDetails"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",

package/version.d.ts

@@ -1 +1 @@
-export const version: "2.2.0";
+export const version: "2.2.1";

package/version.js

@@ -1,4 +1,4 @@
-const o = "2.2.0";
+const o = "2.2.1";
 export {
   o as version
 };

package/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.js"],"sourcesContent":["export const version = '2.2.0';\n"],"names":["version"],"mappings":"AAAY,MAACA,IAAU;"}
+{"version":3,"file":"version.js","sources":["../src/version.js"],"sourcesContent":["export const version = '2.2.1';\n"],"names":["version"],"mappings":"AAAY,MAACA,IAAU;"}