@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/table/native/TableSettingsColumnDetails.js

@@ -1,57 +1,51 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { noop as m } from "es-toolkit/compat";
-import x from "../../../utils/classNames.js";
-import N from "../../slider/Slider.js";
-const j = (r) => {
-  const {
-    width: e = 0,
-    defaultWidth: d = 0,
-    maxWidth: a,
-    column: o,
-    maxColumnWidth: l,
-    onColumnWidthChange: s = m,
-    onResetColumnWidth: u = m
-  } = r, c = (n) => {
-    const C = n.target.value ? Number.parseInt(n.target.value, 10) : 0, b = Math.min(C, a || l);
-    s(o, b);
-  }, h = (n) => s(o, n), p = () => u(o), g = x(
-    "btn",
-    "btn-muted",
-    "btn-icon-only",
-    "btn-sm",
-    "margin-left-10",
-    e === d && "disabled"
-  );
-  return /* @__PURE__ */ i("div", { className: "table-settings-item-body", children: [
-    /* @__PURE__ */ t(
-      N,
-      {
-        className: "margin-bottom-0",
-        value: e,
-        minValue: 0,
-        maxValue: a || l,
-        step: 1,
-        onChange: h
-      }
-    ),
-    /* @__PURE__ */ t("div", { className: g, role: "button", onClick: p, children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-revert" }) }),
-    /* @__PURE__ */ t("div", { className: "column-width-input", children: /* @__PURE__ */ i("div", { className: "input-group", children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          className: "form-control text-right padding-right-5 no-controls",
-          type: "number",
-          value: e || "",
-          min: 0,
-          max: a || l,
-          onChange: c
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: "input-group-addon", children: "px" })
-    ] }) })
-  ] });
+import e from "../../../utils/classNames.js";
+import t from "../../slider/Slider.js";
+import { noop as n } from "es-toolkit/compat";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/table/native/TableSettingsColumnDetails.tsx
+var a = (a) => {
+	let { width: o = 0, defaultWidth: s = 0, maxWidth: c, column: l, maxColumnWidth: u, onColumnWidthChange: d = n, onResetColumnWidth: f = n } = a, p = (e) => {
+		let t = e.target.value ? Number.parseInt(e.target.value, 10) : 0;
+		d(l, Math.min(t, c || u));
+	}, m = (e) => d(l, e), h = () => f(l), g = e("btn", "btn-muted", "btn-icon-only", "btn-sm", "margin-left-10", o === s && "disabled");
+	return /* @__PURE__ */ i("div", {
+		className: "table-settings-item-body",
+		children: [
+			/* @__PURE__ */ r(t, {
+				className: "margin-bottom-0",
+				value: o,
+				minValue: 0,
+				maxValue: c || u,
+				step: 1,
+				onChange: m
+			}),
+			/* @__PURE__ */ r("div", {
+				className: g,
+				role: "button",
+				onClick: h,
+				children: /* @__PURE__ */ r("span", { className: "uikit-icon icon-revert" })
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "column-width-input",
+				children: /* @__PURE__ */ i("div", {
+					className: "input-group",
+					children: [/* @__PURE__ */ r("input", {
+						className: "form-control text-right padding-right-5 no-controls",
+						type: "number",
+						value: o || "",
+						min: 0,
+						max: c || u,
+						onChange: p
+					}), /* @__PURE__ */ r("div", {
+						className: "input-group-addon",
+						children: "px"
+					})]
+				})
+			})
+		]
+	});
 };
