@rio-cloud/rio-uikit 2.0.1 → 2.1.0

package/components/table/TableSettingsDialog.js

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

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 classNames from 'classnames';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, mapValues, some } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { arrayMove } from '@dnd-kit/sortable';\n\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nimport Dialog from '../dialog/Dialog';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { TableSettingsDialogFooter } from './TableSettingsDialogFooter';\nimport { TableSettingsListContainer } from './TableSettingsListContainer';\nimport { filterColumns } from './TableSettingsListItem';\nimport type { TableColumnDetailsMap, ColumnLabelStrings, TableColumnDetails } from './TableSettingsDialog.types';\n\nconst DEFAULT_COLUMN_WIDTH = 0;\nconst MAX_COLUMN_WIDTH = 1000;\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     * 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    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        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        // onCancel = 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    // Update items from outside\n    useEffect(() => {\n        setColumnSearchValue(extColumnSearchValue);\n        setColumnOrder(extColumnOrder);\n        setHiddenColumns(extHiddenColumns);\n\n        if (show) {\n            getColumnLabelStringsFromDOM();\n        }\n    }, [extColumnSearchValue, extColumnOrder, extHiddenColumns, show]);\n\n    const hasColumnsDetailsChanged = (columnsDetailsToCheck: TableColumnDetailsMap) => {\n        if (isEmpty(columnsDetailsToCheck)) {\n            return false;\n        }\n\n        const hasObjectChanged = some(columnsDetailsToCheck, (details: TableColumnDetails) => {\n            const defaultWidth = Number.isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;\n            return details.width !== defaultWidth;\n        });\n\n        return hasObjectChanged;\n    };\n\n    // Update column details from outside if provided. Note, that in \"sort columns only\" mode\n    // the columns details are undefined and no column widths can be set\n    const [previousColumnDetails, setPreviousColumnDetails] = useState(extColumnsDetails);\n    if (!isEqual(columnsDetails, previousColumnDetails)) {\n        const columnsDetailsChanged = hasColumnsDetailsChanged(extColumnsDetails);\n        setColumnsDetails(columnsDetailsChanged ? extColumnsDetails : columnsDetails);\n        setPreviousColumnDetails(extColumnsDetails);\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        window.setTimeout(deleteMovedColumn, 500);\n    };\n\n    const handleResetColumnChanges = () => setIsResetAll(true);\n    const handleCancelResetColumnChanges = () => setIsResetAll(false);\n\n    const resetColumnsDetails = (details: TableColumnDetailsMap) => {\n        return mapValues(details, (singleColumnDetails: TableColumnDetails) => {\n            return {\n                ...singleColumnDetails,\n                width: singleColumnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH,\n            };\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        if (columnsDetails[column]) {\n            columnsDetails[column].width = value;\n        } else {\n            columnsDetails[column] = {\n                width: value,\n                defaultWidth: 0,\n                maxWidth: MAX_COLUMN_WIDTH,\n            };\n        }\n\n        setColumnsDetails(columnsDetails);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, columnsDetails[column]);\n        }\n    };\n\n    const handleResetColumnWidth = (column: keyof TableColumnDetailsMap) => {\n        const updatedColumnDetails = columnsDetails[column];\n        updatedColumnDetails.width = updatedColumnDetails.defaultWidth;\n\n        setColumnsDetails(columnsDetails);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, columnsDetails[column]);\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","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","useEffect","getColumnLabelStringsFromDOM","hasColumnsDetailsChanged","columnsDetailsToCheck","isEmpty","some","details","defaultWidth","previousColumnDetails","setPreviousColumnDetails","isEqual","columnsDetailsChanged","labels","columnStrings","label","dataKey","updatedLabel","deleteMovedColumn","moveColumnToIndex","columnName","newIndex","changeMovedColumn","newColumnOrder","name","handleResetColumnChanges","handleCancelResetColumnChanges","resetColumnsDetails","mapValues","singleColumnDetails","resetAllColumnChanges","defaultColumnsDetails","discardColumnChanges","handleManuallyApplyChanges","toggleHideColumn","column","newHiddenColumns","handleSearchChange","searchValue","newSearch","handleColumnWidthChange","value","handleResetColumnWidth","updatedColumnDetails","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 classNames from 'classnames';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, mapValues, some } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { arrayMove } from '@dnd-kit/sortable';\n\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nimport Dialog from '../dialog/Dialog';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { TableSettingsDialogFooter } from './TableSettingsDialogFooter';\nimport { TableSettingsListContainer } from './TableSettingsListContainer';\nimport { filterColumns } from './TableSettingsListItem';\nimport type { TableColumnDetailsMap, ColumnLabelStrings, TableColumnDetails } from './TableSettingsDialog.types';\n\nconst DEFAULT_COLUMN_WIDTH = 0;\nconst MAX_COLUMN_WIDTH = 1000;\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     * 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        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        // onCancel = 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    // Update items from outside\n    useEffect(() => {\n        setColumnSearchValue(extColumnSearchValue);\n        setColumnOrder(extColumnOrder);\n        setHiddenColumns(extHiddenColumns);\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\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(columnsDetailsToCheck)) {\n            return false;\n        }\n\n        const hasObjectChanged = some(columnsDetailsToCheck, (details: TableColumnDetails) => {\n            const defaultWidth = Number.isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;\n            return details.width !== defaultWidth;\n        });\n\n        return hasObjectChanged;\n    };\n\n    // Update column details from outside if provided. Note, that in \"sort columns only\" mode\n    // the columns details are undefined and no column widths can be set\n    const [previousColumnDetails, setPreviousColumnDetails] = useState(extColumnsDetails);\n    if (!isEqual(columnsDetails, previousColumnDetails)) {\n        const columnsDetailsChanged = hasColumnsDetailsChanged(extColumnsDetails);\n        setColumnsDetails(columnsDetailsChanged ? extColumnsDetails : columnsDetails);\n        setPreviousColumnDetails(extColumnsDetails);\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        window.setTimeout(deleteMovedColumn, 500);\n    };\n\n    const handleResetColumnChanges = () => setIsResetAll(true);\n    const handleCancelResetColumnChanges = () => setIsResetAll(false);\n\n    const resetColumnsDetails = (details: TableColumnDetailsMap) => {\n        return mapValues(details, (singleColumnDetails: TableColumnDetails) => {\n            return {\n                ...singleColumnDetails,\n                width: singleColumnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH,\n            };\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        if (columnsDetails[column]) {\n            columnsDetails[column].width = value;\n        } else {\n            columnsDetails[column] = {\n                width: value,\n                defaultWidth: 0,\n                maxWidth: MAX_COLUMN_WIDTH,\n            };\n        }\n\n        setColumnsDetails(columnsDetails);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, columnsDetails[column]);\n        }\n    };\n\n    const handleResetColumnWidth = (column: keyof TableColumnDetailsMap) => {\n        const updatedColumnDetails = columnsDetails[column];\n        updatedColumnDetails.width = updatedColumnDetails.defaultWidth;\n\n        setColumnsDetails(columnsDetails);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, columnsDetails[column]);\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","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","useEffect","getColumnLabelStringsFromDOM","externalColumnOrder","externalHiddenColumns","externalColumnsDetails","hasChangesFromDefaults","isEqual","hasColumnsDetailsChanged","columnsDetailsToCheck","isEmpty","some","details","defaultWidth","previousColumnDetails","setPreviousColumnDetails","columnsDetailsChanged","labels","columnStrings","label","dataKey","updatedLabel","deleteMovedColumn","moveColumnToIndex","columnName","newIndex","changeMovedColumn","newColumnOrder","name","handleResetColumnChanges","handleCancelResetColumnChanges","resetColumnsDetails","mapValues","singleColumnDetails","resetAllColumnChanges","defaultColumnsDetails","discardColumnChanges","handleManuallyApplyChanges","toggleHideColumn","column","newHiddenColumns","handleSearchChange","searchValue","newSearch","handleColumnWidthChange","value","handleResetColumnWidth","updatedColumnDetails","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/TableSettingsDialogFooter.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import b from "classnames";
+import y from "classnames";
 import e from "../button/Button.js";
