@rio-cloud/rio-uikit 2.0.0 → 2.1.0

package/components/statusBar/{StatusBar.types.d.ts → StatusBarProps.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type StatusBarIconSpec = {
+export type StatusBarIcon = {
     /**
      * The class name of the icon i.e. "rioglyph-cruise-control".
      */
@@ -21,7 +21,7 @@ export type StatusBarIconSpec = {
      */
     className?: string;
 };
-export type StatusBarLabelSpec = {
+export type StatusBarLabel = {
     /**
      * The label content.
      */
@@ -83,3 +83,45 @@ export type StatusBarProgress = {
      */
     className?: string;
 };
+export type StatusBarProps = {
+    /**
+     * The icon to be shown next to the progress bar.
+     */
+    icon?: StatusBarIcon;
+    /**
+     * The label to be shown for the progress bar.
+     */
+    label?: StatusBarLabel;
+    /**
+     * List of progress bars which will be stacked in given order if there are multiple.
+     */
+    progress?: StatusBarProgress[];
+    /**
+     * The size of the icon and progress bar.
+     *
+     * Possible values are:
+     *
+     * - `'small'`
+     * - `'large'`
+     *
+     * @default 'small'
+     */
+    size?: 'small' | 'large';
+    /**
+     * Uses a divider for multiple progress bars when defined.
+     *
+     * @default true
+     */
+    useProgressDivider?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+export type IconWithDefaults = StatusBarIcon & {
+    alignment: 'left' | 'right';
+};
+export type LabelWithDefaults = StatusBarLabel & {
+    alignment: 'left' | 'top' | 'right';
+    weight: 'light' | 'bold';
+};

package/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -37,7 +37,7 @@ export type SteppedProgressBarProps = {
     /**
      * The SteppedProgressBar Variant.
      *
-     * One of "circle", "rectangle" or "roadsign".
+     * One of `circle`, `rectangle` or `roadsign`.
      *
      * @default 'circle'
      */

package/components/steppedProgressBar/SteppedProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedProgressBar.js","sources":["../../../src/components/steppedProgressBar/SteppedProgressBar.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { Nav } from 'react-bootstrap';\nimport classNames from 'classnames';\n\nexport type SteppedProgressBarLabel = {\n    /**\n     * The element shown in the step element.\n     *\n     * This can be a single step number or an icon element.\n     */\n    icon?: string | ReactNode;\n\n    /**\n     * The label shown below the step element.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the label element.\n     */\n    labelClassName?: string;\n\n    /**\n     * Additional classes to be set on the label wrapping element.\n     */\n    labelWrapperClassName?: string;\n};\n\nexport type SteppedProgressBarProps = {\n    /**\n     * Objects to defining the icon and the label of the navigation items.\n     *\n     * The icon can be a string or an icon.\n     */\n    labels: SteppedProgressBarLabel[];\n\n    /**\n     * Index of the selected navigation item.\n     */\n    selectedStepNumber: number;\n\n    /**\n     * Called with the new selected index after the user clicked a nav item.\n     */\n    onSelectedChanged: (selectedKey: number) => void;\n\n    /**\n     * The SteppedProgressBar Variant.\n     *\n     * One of \"circle\", \"rectangle\" or \"roadsign\".\n     *\n     * @default 'circle'\n     */\n    variant?: 'circle' | 'rectangle' | 'roadsign';\n\n    /**\n     * All navigation items with a higher index than this will be disabled.\n     */\n    disableFollowingPages?: number;\n\n    /**\n     * Deactivating the wrapping of bubbles on mobile.\n     *\n     * @default true\n     */\n    mobileBreakpoint?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst SteppedProgressBar = (props: SteppedProgressBarProps) => {\n    const {\n        labels,\n        selectedStepNumber,\n        onSelectedChanged,\n        variant = 'circle',\n        disableFollowingPages: disableFollowingPageIndex,\n        mobileBreakpoint = true,\n        className = '',\n    } = props;\n\n    const [disableFollowingPages, setDisableFollowingPages] = useState(\n        disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber\n    );\n\n    useEffect(() => {\n        if (disableFollowingPageIndex !== undefined) {\n            if (disableFollowingPageIndex < selectedStepNumber) {\n                console.warn(\n                    'Invalid component state detected in SteppedProgressBar: can not disable following ' +\n                        `pages ${disableFollowingPageIndex} when selectedStep is ${selectedStepNumber}!`\n                );\n                return;\n            }\n\n            setDisableFollowingPages(disableFollowingPageIndex);\n        } else if (selectedStepNumber > disableFollowingPages) {\n            setDisableFollowingPages(selectedStepNumber);\n        }\n    }, [disableFollowingPageIndex, selectedStepNumber]);\n\n    const wrapperClasses = classNames(\n        'stepped-progress-bar',\n        variant && `variant-${variant}`,\n        mobileBreakpoint && 'mobile-breakpoint',\n        className && className\n    );\n\n    const handleSelect = (selectedKey: string | null) => onSelectedChanged(Number(selectedKey));\n\n    return (\n        <Nav className={wrapperClasses} activeKey={selectedStepNumber} onSelect={handleSelect}>\n            {labels.map((labelObject, index) => (\n                <Nav.Link\n                    key={index}\n                    eventKey={index}\n                    disabled={index > disableFollowingPages}\n                    as='a'\n                    className={classNames('step-tab', labelObject.labelWrapperClassName)}\n                >\n                    <div className='step-tab-content'>\n                        <div className='item-icon'>{labelObject.icon}</div>\n                        <div className={classNames('item-label', labelObject.labelClassName)}>{labelObject.label}</div>\n                    </div>\n                </Nav.Link>\n            ))}\n        </Nav>\n    );\n};\n\nSteppedProgressBar.VARIANT_CIRCLE = 'circle' as const;\nSteppedProgressBar.VARIANT_RECTANGLE = 'rectangle' as const;\nSteppedProgressBar.VARIANT_ROADSIGN = 'roadsign' as const;\n\nexport default SteppedProgressBar;\n"],"names":["SteppedProgressBar","props","labels","selectedStepNumber","onSelectedChanged","variant","disableFollowingPageIndex","mobileBreakpoint","className","disableFollowingPages","setDisableFollowingPages","useState","useEffect","wrapperClasses","classNames","jsx","Nav","selectedKey","labelObject","index","jsxs"],"mappings":";;;;AAyEA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,uBAAuBC;AAAA,IACvB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,EAAA,IACZP,GAEE,CAACQ,GAAuBC,CAAwB,IAAIC;AAAA,IACtDL,KAAwDH;AAAA,EAAA;AAG5D,EAAAS,EAAU,MAAM;AACZ,QAAIN,MAA8B,QAAW;AACzC,UAAIA,IAA4BH,GAAoB;AAChD,gBAAQ;AAAA,UACJ,2FACaG,CAAyB,yBAAyBH,CAAkB;AAAA,QAAA;AAErF;AAAA,MACJ;AAEA,MAAAO,EAAyBJ,CAAyB;AAAA,IACtD,MAAA,CAAWH,IAAqBM,KAC5BC,EAAyBP,CAAkB;AAAA,EAEnD,GAAG,CAACG,GAA2BH,CAAkB,CAAC;AAElD,QAAMU,IAAiBC;AAAA,IACnB;AAAA,IACAT,KAAW,WAAWA,CAAO;AAAA,IAC7BE,KAAoB;AAAA,IACpBC,KAAaA;AAAA,EAAA;AAKjB,SACI,gBAAAO,EAACC,GAAA,EAAI,WAAWH,GAAgB,WAAWV,GAAoB,UAH9C,CAACc,MAA+Bb,EAAkB,OAAOa,CAAW,CAAC,GAIjF,UAAAf,EAAO,IAAI,CAACgB,GAAaC,MACtB,gBAAAJ;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MAEG,UAAUG;AAAA,MACV,UAAUA,IAAQV;AAAA,MAClB,IAAG;AAAA,MACH,WAAWK,EAAW,YAAYI,EAAY,qBAAqB;AAAA,MAEnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,QAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAG,EAAY,MAAK;AAAA,QAC7C,gBAAAH,EAAC,SAAI,WAAWD,EAAW,cAAcI,EAAY,cAAc,GAAI,UAAAA,EAAY,MAAA,CAAM;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA;AAAA,IATKC;AAAA,EAAA,CAWZ,GACL;AAER;AAEAnB,EAAmB,iBAAiB;AACpCA,EAAmB,oBAAoB;AACvCA,EAAmB,mBAAmB;"}
+{"version":3,"file":"SteppedProgressBar.js","sources":["../../../src/components/steppedProgressBar/SteppedProgressBar.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { Nav } from 'react-bootstrap';\nimport classNames from 'classnames';\n\nexport type SteppedProgressBarLabel = {\n    /**\n     * The element shown in the step element.\n     *\n     * This can be a single step number or an icon element.\n     */\n    icon?: string | ReactNode;\n\n    /**\n     * The label shown below the step element.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the label element.\n     */\n    labelClassName?: string;\n\n    /**\n     * Additional classes to be set on the label wrapping element.\n     */\n    labelWrapperClassName?: string;\n};\n\nexport type SteppedProgressBarProps = {\n    /**\n     * Objects to defining the icon and the label of the navigation items.\n     *\n     * The icon can be a string or an icon.\n     */\n    labels: SteppedProgressBarLabel[];\n\n    /**\n     * Index of the selected navigation item.\n     */\n    selectedStepNumber: number;\n\n    /**\n     * Called with the new selected index after the user clicked a nav item.\n     */\n    onSelectedChanged: (selectedKey: number) => void;\n\n    /**\n     * The SteppedProgressBar Variant.\n     *\n     * One of `circle`, `rectangle` or `roadsign`.\n     *\n     * @default 'circle'\n     */\n    variant?: 'circle' | 'rectangle' | 'roadsign';\n\n    /**\n     * All navigation items with a higher index than this will be disabled.\n     */\n    disableFollowingPages?: number;\n\n    /**\n     * Deactivating the wrapping of bubbles on mobile.\n     *\n     * @default true\n     */\n    mobileBreakpoint?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst SteppedProgressBar = (props: SteppedProgressBarProps) => {\n    const {\n        labels,\n        selectedStepNumber,\n        onSelectedChanged,\n        variant = 'circle',\n        disableFollowingPages: disableFollowingPageIndex,\n        mobileBreakpoint = true,\n        className = '',\n    } = props;\n\n    const [disableFollowingPages, setDisableFollowingPages] = useState(\n        disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber\n    );\n\n    useEffect(() => {\n        if (disableFollowingPageIndex !== undefined) {\n            if (disableFollowingPageIndex < selectedStepNumber) {\n                console.warn(\n                    'Invalid component state detected in SteppedProgressBar: can not disable following ' +\n                        `pages ${disableFollowingPageIndex} when selectedStep is ${selectedStepNumber}!`\n                );\n                return;\n            }\n\n            setDisableFollowingPages(disableFollowingPageIndex);\n        } else if (selectedStepNumber > disableFollowingPages) {\n            setDisableFollowingPages(selectedStepNumber);\n        }\n    }, [disableFollowingPageIndex, selectedStepNumber]);\n\n    const wrapperClasses = classNames(\n        'stepped-progress-bar',\n        variant && `variant-${variant}`,\n        mobileBreakpoint && 'mobile-breakpoint',\n        className && className\n    );\n\n    const handleSelect = (selectedKey: string | null) => onSelectedChanged(Number(selectedKey));\n\n    return (\n        <Nav className={wrapperClasses} activeKey={selectedStepNumber} onSelect={handleSelect}>\n            {labels.map((labelObject, index) => (\n                <Nav.Link\n                    key={index}\n                    eventKey={index}\n                    disabled={index > disableFollowingPages}\n                    as='a'\n                    className={classNames('step-tab', labelObject.labelWrapperClassName)}\n                >\n                    <div className='step-tab-content'>\n                        <div className='item-icon'>{labelObject.icon}</div>\n                        <div className={classNames('item-label', labelObject.labelClassName)}>{labelObject.label}</div>\n                    </div>\n                </Nav.Link>\n            ))}\n        </Nav>\n    );\n};\n\nSteppedProgressBar.VARIANT_CIRCLE = 'circle' as const;\nSteppedProgressBar.VARIANT_RECTANGLE = 'rectangle' as const;\nSteppedProgressBar.VARIANT_ROADSIGN = 'roadsign' as const;\n\nexport default SteppedProgressBar;\n"],"names":["SteppedProgressBar","props","labels","selectedStepNumber","onSelectedChanged","variant","disableFollowingPageIndex","mobileBreakpoint","className","disableFollowingPages","setDisableFollowingPages","useState","useEffect","wrapperClasses","classNames","jsx","Nav","selectedKey","labelObject","index","jsxs"],"mappings":";;;;AAyEA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,uBAAuBC;AAAA,IACvB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,EAAA,IACZP,GAEE,CAACQ,GAAuBC,CAAwB,IAAIC;AAAA,IACtDL,KAAwDH;AAAA,EAAA;AAG5D,EAAAS,EAAU,MAAM;AACZ,QAAIN,MAA8B,QAAW;AACzC,UAAIA,IAA4BH,GAAoB;AAChD,gBAAQ;AAAA,UACJ,2FACaG,CAAyB,yBAAyBH,CAAkB;AAAA,QAAA;AAErF;AAAA,MACJ;AAEA,MAAAO,EAAyBJ,CAAyB;AAAA,IACtD,MAAA,CAAWH,IAAqBM,KAC5BC,EAAyBP,CAAkB;AAAA,EAEnD,GAAG,CAACG,GAA2BH,CAAkB,CAAC;AAElD,QAAMU,IAAiBC;AAAA,IACnB;AAAA,IACAT,KAAW,WAAWA,CAAO;AAAA,IAC7BE,KAAoB;AAAA,IACpBC,KAAaA;AAAA,EAAA;AAKjB,SACI,gBAAAO,EAACC,GAAA,EAAI,WAAWH,GAAgB,WAAWV,GAAoB,UAH9C,CAACc,MAA+Bb,EAAkB,OAAOa,CAAW,CAAC,GAIjF,UAAAf,EAAO,IAAI,CAACgB,GAAaC,MACtB,gBAAAJ;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MAEG,UAAUG;AAAA,MACV,UAAUA,IAAQV;AAAA,MAClB,IAAG;AAAA,MACH,WAAWK,EAAW,YAAYI,EAAY,qBAAqB;AAAA,MAEnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,QAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAG,EAAY,MAAK;AAAA,QAC7C,gBAAAH,EAAC,SAAI,WAAWD,EAAW,cAAcI,EAAY,cAAc,GAAI,UAAAA,EAAY,MAAA,CAAM;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA;AAAA,IATKC;AAAA,EAAA,CAWZ,GACL;AAER;AAEAnB,EAAmB,iBAAiB;AACpCA,EAAmB,oBAAoB;AACvCA,EAAmB,mBAAmB;"}

package/components/switch/Switch.d.ts

@@ -18,11 +18,22 @@ export type SwitchProps = {
     /**
      * Defines the color of the switch.
      *
+     * Possible values are:
+     *
+     * - `'primary'`
+     * - `'secondary'`
+     * - `'info'`
+     * - `'success'`
+     * - `'warning'`
+     * - `'danger'`
+     *
      * @default 'primary'
      */
     color?: CurrentColor;
     /**
      * The min-width of the switch.
+     *
+     * @default 40
      */
     minWidth?: number;
     /**
@@ -41,8 +52,9 @@ export type SwitchProps = {
     disabledText?: string;
     /**
      * Defines the position of the switch label.
+     * Defaults to `'right'` when children are present.
      *
-     * Possible values are `left` and `right`.
+     * Possible values are `'left'` and `'right'`.
      */
     labelPosition?: 'left' | 'right';
     /**

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, 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     * 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     * @default 40\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     * Defaults to `'right'` when children are present.\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":";;;;;AA8EA,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;"}

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/TableSettingsDialog.d.ts

@@ -64,6 +64,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

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