@rio-cloud/rio-uikit 2.0.0 → 2.1.0

package/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     *\n     * ```tsx\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     * ```\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cA2JxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTlB;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cAwJxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTlB;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}

package/components/clearableInput/ClearableInput.d.ts

@@ -26,6 +26,8 @@ export type ClearableInputProps = {
      *
      * There are three types supported:
      * `text`, `email`, `password`.
+     *
+     * @default 'text'
      */
     type?: 'text' | 'password' | 'email';
     /**
@@ -44,10 +46,14 @@ export type ClearableInputProps = {
     maxLength?: number;
     /**
      * Defines the tab index to be added to the input element.
+     *
+     * @default 0
      */
     tabIndex?: number;
     /**
      * Defined whether or not the input has the error styling.
+     *
+     * @default false
      */
     hasError?: boolean;
     /**
@@ -106,21 +112,16 @@ export type ClearableInputProps = {
      *
      * The following characters will define mask format:
      *
-     * "0" = allowed input: "0-9" (digit)
-     *
-     * "a" = allowed input: "a-z, A-Z" (letter)
-     *
-     * "*" = allowed input: any character
-     *
-     * "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     * - "0" = allowed input: "0-9" (digit)
+     * - "a" = allowed input: "a-z, A-Z" (letter)
+     * - "*" = allowed input: any character
+     * - "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
      *
      * Other chars which is not in custom definitions supposed to be fixed:
      *
-     * [] - make input optional
-     *
-     * {} - include fixed part in unmasked value
-     *
-     * ` - prevent symbols shift back
+     * - [] - make input optional
+     * - {} - include fixed part in unmasked value
+     * - ` - prevent symbols shift back
      *
      * If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).
      *
@@ -149,8 +150,9 @@ export type ClearableInputProps = {
     maskDispatch?: (appended: string, dynamicMasked: any) => any;
     /**
      * Controls when the mask pattern is visible.
+     *
      * - 'always': Mask is always visible
-     * - 'onFocus': Mask is hidden but shown when input is focused (default)
+     * - 'onFocus': Mask is hidden but shown when input is focused
      * - 'never': Mask is never shown
      *
      * @default 'always'
@@ -188,15 +190,14 @@ export type ClearableInputProps = {
      * Additional classes to be set on the wrapper element.
      */
     className?: string;
-};
-type ChildrenProp = {
     /**
-     * Providing a function enables the render props approach. The function gets the input props
-     * passed and is responsible for rendering the custom `input` component.
-     * @param props
-     * @returns
+     * Render-prop to customize the rendered input.
+     *
+     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.
+     *
+     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}
      */
     children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
 };
-declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & ChildrenProp & React.RefAttributes<HTMLInputElement>>;
+declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & React.RefAttributes<HTMLInputElement>>;
 export default ClearableInput;