-const R = (i) => {
+const R = (l) => {
   const {
-    hasChanged: l,
+    hasChanged: i,
     isResetAll: o,
     immediateChange: s,
     resetButtonText: a,
@@ -14,12 +14,12 @@ const R = (i) => {
     onResetColumnChanges: d,
     onDiscardChanges: C,
     onApplyChanges: g,
-    onConfirmResetColumnChanges: p,
-    onCancelResetColumnChanges: u
-  } = i, y = b("btn", "btn-link", !l && "disabled");
+    onConfirmResetColumnChanges: u,
+    onCancelResetColumnChanges: p
+  } = l, b = y("btn", "btn-default btn-link", !i && "disabled");
   return /* @__PURE__ */ t("div", { className: "display-flex justify-content-between", children: [
     /* @__PURE__ */ t("div", { children: [
-      !o && /* @__PURE__ */ t("div", { className: y, onClick: d, children: [
+      !o && /* @__PURE__ */ t("div", { className: b, onClick: d, children: [
         /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-revert text-size-xs margin-right-10" }),
         a
       ] }),
@@ -30,7 +30,7 @@ const R = (i) => {
             iconOnly: !0,
             iconName: "rioglyph-remove",
             className: "margin-right-5 btn-outline",
-            onClick: u
+            onClick: p
           }
         ),
         /* @__PURE__ */ n(
@@ -39,7 +39,7 @@ const R = (i) => {
             iconOnly: !0,
             bsStyle: e.PRIMARY,
             iconName: "rioglyph-ok",
-            onClick: p
+            onClick: u
           }
         )
       ] })

package/components/table/TableSettingsDialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsDialogFooter.js","sources":["../../../src/components/table/TableSettingsDialogFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\n\nexport type TableSettingsDialogFooterProps = {\n    hasChanged: boolean;\n    isResetAll: boolean;\n    immediateChange: boolean;\n    resetButtonText: string | ReactNode;\n    closeButtonText: string | ReactNode;\n    cancelButtonText: string | ReactNode;\n    applyButtonText: string | ReactNode;\n    onHide: () => void;\n    onResetColumnChanges: () => void;\n    onDiscardChanges: () => void;\n    onApplyChanges: () => void;\n    onConfirmResetColumnChanges: () => void;\n    onCancelResetColumnChanges: () => void;\n};\n\nexport const TableSettingsDialogFooter = (props: TableSettingsDialogFooterProps) => {\n    const {\n        hasChanged,\n        isResetAll,\n        immediateChange,\n        resetButtonText,\n        closeButtonText,\n        cancelButtonText,\n        applyButtonText,\n        onHide,\n        onResetColumnChanges,\n        onDiscardChanges,\n        onApplyChanges,\n        onConfirmResetColumnChanges,\n        onCancelResetColumnChanges,\n    } = props;\n\n    const restButtonClassNames = classNames('btn', 'btn-link', !hasChanged && 'disabled');\n\n    return (\n        <div className='display-flex justify-content-between'>\n            <div>\n                {!isResetAll && (\n                    <div className={restButtonClassNames} onClick={onResetColumnChanges}>\n                        <span className='rioglyph rioglyph-revert text-size-xs margin-right-10' />\n                        {resetButtonText}\n                    </div>\n                )}\n                {isResetAll && (\n                    <div className='btn-group'>\n                        <Button\n                            iconOnly\n                            iconName='rioglyph-remove'\n                            className='margin-right-5 btn-outline'\n                            onClick={onCancelResetColumnChanges}\n                        />\n                        <Button\n                            iconOnly\n                            bsStyle={Button.PRIMARY}\n                            iconName='rioglyph-ok'\n                            onClick={onConfirmResetColumnChanges}\n                        />\n                    </div>\n                )}\n            </div>\n            {immediateChange ? (\n                <Button onClick={onHide}>{closeButtonText}</Button>\n            ) : (\n                <div className='btn-toolbar'>\n                    <Button onClick={onDiscardChanges}>{cancelButtonText}</Button>\n                    <Button bsStyle={Button.PRIMARY} onClick={onApplyChanges}>\n                        {applyButtonText}\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsDialogFooter","props","hasChanged","isResetAll","immediateChange","resetButtonText","closeButtonText","cancelButtonText","applyButtonText","onHide","onResetColumnChanges","onDiscardChanges","onApplyChanges","onConfirmResetColumnChanges","onCancelResetColumnChanges","restButtonClassNames","classNames","jsxs","jsx","Button"],"mappings":";;;AAqBO,MAAMA,IAA4B,CAACC,MAA0C;AAChF,QAAM;AAAA,IACF,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,4BAAAC;AAAA,EAAA,IACAb,GAEEc,IAAuBC,EAAW,OAAO,YAAY,CAACd,KAAc,UAAU;AAEpF,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EACI,UAAA;AAAA,MAAA,CAACd,KACE,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAAsB,SAASL,GAC3C,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,wDAAA,CAAwD;AAAA,QACvEb;AAAA,MAAA,GACL;AAAA,MAEHF,KACG,gBAAAc,EAAC,OAAA,EAAI,WAAU,aACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAQ;AAAA,YACR,UAAS;AAAA,YACT,WAAU;AAAA,YACV,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAQ;AAAA,YACR,SAASA,EAAO;AAAA,YAChB,UAAS;AAAA,YACT,SAASN;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IACCT,IACG,gBAAAc,EAACC,GAAA,EAAO,SAASV,GAAS,aAAgB,IAE1C,gBAAAQ,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAO,SAASR,GAAmB,UAAAJ,GAAiB;AAAA,wBACpDY,GAAA,EAAO,SAASA,EAAO,SAAS,SAASP,GACrC,UAAAJ,EAAA,CACL;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableSettingsDialogFooter.js","sources":["../../../src/components/table/TableSettingsDialogFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\n\nexport type TableSettingsDialogFooterProps = {\n    hasChanged: boolean;\n    isResetAll: boolean;\n    immediateChange: boolean;\n    resetButtonText: string | ReactNode;\n    closeButtonText: string | ReactNode;\n    cancelButtonText: string | ReactNode;\n    applyButtonText: string | ReactNode;\n    onHide: () => void;\n    onResetColumnChanges: () => void;\n    onDiscardChanges: () => void;\n    onApplyChanges: () => void;\n    onConfirmResetColumnChanges: () => void;\n    onCancelResetColumnChanges: () => void;\n};\n\nexport const TableSettingsDialogFooter = (props: TableSettingsDialogFooterProps) => {\n    const {\n        hasChanged,\n        isResetAll,\n        immediateChange,\n        resetButtonText,\n        closeButtonText,\n        cancelButtonText,\n        applyButtonText,\n        onHide,\n        onResetColumnChanges,\n        onDiscardChanges,\n        onApplyChanges,\n        onConfirmResetColumnChanges,\n        onCancelResetColumnChanges,\n    } = props;\n\n    const restButtonClassNames = classNames('btn', 'btn-default btn-link', !hasChanged && 'disabled');\n\n    return (\n        <div className='display-flex justify-content-between'>\n            <div>\n                {!isResetAll && (\n                    <div className={restButtonClassNames} onClick={onResetColumnChanges}>\n                        <span className='rioglyph rioglyph-revert text-size-xs margin-right-10' />\n                        {resetButtonText}\n                    </div>\n                )}\n                {isResetAll && (\n                    <div className='btn-group'>\n                        <Button\n                            iconOnly\n                            iconName='rioglyph-remove'\n                            className='margin-right-5 btn-outline'\n                            onClick={onCancelResetColumnChanges}\n                        />\n                        <Button\n                            iconOnly\n                            bsStyle={Button.PRIMARY}\n                            iconName='rioglyph-ok'\n                            onClick={onConfirmResetColumnChanges}\n                        />\n                    </div>\n                )}\n            </div>\n            {immediateChange ? (\n                <Button onClick={onHide}>{closeButtonText}</Button>\n            ) : (\n                <div className='btn-toolbar'>\n                    <Button onClick={onDiscardChanges}>{cancelButtonText}</Button>\n                    <Button bsStyle={Button.PRIMARY} onClick={onApplyChanges}>\n                        {applyButtonText}\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsDialogFooter","props","hasChanged","isResetAll","immediateChange","resetButtonText","closeButtonText","cancelButtonText","applyButtonText","onHide","onResetColumnChanges","onDiscardChanges","onApplyChanges","onConfirmResetColumnChanges","onCancelResetColumnChanges","restButtonClassNames","classNames","jsxs","jsx","Button"],"mappings":";;;AAqBO,MAAMA,IAA4B,CAACC,MAA0C;AAChF,QAAM;AAAA,IACF,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,4BAAAC;AAAA,EAAA,IACAb,GAEEc,IAAuBC,EAAW,OAAO,wBAAwB,CAACd,KAAc,UAAU;AAEhG,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EACI,UAAA;AAAA,MAAA,CAACd,KACE,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAAsB,SAASL,GAC3C,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,wDAAA,CAAwD;AAAA,QACvEb;AAAA,MAAA,GACL;AAAA,MAEHF,KACG,gBAAAc,EAAC,OAAA,EAAI,WAAU,aACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAQ;AAAA,YACR,UAAS;AAAA,YACT,WAAU;AAAA,YACV,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAQ;AAAA,YACR,SAASA,EAAO;AAAA,YAChB,UAAS;AAAA,YACT,SAASN;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IACCT,IACG,gBAAAc,EAACC,GAAA,EAAO,SAASV,GAAS,aAAgB,IAE1C,gBAAAQ,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAO,SAASR,GAAmB,UAAAJ,GAAiB;AAAA,wBACpDY,GAAA,EAAO,SAASA,EAAO,SAAS,SAASP,GACrC,UAAAJ,EAAA,CACL;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableViewToggles.d.ts

@@ -3,12 +3,30 @@ export type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';
 export type TableViewTogglesProps = {
     /**
      * The current viewType for controlling the TablesViewToggles component.
+     *
+     * Possible values are:
+     *
+     * - `'SINGLE_CARD'`
+     * - `'MULTI_CARDS'`
+     * - `'TABLE'`
+     * - `TableViewToggles.VIEW_TYPE_TABLE`
+     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`
+     * - `TableViewToggles.VIEW_TYPE_CARD`
      */
     viewType?: TableViewTogglesViewType;
     /**
      * Defines the initial viewType (when viewType is not controlled from the outside).
      *
-     * @default TableViewToggles.VIEW_TYPE_TABLE
+     * Possible values are:
+     *
+     * - `'SINGLE_CARD'`
+     * - `'MULTI_CARDS'`
+     * - `'TABLE'`
+     * - `TableViewToggles.VIEW_TYPE_TABLE`
+     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`
+     * - `TableViewToggles.VIEW_TYPE_CARD`
+     *
+     * @default TableViewToggles.VIEW_TYPE
      */
     initialViewType?: TableViewTogglesViewType;
     /**
@@ -20,6 +38,8 @@ export type TableViewTogglesProps = {
     /**
      * Callback function for when the user wants to change the viewType.
      *
+     * Receives the new type as an argument.
+     *
      * @param viewType The new viewType selected by the user.
      */
     onViewTypeChange: (viewType: TableViewTogglesViewType) => void;

package/components/table/TableViewToggles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\n\n// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration\n\nconst wrapWithTooltip = (tooltipContent: ReactNode, element: JSX.Element) => (\n    <OverlayTrigger\n        placement='bottom'\n        overlay={\n            <Tooltip id='tooltip' allowOnTouch>\n                {tooltipContent}\n            </Tooltip>\n        }\n    >\n        {element}\n    </OverlayTrigger>\n);\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TypeButtonProps = {\n    viewType: TableViewTogglesViewType;\n    currentViewType: TableViewTogglesViewType;\n    disabledViewTypes: TableViewTogglesViewType[];\n    tooltipContent: ReactNode;\n    onClick: (vt: TableViewTogglesViewType) => void;\n    disabled: boolean;\n};\n\nconst TypeButton = (props: TypeButtonProps) => {\n    const { viewType, currentViewType, disabledViewTypes, tooltipContent, onClick, disabled } = props;\n\n    if (disabledViewTypes.includes(viewType)) {\n        return null;\n    }\n\n    const classes = classNames(\n        'btn btn-default btn-icon-only',\n        disabled && 'disabled pointer-events-none',\n        viewType === currentViewType && 'active'\n    );\n\n    const button = (\n        <button className={classes} type='button' onClick={() => onClick(viewType)}>\n            <span className={`rioglyph ${typeIcons[viewType]}`} />\n        </button>\n    );\n\n    return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * @default TableViewToggles.VIEW_TYPE_TABLE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        singleCardViewTooltipContent,\n        multiCardsViewTooltipContent,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const wrapperClassNames = classNames(\n        'TableViewToggles',\n        'btn-group',\n        'display-flex',\n        'flex-row',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <TypeButton\n                viewType='TABLE'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={tableViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='SINGLE_CARD'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={singleCardViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='MULTI_CARDS'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={multiCardsViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["wrapWithTooltip","tooltipContent","element","jsx","OverlayTrigger","Tooltip","typeIcons","TypeButton","props","viewType","currentViewType","disabledViewTypes","onClick","disabled","classes","classNames","button","TableViewToggles","initialViewType","onViewTypeChange","noop","tableViewTooltipContent","singleCardViewTooltipContent","multiCardsViewTooltipContent","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","wrapperClassNames","jsxs"],"mappings":";;;;;;AASA,MAAMA,IAAkB,CAACC,GAA2BC,MAChD,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,SACI,gBAAAD,EAACE,GAAA,EAAQ,IAAG,WAAU,cAAY,IAC7B,UAAAJ,GACL;AAAA,IAGH,UAAAC;AAAA,EAAA;AACL,GAGEI,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAWMC,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,mBAAAC,GAAmB,gBAAAV,GAAgB,SAAAW,GAAS,UAAAC,MAAaL;AAE5F,MAAIG,EAAkB,SAASF,CAAQ;AACnC,WAAO;AAGX,QAAMK,IAAUC;AAAA,IACZ;AAAA,IACAF,KAAY;AAAA,IACZJ,MAAaC,KAAmB;AAAA,EAAA,GAG9BM,sBACD,UAAA,EAAO,WAAWF,GAAS,MAAK,UAAS,SAAS,MAAMF,EAAQH,CAAQ,GACrE,UAAA,gBAAAN,EAAC,UAAK,WAAW,YAAYG,EAAUG,CAAQ,CAAC,IAAI,EAAA,CACxD;AAGJ,SAAOR,IAAiBD,EAAgBC,GAAgBe,CAAM,IAAIA;AACtE,GA8DMC,IAAmB,CAACT,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAS,IAAkB;AAAA,IAClB,mBAAAP,IAAoB,CAAA;AAAA,IACpB,kBAAAQ,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,UAAAV,IAAW;AAAA,IACX,WAAAW;AAAA,IACA,GAAGC;AAAA,EAAA,IACHjB,GAEE,CAACkB,GAAkBC,CAAmB,IAAIC,EAASV,CAAe;AAGxE,EAAAW,EAAU,MAAM;AACZ,IAAIpB,KACAkB,EAAoBlB,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMqB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBZ,EAAiBY,CAAE;AAAA,EACvB,GAEMC,IAAoBjB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAS,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAS,EAAC,OAAA,EAAK,GAAGR,GAAgB,WAAWO,GAChC,UAAA;AAAA,IAAA,gBAAA7B;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBU;AAAA,QAChB,SAASS;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBW;AAAA,QAChB,SAASQ;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBY;AAAA,QAChB,SAASO;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAGAI,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}
+{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\n\n// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration\n\nconst wrapWithTooltip = (tooltipContent: ReactNode, element: JSX.Element) => (\n    <OverlayTrigger\n        placement='bottom'\n        overlay={\n            <Tooltip id='tooltip' allowOnTouch>\n                {tooltipContent}\n            </Tooltip>\n        }\n    >\n        {element}\n    </OverlayTrigger>\n);\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TypeButtonProps = {\n    viewType: TableViewTogglesViewType;\n    currentViewType: TableViewTogglesViewType;\n    disabledViewTypes: TableViewTogglesViewType[];\n    tooltipContent: ReactNode;\n    onClick: (vt: TableViewTogglesViewType) => void;\n    disabled: boolean;\n};\n\nconst TypeButton = (props: TypeButtonProps) => {\n    const { viewType, currentViewType, disabledViewTypes, tooltipContent, onClick, disabled } = props;\n\n    if (disabledViewTypes.includes(viewType)) {\n        return null;\n    }\n\n    const classes = classNames(\n        'btn btn-default btn-icon-only',\n        disabled && 'disabled pointer-events-none',\n        viewType === currentViewType && 'active'\n    );\n\n    const button = (\n        <button className={classes} type='button' onClick={() => onClick(viewType)}>\n            <span className={`rioglyph ${typeIcons[viewType]}`} />\n        </button>\n    );\n\n    return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_CARD`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_CARD`\n     *\n     * @default TableViewToggles.VIEW_TYPE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        singleCardViewTooltipContent,\n        multiCardsViewTooltipContent,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const wrapperClassNames = classNames(\n        'TableViewToggles',\n        'btn-group',\n        'display-flex',\n        'flex-row',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <TypeButton\n                viewType='TABLE'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={tableViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='SINGLE_CARD'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={singleCardViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='MULTI_CARDS'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={multiCardsViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["wrapWithTooltip","tooltipContent","element","jsx","OverlayTrigger","Tooltip","typeIcons","TypeButton","props","viewType","currentViewType","disabledViewTypes","onClick","disabled","classes","classNames","button","TableViewToggles","initialViewType","onViewTypeChange","noop","tableViewTooltipContent","singleCardViewTooltipContent","multiCardsViewTooltipContent","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","wrapperClassNames","jsxs"],"mappings":";;;;;;AASA,MAAMA,IAAkB,CAACC,GAA2BC,MAChD,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,SACI,gBAAAD,EAACE,GAAA,EAAQ,IAAG,WAAU,cAAY,IAC7B,UAAAJ,GACL;AAAA,IAGH,UAAAC;AAAA,EAAA;AACL,GAGEI,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAWMC,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,mBAAAC,GAAmB,gBAAAV,GAAgB,SAAAW,GAAS,UAAAC,MAAaL;AAE5F,MAAIG,EAAkB,SAASF,CAAQ;AACnC,WAAO;AAGX,QAAMK,IAAUC;AAAA,IACZ;AAAA,IACAF,KAAY;AAAA,IACZJ,MAAaC,KAAmB;AAAA,EAAA,GAG9BM,sBACD,UAAA,EAAO,WAAWF,GAAS,MAAK,UAAS,SAAS,MAAMF,EAAQH,CAAQ,GACrE,UAAA,gBAAAN,EAAC,UAAK,WAAW,YAAYG,EAAUG,CAAQ,CAAC,IAAI,EAAA,CACxD;AAGJ,SAAOR,IAAiBD,EAAgBC,GAAgBe,CAAM,IAAIA;AACtE,GAkFMC,IAAmB,CAACT,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAS,IAAkB;AAAA,IAClB,mBAAAP,IAAoB,CAAA;AAAA,IACpB,kBAAAQ,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,UAAAV,IAAW;AAAA,IACX,WAAAW;AAAA,IACA,GAAGC;AAAA,EAAA,IACHjB,GAEE,CAACkB,GAAkBC,CAAmB,IAAIC,EAASV,CAAe;AAGxE,EAAAW,EAAU,MAAM;AACZ,IAAIpB,KACAkB,EAAoBlB,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMqB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBZ,EAAiBY,CAAE;AAAA,EACvB,GAEMC,IAAoBjB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAS,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAS,EAAC,OAAA,EAAK,GAAGR,GAAgB,WAAWO,GAChC,UAAA;AAAA,IAAA,gBAAA7B;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBU;AAAA,QAChB,SAASS;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBW;AAAA,QAChB,SAASQ;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBY;AAAA,QAChB,SAASO;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAGAI,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}

package/components/tag/Tag.d.ts

@@ -55,15 +55,20 @@ export type TagProps = {
     /**
      * Defines if you want to render the tag in a different size.
      *
-     * Possible values are: 'small' and 'medium'
+     * Possible values are: `'small'` and `'medium'`
      */
     size?: 'small' | 'medium';
+    /**
+     * Allows to render text on multiple lines.
+     *
+     * @default false
+     */
     multiline?: boolean;
-    [remainingProp: string]: unknown;
     /**
      * Additional classes to be set on the wrapper element.
      */
     className?: string;
+    [remainingProp: string]: unknown;
 };
 declare const Tag: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TagProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Tag;