-export {
-  j as TableSettingsColumnDetails
-};
-//# sourceMappingURL=TableSettingsColumnDetails.js.map
+//#endregion
+export { a as TableSettingsColumnDetails };
+
+//# sourceMappingURL=TableSettingsColumnDetails.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsColumnDetails.js","sources":["../../../../src/components/table/native/TableSettingsColumnDetails.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../../utils/classNames';\nimport Slider from '../../slider/Slider';\nimport type { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog';\n\nexport type TableSettingsColumnDetailsProps = TableColumnDetails & {\n    column: string;\n    maxColumnWidth: number;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n};\n\nexport const TableSettingsColumnDetails = (props: TableSettingsColumnDetailsProps) => {\n    const {\n        width = 0,\n        defaultWidth = 0,\n        maxWidth,\n        column,\n        maxColumnWidth,\n        onColumnWidthChange = noop,\n        onResetColumnWidth = noop,\n    } = props;\n\n    const handleWidthInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = event.target.value ? Number.parseInt(event.target.value, 10) : 0;\n        const max = maxWidth || maxColumnWidth;\n        const value = Math.min(parsedValue, max);\n        onColumnWidthChange(column, value);\n    };\n\n    const handleColumnWidthChange = (value: number) => onColumnWidthChange(column, value);\n\n    const handleResetColumnWidth = () => onResetColumnWidth(column);\n\n    const resetWidthButtonClassNames = classNames(\n        'btn',\n        'btn-muted',\n        'btn-icon-only',\n        'btn-sm',\n        'margin-left-10',\n        width === defaultWidth && 'disabled'\n    );\n\n    return (\n        <div className='table-settings-item-body'>\n            <Slider\n                className='margin-bottom-0'\n                value={width}\n                minValue={0}\n                maxValue={maxWidth || maxColumnWidth}\n                step={1}\n                onChange={handleColumnWidthChange}\n            />\n            <div className={resetWidthButtonClassNames} role='button' onClick={handleResetColumnWidth}>\n                <span className='rioglyph rioglyph-revert' />\n            </div>\n            <div className='column-width-input'>\n                <div className='input-group'>\n                    <input\n                        className='form-control text-right padding-right-5 no-controls'\n                        type='number'\n                        value={width || ''}\n                        min={0}\n                        max={maxWidth || maxColumnWidth}\n                        onChange={handleWidthInputChange}\n                    />\n                    <div className='input-group-addon'>px</div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnDetails","props","width","defaultWidth","maxWidth","column","maxColumnWidth","onColumnWidthChange","noop","onResetColumnWidth","handleWidthInputChange","event","parsedValue","value","handleColumnWidthChange","handleResetColumnWidth","resetWidthButtonClassNames","classNames","jsxs","jsx","Slider"],"mappings":";;;;AAcO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC,IAAsBC;AAAA,IACtB,oBAAAC,IAAqBD;AAAA,EAAA,IACrBP,GAEES,IAAyB,CAACC,MAAyC;AACrE,UAAMC,IAAcD,EAAM,OAAO,QAAQ,OAAO,SAASA,EAAM,OAAO,OAAO,EAAE,IAAI,GAE7EE,IAAQ,KAAK,IAAID,GADXR,KAAYE,CACe;AACvC,IAAAC,EAAoBF,GAAQQ,CAAK;AAAA,EACrC,GAEMC,IAA0B,CAACD,MAAkBN,EAAoBF,GAAQQ,CAAK,GAE9EE,IAAyB,MAAMN,EAAmBJ,CAAM,GAExDW,IAA6BC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAUC,KAAgB;AAAA,EAAA;AAG9B,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,4BACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAOlB;AAAA,QACP,UAAU;AAAA,QACV,UAAUE,KAAYE;AAAA,QACtB,MAAM;AAAA,QACN,UAAUQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAA4B,MAAK,UAAS,SAASD,GAC/D,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B,GAC/C;AAAA,sBACC,OAAA,EAAI,WAAU,sBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,OAAOjB,KAAS;AAAA,UAChB,KAAK;AAAA,UACL,KAAKE,KAAYE;AAAA,UACjB,UAAUI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBAAoB,UAAA,KAAA,CAAE;AAAA,IAAA,EAAA,CACzC,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"TableSettingsColumnDetails.js","names":[],"sources":["../../../../src/components/table/native/TableSettingsColumnDetails.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../../utils/classNames';\nimport Slider from '../../slider/Slider';\nimport type { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog';\n\nexport type TableSettingsColumnDetailsProps = TableColumnDetails & {\n    column: string;\n    maxColumnWidth: number;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n};\n\nexport const TableSettingsColumnDetails = (props: TableSettingsColumnDetailsProps) => {\n    const {\n        width = 0,\n        defaultWidth = 0,\n        maxWidth,\n        column,\n        maxColumnWidth,\n        onColumnWidthChange = noop,\n        onResetColumnWidth = noop,\n    } = props;\n\n    const handleWidthInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = event.target.value ? Number.parseInt(event.target.value, 10) : 0;\n        const max = maxWidth || maxColumnWidth;\n        const value = Math.min(parsedValue, max);\n        onColumnWidthChange(column, value);\n    };\n\n    const handleColumnWidthChange = (value: number) => onColumnWidthChange(column, value);\n\n    const handleResetColumnWidth = () => onResetColumnWidth(column);\n\n    const resetWidthButtonClassNames = classNames(\n        'btn',\n        'btn-muted',\n        'btn-icon-only',\n        'btn-sm',\n        'margin-left-10',\n        width === defaultWidth && 'disabled'\n    );\n\n    return (\n        <div className='table-settings-item-body'>\n            <Slider\n                className='margin-bottom-0'\n                value={width}\n                minValue={0}\n                maxValue={maxWidth || maxColumnWidth}\n                step={1}\n                onChange={handleColumnWidthChange}\n            />\n            <div className={resetWidthButtonClassNames} role='button' onClick={handleResetColumnWidth}>\n                <span className='uikit-icon icon-revert' />\n            </div>\n            <div className='column-width-input'>\n                <div className='input-group'>\n                    <input\n                        className='form-control text-right padding-right-5 no-controls'\n                        type='number'\n                        value={width || ''}\n                        min={0}\n                        max={maxWidth || maxColumnWidth}\n                        onChange={handleWidthInputChange}\n                    />\n                    <div className='input-group-addon'>px</div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":";;;;;AAcA,IAAa,KAA8B,MAA2C;CAClF,IAAM,EACF,WAAQ,GACR,kBAAe,GACf,aACA,WACA,mBACA,yBAAsB,GACtB,wBAAqB,MACrB,GAEE,KAA0B,MAAyC;EACrE,IAAM,IAAc,EAAM,OAAO,QAAQ,OAAO,SAAS,EAAM,OAAO,OAAO,EAAE,IAAI;EAGnF,EAAoB,GADN,KAAK,IAAI,GADX,KAAY,CAEI,CAAK;CACrC,GAEM,KAA2B,MAAkB,EAAoB,GAAQ,CAAK,GAE9E,UAA+B,EAAmB,CAAM,GAExD,IAA6B,EAC/B,OACA,aACA,iBACA,UACA,kBACA,MAAU,KAAgB,UAC9B;CAEA,OACI,kBAAC,OAAD;EAAK,WAAU;YAAf;GACI,kBAAC,GAAD;IACI,WAAU;IACV,OAAO;IACP,UAAU;IACV,UAAU,KAAY;IACtB,MAAM;IACN,UAAU;GACb,CAAA;GACD,kBAAC,OAAD;IAAK,WAAW;IAA4B,MAAK;IAAS,SAAS;cAC/D,kBAAC,QAAD,EAAM,WAAU,yBAA0B,CAAA;GACzC,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACX,kBAAC,OAAD;KAAK,WAAU;eAAf,CACI,kBAAC,SAAD;MACI,WAAU;MACV,MAAK;MACL,OAAO,KAAS;MAChB,KAAK;MACL,KAAK,KAAY;MACjB,UAAU;KACb,CAAA,GACD,kBAAC,OAAD;MAAK,WAAU;gBAAoB;KAAO,CAAA,CACzC;;GACJ,CAAA;EACJ;;AAEb"}

package/components/table/native/TableSettingsDialog.js

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