package/components/clearableInput/ClearableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableInput.js","sources":["../../../src/components/clearableInput/ClearableInput.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */\nimport React, { useState, forwardRef, type ForwardedRef, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty, omit } from 'es-toolkit/compat';\nimport { isFunction, isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\nimport { IMaskInput } from 'react-imask';\n\nimport usePrevious from '../../hooks/usePrevious';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport const DEFAULT_TYPE = 'text';\nexport const SUPPORTED_TYPES = ['text', 'password', 'email'];\n\nexport type MaskVisibility = 'always' | 'onFocus' | 'never';\nexport type MaskDefinition = {\n    mask: string;\n    definitions?: Record<string, string | RegExp>;\n    startsWith?: string;\n    [key: string]: any;\n};\n\nexport type ClearableInputProps = {\n    /**\n     * Gives the input element the id.\n     */\n    id?: string;\n\n    /**\n     * Gives the input element a name.\n     */\n    name?: string;\n\n    /**\n     * The translated text that shall be shown when the input is empty.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines the type of the input itself.\n     *\n     * There are three types supported:\n     * `text`, `email`, `password`.\n     */\n    type?: 'text' | 'password' | 'email';\n\n    /**\n     * Initial value of the ClearableInput. Pass this prop if you want to use this\n     * component as an uncontrolled component.\n     */\n    defaultValue?: string;\n\n    /**\n     * Value of the ClearableInput. Pass this prop if you want to use this\n     * component as a controlled component.\n     */\n    value?: string;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     */\n    maxLength?: number;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     */\n    hasError?: boolean;\n\n    /**\n     * The callback ref for the underlying input. Alternatively, use can use a forward ref.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Callback function for when the value changes. Receives new value as an argument.\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (\n        newValue: string,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     * @param event\n     * @returns\n     */\n    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function which gets triggered when the input gains the focus.\n     * @param event\n     * @returns\n     */\n    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function for when the value is cleared via the clear button.\n     * @param event\n     * @returns\n     */\n    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Callback function for every key pressed including `Enter` key.\n     * @param event\n     * @returns\n     */\n    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * The mask prop will allow to use the component with an input mask.\n     * It defines the pattern that should be followed.\n     *\n     * For more details on masking, checkout the third party documentation for the\n     * input mask here: {@link https://imask.js.org/guide.html}\n     *\n     * Simple masks can be defined as strings.\n     *\n     * The following characters will define mask format:\n     *\n     * \"0\" = allowed input: \"0-9\" (digit)\n     *\n     * \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     *\n     * \"*\" = allowed input: any character\n     *\n     * \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter)\n     *\n     * Other chars which is not in custom definitions supposed to be fixed:\n     *\n     * [] - make input optional\n     *\n     * {} - include fixed part in unmasked value\n     *\n     * ` - prevent symbols shift back\n     *\n     * If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0).\n     *\n     * Additionally you can provide custom definitions.\n     *\n     * @example\n     * '-- ### ### ###' or '+49 00 000 00'\n     */\n    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];\n\n    /**\n     * Placeholder to cover unfilled parts of the mask.\n     *\n     * @default '_'\n     */\n    maskPlaceholder?: string | null;\n\n    /**\n     * Enable characters overwriting\n     *\n     * @default true\n     */\n    maskOverwrite?: boolean | 'shift' | undefined;\n\n    /**\n     * Chooses the mask for dynamic masking depending on input value.\n     * Note, this function may not be an empty function, otherwise the mask selection won't work\n     */\n    maskDispatch?: (appended: string, dynamicMasked: any) => any;\n\n    /**\n     * Controls when the mask pattern is visible.\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused (default)\n     * - 'never': Mask is never shown\n     *\n     * @default 'always'\n     */\n    maskVisibility?: MaskVisibility;\n\n    /**\n     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.\n     *\n     * @example\n     * mask='AAA AAA.AA'\n     * maskDefinitions={{ A: /[A-Z0-9]/ }}\n     */\n    maskDefinitions?: Record<string, string | RegExp>;\n\n    /**\n     * Minimum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    min?: string | number | undefined | Date;\n\n    /**\n     * Maximum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    max?: string | number | undefined | Date;\n\n    /**\n     * Disabled the input component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype ChildrenProp = {\n    /**\n     * Providing a function enables the render props approach. The function gets the input props\n     * passed and is responsible for rendering the custom `input` component.\n     * @param props\n     * @returns\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps & ChildrenProp, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        maxLength,\n        tabIndex = 0,\n        hasError = false,\n        inputRef,\n        autoComplete,\n        onChange = noop,\n        onBlur = noop,\n        onFocus = noop,\n        onClear = noop,\n        onKeyPress = noop,\n        onClick = noop,\n        mask,\n        maskPlaceholder = '_',\n        maskVisibility = 'always',\n        maskOverwrite = true,\n        maskDefinitions,\n        maskDispatch,\n        inputClassName = '',\n        disabled = false,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [showClear, setShowClear] = useState(hasValue(initialValue));\n    const [isFocused, setIsFocused] = useState(false);\n\n    const isControlled = !isNil(value);\n\n    const internalMaskRef = useRef<HTMLInputElement>(null);\n    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);\n\n    const hasMask = !!mask;\n\n    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)\n    const shouldShowMask = () => {\n        switch (maskVisibility) {\n            case 'always':\n                return true;\n            case 'onFocus':\n                return isFocused;\n            case 'never':\n                return false;\n            default:\n                return isFocused;\n        }\n    };\n\n    // Handles new input value and saves it in the local state.\n    // The value stored in the state is used for rendering.\n    const changeInternalValue = (newValue = '') => {\n        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time\n        if (inputValue === newValue) {\n            return;\n        }\n\n        setInputValue(newValue);\n        setShowClear(hasValue(newValue));\n    };\n\n    // important for when used as a controlled component and value changes from the outside.\n    const previousValue = usePrevious(value);\n    if (previousValue !== value) {\n        changeInternalValue(value);\n    }\n\n    // only gets triggered on user interaction.\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        if (isControlled) {\n            onChange(newValue, event);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, event);\n        }\n    };\n\n    const handleAccept = (newValue: string, maskRef: any, event?: InputEvent) => {\n        if (!internalMaskRef.current) {\n            return;\n        }\n\n        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself\n        const syntheticEvent = {\n            target: internalMaskRef.current,\n            currentTarget: internalMaskRef.current,\n            // Standard synthetic event props\n            bubbles: true,\n            cancelable: true,\n            defaultPrevented: false,\n            isTrusted: true,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n            persist: () => {},\n            nativeEvent: {} as any,\n            type: 'change',\n            timeStamp: Date.now(),\n        } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n        // Set unmasked value manually if needed\n        // (you can use data-attributes or attach it directly)\n        (syntheticEvent.target as any).unmaskedValue = maskRef.unmaskedValue;\n\n        if (isControlled) {\n            onChange(newValue, syntheticEvent);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, syntheticEvent);\n        }\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus(event);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur(event);\n    };\n\n    // Will be triggered on every key press but also when pressing 'Enter' for example\n    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyPress(event);\n    };\n\n    const clearInputValue = (event: React.MouseEvent<HTMLSpanElement>) => {\n        changeInternalValue('');\n        onChange('', event);\n\n        if (onClear) {\n            onClear(event);\n        }\n    };\n\n    const classes = classNames(\n        'ClearableInput',\n        'input-group',\n        hasError && 'has-error',\n        disabled && 'pointer-events-none',\n        className && className\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        inputClassName,\n        showClear && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');\n\n    const convertedType = type?.toLowerCase();\n    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;\n\n    const inputProps = {\n        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),\n        className: inputClassNames,\n        autoComplete,\n        type: inputType,\n        value: inputValue,\n        onKeyPress: handleKeyPress,\n        onBlur: handleInputBlur,\n        onFocus: handleInputFocus,\n        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used\n        onClick,\n        disabled,\n        maxLength: hasMask ? undefined : maxLength,\n        tabIndex,\n    } as any;\n\n    // The dispatch function may not be an empty function. Specify it when\n    // using dynamic masking and need more control over which mask gets selected\n    const maskDispatchObj: any = {};\n    if (maskDispatch) {\n        maskDispatchObj.dispatch = maskDispatch;\n    }\n\n    const input = hasMask ? (\n        <IMaskInput\n            {...inputProps}\n            inputRef={mergedInternalMaskRef}\n            mask={mask}\n            definitions={maskDefinitions}\n            {...maskDispatchObj}\n            placeholderChar={maskPlaceholder}\n            onAccept={handleAccept}\n            lazy={!shouldShowMask()}\n            overwrite={maskOverwrite}\n        />\n    ) : (\n        <input {...inputProps} ref={inputRef || ref} />\n    );\n\n    return (\n        <div className={classes}>\n            {children && isFunction(children) ? children(inputProps) : input}\n            <span className={clearButtonClassNames} onClick={clearInputValue}>\n                <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n            </span>\n        </div>\n    );\n});\n\nexport default ClearableInput;\n"],"names":["DEFAULT_TYPE","SUPPORTED_TYPES","hasValue","value","isEmpty","ClearableInput","forwardRef","props","ref","type","defaultValue","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","className","children","remainingProps","initialValue","inputValue","setInputValue","useState","showClear","setShowClear","isFocused","setIsFocused","isControlled","isNil","internalMaskRef","useRef","mergedInternalMaskRef","useMergeRefs","hasMask","shouldShowMask","changeInternalValue","newValue","usePrevious","handleChange","event","handleAccept","maskRef","syntheticEvent","handleInputFocus","handleInputBlur","handleKeyPress","clearInputValue","classes","classNames","inputClassNames","clearButtonClassNames","convertedType","inputType","inputProps","omit","maskDispatchObj","input","jsx","IMaskInput","jsxs","isFunction"],"mappings":"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"}
+{"version":3,"file":"ClearableInput.js","sources":["../../../src/components/clearableInput/ClearableInput.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */\nimport React, { useState, forwardRef, type ForwardedRef, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty, omit } from 'es-toolkit/compat';\nimport { isFunction, isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\nimport { IMaskInput } from 'react-imask';\n\nimport usePrevious from '../../hooks/usePrevious';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport const DEFAULT_TYPE = 'text';\nexport const SUPPORTED_TYPES = ['text', 'password', 'email'];\n\nexport type MaskVisibility = 'always' | 'onFocus' | 'never';\nexport type MaskDefinition = {\n    mask: string;\n    definitions?: Record<string, string | RegExp>;\n    startsWith?: string;\n    [key: string]: any;\n};\n\nexport type ClearableInputProps = {\n    /**\n     * Gives the input element the id.\n     */\n    id?: string;\n\n    /**\n     * Gives the input element a name.\n     */\n    name?: string;\n\n    /**\n     * The translated text that shall be shown when the input is empty.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines the type of the input itself.\n     *\n     * There are three types supported:\n     * `text`, `email`, `password`.\n     *\n     * @default 'text'\n     */\n    type?: 'text' | 'password' | 'email';\n\n    /**\n     * Initial value of the ClearableInput. Pass this prop if you want to use this\n     * component as an uncontrolled component.\n     */\n    defaultValue?: string;\n\n    /**\n     * Value of the ClearableInput. Pass this prop if you want to use this\n     * component as a controlled component.\n     */\n    value?: string;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     */\n    maxLength?: number;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * The callback ref for the underlying input. Alternatively, use can use a forward ref.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Callback function for when the value changes. Receives new value as an argument.\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (\n        newValue: string,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     * @param event\n     * @returns\n     */\n    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function which gets triggered when the input gains the focus.\n     * @param event\n     * @returns\n     */\n    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function for when the value is cleared via the clear button.\n     * @param event\n     * @returns\n     */\n    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Callback function for every key pressed including `Enter` key.\n     * @param event\n     * @returns\n     */\n    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * The mask prop will allow to use the component with an input mask.\n     * It defines the pattern that should be followed.\n     *\n     * For more details on masking, checkout the third party documentation for the\n     * input mask here: {@link https://imask.js.org/guide.html}\n     *\n     * Simple masks can be defined as strings.\n     *\n     * The following characters will define mask format:\n     *\n     * - \"0\" = allowed input: \"0-9\" (digit)\n     * - \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     * - \"*\" = allowed input: any character\n     * - \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter)\n     *\n     * Other chars which is not in custom definitions supposed to be fixed:\n     *\n     * - [] - make input optional\n     * - {} - include fixed part in unmasked value\n     * - ` - prevent symbols shift back\n     *\n     * If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0).\n     *\n     * Additionally you can provide custom definitions.\n     *\n     * @example\n     * '-- ### ### ###' or '+49 00 000 00'\n     */\n    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];\n\n    /**\n     * Placeholder to cover unfilled parts of the mask.\n     *\n     * @default '_'\n     */\n    maskPlaceholder?: string | null;\n\n    /**\n     * Enable characters overwriting\n     *\n     * @default true\n     */\n    maskOverwrite?: boolean | 'shift' | undefined;\n\n    /**\n     * Chooses the mask for dynamic masking depending on input value.\n     * Note, this function may not be an empty function, otherwise the mask selection won't work\n     */\n    maskDispatch?: (appended: string, dynamicMasked: any) => any;\n\n    /**\n     * Controls when the mask pattern is visible.\n     *\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused\n     * - 'never': Mask is never shown\n     *\n     * @default 'always'\n     */\n    maskVisibility?: MaskVisibility;\n\n    /**\n     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.\n     *\n     * @example\n     * mask='AAA AAA.AA'\n     * maskDefinitions={{ A: /[A-Z0-9]/ }}\n     */\n    maskDefinitions?: Record<string, string | RegExp>;\n\n    /**\n     * Minimum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    min?: string | number | undefined | Date;\n\n    /**\n     * Maximum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    max?: string | number | undefined | Date;\n\n    /**\n     * Disabled the input component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Render-prop to customize the rendered input.\n     *\n     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.\n     *\n     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        maxLength,\n        tabIndex = 0,\n        hasError = false,\n        inputRef,\n        autoComplete,\n        onChange = noop,\n        onBlur = noop,\n        onFocus = noop,\n        onClear = noop,\n        onKeyPress = noop,\n        onClick = noop,\n        mask,\n        maskPlaceholder = '_',\n        maskVisibility = 'always',\n        maskOverwrite = true,\n        maskDefinitions,\n        maskDispatch,\n        inputClassName = '',\n        disabled = false,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [showClear, setShowClear] = useState(hasValue(initialValue));\n    const [isFocused, setIsFocused] = useState(false);\n\n    const isControlled = !isNil(value);\n\n    const internalMaskRef = useRef<HTMLInputElement>(null);\n    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);\n\n    const hasMask = !!mask;\n\n    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)\n    const shouldShowMask = () => {\n        switch (maskVisibility) {\n            case 'always':\n                return true;\n            case 'onFocus':\n                return isFocused;\n            case 'never':\n                return false;\n            default:\n                return isFocused;\n        }\n    };\n\n    // Handles new input value and saves it in the local state.\n    // The value stored in the state is used for rendering.\n    const changeInternalValue = (newValue = '') => {\n        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time\n        if (inputValue === newValue) {\n            return;\n        }\n\n        setInputValue(newValue);\n        setShowClear(hasValue(newValue));\n    };\n\n    // important for when used as a controlled component and value changes from the outside.\n    const previousValue = usePrevious(value);\n    if (previousValue !== value) {\n        changeInternalValue(value);\n    }\n\n    // only gets triggered on user interaction.\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        if (isControlled) {\n            onChange(newValue, event);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, event);\n        }\n    };\n\n    const handleAccept = (newValue: string, maskRef: any, event?: InputEvent) => {\n        if (!internalMaskRef.current) {\n            return;\n        }\n\n        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself\n        const syntheticEvent = {\n            target: internalMaskRef.current,\n            currentTarget: internalMaskRef.current,\n            // Standard synthetic event props\n            bubbles: true,\n            cancelable: true,\n            defaultPrevented: false,\n            isTrusted: true,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n            persist: () => {},\n            nativeEvent: {} as any,\n            type: 'change',\n            timeStamp: Date.now(),\n        } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n        // Set unmasked value manually if needed\n        // (you can use data-attributes or attach it directly)\n        (syntheticEvent.target as any).unmaskedValue = maskRef.unmaskedValue;\n\n        if (isControlled) {\n            onChange(newValue, syntheticEvent);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, syntheticEvent);\n        }\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus(event);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur(event);\n    };\n\n    // Will be triggered on every key press but also when pressing 'Enter' for example\n    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyPress(event);\n    };\n\n    const clearInputValue = (event: React.MouseEvent<HTMLSpanElement>) => {\n        changeInternalValue('');\n        onChange('', event);\n\n        if (onClear) {\n            onClear(event);\n        }\n    };\n\n    const classes = classNames(\n        'ClearableInput',\n        'input-group',\n        hasError && 'has-error',\n        disabled && 'pointer-events-none',\n        className && className\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        inputClassName,\n        showClear && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');\n\n    const convertedType = type?.toLowerCase();\n    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;\n\n    const inputProps = {\n        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),\n        className: inputClassNames,\n        autoComplete,\n        type: inputType,\n        value: inputValue,\n        onKeyPress: handleKeyPress,\n        onBlur: handleInputBlur,\n        onFocus: handleInputFocus,\n        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used\n        onClick,\n        disabled,\n        maxLength: hasMask ? undefined : maxLength,\n        tabIndex,\n    } as any;\n\n    // The dispatch function may not be an empty function. Specify it when\n    // using dynamic masking and need more control over which mask gets selected\n    const maskDispatchObj: any = {};\n    if (maskDispatch) {\n        maskDispatchObj.dispatch = maskDispatch;\n    }\n\n    const input = hasMask ? (\n        <IMaskInput\n            {...inputProps}\n            inputRef={mergedInternalMaskRef}\n            mask={mask}\n            definitions={maskDefinitions}\n            {...maskDispatchObj}\n            placeholderChar={maskPlaceholder}\n            onAccept={handleAccept}\n            lazy={!shouldShowMask()}\n            overwrite={maskOverwrite}\n        />\n    ) : (\n        <input {...inputProps} ref={inputRef || ref} />\n    );\n\n    return (\n        <div className={classes}>\n            {children && isFunction(children) ? children(inputProps) : input}\n            <span className={clearButtonClassNames} onClick={clearInputValue}>\n                <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n            </span>\n        </div>\n    );\n});\n\nexport default ClearableInput;\n"],"names":["DEFAULT_TYPE","SUPPORTED_TYPES","hasValue","value","isEmpty","ClearableInput","forwardRef","props","ref","type","defaultValue","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","className","children","remainingProps","initialValue","inputValue","setInputValue","useState","showClear","setShowClear","isFocused","setIsFocused","isControlled","isNil","internalMaskRef","useRef","mergedInternalMaskRef","useMergeRefs","hasMask","shouldShowMask","changeInternalValue","newValue","usePrevious","handleChange","event","handleAccept","maskRef","syntheticEvent","handleInputFocus","handleInputBlur","handleKeyPress","clearInputValue","classes","classNames","inputClassNames","clearButtonClassNames","convertedType","inputType","inputProps","omit","maskDispatchObj","input","jsx","IMaskInput","jsxs","isFunction"],"mappings":"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"}

package/components/collapse/Collapse.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 type CollapseProps = {
     /**
      * Show the component and triggers the expand or collapse animation.
+     *
      * @default false
      */
     open: boolean | undefined;
@@ -11,11 +12,13 @@ type CollapseProps = {
     unmountOnExit?: boolean;
     /**
      * Run the expand animation when the component mounts, if it is initially shown.
+     *
      * @default false
      */
     appear?: boolean;
     /**
      * Duration of the collapse animation in milliseconds.
+     *
      * @default 270
      */
     timeout?: number;

package/components/collapse/Collapse.js

@@ -1,27 +1,27 @@
-import { jsx as t, Fragment as u } from "react/jsx-runtime";
-import { AnimatePresence as I, motion as x } from "motion/react";
+import { jsx as e } from "react/jsx-runtime";
+import { AnimatePresence as u, motion as I } from "motion/react";
 import { noop as o } from "es-toolkit/function";
-const E = 200, _ = (a) => {
+const x = 200, S = (a) => {
   const {
-    open: n = !1,
+    open: t = !1,
     unmountOnExit: i = !1,
     appear: l = !1,
-    timeout: s = E,
+    timeout: s = x,
     onEntered: p = o,
     onExited: c = o,
     onAnimationStart: m = o,
     children: r
-  } = a, d = !i, h = () => m(), A = (e) => {
-    e === "open" && p(), e === "collapsed" && c();
+  } = a, d = !i, h = () => m(), A = (n) => {
+    n === "open" && p(), n === "collapsed" && c();
   }, f = {
     open: { opacity: 1, height: "auto" },
     collapsed: { opacity: 0, height: 0 }
   };
-  return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(I, { initial: l, mode: "wait", children: (n || d) && /* @__PURE__ */ t(
-    x.div,
+  return /* @__PURE__ */ e(u, { initial: l, mode: "wait", children: (t || d) && /* @__PURE__ */ e(
+    I.div,
     {
       initial: "collapsed",
-      animate: n ? "open" : "collapsed",
+      animate: t ? "open" : "collapsed",
       exit: "collapsed",
       className: "collapse display-block width-100pct",
       variants: f,
@@ -31,9 +31,9 @@ const E = 200, _ = (a) => {
       children: r
     },
     "content"
-  ) }) });
+  ) });
 };
 export {
-  _ as default
+  S as default
 };
 //# sourceMappingURL=Collapse.js.map

package/components/collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sources":["../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport { type PropsWithChildren } from 'react';\nimport { motion, AnimatePresence, type AnimationDefinition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nconst DEFAULT_ANIMATION_TIME_IN_MS = 200;\n\ntype CollapseProps = {\n    /**\n     * Show the component and triggers the expand or collapse animation.\n     * @default false\n     */\n    open: boolean | undefined;\n\n    /**\n     * Unmount the component (remove it from the DOM) when it is collapsed.\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Run the expand animation when the component mounts, if it is initially shown.\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     * @default 270\n     */\n    timeout?: number;\n\n    /**\n     * Callback fired after the component has expanded.\n     * @returns\n     */\n    onEntered?: () => void;\n\n    /**\n     * Callback fired after the component has collapsed.\n     * @returns\n     */\n    onExited?: () => void;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: () => void;\n};\n\nconst Collapse = (props: PropsWithChildren<CollapseProps>) => {\n    const {\n        open = false,\n        unmountOnExit = false,\n        appear = false,\n        timeout = DEFAULT_ANIMATION_TIME_IN_MS,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        children,\n    } = props;\n\n    const shouldKeepContentInDom = !unmountOnExit;\n\n    const handleAnimationStart = () => onAnimationStart();\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        if (definition === 'open') {\n            onEntered();\n        }\n        if (definition === 'collapsed') {\n            onExited();\n        }\n    };\n\n    const variants = {\n        open: { opacity: 1, height: 'auto' },\n        collapsed: { opacity: 0, height: 0 },\n    };\n\n    return (\n        <>\n            <AnimatePresence initial={appear} mode='wait'>\n                {(open || shouldKeepContentInDom) && (\n                    <motion.div\n                        key='content'\n                        initial='collapsed'\n                        animate={open ? 'open' : 'collapsed'}\n                        exit='collapsed'\n                        className='collapse display-block width-100pct'\n                        variants={variants}\n                        transition={{ duration: timeout / 1000, ease: 'easeIn' }}\n                        onAnimationComplete={handleAnimationComplete}\n                        onAnimationStart={handleAnimationStart}\n                    >\n                        {children}\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </>\n    );\n};\n//\n\nexport default Collapse;\n"],"names":["DEFAULT_ANIMATION_TIME_IN_MS","Collapse","props","open","unmountOnExit","appear","timeout","onEntered","noop","onExited","onAnimationStart","children","shouldKeepContentInDom","handleAnimationStart","handleAnimationComplete","definition","variants","jsx","Fragment","AnimatePresence","motion"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4C/BC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,eAAAC,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAUN;AAAA,IACV,WAAAO,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG;AAAA,EAAA,IACAT,GAEEU,IAAyB,CAACR,GAE1BS,IAAuB,MAAMH,EAAA,GAC7BI,IAA0B,CAACC,MAAoC;AACjE,IAAIA,MAAe,UACfR,EAAA,GAEAQ,MAAe,eACfN,EAAA;AAAA,EAER,GAEMO,IAAW;AAAA,IACb,MAAM,EAAE,SAAS,GAAG,QAAQ,OAAA;AAAA,IAC5B,WAAW,EAAE,SAAS,GAAG,QAAQ,EAAA;AAAA,EAAE;AAGvC,SACI,gBAAAC,EAAAC,GAAA,EACI,4BAACC,GAAA,EAAgB,SAASd,GAAQ,MAAK,QACjC,gBAAQO,MACN,gBAAAK;AAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MAEG,SAAQ;AAAA,MACR,SAASjB,IAAO,SAAS;AAAA,MACzB,MAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAAa;AAAA,MACA,YAAY,EAAE,UAAUV,IAAU,KAAM,MAAM,SAAA;AAAA,MAC9C,qBAAqBQ;AAAA,MACrB,kBAAkBD;AAAA,MAEjB,UAAAF;AAAA,IAAA;AAAA,IAVG;AAAA,EAAA,GAahB,EAAA,CACJ;AAER;"}
+{"version":3,"file":"Collapse.js","sources":["../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport { type PropsWithChildren } from 'react';\nimport { motion, AnimatePresence, type AnimationDefinition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nconst DEFAULT_ANIMATION_TIME_IN_MS = 200;\n\ntype CollapseProps = {\n    /**\n     * Show the component and triggers the expand or collapse animation.\n     *\n     * @default false\n     */\n    open: boolean | undefined;\n\n    /**\n     * Unmount the component (remove it from the DOM) when it is collapsed.\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Run the expand animation when the component mounts, if it is initially shown.\n     *\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     *\n     * @default 270\n     */\n    timeout?: number;\n\n    /**\n     * Callback fired after the component has expanded.\n     * @returns\n     */\n    onEntered?: () => void;\n\n    /**\n     * Callback fired after the component has collapsed.\n     * @returns\n     */\n    onExited?: () => void;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: () => void;\n};\n\nconst Collapse = (props: PropsWithChildren<CollapseProps>) => {\n    const {\n        open = false,\n        unmountOnExit = false,\n        appear = false,\n        timeout = DEFAULT_ANIMATION_TIME_IN_MS,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        children,\n    } = props;\n\n    const shouldKeepContentInDom = !unmountOnExit;\n\n    const handleAnimationStart = () => onAnimationStart();\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        if (definition === 'open') {\n            onEntered();\n        }\n        if (definition === 'collapsed') {\n            onExited();\n        }\n    };\n\n    const variants = {\n        open: { opacity: 1, height: 'auto' },\n        collapsed: { opacity: 0, height: 0 },\n    };\n\n    return (\n        <AnimatePresence initial={appear} mode='wait'>\n            {(open || shouldKeepContentInDom) && (\n                <motion.div\n                    key='content'\n                    initial='collapsed'\n                    animate={open ? 'open' : 'collapsed'}\n                    exit='collapsed'\n                    className='collapse display-block width-100pct'\n                    variants={variants}\n                    transition={{ duration: timeout / 1000, ease: 'easeIn' }}\n                    onAnimationComplete={handleAnimationComplete}\n                    onAnimationStart={handleAnimationStart}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n//\n\nexport default Collapse;\n"],"names":["DEFAULT_ANIMATION_TIME_IN_MS","Collapse","props","open","unmountOnExit","appear","timeout","onEntered","noop","onExited","onAnimationStart","children","shouldKeepContentInDom","handleAnimationStart","handleAnimationComplete","definition","variants","AnimatePresence","jsx","motion"],"mappings":";;;AAKA,MAAMA,IAA+B,KA+C/BC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,eAAAC,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAUN;AAAA,IACV,WAAAO,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG;AAAA,EAAA,IACAT,GAEEU,IAAyB,CAACR,GAE1BS,IAAuB,MAAMH,EAAA,GAC7BI,IAA0B,CAACC,MAAoC;AACjE,IAAIA,MAAe,UACfR,EAAA,GAEAQ,MAAe,eACfN,EAAA;AAAA,EAER,GAEMO,IAAW;AAAA,IACb,MAAM,EAAE,SAAS,GAAG,QAAQ,OAAA;AAAA,IAC5B,WAAW,EAAE,SAAS,GAAG,QAAQ,EAAA;AAAA,EAAE;AAGvC,2BACKC,GAAA,EAAgB,SAASZ,GAAQ,MAAK,QACjC,gBAAQO,MACN,gBAAAM;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MAEG,SAAQ;AAAA,MACR,SAAShB,IAAO,SAAS;AAAA,MACzB,MAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAAa;AAAA,MACA,YAAY,EAAE,UAAUV,IAAU,KAAM,MAAM,SAAA;AAAA,MAC9C,qBAAqBQ;AAAA,MACrB,kBAAkBD;AAAA,MAEjB,UAAAF;AAAA,IAAA;AAAA,IAVG;AAAA,EAAA,GAahB;AAER;"}

package/components/contentLoader/ContentLoader.d.ts

@@ -4,21 +4,25 @@ declare const CIRCLE = "circle";
 export type ContentLoaderProps = {
     /**
      * Sets the animation speed.
+     *
      * @default 2
      */
     speed?: number;
     /**
      * Sets the height of the svg element.
+     *
      * @default 14
      */
     height?: string | number;
     /**
      * Sets the width of the svg element.
+     *
      * @default 100%
      */
     width?: string | number;
     /**
      * Sets the radius of the svg element. Only relevant for circle elements.
+     *
      * @default 16
      */
     radius?: number;
@@ -33,9 +37,13 @@ export type ContentLoaderProps = {
      * Additional class names to ab added to the wrapping svg element.
      */
     className?: string;
-    /** Rect object prop. Used internally. */
+    /**
+     * Rect object prop. Used internally.
+     */
     rx?: number;
-    /** Rect object prop. Used internally. */
+    /**
+     * Rect object prop. Used internally.
+     */
     ry?: number;
 };
 type ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;

package/components/contentLoader/ContentLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLoader.js","sources":["../../../src/components/contentLoader/ContentLoader.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { default as _ContentLoader } from 'react-content-loader';\nimport { isNil } from 'es-toolkit/predicate';\nimport { cond } from 'es-toolkit/compat';\n\nimport useDarkMode from '../../hooks/useDarkMode';\n\nconst RECT = 'rect';\nconst CIRCLE = 'circle';\n\nconst DEFAULT_SPEED = 2;\nconst DEFAULT_HEIGHT = 14;\nconst DEFAULT_WIDTH = '100%';\nconst DEFAULT_RADIUS = 16;\nconst DEFAULT_TYPE = RECT;\n\nexport type ContentLoaderProps = {\n    /**\n     * Sets the animation speed.\n     * @default 2\n     */\n    speed?: number;\n    /**\n     * Sets the height of the svg element.\n     * @default 14\n     */\n    height?: string | number;\n    /**\n     * Sets the width of the svg element.\n     * @default 100%\n     */\n    width?: string | number;\n    /**\n     * Sets the radius of the svg element. Only relevant for circle elements.\n     * @default 16\n     */\n    radius?: number;\n    /**\n     * Renders either a rectangle or circle.\n     *\n     * Possible values are:\n     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`\n     */\n    type?: typeof RECT | typeof CIRCLE;\n    /**\n     * Additional class names to ab added to the wrapping svg element.\n     */\n    className?: string;\n    /** Rect object prop. Used internally. */\n    rx?: number;\n    /** Rect object prop. Used internally. */\n    ry?: number;\n};\n\ntype ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;\n\nconst hasChildren = ({ children }: ContentLoaderPropsWithChildren) => !isNil(children);\nconst renderChildren = ({ children }: ContentLoaderPropsWithChildren) => children;\n\nconst isRect = ({ type }: ContentLoaderPropsWithChildren) => type === RECT;\nconst isCircle = ({ type }: ContentLoaderPropsWithChildren) => type === CIRCLE;\n\nconst renderRect = ({ rx = 3, ry = 3 }: ContentLoaderPropsWithChildren) => (\n    <rect width='100%' height='100%' rx={rx} ry={ry} />\n);\nconst renderCircle = ({ radius }: ContentLoaderPropsWithChildren) => <circle cx={radius} cy={radius} r={radius} />;\n\n/**\n * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still\n * allows for more complex configurations as all additional props are passed down to the third-party\n * ContentLoader component. For individual customization, it allows passing svg components as rect or circle\n * directly as children.\n * @param props\n * @returns\n */\nconst ContentLoader = (props: ContentLoaderPropsWithChildren) => {\n    const {\n        speed = DEFAULT_SPEED,\n        width = DEFAULT_WIDTH,\n        height = DEFAULT_HEIGHT,\n        radius = DEFAULT_RADIUS,\n        type = DEFAULT_TYPE,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const isDarkMode = useDarkMode();\n\n    // Since we define the default values while destructuring the props, we have to build up a new object\n    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as\n    // passed into the component without the defined defaults.\n    const propsWithDefaults = {\n        type,\n        radius,\n        children,\n    } as ContentLoaderPropsWithChildren;\n\n    const content = cond([\n        [hasChildren, renderChildren],\n        [isRect, renderRect],\n        [isCircle, renderCircle],\n    ])(propsWithDefaults);\n\n    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;\n    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;\n\n    return (\n        <_ContentLoader\n            backgroundColor='#f5f6f7'\n            foregroundColor={isDarkMode ? '#aaaaaa' : '#eeeeee'}\n            speed={speed}\n            height={wrapperHeight}\n            width={wrapperWidth}\n            className={`ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}`}\n            {...remainingProps}\n        >\n            {content}\n        </_ContentLoader>\n    );\n};\n\nContentLoader.RECT = RECT as typeof RECT;\nContentLoader.CIRCLE = CIRCLE as typeof CIRCLE;\n\nexport default ContentLoader;\n"],"names":["RECT","CIRCLE","DEFAULT_SPEED","DEFAULT_HEIGHT","DEFAULT_WIDTH","DEFAULT_RADIUS","DEFAULT_TYPE","hasChildren","children","isNil","renderChildren","isRect","type","isCircle","renderRect","rx","ry","jsx","renderCircle","radius","ContentLoader","props","speed","width","height","className","remainingProps","isDarkMode","useDarkMode","propsWithDefaults","content","cond","wrapperHeight","wrapperWidth","_ContentLoader"],"mappings":";;;;;AAOA,MAAMA,IAAO,QACPC,IAAS,UAETC,IAAgB,GAChBC,IAAiB,IACjBC,IAAgB,QAChBC,IAAiB,IACjBC,IAAeN,GA0CfO,IAAc,CAAC,EAAE,UAAAC,QAA+C,CAACC,EAAMD,CAAQ,GAC/EE,IAAiB,CAAC,EAAE,UAAAF,EAAA,MAA+CA,GAEnEG,IAAS,CAAC,EAAE,MAAAC,EAAA,MAA2CA,MAASZ,GAChEa,IAAW,CAAC,EAAE,MAAAD,EAAA,MAA2CA,MAASX,GAElEa,IAAa,CAAC,EAAE,IAAAC,IAAK,GAAG,IAAAC,IAAK,EAAA,MAC/B,gBAAAC,EAAC,UAAK,OAAM,QAAO,QAAO,QAAO,IAAAF,GAAQ,IAAAC,GAAQ,GAE/CE,IAAe,CAAC,EAAE,QAAAC,QAA6C,gBAAAF,EAAC,UAAA,EAAO,IAAIE,GAAQ,IAAIA,GAAQ,GAAGA,EAAA,CAAQ,GAU1GC,IAAgB,CAACC,MAA0C;AAC7D,QAAM;AAAA,IACF,OAAAC,IAAQpB;AAAA,IACR,OAAAqB,IAAQnB;AAAA,IACR,QAAAoB,IAASrB;AAAA,IACT,QAAAgB,IAASd;AAAA,IACT,MAAAO,IAAON;AAAA,IACP,WAAAmB,IAAY;AAAA,IACZ,UAAAjB;AAAA,IACA,GAAGkB;AAAA,EAAA,IACHL,GAEEM,IAAaC,EAAA,GAKbC,IAAoB;AAAA,IACtB,MAAAjB;AAAA,IACA,QAAAO;AAAA,IACA,UAAAX;AAAA,EAAA,GAGEsB,IAAUC,EAAK;AAAA,IACjB,CAACxB,GAAaG,CAAc;AAAA,IAC5B,CAACC,GAAQG,CAAU;AAAA,IACnB,CAACD,GAAUK,CAAY;AAAA,EAAA,CAC1B,EAAEW,CAAiB,GAEdG,IAAgBnB,EAASgB,CAAiB,IAAIV,IAAS,IAAIK,GAC3DS,IAAepB,EAASgB,CAAiB,IAAIG,IAAgBT;AAEnE,SACI,gBAAAN;AAAA,IAACiB;AAAA,IAAA;AAAA,MACG,iBAAgB;AAAA,MAChB,iBAAiBP,IAAa,YAAY;AAAA,MAC1C,OAAAL;AAAA,MACA,QAAQU;AAAA,MACR,OAAOC;AAAA,MACP,WAAW,iBAAiBR,CAAS,IAAIE,IAAa,uBAAuB,EAAE;AAAA,MAC9E,GAAGD;AAAA,MAEH,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAV,EAAc,OAAOpB;AACrBoB,EAAc,SAASnB;"}
+{"version":3,"file":"ContentLoader.js","sources":["../../../src/components/contentLoader/ContentLoader.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { default as _ContentLoader } from 'react-content-loader';\nimport { isNil } from 'es-toolkit/predicate';\nimport { cond } from 'es-toolkit/compat';\n\nimport useDarkMode from '../../hooks/useDarkMode';\n\nconst RECT = 'rect';\nconst CIRCLE = 'circle';\n\nconst DEFAULT_SPEED = 2;\nconst DEFAULT_HEIGHT = 14;\nconst DEFAULT_WIDTH = '100%';\nconst DEFAULT_RADIUS = 16;\nconst DEFAULT_TYPE = RECT;\n\nexport type ContentLoaderProps = {\n    /**\n     * Sets the animation speed.\n     *\n     * @default 2\n     */\n    speed?: number;\n\n    /**\n     * Sets the height of the svg element.\n     *\n     * @default 14\n     */\n    height?: string | number;\n\n    /**\n     * Sets the width of the svg element.\n     *\n     * @default 100%\n     */\n    width?: string | number;\n\n    /**\n     * Sets the radius of the svg element. Only relevant for circle elements.\n     *\n     * @default 16\n     */\n    radius?: number;\n\n    /**\n     * Renders either a rectangle or circle.\n     *\n     * Possible values are:\n     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`\n     */\n    type?: typeof RECT | typeof CIRCLE;\n\n    /**\n     * Additional class names to ab added to the wrapping svg element.\n     */\n    className?: string;\n\n    /**\n     * Rect object prop. Used internally.\n     */\n    rx?: number;\n\n    /**\n     * Rect object prop. Used internally.\n     */\n    ry?: number;\n};\n\ntype ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;\n\nconst hasChildren = ({ children }: ContentLoaderPropsWithChildren) => !isNil(children);\nconst renderChildren = ({ children }: ContentLoaderPropsWithChildren) => children;\n\nconst isRect = ({ type }: ContentLoaderPropsWithChildren) => type === RECT;\nconst isCircle = ({ type }: ContentLoaderPropsWithChildren) => type === CIRCLE;\n\nconst renderRect = ({ rx = 3, ry = 3 }: ContentLoaderPropsWithChildren) => (\n    <rect width='100%' height='100%' rx={rx} ry={ry} />\n);\n\nconst renderCircle = ({ radius }: ContentLoaderPropsWithChildren) => <circle cx={radius} cy={radius} r={radius} />;\n\n/**\n * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still\n * allows for more complex configurations as all additional props are passed down to the third-party\n * ContentLoader component. For individual customization, it allows passing svg components as rect or circle\n * directly as children.\n * @param props\n * @returns\n */\nconst ContentLoader = (props: ContentLoaderPropsWithChildren) => {\n    const {\n        speed = DEFAULT_SPEED,\n        width = DEFAULT_WIDTH,\n        height = DEFAULT_HEIGHT,\n        radius = DEFAULT_RADIUS,\n        type = DEFAULT_TYPE,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const isDarkMode = useDarkMode();\n\n    // Since we define the default values while destructuring the props, we have to build up a new object\n    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as\n    // passed into the component without the defined defaults.\n    const propsWithDefaults = {\n        type,\n        radius,\n        children,\n    } as ContentLoaderPropsWithChildren;\n\n    const content = cond([\n        [hasChildren, renderChildren],\n        [isRect, renderRect],\n        [isCircle, renderCircle],\n    ])(propsWithDefaults);\n\n    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;\n    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;\n\n    return (\n        <_ContentLoader\n            backgroundColor='#f5f6f7'\n            foregroundColor={isDarkMode ? '#aaaaaa' : '#eeeeee'}\n            speed={speed}\n            height={wrapperHeight}\n            width={wrapperWidth}\n            className={`ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}`}\n            {...remainingProps}\n        >\n            {content}\n        </_ContentLoader>\n    );\n};\n\nContentLoader.RECT = RECT as typeof RECT;\nContentLoader.CIRCLE = CIRCLE as typeof CIRCLE;\n\nexport default ContentLoader;\n"],"names":["RECT","CIRCLE","DEFAULT_SPEED","DEFAULT_HEIGHT","DEFAULT_WIDTH","DEFAULT_RADIUS","DEFAULT_TYPE","hasChildren","children","isNil","renderChildren","isRect","type","isCircle","renderRect","rx","ry","jsx","renderCircle","radius","ContentLoader","props","speed","width","height","className","remainingProps","isDarkMode","useDarkMode","propsWithDefaults","content","cond","wrapperHeight","wrapperWidth","_ContentLoader"],"mappings":";;;;;AAOA,MAAMA,IAAO,QACPC,IAAS,UAETC,IAAgB,GAChBC,IAAiB,IACjBC,IAAgB,QAChBC,IAAiB,IACjBC,IAAeN,GAyDfO,IAAc,CAAC,EAAE,UAAAC,QAA+C,CAACC,EAAMD,CAAQ,GAC/EE,IAAiB,CAAC,EAAE,UAAAF,EAAA,MAA+CA,GAEnEG,IAAS,CAAC,EAAE,MAAAC,EAAA,MAA2CA,MAASZ,GAChEa,IAAW,CAAC,EAAE,MAAAD,EAAA,MAA2CA,MAASX,GAElEa,IAAa,CAAC,EAAE,IAAAC,IAAK,GAAG,IAAAC,IAAK,EAAA,MAC/B,gBAAAC,EAAC,UAAK,OAAM,QAAO,QAAO,QAAO,IAAAF,GAAQ,IAAAC,GAAQ,GAG/CE,IAAe,CAAC,EAAE,QAAAC,QAA6C,gBAAAF,EAAC,UAAA,EAAO,IAAIE,GAAQ,IAAIA,GAAQ,GAAGA,EAAA,CAAQ,GAU1GC,IAAgB,CAACC,MAA0C;AAC7D,QAAM;AAAA,IACF,OAAAC,IAAQpB;AAAA,IACR,OAAAqB,IAAQnB;AAAA,IACR,QAAAoB,IAASrB;AAAA,IACT,QAAAgB,IAASd;AAAA,IACT,MAAAO,IAAON;AAAA,IACP,WAAAmB,IAAY;AAAA,IACZ,UAAAjB;AAAA,IACA,GAAGkB;AAAA,EAAA,IACHL,GAEEM,IAAaC,EAAA,GAKbC,IAAoB;AAAA,IACtB,MAAAjB;AAAA,IACA,QAAAO;AAAA,IACA,UAAAX;AAAA,EAAA,GAGEsB,IAAUC,EAAK;AAAA,IACjB,CAACxB,GAAaG,CAAc;AAAA,IAC5B,CAACC,GAAQG,CAAU;AAAA,IACnB,CAACD,GAAUK,CAAY;AAAA,EAAA,CAC1B,EAAEW,CAAiB,GAEdG,IAAgBnB,EAASgB,CAAiB,IAAIV,IAAS,IAAIK,GAC3DS,IAAepB,EAASgB,CAAiB,IAAIG,IAAgBT;AAEnE,SACI,gBAAAN;AAAA,IAACiB;AAAA,IAAA;AAAA,MACG,iBAAgB;AAAA,MAChB,iBAAiBP,IAAa,YAAY;AAAA,MAC1C,OAAAL;AAAA,MACA,QAAQU;AAAA,MACR,OAAOC;AAAA,MACP,WAAW,iBAAiBR,CAAS,IAAIE,IAAa,uBAAuB,EAAE;AAAA,MAC9E,GAAGD;AAAA,MAEH,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAV,EAAc,OAAOpB;AACrBoB,EAAc,SAASnB;"}

package/components/dataTabs/DataTabs.d.ts

@@ -33,6 +33,8 @@ export type DataTabsProps = {
     disableTransition?: boolean;
     /**
      * Additional classes to be set on the arrow.
+     *
+     * @default 'bg-highlight-dark border-color-transparent'
      */
     arrowClassName?: string;
     /**
@@ -47,10 +49,14 @@ export type DataTabsProps = {
     tabClassName?: string;
     /**
      * Utility hover classes to be set on the tab element.
+     *
+     * @default 'bg-highlight-decent text-color-darkest'
      */
     tabHoverClassName?: string;
     /**
      * Utility active classes to be set on the tab element.
+     *
+     * @default 'bg-highlight-dark text-color-white'
      */
     tabActiveClassName?: string;
     /**

package/components/dataTabs/DataTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTabs.js","sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence } from 'motion/react';\n\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"names":["getFirstTabKey","children","firstItem","DataTabs","props","activeKey","bordered","wrapperClassName","commonTabContent","disableTransition","arrowClassName","onSelectTab","tabActiveClassName","tabClassName","tabContentClassName","tabFirstChildClassName","tabHoverClassName","tabLastChildClassName","tabsWrapperClassName","vertical","remainingProps","internalActiveKey","setInternalActiveKey","useState","React","previousActiveKey","setPreviousActiveKey","handleSelectTab","event","wrapperClassNames","classNames","enrichChildren","child","enhancedChildren","AnimatePresence","jsxs","jsx","index","tabKey","title","className","DataTabHeader"],"mappings":"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"}
+{"version":3,"file":"DataTabs.js","sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence } from 'motion/react';\n\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     *\n     * @default 'bg-highlight-dark border-color-transparent'\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-decent text-color-darkest'\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-dark text-color-white'\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"names":["getFirstTabKey","children","firstItem","DataTabs","props","activeKey","bordered","wrapperClassName","commonTabContent","disableTransition","arrowClassName","onSelectTab","tabActiveClassName","tabClassName","tabContentClassName","tabFirstChildClassName","tabHoverClassName","tabLastChildClassName","tabsWrapperClassName","vertical","remainingProps","internalActiveKey","setInternalActiveKey","useState","React","previousActiveKey","setPreviousActiveKey","handleSelectTab","event","wrapperClassNames","classNames","enrichChildren","child","enhancedChildren","AnimatePresence","jsxs","jsx","index","tabKey","title","className","DataTabHeader"],"mappings":"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"}

package/components/datepicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Moment } from 'moment';
-import { default as Datetime, DatetimepickerProps } from 'react-datetime';
+import { default as DatetimeImport, DatetimepickerProps } from 'react-datetime';
 export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
     /**
      * An id used for the internal input element.
@@ -85,7 +85,7 @@ export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialVal
      */
     className?: string;
 };
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.DatetimepickerProps, "onChange" | "initialValue"> & {
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatetimeImport.DatetimepickerProps, "onChange" | "initialValue"> & {
     /**
      * An id used for the internal input element.
      */

package/components/datepicker/DatePicker.js

@@ -1,42 +1,42 @@
 import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as I, useState as L } from "react";
-import N from "classnames";
-import O from "react-datetime";
+import { forwardRef as L, useState as N } from "react";
+import O from "classnames";
+import o from "react-datetime";
 import { noop as A } from "es-toolkit/function";
-const _ = "en-GB", k = 0, T = I((a, x) => {
+const _ = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {
   const {
-    id: s,
-    dropup: n = !1,
-    alignRight: c = !1,
-    locale: i = _,
-    minWidth: p = k,
-    onChange: l = A,
-    mandatory: m = !0,
+    id: n,
+    dropup: c = !1,
+    alignRight: i = !1,
+    locale: l = k,
+    minWidth: p = x,
+    onChange: m = A,
+    mandatory: f = !0,
     dateValidation: r,
-    clearableInput: f = !1,
-    closeOnSelect: u = !0,
-    inputProps: d,
-    className: o,
-    ...h
-  } = a, [g, D] = L(!1), P = (e) => r ? r(e) : typeof e == "object", E = (e) => {
-    const t = m ? P(e) : !0;
-    D(!t), l(e, t);
-  }, b = N(
+    clearableInput: u = !1,
+    closeOnSelect: d = !0,
+    inputProps: h,
+    className: a,
+    ...D
+  } = s, [g, P] = N(!1), E = (t) => r ? r(t) : typeof t == "object", I = (t) => {
+    const e = f ? E(t) : !0;
+    P(!e), m(t, e);
+  }, b = O(
     "DatePicker",
     "form-group",
     g && "has-error",
-    n && "dropup",
-    c && "align-right",
-    o && o
-  ), j = { id: s, ...d };
+    c && "dropup",
+    i && "align-right",
+    a && a
+  ), j = { id: n, ...h };
   return /* @__PURE__ */ C(
-    O,
+    _,
     {
-      ...h,
-      locale: i,
-      clearableInput: f,
-      closeOnSelect: u,
-      onChange: E,
+      ...D,
+      locale: l,
+      clearableInput: u,
+      closeOnSelect: d,
+      onChange: I,
       minWidth: p,
       inputProps: j,
       className: b
@@ -44,6 +44,6 @@ const _ = "en-GB", k = 0, T = I((a, x) => {
   );
 });
 export {
-  T as default
+  U as default
 };
 //# sourceMappingURL=DatePicker.js.map