@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/switch/Switch.js

@@ -1,52 +1,94 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as I } from "react";
-import o from "classnames";
-import { noop as y } from "es-toolkit/function";
-import { getCurrentBackgroundColor as B } from "../../utils/currentColors.js";
-const r = I((d, h) => {
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as S, useRef as E, useState as O, useLayoutEffect as R } from "react";
+import { noop as P } from "es-toolkit/function";
+import m from "../../utils/classNames.js";
+import { getCurrentBackgroundColor as D } from "../../utils/currentColors.js";
+const f = 40, H = 28, U = ({ enabledText: d, disabledText: h, minWidth: n, autoMinWidth: x }) => {
+  const t = E(null), [p, u] = O(f), c = n !== void 0, e = [d, h].filter((s) => !!s).reduce(
+    (s, i) => i.length > s.length ? i : s,
+    ""
+  ), l = !!(d || h), a = !c && x, r = c ? n : a ? p : l ? void 0 : f;
+  return R(() => {
+    if (!a)
+      return;
+    if (!e) {
+      u(f);
+      return;
+    }
+    const s = t.current?.offsetWidth ?? 0, i = Math.ceil(s) + H;
+    u(Math.max(f, i));
+  }, [e, a]), { computedMinWidth: r, longestText: e, shouldUseAutoTextWidth: a, textMeasureRef: t };
+}, M = S((d, h) => {
   const {
-    keyName: i,
-    checked: m = !1,
-    enabledText: s,
-    minWidth: f = 40,
+    keyName: n,
+    checked: x = !1,
+    enabledText: t,
+    minWidth: p,
+    autoMinWidth: u = !1,
     disabled: c = !1,
-    color: p = "primary",
+    color: T = "primary",
     disabledText: e,
-    children: a,
-    className: w = "",
-    labelPosition: l = a ? "right" : void 0,
-    onChange: N = y,
-    ...g
-  } = d, u = (L) => {
-    N(L.target.checked);
-  }, x = s && e, C = s && !e, b = o("uikit-switch", w), T = o(
+    children: l,
+    className: a = "",
+    labelPosition: r = l ? "right" : void 0,
+    onChange: s = P,
+    customTextStyle: i = !1,
+    ...W
+  } = d, { computedMinWidth: C, longestText: g, shouldUseAutoTextWidth: v, textMeasureRef: A } = U({
+    enabledText: t,
+    disabledText: e,
+    minWidth: p,
+    autoMinWidth: u
+  }), I = (k) => {
+    s(k.target.checked);
+  }, L = !!(t && e), y = !!(t && !e), w = m("uikit-switch", a), B = m(
     "switch-label",
+    w,
     c && "cursor-not-allowed",
-    l && `label-position-${l}`
-  ), k = o("switch-content"), v = B(p);
-  return /* @__PURE__ */ t("div", { ref: h, ...g, className: b, children: /* @__PURE__ */ n("label", { className: T, children: [
-    /* @__PURE__ */ t(
+    r && `label-position-${r}`,
+    r === "left" && "display-inline-flex height-20"
+  ), _ = m("switch-content"), b = D(T);
+  return /* @__PURE__ */ o("div", { ref: h, ...W, className: w, children: /* @__PURE__ */ N("label", { className: B, children: [
+    v && g && /* @__PURE__ */ o("span", { ref: A, className: "switch-text-measure", "aria-hidden": "true", children: g }),
+    /* @__PURE__ */ o(
       "input",
       {
-        onChange: u,
-        checked: m,
+        onChange: I,
+        checked: x,
         type: "checkbox",
-        id: i,
+        id: n,
         className: "switch-input",
         disabled: c
       },
-      i
+      n
+    ),
+    /* @__PURE__ */ N(
+      "div",
+      {
+        className: _,
+        style: { color: b, minWidth: C },
+        children: [
+          L ? /* @__PURE__ */ o("div", { className: "switch-text", "data-on": t, "data-off": e }) : y && /* @__PURE__ */ o("div", { className: "switch-text", "data-on": t, "data-off": t }),
+          /* @__PURE__ */ o("div", { className: "switch-handle" })
+        ]
+      }
     ),
-    /* @__PURE__ */ n("div", { className: k, style: { color: v, minWidth: f }, children: [
-      x ? /* @__PURE__ */ t("div", { className: "switch-text", "data-on": s, "data-off": e }) : C && /* @__PURE__ */ t("div", { className: "switch-text", "data-on": s, "data-off": s }),
-      /* @__PURE__ */ t("div", { className: "switch-handle" })
-    ] }),
-    a && a
+    l && /* @__PURE__ */ o(
+      "div",
+      {
+        className: m(
+          "switch-text-wrapper",
+          "user-select-none",
+          i ? "" : "padding-top-1"
+        ),
+        children: l
+      }
+    )
   ] }) });
 });
-r.LABEL_POSITION_LEFT = "left";
-r.LABEL_POSITION_RIGHT = "right";
+M.LABEL_POSITION_LEFT = "left";
+M.LABEL_POSITION_RIGHT = "right";
 export {
-  r as default
+  M as default
 };
 //# sourceMappingURL=Switch.js.map

package/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, type ChangeEvent, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SwitchProps = {\n    /**\n     * Optional key that is used as key and as the id on the internal input.\n     */\n    keyName?: string;\n\n    /**\n     * Callback function triggered when clicking the button.\n     */\n    onChange?: (toggleState: boolean) => void;\n\n    /**\n     * Set active / inactive state.\n     *\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * Defines the color of the switch.\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * The min-width of the switch.\n     */\n    minWidth?: number;\n\n    /**\n     * Disables the component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The text used for the ON state.\n     */\n    enabledText?: string;\n\n    /**\n     * The text used for the OFF state.\n     */\n    disabledText?: string;\n\n    /**\n     * Defines the position of the switch label.\n     *\n     * Possible values are `left` and `right`.\n     */\n    labelPosition?: 'left' | 'right';\n\n    /**\n     * Additional class names added to the SVG element.\n     */\n    className?: string;\n};\n\nconst Switch = forwardRef((props: PropsWithChildren<SwitchProps>, ref: React.Ref<HTMLDivElement>) => {\n    const {\n        keyName,\n        checked = false,\n        enabledText,\n        minWidth = 40,\n        disabled = false,\n        color = 'primary',\n        disabledText,\n        children,\n        className = '',\n        labelPosition = children ? 'right' : undefined,\n        onChange = noop,\n        ...remainingProps\n    } = props;\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onChange(event.target.checked);\n    };\n\n    const hasMultipleText = enabledText && disabledText;\n    const hasSingleText = enabledText && !disabledText;\n\n    const switchClasses = classNames('uikit-switch', className);\n\n    const switchLabelClasses = classNames(\n        'switch-label',\n        disabled && 'cursor-not-allowed',\n        labelPosition && `label-position-${labelPosition}`\n    );\n\n    const switchContentClasses = classNames('switch-content');\n\n    const switchBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div ref={ref} {...remainingProps} className={switchClasses}>\n            <label className={switchLabelClasses}>\n                <input\n                    onChange={handleChange}\n                    checked={checked}\n                    type='checkbox'\n                    id={keyName}\n                    key={keyName}\n                    className='switch-input'\n                    disabled={disabled}\n                />\n                <div className={switchContentClasses} style={{ color: switchBackgroundColor, minWidth }}>\n                    {hasMultipleText ? (\n                        <div className='switch-text' data-on={enabledText} data-off={disabledText} />\n                    ) : (\n                        hasSingleText && <div className='switch-text' data-on={enabledText} data-off={enabledText} />\n                    )}\n                    <div className='switch-handle' />\n                </div>\n\n                {children && children}\n            </label>\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<PropsWithChildren<SwitchProps> & React.RefAttributes<HTMLDivElement>> & {\n    LABEL_POSITION_LEFT: 'left';\n    LABEL_POSITION_RIGHT: 'right';\n};\n\nSwitch.LABEL_POSITION_LEFT = 'left' as const;\nSwitch.LABEL_POSITION_RIGHT = 'right' as const;\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","ref","keyName","checked","enabledText","minWidth","disabled","color","disabledText","children","className","labelPosition","onChange","noop","remainingProps","handleChange","event","hasMultipleText","hasSingleText","switchClasses","classNames","switchLabelClasses","switchContentClasses","switchBackgroundColor","getCurrentBackgroundColor","jsx","jsxs"],"mappings":";;;;;AAkEA,MAAMA,IAASC,EAAW,CAACC,GAAuCC,MAAmC;AACjG,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgBF,IAAW,UAAU;AAAA,IACrC,UAAAG,IAAWC;AAAA,IACX,GAAGC;AAAA,EAAA,IACHd,GAEEe,IAAe,CAACC,MAAyC;AAC3D,IAAAJ,EAASI,EAAM,OAAO,OAAO;AAAA,EACjC,GAEMC,IAAkBb,KAAeI,GACjCU,IAAgBd,KAAe,CAACI,GAEhCW,IAAgBC,EAAW,gBAAgBV,CAAS,GAEpDW,IAAqBD;AAAA,IACvB;AAAA,IACAd,KAAY;AAAA,IACZK,KAAiB,kBAAkBA,CAAa;AAAA,EAAA,GAG9CW,IAAuBF,EAAW,gBAAgB,GAElDG,IAAwBC,EAA0BjB,CAAK;AAE7D,SACI,gBAAAkB,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGa,GAAgB,WAAWK,GAC1C,UAAA,gBAAAO,EAAC,SAAA,EAAM,WAAWL,GACd,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAUV;AAAA,QACV,SAAAZ;AAAA,QACA,MAAK;AAAA,QACL,IAAID;AAAA,QAEJ,WAAU;AAAA,QACV,UAAAI;AAAA,MAAA;AAAA,MAFKJ;AAAA,IAAA;AAAA,IAIT,gBAAAwB,EAAC,SAAI,WAAWJ,GAAsB,OAAO,EAAE,OAAOC,GAAuB,UAAAlB,EAAA,GACxE,UAAA;AAAA,MAAAY,sBACI,OAAA,EAAI,WAAU,eAAc,WAASb,GAAa,YAAUI,EAAA,CAAc,IAE3EU,uBAAkB,OAAA,EAAI,WAAU,eAAc,WAASd,GAAa,YAAUA,GAAa;AAAA,MAE/F,gBAAAqB,EAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,IAAA,GACnC;AAAA,IAEChB,KAAYA;AAAA,EAAA,EAAA,CACjB,EAAA,CACJ;AAER,CAAC;AAKDX,EAAO,sBAAsB;AAC7BA,EAAO,uBAAuB;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef, useState, type ChangeEvent, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst DEFAULT_MIN_WIDTH = 40;\nconst TEXT_HORIZONTAL_PADDING = 28;\n\ntype UseAutoMinWidthParams = {\n    enabledText?: string;\n    disabledText?: string;\n    minWidth?: number;\n    autoMinWidth: boolean;\n};\n\nconst useAutoMinWidth = ({ enabledText, disabledText, minWidth, autoMinWidth }: UseAutoMinWidthParams) => {\n    const textMeasureRef = useRef<HTMLSpanElement>(null);\n    const [measuredMinWidth, setMeasuredMinWidth] = useState<number>(DEFAULT_MIN_WIDTH);\n\n    const isMinWidthSet = minWidth !== undefined;\n    const textsToMeasure = [enabledText, disabledText].filter((text): text is string => Boolean(text));\n    const longestText = textsToMeasure.reduce(\n        (previous, current) => (current.length > previous.length ? current : previous),\n        ''\n    );\n    const hasAnyText = Boolean(enabledText || disabledText);\n    const shouldUseAutoTextWidth = !isMinWidthSet && autoMinWidth;\n\n    const computedMinWidth = isMinWidthSet\n        ? minWidth\n        : shouldUseAutoTextWidth\n          ? measuredMinWidth\n          : hasAnyText\n            ? undefined\n            : DEFAULT_MIN_WIDTH;\n\n    useLayoutEffect(() => {\n        if (!shouldUseAutoTextWidth) {\n            return;\n        }\n\n        if (!longestText) {\n            setMeasuredMinWidth(DEFAULT_MIN_WIDTH);\n            return;\n        }\n\n        const measuredTextWidth = textMeasureRef.current?.offsetWidth ?? 0;\n        const derivedWidth = Math.ceil(measuredTextWidth) + TEXT_HORIZONTAL_PADDING;\n        setMeasuredMinWidth(Math.max(DEFAULT_MIN_WIDTH, derivedWidth));\n    }, [longestText, shouldUseAutoTextWidth]);\n\n    return { computedMinWidth, longestText, shouldUseAutoTextWidth, textMeasureRef };\n};\n\nexport type SwitchProps = {\n    /**\n     * Optional key that is used as key and as the id on the internal input.\n     */\n    keyName?: string;\n\n    /**\n     * Callback function triggered when clicking the button.\n     */\n    onChange?: (toggleState: boolean) => void;\n\n    /**\n     * Set active / inactive state.\n     *\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * Defines the color of the switch.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'success'`\n     * - `'warning'`\n     * - `'danger'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * The min-width of the switch.\n     *\n     * If not set, the default min-width is `40`.\n     */\n    minWidth?: number;\n\n    /**\n     * Controls automatic text-based min-width behavior when `minWidth` is not set.\n     * Set to `true` to keep the width at the longer one of `enabledText` and `disabledText`.\n     *\n     * @default false\n     */\n    autoMinWidth?: boolean;\n\n    /**\n     * Disables the component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The text used for the ON state.\n     */\n    enabledText?: string;\n\n    /**\n     * The text used for the OFF state.\n     */\n    disabledText?: string;\n\n    /**\n     * Defines the position of the switch label.\n     * Defaults to `'right'` when children are present.\n     *\n     * Possible values are `'left'` and `'right'`.\n     *\n     * @default 'right'\n     */\n    labelPosition?: 'left' | 'right';\n\n    /**\n     * Use this flag if you want to have custom text styles.\n     *\n     * @default false\n     */\n    customTextStyle?: boolean;\n\n    /**\n     * Additional class names added to the SVG element.\n     */\n    className?: string;\n};\n\nconst Switch = forwardRef((props: PropsWithChildren<SwitchProps>, ref: React.Ref<HTMLDivElement>) => {\n    const {\n        keyName,\n        checked = false,\n        enabledText,\n        minWidth,\n        autoMinWidth = false,\n        disabled = false,\n        color = 'primary',\n        disabledText,\n        children,\n        className = '',\n        labelPosition = children ? 'right' : undefined,\n        onChange = noop,\n        customTextStyle = false,\n        ...remainingProps\n    } = props;\n\n    const { computedMinWidth, longestText, shouldUseAutoTextWidth, textMeasureRef } = useAutoMinWidth({\n        enabledText,\n        disabledText,\n        minWidth,\n        autoMinWidth,\n    });\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onChange(event.target.checked);\n    };\n\n    const hasMultipleText = Boolean(enabledText && disabledText);\n    const hasSingleText = Boolean(enabledText && !disabledText);\n\n    const switchClasses = classNames('uikit-switch', className);\n\n    const switchLabelClasses = classNames(\n        'switch-label',\n        switchClasses,\n        disabled && 'cursor-not-allowed',\n        labelPosition && `label-position-${labelPosition}`,\n        labelPosition === 'left' && 'display-inline-flex height-20'\n    );\n\n    const switchContentClasses = classNames('switch-content');\n\n    const switchBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div ref={ref} {...remainingProps} className={switchClasses}>\n            <label className={switchLabelClasses}>\n                {shouldUseAutoTextWidth && longestText && (\n                    <span ref={textMeasureRef} className='switch-text-measure' aria-hidden='true'>\n                        {longestText}\n                    </span>\n                )}\n                <input\n                    onChange={handleChange}\n                    checked={checked}\n                    type='checkbox'\n                    id={keyName}\n                    key={keyName}\n                    className='switch-input'\n                    disabled={disabled}\n                />\n                <div\n                    className={switchContentClasses}\n                    style={{ color: switchBackgroundColor, minWidth: computedMinWidth }}\n                >\n                    {hasMultipleText ? (\n                        <div className='switch-text' data-on={enabledText} data-off={disabledText} />\n                    ) : (\n                        hasSingleText && <div className='switch-text' data-on={enabledText} data-off={enabledText} />\n                    )}\n                    <div className='switch-handle' />\n                </div>\n\n                {children && (\n                    <div\n                        className={classNames(\n                            'switch-text-wrapper',\n                            'user-select-none',\n                            customTextStyle ? '' : 'padding-top-1'\n                        )}\n                    >\n                        {children}\n                    </div>\n                )}\n            </label>\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<PropsWithChildren<SwitchProps> & React.RefAttributes<HTMLDivElement>> & {\n    LABEL_POSITION_LEFT: 'left';\n    LABEL_POSITION_RIGHT: 'right';\n};\n\nSwitch.LABEL_POSITION_LEFT = 'left' as const;\nSwitch.LABEL_POSITION_RIGHT = 'right' as const;\n\nexport default Switch;\n"],"names":["DEFAULT_MIN_WIDTH","TEXT_HORIZONTAL_PADDING","useAutoMinWidth","enabledText","disabledText","minWidth","autoMinWidth","textMeasureRef","useRef","measuredMinWidth","setMeasuredMinWidth","useState","isMinWidthSet","longestText","text","previous","current","hasAnyText","shouldUseAutoTextWidth","computedMinWidth","useLayoutEffect","measuredTextWidth","derivedWidth","Switch","forwardRef","props","ref","keyName","checked","disabled","color","children","className","labelPosition","onChange","noop","customTextStyle","remainingProps","handleChange","event","hasMultipleText","hasSingleText","switchClasses","classNames","switchLabelClasses","switchContentClasses","switchBackgroundColor","getCurrentBackgroundColor","jsx","jsxs"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IACpBC,IAA0B,IAS1BC,IAAkB,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,UAAAC,GAAU,cAAAC,QAA0C;AACtG,QAAMC,IAAiBC,EAAwB,IAAI,GAC7C,CAACC,GAAkBC,CAAmB,IAAIC,EAAiBX,CAAiB,GAE5EY,IAAgBP,MAAa,QAE7BQ,IADiB,CAACV,GAAaC,CAAY,EAAE,OAAO,CAACU,MAAyB,EAAQA,CAAK,EAC9D;AAAA,IAC/B,CAACC,GAAUC,MAAaA,EAAQ,SAASD,EAAS,SAASC,IAAUD;AAAA,IACrE;AAAA,EAAA,GAEEE,IAAa,GAAQd,KAAeC,IACpCc,IAAyB,CAACN,KAAiBN,GAE3Ca,IAAmBP,IACnBP,IACAa,IACET,IACAQ,IACE,SACAjB;AAEV,SAAAoB,EAAgB,MAAM;AAClB,QAAI,CAACF;AACD;AAGJ,QAAI,CAACL,GAAa;AACd,MAAAH,EAAoBV,CAAiB;AACrC;AAAA,IACJ;AAEA,UAAMqB,IAAoBd,EAAe,SAAS,eAAe,GAC3De,IAAe,KAAK,KAAKD,CAAiB,IAAIpB;AACpD,IAAAS,EAAoB,KAAK,IAAIV,GAAmBsB,CAAY,CAAC;AAAA,EACjE,GAAG,CAACT,GAAaK,CAAsB,CAAC,GAEjC,EAAE,kBAAAC,GAAkB,aAAAN,GAAa,wBAAAK,GAAwB,gBAAAX,EAAA;AACpE,GA2FMgB,IAASC,EAAW,CAACC,GAAuCC,MAAmC;AACjG,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAzB;AAAA,IACA,UAAAE;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,UAAAuB,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,cAAA1B;AAAA,IACA,UAAA2B;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgBF,IAAW,UAAU;AAAA,IACrC,UAAAG,IAAWC;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,GAAGC;AAAA,EAAA,IACHZ,GAEE,EAAE,kBAAAN,GAAkB,aAAAN,GAAa,wBAAAK,GAAwB,gBAAAX,EAAA,IAAmBL,EAAgB;AAAA,IAC9F,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,CACH,GAEKgC,IAAe,CAACC,MAAyC;AAC3D,IAAAL,EAASK,EAAM,OAAO,OAAO;AAAA,EACjC,GAEMC,IAAkB,GAAQrC,KAAeC,IACzCqC,IAAgB,GAAQtC,KAAe,CAACC,IAExCsC,IAAgBC,EAAW,gBAAgBX,CAAS,GAEpDY,IAAqBD;AAAA,IACvB;AAAA,IACAD;AAAA,IACAb,KAAY;AAAA,IACZI,KAAiB,kBAAkBA,CAAa;AAAA,IAChDA,MAAkB,UAAU;AAAA,EAAA,GAG1BY,IAAuBF,EAAW,gBAAgB,GAElDG,IAAwBC,EAA0BjB,CAAK;AAE7D,SACI,gBAAAkB,EAAC,OAAA,EAAI,KAAAtB,GAAW,GAAGW,GAAgB,WAAWK,GAC1C,UAAA,gBAAAO,EAAC,SAAA,EAAM,WAAWL,GACb,UAAA;AAAA,IAAA1B,KAA0BL,uBACtB,QAAA,EAAK,KAAKN,GAAgB,WAAU,uBAAsB,eAAY,QAClE,UAAAM,EAAA,CACL;AAAA,IAEJ,gBAAAmC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAUV;AAAA,QACV,SAAAV;AAAA,QACA,MAAK;AAAA,QACL,IAAID;AAAA,QAEJ,WAAU;AAAA,QACV,UAAAE;AAAA,MAAA;AAAA,MAFKF;AAAA,IAAA;AAAA,IAIT,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWJ;AAAA,QACX,OAAO,EAAE,OAAOC,GAAuB,UAAU3B,EAAA;AAAA,QAEhD,UAAA;AAAA,UAAAqB,sBACI,OAAA,EAAI,WAAU,eAAc,WAASrC,GAAa,YAAUC,EAAA,CAAc,IAE3EqC,uBAAkB,OAAA,EAAI,WAAU,eAAc,WAAStC,GAAa,YAAUA,GAAa;AAAA,UAE/F,gBAAA6C,EAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGlCjB,KACG,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWL;AAAA,UACP;AAAA,UACA;AAAA,UACAP,IAAkB,KAAK;AAAA,QAAA;AAAA,QAG1B,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,EAAA,CAER,EAAA,CACJ;AAER,CAAC;AAKDR,EAAO,sBAAsB;AAC7BA,EAAO,uBAAuB;"}

package/components/table/SortArrowDown.d.ts

@@ -1,3 +1,3 @@
-export type SortArrowDownProps = {};
+export type SortArrowDownProps = Record<string, never>;
 declare const SortArrowDown: () => import("react/jsx-runtime").JSX.Element;
 export default SortArrowDown;

package/components/table/SortArrowDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortArrowDown.js","sources":["../../../src/components/table/SortArrowDown.tsx"],"sourcesContent":["export type SortArrowDownProps = {};\n\nconst SortArrowDown = () => <span className='sort-icon sort-desc' />;\n\nexport default SortArrowDown;\n"],"names":["SortArrowDown","jsx"],"mappings":";AAEA,MAAMA,IAAgB,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;"}
+{"version":3,"file":"SortArrowDown.js","sources":["../../../src/components/table/SortArrowDown.tsx"],"sourcesContent":["export type SortArrowDownProps = Record<string, never>;\n\nconst SortArrowDown = () => <span className='sort-icon sort-desc' />;\n\nexport default SortArrowDown;\n"],"names":["SortArrowDown","jsx"],"mappings":";AAEA,MAAMA,IAAgB,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;"}

package/components/table/SortArrowUp.d.ts

@@ -1,3 +1,3 @@
-export type SortArrowUpProps = {};
+export type SortArrowUpProps = Record<string, never>;
 declare const SortArrowUp: () => import("react/jsx-runtime").JSX.Element;
 export default SortArrowUp;

package/components/table/SortArrowUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortArrowUp.js","sources":["../../../src/components/table/SortArrowUp.tsx"],"sourcesContent":["export type SortArrowUpProps = {};\n\nconst SortArrowUp = () => <span className='sort-icon sort-asc' />;\n\nexport default SortArrowUp;\n"],"names":["SortArrowUp","jsx"],"mappings":";AAEA,MAAMA,IAAc,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;"}
+{"version":3,"file":"SortArrowUp.js","sources":["../../../src/components/table/SortArrowUp.tsx"],"sourcesContent":["export type SortArrowUpProps = Record<string, never>;\n\nconst SortArrowUp = () => <span className='sort-icon sort-asc' />;\n\nexport default SortArrowUp;\n"],"names":["SortArrowUp","jsx"],"mappings":";AAEA,MAAMA,IAAc,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;"}

package/components/table/TableCardsSorting.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { useState as c } from "react";
-import f from "classnames";
-import { noop as y } from "es-toolkit/compat";
+import { noop as f } from "es-toolkit/compat";
+import y from "../../utils/classNames.js";
 import S from "../selects/Select.js";
 import i from "../button/ToggleButton.js";
 const T = (m) => {
@@ -9,13 +9,13 @@ const T = (m) => {
     sortName: d,
     sortOrder: p = "asc",
     selectOptions: s,
-    onSortChange: a = y,
+    onSortChange: a = f,
     className: e
   } = m, [g, N] = c(d), [r, b] = c(p), l = (o) => {
     b(o), a(g, o);
   }, h = (o) => {
     N(o), a(o, r);
-  }, u = f("table-toolbar-cards-sorting", "btn-toolbar", e && e);
+  }, u = y("table-toolbar-cards-sorting", "btn-toolbar", e && e);
   return /* @__PURE__ */ n("div", { className: u, children: [
     /* @__PURE__ */ n("div", { className: "btn-group margin-left-0", children: [
       /* @__PURE__ */ t(

package/components/table/TableCardsSorting.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCardsSorting.js","sources":["../../../src/components/table/TableCardsSorting.tsx"],"sourcesContent":["import { useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport Select from '../selects/Select';\nimport ToggleButton from '../button/ToggleButton';\n\ntype TableCardsSortingOption = {\n    /**\n     * ID to use for the select option.\n     */\n    id: string;\n\n    /**\n     * Translated column label to be shown in the select.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Defines the column which is currently sorted by.\n     */\n    selected?: boolean;\n\n    /**\n     * Defines if the column can be sorted.\n     *\n     * Hence, it will be disabled in the select.\n     */\n    disabled?: boolean;\n};\n\nexport type TableCardsSortingProps = {\n    /**\n     * \"Name\", \"Key\", or \"Id\" of the current sorted column.\n     */\n    sortName: string;\n\n    /**\n     * Defines the sort direction.\n     *\n     * @default 'asc'\n     */\n    sortOrder: 'asc' | 'desc';\n\n    /**\n     * List of objects for the column name select component.\n     */\n    selectOptions: TableCardsSortingOption[];\n\n    /**\n     * Function that is called when the sort key or direction changes.\n     *\n     * @default noop\n     */\n    onSortChange?: (name: string, order: 'asc' | 'desc') => void;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableCardsSorting = (props: TableCardsSortingProps) => {\n    const {\n        sortName: controlledSortName,\n        sortOrder: controlledSortOrder = 'asc',\n        selectOptions,\n        onSortChange = noop,\n        className,\n    } = props;\n\n    const [sortName, setSortName] = useState(controlledSortName);\n    const [sortOrder, setSortOrder] = useState(controlledSortOrder);\n\n    const updateSortOrder = (newSortOrder: 'asc' | 'desc') => {\n        setSortOrder(newSortOrder);\n        onSortChange(sortName, newSortOrder);\n    };\n\n    const updateSortName = (newSortName: string) => {\n        setSortName(newSortName);\n        onSortChange(newSortName, sortOrder);\n    };\n\n    const wrapperClassNames = classNames('table-toolbar-cards-sorting', 'btn-toolbar', className && className);\n\n    return (\n        <div className={wrapperClassNames}>\n            <div className='btn-group margin-left-0'>\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'asc'}\n                    onClick={() => updateSortOrder('asc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes-alt' />\n                </ToggleButton>\n\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'desc'}\n                    onClick={() => updateSortOrder('desc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes' />\n                </ToggleButton>\n            </div>\n\n            {selectOptions.length && (\n                <div className='btn-group'>\n                    <Select options={selectOptions} onChange={item => item && updateSortName(item.id)} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TableCardsSorting;\n"],"names":["TableCardsSorting","props","controlledSortName","controlledSortOrder","selectOptions","onSortChange","noop","className","sortName","setSortName","useState","sortOrder","setSortOrder","updateSortOrder","newSortOrder","updateSortName","newSortName","wrapperClassNames","classNames","jsxs","jsx","ToggleButton","Select","item"],"mappings":";;;;;;AA8DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAUC;AAAA,IACV,WAAWC,IAAsB;AAAA,IACjC,eAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,WAAAC;AAAA,EAAA,IACAN,GAEE,CAACO,GAAUC,CAAW,IAAIC,EAASR,CAAkB,GACrD,CAACS,GAAWC,CAAY,IAAIF,EAASP,CAAmB,GAExDU,IAAkB,CAACC,MAAiC;AACtD,IAAAF,EAAaE,CAAY,GACzBT,EAAaG,GAAUM,CAAY;AAAA,EACvC,GAEMC,IAAiB,CAACC,MAAwB;AAC5C,IAAAP,EAAYO,CAAW,GACvBX,EAAaW,GAAaL,CAAS;AAAA,EACvC,GAEMM,IAAoBC,EAAW,+BAA+B,eAAeX,KAAaA,CAAS;AAEzG,SACI,gBAAAY,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,KAAK;AAAA,UAEpC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,2CAAA,CAA2C;AAAA,QAAA;AAAA,MAAA;AAAA,MAG/D,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,MAAM;AAAA,UAErC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,uCAAA,CAAuC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3D,GACJ;AAAA,IAEChB,EAAc,UACX,gBAAAgB,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAACE,GAAA,EAAO,SAASlB,GAAe,UAAU,CAAAmB,MAAQA,KAAQR,EAAeQ,EAAK,EAAE,GAAG,EAAA,CACvF;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableCardsSorting.js","sources":["../../../src/components/table/TableCardsSorting.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select from '../selects/Select';\nimport ToggleButton from '../button/ToggleButton';\n\ntype TableCardsSortingOption = {\n    /**\n     * ID to use for the select option.\n     */\n    id: string;\n\n    /**\n     * Translated column label to be shown in the select.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Defines the column which is currently sorted by.\n     */\n    selected?: boolean;\n\n    /**\n     * Defines if the column can be sorted.\n     *\n     * Hence, it will be disabled in the select.\n     */\n    disabled?: boolean;\n};\n\nexport type TableCardsSortingProps = {\n    /**\n     * \"Name\", \"Key\", or \"Id\" of the current sorted column.\n     */\n    sortName: string;\n\n    /**\n     * Defines the sort direction.\n     *\n     * @default 'asc'\n     */\n    sortOrder: 'asc' | 'desc';\n\n    /**\n     * List of objects for the column name select component.\n     */\n    selectOptions: TableCardsSortingOption[];\n\n    /**\n     * Function that is called when the sort key or direction changes.\n     *\n     * @default noop\n     */\n    onSortChange?: (name: string, order: 'asc' | 'desc') => void;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableCardsSorting = (props: TableCardsSortingProps) => {\n    const {\n        sortName: controlledSortName,\n        sortOrder: controlledSortOrder = 'asc',\n        selectOptions,\n        onSortChange = noop,\n        className,\n    } = props;\n\n    const [sortName, setSortName] = useState(controlledSortName);\n    const [sortOrder, setSortOrder] = useState(controlledSortOrder);\n\n    const updateSortOrder = (newSortOrder: 'asc' | 'desc') => {\n        setSortOrder(newSortOrder);\n        onSortChange(sortName, newSortOrder);\n    };\n\n    const updateSortName = (newSortName: string) => {\n        setSortName(newSortName);\n        onSortChange(newSortName, sortOrder);\n    };\n\n    const wrapperClassNames = classNames('table-toolbar-cards-sorting', 'btn-toolbar', className && className);\n\n    return (\n        <div className={wrapperClassNames}>\n            <div className='btn-group margin-left-0'>\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'asc'}\n                    onClick={() => updateSortOrder('asc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes-alt' />\n                </ToggleButton>\n\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'desc'}\n                    onClick={() => updateSortOrder('desc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes' />\n                </ToggleButton>\n            </div>\n\n            {selectOptions.length && (\n                <div className='btn-group'>\n                    <Select options={selectOptions} onChange={item => item && updateSortName(item.id)} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TableCardsSorting;\n"],"names":["TableCardsSorting","props","controlledSortName","controlledSortOrder","selectOptions","onSortChange","noop","className","sortName","setSortName","useState","sortOrder","setSortOrder","updateSortOrder","newSortOrder","updateSortName","newSortName","wrapperClassNames","classNames","jsxs","jsx","ToggleButton","Select","item"],"mappings":";;;;;;AA8DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAUC;AAAA,IACV,WAAWC,IAAsB;AAAA,IACjC,eAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,WAAAC;AAAA,EAAA,IACAN,GAEE,CAACO,GAAUC,CAAW,IAAIC,EAASR,CAAkB,GACrD,CAACS,GAAWC,CAAY,IAAIF,EAASP,CAAmB,GAExDU,IAAkB,CAACC,MAAiC;AACtD,IAAAF,EAAaE,CAAY,GACzBT,EAAaG,GAAUM,CAAY;AAAA,EACvC,GAEMC,IAAiB,CAACC,MAAwB;AAC5C,IAAAP,EAAYO,CAAW,GACvBX,EAAaW,GAAaL,CAAS;AAAA,EACvC,GAEMM,IAAoBC,EAAW,+BAA+B,eAAeX,KAAaA,CAAS;AAEzG,SACI,gBAAAY,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,KAAK;AAAA,UAEpC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,2CAAA,CAA2C;AAAA,QAAA;AAAA,MAAA;AAAA,MAG/D,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,MAAM;AAAA,UAErC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,uCAAA,CAAuC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3D,GACJ;AAAA,IAEChB,EAAc,UACX,gBAAAgB,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAACE,GAAA,EAAO,SAASlB,GAAe,UAAU,CAAAmB,MAAQA,KAAQR,EAAeQ,EAAK,EAAE,GAAG,EAAA,CACvF;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableHead.js

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

package/components/table/TableHead.js.map

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

package/components/table/TableSearch.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import l from "classnames";
+import l from "../../utils/classNames.js";
 import p from "../clearableInput/ClearableInput.js";
 const i = (r) => {
   const { className: s, ...e } = r;

package/components/table/TableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSearch.js","sources":["../../../src/components/table/TableSearch.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type TableSearchProps = Omit<ClearableInputProps, 'className'> & {\n    /**\n     * Optional class names for the wrapper.\n     */\n    className?: string;\n};\n\nconst TableSearch = (props: TableSearchProps) => {\n    const { className, ...remainingProps } = props;\n\n    return (\n        <div className={classNames('table-toolbar-search', 'input-group', className)}>\n            <span className='input-group-addon'>\n                <span className='rioglyph rioglyph-search' />\n            </span>\n            <ClearableInput {...remainingProps} />\n        </div>\n    );\n};\n\nexport default TableSearch;\n"],"names":["TableSearch","props","className","remainingProps","classNames","jsx","ClearableInput"],"mappings":";;;AAWA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAmBF;AAEzC,2BACK,OAAA,EAAI,WAAWG,EAAW,wBAAwB,eAAeF,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAG,EAAC,UAAK,WAAU,qBACZ,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAgB,GAAGH,EAAA,CAAgB;AAAA,EAAA,GACxC;AAER;"}
+{"version":3,"file":"TableSearch.js","sources":["../../../src/components/table/TableSearch.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type TableSearchProps = Omit<ClearableInputProps, 'className'> & {\n    /**\n     * Optional class names for the wrapper.\n     */\n    className?: string;\n};\n\nconst TableSearch = (props: TableSearchProps) => {\n    const { className, ...remainingProps } = props;\n\n    return (\n        <div className={classNames('table-toolbar-search', 'input-group', className)}>\n            <span className='input-group-addon'>\n                <span className='rioglyph rioglyph-search' />\n            </span>\n            <ClearableInput {...remainingProps} />\n        </div>\n    );\n};\n\nexport default TableSearch;\n"],"names":["TableSearch","props","className","remainingProps","classNames","jsx","ClearableInput"],"mappings":";;;AAUA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAmBF;AAEzC,2BACK,OAAA,EAAI,WAAWG,EAAW,wBAAwB,eAAeF,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAG,EAAC,UAAK,WAAU,qBACZ,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAgB,GAAGH,EAAA,CAAgB;AAAA,EAAA,GACxC;AAER;"}

package/components/table/TableSettingsColumnButtons.d.ts

@@ -1,4 +1,4 @@
-import { TableColumnDetails } from './TableSettingsDialog.types';
+import { TableColumnDetails } from './TableSettingsDialog';
 export type TableSettingsColumnButtonsProps = {
     column: string;
     index: number;

package/components/table/TableSettingsColumnButtons.js

@@ -1,6 +1,6 @@
 import { jsxs as C, jsx as o } from "react/jsx-runtime";
-import e from "classnames";
 import { noop as r } from "es-toolkit/compat";
+import e from "../../utils/classNames.js";
 const D = (c) => {
   const {
     column: n = "",

package/components/table/TableSettingsColumnButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsColumnButtons.js","sources":["../../../src/components/table/TableSettingsColumnButtons.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport type { TableColumnDetails } from './TableSettingsDialog.types';\n\nexport type TableSettingsColumnButtonsProps = {\n    column: string;\n    index: number;\n    columnOrder: string[];\n    openColumnsDetails: Record<string, string>;\n    disabled?: boolean;\n    columnDetails?: TableColumnDetails;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (column: string) => void;\n};\n\nexport const TableSettingsColumnButtons = (props: TableSettingsColumnButtonsProps) => {\n    const {\n        column = '',\n        index = 0,\n        columnDetails,\n        columnOrder = [],\n        openColumnsDetails = {},\n        disabled,\n        onMoveColumn = noop,\n        onOpenDetails = noop,\n    } = props;\n\n    const navButtonBase = classNames('btn btn-muted btn-icon-only btn-sm');\n\n    const columnUpClasses = classNames(navButtonBase, index === 0 && 'disabled');\n\n    const columnDownClasses = classNames(navButtonBase, index === columnOrder.length - 1 && 'disabled');\n\n    const toggleIconClassNames = classNames(\n        'rioglyph',\n        openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width'\n    );\n\n    return (\n        <div className='table-settings-item-item-buttons'>\n            {!disabled && (\n                <div\n                    className={columnUpClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index - 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-up' />\n                </div>\n            )}\n            {!disabled && (\n                <div\n                    className={columnDownClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index + 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-down' />\n                </div>\n            )}\n            {columnDetails && (\n                <div className={navButtonBase} onClick={() => onOpenDetails(column)}>\n                    <span className={toggleIconClassNames} />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnButtons","props","column","index","columnDetails","columnOrder","openColumnsDetails","disabled","onMoveColumn","noop","onOpenDetails","navButtonBase","classNames","columnUpClasses","columnDownClasses","toggleIconClassNames","jsxs","jsx","event"],"mappings":";;;AAgBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,eAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,oBAAAC,IAAqB,CAAA;AAAA,IACrB,UAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,eAAAC,IAAgBD;AAAA,EAAA,IAChBR,GAEEU,IAAgBC,EAAW,oCAAoC,GAE/DC,IAAkBD,EAAWD,GAAeR,MAAU,KAAK,UAAU,GAErEW,IAAoBF,EAAWD,GAAeR,MAAUE,EAAY,SAAS,KAAK,UAAU,GAE5FU,IAAuBH;AAAA,IACzB;AAAA,IACAN,EAAmBJ,CAAM,IAAI,oBAAoB;AAAA,EAAA;AAGrD,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAU,oCACV,UAAA;AAAA,IAAA,CAACT,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWJ;AAAA,QACX,SAAS,CAAAK,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,6BAAA,CAA6B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpD,CAACV,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWH;AAAA,QACX,SAAS,CAAAI,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtDb,KACG,gBAAAa,EAAC,OAAA,EAAI,WAAWN,GAAe,SAAS,MAAMD,EAAcR,CAAM,GAC9D,UAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,GAAsB,EAAA,CAC3C;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableSettingsColumnButtons.js","sources":["../../../src/components/table/TableSettingsColumnButtons.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport type { TableColumnDetails } from './TableSettingsDialog';\n\nexport type TableSettingsColumnButtonsProps = {\n    column: string;\n    index: number;\n    columnOrder: string[];\n    openColumnsDetails: Record<string, string>;\n    disabled?: boolean;\n    columnDetails?: TableColumnDetails;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (column: string) => void;\n};\n\nexport const TableSettingsColumnButtons = (props: TableSettingsColumnButtonsProps) => {\n    const {\n        column = '',\n        index = 0,\n        columnDetails,\n        columnOrder = [],\n        openColumnsDetails = {},\n        disabled,\n        onMoveColumn = noop,\n        onOpenDetails = noop,\n    } = props;\n\n    const navButtonBase = classNames('btn btn-muted btn-icon-only btn-sm');\n\n    const columnUpClasses = classNames(navButtonBase, index === 0 && 'disabled');\n\n    const columnDownClasses = classNames(navButtonBase, index === columnOrder.length - 1 && 'disabled');\n\n    const toggleIconClassNames = classNames(\n        'rioglyph',\n        openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width'\n    );\n\n    return (\n        <div className='table-settings-item-item-buttons'>\n            {!disabled && (\n                <div\n                    className={columnUpClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index - 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-up' />\n                </div>\n            )}\n            {!disabled && (\n                <div\n                    className={columnDownClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index + 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-down' />\n                </div>\n            )}\n            {columnDetails && (\n                <div className={navButtonBase} onClick={() => onOpenDetails(column)}>\n                    <span className={toggleIconClassNames} />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnButtons","props","column","index","columnDetails","columnOrder","openColumnsDetails","disabled","onMoveColumn","noop","onOpenDetails","navButtonBase","classNames","columnUpClasses","columnDownClasses","toggleIconClassNames","jsxs","jsx","event"],"mappings":";;;AAgBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,eAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,oBAAAC,IAAqB,CAAA;AAAA,IACrB,UAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,eAAAC,IAAgBD;AAAA,EAAA,IAChBR,GAEEU,IAAgBC,EAAW,oCAAoC,GAE/DC,IAAkBD,EAAWD,GAAeR,MAAU,KAAK,UAAU,GAErEW,IAAoBF,EAAWD,GAAeR,MAAUE,EAAY,SAAS,KAAK,UAAU,GAE5FU,IAAuBH;AAAA,IACzB;AAAA,IACAN,EAAmBJ,CAAM,IAAI,oBAAoB;AAAA,EAAA;AAGrD,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAU,oCACV,UAAA;AAAA,IAAA,CAACT,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWJ;AAAA,QACX,SAAS,CAAAK,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,6BAAA,CAA6B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpD,CAACV,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWH;AAAA,QACX,SAAS,CAAAI,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtDb,KACG,gBAAAa,EAAC,OAAA,EAAI,WAAWN,GAAe,SAAS,MAAMD,EAAcR,CAAM,GAC9D,UAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,GAAsB,EAAA,CAC3C;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableSettingsColumnDetails.d.ts

@@ -1,4 +1,4 @@
-import { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog.types';
+import { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog';
 export type TableSettingsColumnDetailsProps = TableColumnDetails & {
     column: string;
     maxColumnWidth: number;

package/components/table/TableSettingsColumnDetails.js

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

package/components/table/TableSettingsColumnDetails.js.map

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

package/components/table/TableSettingsDialog.d.ts

@@ -1,5 +1,48 @@
 import { default as React } from 'react';
-import { TableColumnDetailsMap, TableColumnDetails } from './TableSettingsDialog.types';
+export type TableColumnDetails = {
+    /**
+     * Defined the current width of a column.
+     *
+     * @default 0
+     */
+    width?: number;
+    /**
+     * Defined the default width of a column which will be used when resetting to default.
+     *
+     * @default 0
+     */
+    defaultWidth?: number;
+    /**
+     * Defined the maximum width of a column.
+     *
+     * @default 1000
+     */
+    maxWidth?: number;
+};
+export type TableColumnsSettings = {
+    columnOrder: string[];
+    hiddenColumns: string[];
+    columnsDetails: TableColumnDetailsMap;
+};
+export type TableColumnDetailsMap = Record<string, TableColumnDetails>;
+export type ColumnLabelStrings = Record<string, string>;
+export type TableSettingsItemProps = {
+    columnLabels?: any;
+    autoLabel?: string | React.ReactNode;
+    disabledColumns?: string[];
+    columnOrder: string[];
+    hiddenColumns?: string[];
+    columnSearchValue: string;
+    columnsDetails: TableColumnDetailsMap;
+    columnLabelStrings?: ColumnLabelStrings;
+    openColumnsDetails?: Record<string, string>;
+    updateColumnLabelStrings?: boolean;
+    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;
+    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;
+    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;
+    onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;
+    onToggleHideColumn?: (column: string) => void;
+};
 type TableSettingsDialogProps = {
     /**
      * Defined whether to show the dialog or not.
@@ -27,6 +70,13 @@ type TableSettingsDialogProps = {
      * @default []
      */
     defaultHiddenColumns?: string[];
+    /**
+     * Initial default configuration for the each columns with regards to column width.
+     * Used to reset to this state when the configuration differs.
+     *
+     * @default {}
+     */
+    defaultColumnDetails?: TableColumnDetailsMap;
     /**
      * List of column names in current order. The "columnOrder" will be returned when the order changes.
      *
@@ -64,6 +114,11 @@ type TableSettingsDialogProps = {
      * The keys of this object are the column names / keys you use to identify a column.
      */
     columnsDetails?: TableColumnDetailsMap;
+    /**
+     * The label shown when the column width is unset, which means "auto".
+     *
+     * @default ''
+     */
     autoLabel?: string | React.ReactNode;
     /**
      * Text for the "apply" button. This button will not be shown when