@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/charts/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","sources":["../../../src/components/charts/AreaChart.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n    AreaChart as RechartsAreaChart,\n    Area as RechartsArea,\n    Legend as RechartsLegend,\n    Brush,\n    CartesianGrid,\n    ResponsiveContainer,\n    XAxis as RechartsXAxis,\n    YAxis as RechartsYAxis,\n    type XAxisProps,\n    type YAxisProps,\n    type AreaProps as RechartsAreaProps,\n} from 'recharts';\nimport { isObject } from 'es-toolkit/compat';\n\nimport { getColor, mapGridOptions } from './chartHelper';\nimport AreaGradient, { DEFAULT_ARIA_GRADIENT_ID, type AreaGradientProps } from './AreaGradient';\nimport ChartTooltip, { type ChartTooltipProps } from './ChartTooltip';\nimport { getLegendDefaultProps, type LegendProps } from './Legend';\nimport { renderAxis } from './XAxis';\nimport { getAreaDefaultProps, type AreaProps } from './Area';\nimport type { GridProps } from './ChartGrid';\nimport type { ResponsiveContainerProps } from './ResponsiveContainer';\nimport { renderReferenceLine, type ReferenceLineProps } from './ReferenceLine';\n\ntype RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;\n\nexport type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {\n    width?: number;\n    height?: number;\n    data: T[];\n    dataUnit?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: unknown type\n    dataKey?: string | number | ((obj: T) => any);\n    gradients?: React.ReactElement<AreaGradientProps>[];\n    areas: React.ReactElement<AreaProps>[];\n    referenceLines?: React.ReactElement<ReferenceLineProps>[];\n    xAxisOptions?: XAxisProps;\n    yAxisOptions?: YAxisProps;\n    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];\n    gridOptions?: GridProps;\n    showGrid?: boolean;\n    containerOptions?: ResponsiveContainerProps;\n    showXAxis?: boolean;\n    showYAxis?: boolean;\n    legend?: React.ReactElement<LegendProps> | boolean;\n    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;\n    brush?: boolean;\n};\n\nconst AreaChart = <T extends object>(props: AreaChartProps<T>) => {\n    const {\n        width,\n        height,\n        data = [],\n        dataUnit = '',\n        dataKey = 'value',\n        gradients = [],\n        areas = [],\n        referenceLines = [],\n        xAxisOptions,\n        yAxisOptions,\n        gridOptions,\n        containerOptions,\n        showXAxis = true,\n        showYAxis = false,\n        additionalAxes = [],\n        showGrid = false,\n        legend,\n        brush = false,\n        tooltip = true,\n        ...remainingProps\n    } = props;\n\n    const areasWithGradient = areas.map(area => {\n        const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };\n        const { strokeColor, ...remainingAreaProps } = areaPropsWithDefault;\n        const gradientId = area.key;\n        const stroke = getColor(strokeColor);\n        return {\n            area: (\n                <RechartsArea\n                    {...(remainingAreaProps as Omit<RechartsAreaProps, 'ref'>)}\n                    key={area.key}\n                    stroke={stroke}\n                    fill={`url(#${gradientId})`}\n                />\n            ),\n            gradient: <AreaGradient key={area.key} id={gradientId || DEFAULT_ARIA_GRADIENT_ID} color={strokeColor} />,\n        };\n    });\n\n    const tooltipProps = isObject(tooltip) ? tooltip.props : {};\n    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : ({} as LegendProps);\n\n    return (\n        <ResponsiveContainer\n            minHeight={100}\n            minWidth={100}\n            initialDimension={{ width: 100, height: 100 }}\n            {...containerOptions}\n        >\n            <RechartsAreaChart\n                width={width}\n                height={height}\n                data={data}\n                margin={{ top: 15, right: 15, left: 15, bottom: 15 }}\n                {...remainingProps}\n            >\n                <defs>\n                    {gradients}\n                    {areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)}\n                </defs>\n\n                {showGrid && <CartesianGrid strokeDasharray='3 3' {...mapGridOptions(gridOptions)} />}\n\n                <RechartsXAxis hide={!showXAxis} dataKey={dataKey} {...xAxisOptions} />\n                <RechartsYAxis hide={!showYAxis} unit={dataUnit} {...yAxisOptions} />\n\n                {additionalAxes.map(renderAxis)}\n\n                {tooltip && <ChartTooltip {...tooltipProps} />}\n\n                {legend && legendProps && (\n                    <>\n                        {/* @ts-ignore: intentionally as formatter is different. See Legend component */}\n                        <RechartsLegend\n                            wrapperStyle={\n                                legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle\n                            }\n                            {...legendProps}\n                        />\n                    </>\n                )}\n\n                {areasWithGradient.map(areaWithGradient => areaWithGradient.area)}\n\n                {referenceLines.map(renderReferenceLine)}\n\n                {brush && <Brush stroke={getColor('gray')} />}\n            </RechartsAreaChart>\n        </ResponsiveContainer>\n    );\n};\n\nexport default AreaChart;\n"],"names":["AreaChart","props","width","height","data","dataUnit","dataKey","gradients","areas","referenceLines","xAxisOptions","yAxisOptions","gridOptions","containerOptions","showXAxis","showYAxis","additionalAxes","showGrid","legend","brush","tooltip","remainingProps","areasWithGradient","area","areaPropsWithDefault","getAreaDefaultProps","strokeColor","remainingAreaProps","gradientId","stroke","getColor","createElement","RechartsArea","AreaGradient","DEFAULT_ARIA_GRADIENT_ID","tooltipProps","isObject","legendProps","getLegendDefaultProps","jsx","ResponsiveContainer","jsxs","RechartsAreaChart","areaWithGradient","CartesianGrid","mapGridOptions","RechartsXAxis","RechartsYAxis","renderAxis","ChartTooltip","Fragment","RechartsLegend","renderReferenceLine","Brush"],"mappings":"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"}
+{"version":3,"file":"AreaChart.js","sources":["../../../src/components/charts/AreaChart.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n    AreaChart as RechartsAreaChart,\n    Area as RechartsArea,\n    Legend as RechartsLegend,\n    Brush,\n    CartesianGrid,\n    ResponsiveContainer,\n    XAxis as RechartsXAxis,\n    YAxis as RechartsYAxis,\n    type XAxisProps,\n    type YAxisProps,\n    type AreaProps as RechartsAreaProps,\n} from 'recharts';\nimport { isObject } from 'es-toolkit/compat';\n\nimport { getColor, mapGridOptions } from './chartHelper';\nimport AreaGradient, { DEFAULT_ARIA_GRADIENT_ID, type AreaGradientProps } from './AreaGradient';\nimport ChartTooltip, { type ChartTooltipProps } from './ChartTooltip';\nimport { getLegendDefaultProps, type LegendProps } from './Legend';\nimport { renderAxis } from './XAxis';\nimport { getAreaDefaultProps, type AreaProps } from './Area';\nimport type { GridProps } from './ChartGrid';\nimport type { ResponsiveContainerProps } from './ResponsiveContainer';\nimport { renderReferenceLine, type ReferenceLineProps } from './ReferenceLine';\n\ntype RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;\n\nexport type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {\n    width?: number;\n    height?: number;\n    data: T[];\n    dataUnit?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: unknown type\n    dataKey?: string | number | ((obj: T) => any);\n    gradients?: React.ReactElement<AreaGradientProps>[];\n    areas: React.ReactElement<AreaProps>[];\n    referenceLines?: React.ReactElement<ReferenceLineProps>[];\n    xAxisOptions?: XAxisProps;\n    yAxisOptions?: YAxisProps;\n    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];\n    gridOptions?: GridProps;\n    showGrid?: boolean;\n    containerOptions?: ResponsiveContainerProps;\n    showXAxis?: boolean;\n    showYAxis?: boolean;\n    legend?: React.ReactElement<LegendProps> | boolean;\n    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;\n    brush?: boolean;\n};\n\nconst AreaChart = <T extends object>(props: AreaChartProps<T>) => {\n    const {\n        width,\n        height,\n        data = [],\n        dataUnit = '',\n        dataKey = 'value',\n        gradients = [],\n        areas = [],\n        referenceLines = [],\n        xAxisOptions,\n        yAxisOptions,\n        gridOptions,\n        containerOptions,\n        showXAxis = true,\n        showYAxis = false,\n        additionalAxes = [],\n        showGrid = false,\n        legend,\n        brush = false,\n        tooltip = true,\n        ...remainingProps\n    } = props;\n\n    const areasWithGradient = areas.map(area => {\n        const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };\n        const { strokeColor, ...remainingAreaProps } = areaPropsWithDefault;\n        const gradientId = area.key;\n        const stroke = getColor(strokeColor);\n        return {\n            area: (\n                <RechartsArea\n                    {...(remainingAreaProps as Omit<RechartsAreaProps<unknown, unknown>, 'ref'>)}\n                    key={area.key}\n                    stroke={stroke}\n                    fill={`url(#${gradientId})`}\n                />\n            ),\n            gradient: <AreaGradient key={area.key} id={gradientId || DEFAULT_ARIA_GRADIENT_ID} color={strokeColor} />,\n        };\n    });\n\n    const tooltipProps = isObject(tooltip) ? tooltip.props : {};\n    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : ({} as LegendProps);\n\n    return (\n        <ResponsiveContainer\n            minHeight={100}\n            minWidth={100}\n            initialDimension={{ width: 100, height: 100 }}\n            {...containerOptions}\n        >\n            <RechartsAreaChart\n                width={width}\n                height={height}\n                data={data}\n                margin={{ top: 15, right: 15, left: 15, bottom: 15 }}\n                {...remainingProps}\n            >\n                <defs>\n                    {gradients}\n                    {areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)}\n                </defs>\n\n                {showGrid && <CartesianGrid strokeDasharray='3 3' {...mapGridOptions(gridOptions)} />}\n\n                <RechartsXAxis hide={!showXAxis} dataKey={dataKey} {...xAxisOptions} />\n                <RechartsYAxis hide={!showYAxis} unit={dataUnit} {...yAxisOptions} />\n\n                {additionalAxes.map(renderAxis)}\n\n                {tooltip && <ChartTooltip {...tooltipProps} />}\n\n                {legend && legendProps && (\n                    <>\n                        {/* @ts-ignore: intentionally as formatter is different. See Legend component */}\n                        <RechartsLegend\n                            wrapperStyle={\n                                legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle\n                            }\n                            {...legendProps}\n                        />\n                    </>\n                )}\n\n                {areasWithGradient.map(areaWithGradient => areaWithGradient.area)}\n\n                {referenceLines.map(renderReferenceLine)}\n\n                {brush && <Brush stroke={getColor('gray')} />}\n            </RechartsAreaChart>\n        </ResponsiveContainer>\n    );\n};\n\nexport default AreaChart;\n"],"names":["AreaChart","props","width","height","data","dataUnit","dataKey","gradients","areas","referenceLines","xAxisOptions","yAxisOptions","gridOptions","containerOptions","showXAxis","showYAxis","additionalAxes","showGrid","legend","brush","tooltip","remainingProps","areasWithGradient","area","areaPropsWithDefault","getAreaDefaultProps","strokeColor","remainingAreaProps","gradientId","stroke","getColor","createElement","RechartsArea","AreaGradient","DEFAULT_ARIA_GRADIENT_ID","tooltipProps","isObject","legendProps","getLegendDefaultProps","jsx","ResponsiveContainer","jsxs","RechartsAreaChart","areaWithGradient","CartesianGrid","mapGridOptions","RechartsXAxis","RechartsYAxis","renderAxis","ChartTooltip","Fragment","RechartsLegend","renderReferenceLine","Brush"],"mappings":"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"}

package/components/charts/ComposedChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedChart.js","sources":["../../../src/components/charts/ComposedChart.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n    ComposedChart as RechartsComposedChart,\n    Line as RechartsLine,\n    Bar as RechartsBar,\n    Area as RechartsArea,\n    Legend as RechartsLegend,\n    Brush,\n    CartesianGrid,\n    ResponsiveContainer,\n    XAxis as RechartsXAxis,\n    YAxis as RechartsYAxis,\n    type XAxisProps,\n    type YAxisProps,\n    type AreaProps as RechartsAreaProps,\n    type LineProps as RechartsLineProps,\n} from 'recharts';\nimport { isObject } from 'es-toolkit/compat';\n\nimport { getColor, mapGridOptions } from './chartHelper';\nimport ChartTooltip, { type ChartTooltipProps } from './ChartTooltip';\nimport { getLegendDefaultProps, type LegendProps } from './Legend';\nimport { renderAxis } from './XAxis';\nimport { getBarDefaultProps, type BarProps } from './Bar';\nimport { renderReferenceLine, type ReferenceLineProps } from './ReferenceLine';\nimport { getLineDefaultProps, type LineProps } from './Line';\nimport { getAreaDefaultProps, type AreaProps } from './Area';\nimport type { GridProps } from './ChartGrid';\nimport type { ResponsiveContainerProps } from './ResponsiveContainer';\n\ntype RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;\n\nexport type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {\n    width?: number;\n    height?: number;\n    data: T[];\n    dataUnit?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: unknown type\n    dataKey?: string | number | ((obj: T) => any);\n    lines?: React.ReactElement<LineProps>[];\n    bars?: React.ReactElement<BarProps>[];\n    areas?: React.ReactElement<AreaProps>[];\n    referenceLines?: React.ReactElement<ReferenceLineProps>[];\n    xAxisOptions?: XAxisProps;\n    yAxisOptions?: YAxisProps;\n    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];\n    gridOptions?: GridProps;\n    containerOptions?: ResponsiveContainerProps;\n    showXAxis?: boolean;\n    showYAxis?: boolean;\n    showGrid?: boolean;\n    legend?: React.ReactElement<LegendProps> | boolean;\n    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;\n    brush?: boolean;\n};\n\nconst ComposedChart = <T extends object>(props: ComposedChartProps<T>) => {\n    const {\n        width,\n        height,\n        data = [],\n        dataUnit = '',\n        dataKey = 'value',\n        lines = [],\n        bars = [],\n        areas = [],\n        referenceLines = [],\n        xAxisOptions,\n        yAxisOptions,\n        additionalAxes = [],\n        gridOptions,\n        containerOptions,\n        showXAxis = true,\n        showYAxis = false,\n        showGrid = false,\n        legend,\n        brush = false,\n        tooltip = true,\n        ...remainingProps\n    } = props;\n\n    const tooltipProps = isObject(tooltip) ? tooltip.props : {};\n    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};\n\n    return (\n        <ResponsiveContainer\n            minHeight={100}\n            minWidth={100}\n            initialDimension={{ width: 100, height: 100 }}\n            {...containerOptions}\n        >\n            <RechartsComposedChart\n                width={width}\n                height={height}\n                data={data}\n                margin={{ top: 15, right: 15, left: 15, bottom: 15 }}\n                {...remainingProps}\n            >\n                {showGrid && <CartesianGrid strokeDasharray='3 3' {...mapGridOptions(gridOptions)} />}\n\n                <RechartsXAxis hide={!showXAxis} dataKey={dataKey} {...xAxisOptions} />\n                <RechartsYAxis hide={!showYAxis} unit={dataUnit} {...yAxisOptions} />\n\n                {additionalAxes.map(renderAxis)}\n\n                {tooltip && <ChartTooltip {...tooltipProps} />}\n\n                {legend && <RechartsLegend {...legendProps} />}\n\n                {areas.map(area => {\n                    const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };\n                    const { strokeColor, fill, ...remainingAreaProps } = areaPropsWithDefault;\n                    return (\n                        <RechartsArea\n                            {...(remainingAreaProps as Omit<RechartsAreaProps, 'ref'>)}\n                            key={area.key}\n                            stroke={getColor(strokeColor)}\n                            fill={getColor(fill)}\n                        />\n                    );\n                })}\n\n                {bars.map(bar => {\n                    const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };\n                    const { color, ...remainingBarProps } = barPropsWithDefault;\n                    const cellColor = color && getColor(color);\n                    return <RechartsBar key={bar.key} unit={dataUnit} {...remainingBarProps} fill={cellColor} />;\n                })}\n\n                {lines.map(line => {\n                    const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };\n                    const { strokeColor, ...remainingLineProps } = linePropsWithDefault;\n                    return (\n                        <RechartsLine\n                            {...(remainingLineProps as Omit<RechartsLineProps, 'ref'>)}\n                            key={line.key}\n                            stroke={getColor(strokeColor)}\n                        />\n                    );\n                })}\n\n                {referenceLines.map(renderReferenceLine)}\n\n                {brush && <Brush stroke={getColor('gray')} />}\n            </RechartsComposedChart>\n        </ResponsiveContainer>\n    );\n};\n\nexport default ComposedChart;\n"],"names":["ComposedChart","props","width","height","data","dataUnit","dataKey","lines","bars","areas","referenceLines","xAxisOptions","yAxisOptions","additionalAxes","gridOptions","containerOptions","showXAxis","showYAxis","showGrid","legend","brush","tooltip","remainingProps","tooltipProps","isObject","legendProps","getLegendDefaultProps","jsx","ResponsiveContainer","jsxs","RechartsComposedChart","CartesianGrid","mapGridOptions","RechartsXAxis","RechartsYAxis","renderAxis","ChartTooltip","RechartsLegend","area","areaPropsWithDefault","getAreaDefaultProps","strokeColor","fill","remainingAreaProps","createElement","RechartsArea","getColor","bar","barPropsWithDefault","getBarDefaultProps","color","remainingBarProps","cellColor","RechartsBar","line","linePropsWithDefault","getLineDefaultProps","remainingLineProps","RechartsLine","renderReferenceLine","Brush"],"mappings":"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"}
+{"version":3,"file":"ComposedChart.js","sources":["../../../src/components/charts/ComposedChart.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n    ComposedChart as RechartsComposedChart,\n    Line as RechartsLine,\n    Bar as RechartsBar,\n    Area as RechartsArea,\n    Legend as RechartsLegend,\n    Brush,\n    CartesianGrid,\n    ResponsiveContainer,\n    XAxis as RechartsXAxis,\n    YAxis as RechartsYAxis,\n    type XAxisProps,\n    type YAxisProps,\n    type AreaProps as RechartsAreaProps,\n    type LineProps as RechartsLineProps,\n} from 'recharts';\nimport { isObject } from 'es-toolkit/compat';\n\nimport { getColor, mapGridOptions } from './chartHelper';\nimport ChartTooltip, { type ChartTooltipProps } from './ChartTooltip';\nimport { getLegendDefaultProps, type LegendProps } from './Legend';\nimport { renderAxis } from './XAxis';\nimport { getBarDefaultProps, type BarProps } from './Bar';\nimport { renderReferenceLine, type ReferenceLineProps } from './ReferenceLine';\nimport { getLineDefaultProps, type LineProps } from './Line';\nimport { getAreaDefaultProps, type AreaProps } from './Area';\nimport type { GridProps } from './ChartGrid';\nimport type { ResponsiveContainerProps } from './ResponsiveContainer';\n\ntype RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;\n\nexport type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {\n    width?: number;\n    height?: number;\n    data: T[];\n    dataUnit?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: unknown type\n    dataKey?: string | number | ((obj: T) => any);\n    lines?: React.ReactElement<LineProps>[];\n    bars?: React.ReactElement<BarProps>[];\n    areas?: React.ReactElement<AreaProps>[];\n    referenceLines?: React.ReactElement<ReferenceLineProps>[];\n    xAxisOptions?: XAxisProps;\n    yAxisOptions?: YAxisProps;\n    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];\n    gridOptions?: GridProps;\n    containerOptions?: ResponsiveContainerProps;\n    showXAxis?: boolean;\n    showYAxis?: boolean;\n    showGrid?: boolean;\n    legend?: React.ReactElement<LegendProps> | boolean;\n    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;\n    brush?: boolean;\n};\n\nconst ComposedChart = <T extends object>(props: ComposedChartProps<T>) => {\n    const {\n        width,\n        height,\n        data = [],\n        dataUnit = '',\n        dataKey = 'value',\n        lines = [],\n        bars = [],\n        areas = [],\n        referenceLines = [],\n        xAxisOptions,\n        yAxisOptions,\n        additionalAxes = [],\n        gridOptions,\n        containerOptions,\n        showXAxis = true,\n        showYAxis = false,\n        showGrid = false,\n        legend,\n        brush = false,\n        tooltip = true,\n        ...remainingProps\n    } = props;\n\n    const tooltipProps = isObject(tooltip) ? tooltip.props : {};\n    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};\n\n    return (\n        <ResponsiveContainer\n            minHeight={100}\n            minWidth={100}\n            initialDimension={{ width: 100, height: 100 }}\n            {...containerOptions}\n        >\n            <RechartsComposedChart\n                width={width}\n                height={height}\n                data={data}\n                margin={{ top: 15, right: 15, left: 15, bottom: 15 }}\n                {...remainingProps}\n            >\n                {showGrid && <CartesianGrid strokeDasharray='3 3' {...mapGridOptions(gridOptions)} />}\n\n                <RechartsXAxis hide={!showXAxis} dataKey={dataKey} {...xAxisOptions} />\n                <RechartsYAxis hide={!showYAxis} unit={dataUnit} {...yAxisOptions} />\n\n                {additionalAxes.map(renderAxis)}\n\n                {tooltip && <ChartTooltip {...tooltipProps} />}\n\n                {legend && <RechartsLegend {...legendProps} />}\n\n                {areas.map(area => {\n                    const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };\n                    const { strokeColor, fill, ...remainingAreaProps } = areaPropsWithDefault;\n                    return (\n                        <RechartsArea\n                            {...(remainingAreaProps as Omit<RechartsAreaProps<unknown, unknown>, 'ref'>)}\n                            key={area.key}\n                            stroke={getColor(strokeColor)}\n                            fill={getColor(fill)}\n                        />\n                    );\n                })}\n\n                {bars.map(bar => {\n                    const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };\n                    const { color, ...remainingBarProps } = barPropsWithDefault;\n                    const cellColor = color && getColor(color);\n                    return <RechartsBar key={bar.key} unit={dataUnit} {...remainingBarProps} fill={cellColor} />;\n                })}\n\n                {lines.map(line => {\n                    const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };\n                    const { strokeColor, ...remainingLineProps } = linePropsWithDefault;\n                    return (\n                        <RechartsLine\n                            {...(remainingLineProps as Omit<RechartsLineProps, 'ref'>)}\n                            key={line.key}\n                            stroke={getColor(strokeColor)}\n                        />\n                    );\n                })}\n\n                {referenceLines.map(renderReferenceLine)}\n\n                {brush && <Brush stroke={getColor('gray')} />}\n            </RechartsComposedChart>\n        </ResponsiveContainer>\n    );\n};\n\nexport default ComposedChart;\n"],"names":["ComposedChart","props","width","height","data","dataUnit","dataKey","lines","bars","areas","referenceLines","xAxisOptions","yAxisOptions","additionalAxes","gridOptions","containerOptions","showXAxis","showYAxis","showGrid","legend","brush","tooltip","remainingProps","tooltipProps","isObject","legendProps","getLegendDefaultProps","jsx","ResponsiveContainer","jsxs","RechartsComposedChart","CartesianGrid","mapGridOptions","RechartsXAxis","RechartsYAxis","renderAxis","ChartTooltip","RechartsLegend","area","areaPropsWithDefault","getAreaDefaultProps","strokeColor","fill","remainingAreaProps","createElement","RechartsArea","getColor","bar","barPropsWithDefault","getBarDefaultProps","color","remainingBarProps","cellColor","RechartsBar","line","linePropsWithDefault","getLineDefaultProps","remainingLineProps","RechartsLine","renderReferenceLine","Brush"],"mappings":";;;;;;;;;;;;AAwDA,MAAMA,KAAgB,CAAmBC,MAAiC;AACtE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAO,CAAA;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ,CAAA;AAAA,IACR,MAAAC,IAAO,CAAA;AAAA,IACP,OAAAC,IAAQ,CAAA;AAAA,IACR,gBAAAC,IAAiB,CAAA;AAAA,IACjB,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,QAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,GAAGC;AAAA,EAAA,IACHrB,GAEEsB,IAAeC,EAASH,CAAO,IAAIA,EAAQ,QAAQ,CAAA,GACnDI,IAAcD,EAASL,CAAM,IAAI,EAAE,GAAGO,EAAA,GAAyB,GAAGP,EAAO,MAAA,IAAU,CAAA;AAEzF,SACI,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,UAAU;AAAA,MACV,kBAAkB,EAAE,OAAO,KAAK,QAAQ,IAAA;AAAA,MACvC,GAAGb;AAAA,MAEJ,UAAA,gBAAAc;AAAA,QAACC;AAAAA,QAAA;AAAA,UACG,OAAA5B;AAAA,UACA,QAAAC;AAAA,UACA,MAAAC;AAAA,UACA,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,MAAM,IAAI,QAAQ,GAAA;AAAA,UAC/C,GAAGkB;AAAA,UAEH,UAAA;AAAA,YAAAJ,uBAAaa,GAAA,EAAc,iBAAgB,OAAO,GAAGC,EAAelB,CAAW,GAAG;AAAA,8BAElFmB,GAAA,EAAc,MAAM,CAACjB,GAAW,SAAAV,GAAmB,GAAGK,GAAc;AAAA,YACrE,gBAAAgB,EAACO,KAAc,MAAM,CAACjB,GAAW,MAAMZ,GAAW,GAAGO,GAAc;AAAA,YAElEC,EAAe,IAAIsB,CAAU;AAAA,YAE7Bd,KAAW,gBAAAM,EAACS,GAAA,EAAc,GAAGb,EAAA,CAAc;AAAA,YAE3CJ,KAAU,gBAAAQ,EAACU,GAAA,EAAgB,GAAGZ,EAAA,CAAa;AAAA,YAE3ChB,EAAM,IAAI,CAAA6B,MAAQ;AACf,oBAAMC,IAAuB,EAAE,GAAGC,KAAuB,GAAGF,EAAK,MAAA,GAC3D,EAAE,aAAAG,GAAa,MAAAC,GAAM,GAAGC,MAAuBJ;AACrD,qBACI,gBAAAK;AAAA,gBAACC;AAAAA,gBAAA;AAAA,kBACI,GAAIF;AAAA,kBACL,KAAKL,EAAK;AAAA,kBACV,QAAQQ,EAASL,CAAW;AAAA,kBAC5B,MAAMK,EAASJ,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAG/B,CAAC;AAAA,YAEAlC,EAAK,IAAI,CAAAuC,MAAO;AACb,oBAAMC,IAAsB,EAAE,GAAGC,KAAsB,GAAGF,EAAI,MAAA,GACxD,EAAE,OAAAG,GAAO,GAAGC,EAAA,IAAsBH,GAClCI,IAAYF,KAASJ,EAASI,CAAK;AACzC,qBAAO,gBAAAvB,EAAC0B,KAA0B,MAAMhD,GAAW,GAAG8C,GAAmB,MAAMC,KAAtDL,EAAI,GAA6D;AAAA,YAC9F,CAAC;AAAA,YAEAxC,EAAM,IAAI,CAAA+C,MAAQ;AACf,oBAAMC,IAAuB,EAAE,GAAGC,KAAuB,GAAGF,EAAK,MAAA,GAC3D,EAAE,aAAAb,GAAa,GAAGgB,EAAA,IAAuBF;AAC/C,qBACI,gBAAAX;AAAA,gBAACc;AAAAA,gBAAA;AAAA,kBACI,GAAID;AAAA,kBACL,KAAKH,EAAK;AAAA,kBACV,QAAQR,EAASL,CAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,YAGxC,CAAC;AAAA,YAEA/B,EAAe,IAAIiD,CAAmB;AAAA,YAEtCvC,KAAS,gBAAAO,EAACiC,GAAA,EAAM,QAAQd,EAAS,MAAM,EAAA,CAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA;AAGZ;"}

package/components/checkbox/Checkbox.js

@@ -3,20 +3,20 @@ import { useRef as H, useEffect as K } from "react";
 import { noop as k } from "es-toolkit/function";
 import p from "../../utils/classNames.js";
 import { CheckboxIcon as P } from "./CheckboxIcon.js";
-const S = 16, x = "vertical", V = "horizontal", I = (i) => {
+const S = 16, x = "vertical", V = "horizontal", I = (l) => {
   const {
     checked: L,
     children: o,
-    className: l,
+    className: d,
     custom: m = !1,
     defaultChecked: g,
-    disabled: d = !1,
+    disabled: c = !1,
     error: N = !1,
-    icon: c = "",
+    icon: s = "",
     iconLabelPosition: E = x,
     iconSize: _ = S,
-    id: f = i.name,
-    indeterminate: s = !1,
+    id: f = l.name,
+    indeterminate: a = !1,
     inline: A = !1,
     inputRef: O,
     label: R,
@@ -28,11 +28,11 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
     size: C,
     tabIndex: B = 0,
     ...w
-  } = i, n = H(null);
+  } = l, n = H(null);
   K(() => {
     const e = n.current?.firstChild;
-    e && (e.indeterminate = s);
-  }, [s, n.current]);
+    e && (e.indeterminate = a);
+  }, [a, n.current]);
   const z = (e) => {
     switch (e.key) {
       case " ":
@@ -43,21 +43,22 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
         break;
     }
   }, b = (e) => {
-    if (e.preventDefault(), d)
+    if (e.preventDefault(), c)
       return;
     const t = n.current?.firstChild;
     t.indeterminate && (t.indeterminate = !1), t.checked = !t.checked, u(e), h(e);
-  }, a = R || o, Z = p(
+  }, i = R || o, Z = p(
     "checkbox",
     A && "checkbox-inline",
     C === "large" && "checkbox-large",
     y && "checkbox-right",
-    l
+    c && "disabled",
+    d
   ), j = p(
     N && "error",
     C === "large" && "large",
-    s && "indeterminate",
-    l
+    a && "indeterminate",
+    d
   );
   return /* @__PURE__ */ F(
     "label",
@@ -78,15 +79,15 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
             checked: L,
             required: T,
             defaultChecked: g,
-            disabled: d,
+            disabled: c,
             className: j,
             onClick: u,
             onChange: h,
             ref: O
           }
         ),
-        !!c && /* @__PURE__ */ r(P, { icon: c, iconSize: _, iconLabelPosition: E, text: a }),
-        !c && !m && /* @__PURE__ */ r("span", { className: "checkbox-text", children: a && /* @__PURE__ */ r("span", { children: a }) }),
+        !!s && /* @__PURE__ */ r(P, { icon: s, iconSize: _, iconLabelPosition: E, text: i }),
+        !s && !m && /* @__PURE__ */ r("span", { className: "checkbox-text", children: i && /* @__PURE__ */ r("span", { children: i }) }),
         m && o && o
       ]
     }

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 { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\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;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\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        disabled && 'disabled',\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,IACTf,KAAY;AAAA,IACZH;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

@@ -148,6 +148,25 @@ export type ClearableInputProps = {
      * Note, this function may not be an empty function, otherwise the mask selection won't work
      */
     maskDispatch?: (appended: string, dynamicMasked: any) => any;
+    /**
+     * Pattern used by IMask date masks.
+     *
+     * @example
+     * 'Y-m-d'
+     */
+    pattern?: string;
+    /**
+     * Formats a typed date value to the masked string representation.
+     */
+    format?: (value: Date | null, masked: unknown) => string;
+    /**
+     * Parses the masked string representation back to a typed date value.
+     */
+    parse?: (value: string, masked: unknown) => Date | null;
+    /**
+     * Enables IMask autofix behavior for date and number masks.
+     */
+    autofix?: boolean | 'pad';
     /**
      * Controls when the mask pattern is visible.
      *
@@ -182,6 +201,17 @@ export type ClearableInputProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Makes the input read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Controls whether the clear button is rendered.
+     * This might be useful to reuse this component for other use-cases.
+     *
+     * @default true
+     */
+    showClearButton?: boolean;
     /**
      * Additional classes to be set on the input element.
      */

package/components/clearableInput/ClearableInput.js

@@ -1,58 +1,60 @@
-import { jsxs as ue, jsx as i } from "react/jsx-runtime";
-import { forwardRef as ce, useState as d, useRef as pe } from "react";
-import { omit as me, isEmpty as fe } from "es-toolkit/compat";
-import { isNil as de, isFunction as he } from "es-toolkit/predicate";
+import { jsxs as pe, jsx as u } from "react/jsx-runtime";
+import { forwardRef as me, useState as d, useRef as fe } from "react";
+import { omit as de, isEmpty as he } from "es-toolkit/compat";
+import { isNil as Ce, isFunction as ge } from "es-toolkit/predicate";
 import { noop as t } from "es-toolkit/function";
-import { IMaskInput as ge } from "react-imask";
+import { IMaskInput as ve } from "react-imask";
 import h from "../../utils/classNames.js";
-import ve from "../../hooks/usePrevious.js";
-import Ce from "../../hooks/useMergeRefs.js";
-const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te = ce((u, g) => {
+import ke from "../../hooks/usePrevious.js";
+import ye from "../../hooks/useMergeRefs.js";
+const R = "text", Ie = ["text", "password", "email"], T = (i) => !he(`${i}`), De = me((i, C) => {
   const {
-    type: B = R,
-    defaultValue: D,
+    type: D = R,
+    defaultValue: M,
     value: s,
-    maxLength: M,
-    tabIndex: S = 0,
+    showClearButton: g = !0,
+    maxLength: S,
+    tabIndex: O = 0,
     hasError: L = !1,
     inputRef: v,
-    autoComplete: O,
-    onChange: n = t,
-    onBlur: _ = t,
-    onFocus: j = t,
-    onClear: C = t,
-    onKeyPress: A = t,
-    onClick: K = t,
-    mask: k,
-    maskPlaceholder: U = "_",
-    maskVisibility: Y = "always",
-    maskOverwrite: z = !0,
-    maskDefinitions: $,
-    maskDispatch: y,
-    inputClassName: q = "",
+    autoComplete: _,
+    onChange: a = t,
+    onBlur: j = t,
+    onFocus: A = t,
+    onClear: k = t,
+    onKeyPress: K = t,
+    onClick: U = t,
+    mask: y,
+    maskPlaceholder: Y = "_",
+    maskVisibility: z = "always",
+    maskOverwrite: $ = !0,
+    maskDefinitions: q,
+    maskDispatch: I,
+    inputClassName: G = "",
     disabled: c = !1,
-    className: I = "",
+    readOnly: H = !1,
+    className: P = "",
     children: p,
-    ...G
-  } = u, P = s || D || "", [b, H] = d(P), [w, J] = d(T(P)), [N, V] = d(!1), x = !de(s), o = pe(null), Q = Ce(o, v, g), r = !!k, W = () => {
-    switch (Y) {
+    ...J
+  } = i, w = s || M || "", [b, Q] = d(w), [N, W] = d(T(w)), [V, x] = d(!1), B = !Ce(s), o = fe(null), X = ye(o, v, C), r = !!y, Z = () => {
+    switch (z) {
       case "always":
         return !0;
       case "onFocus":
-        return N;
+        return V;
       case "never":
         return !1;
       default:
-        return N;
+        return V;
     }
   }, l = (e = "") => {
-    b !== e && (H(e), J(T(e)));
+    b !== e && (Q(e), W(T(e)));
   };
-  ve(s) !== s && l(s);
-  const X = (e) => {
-    const a = e.target.value;
-    x || l(a), n(a, e);
-  }, Z = (e, a, Ie) => {
+  ke(s) !== s && l(s);
+  const ee = (e) => {
+    const n = e.target.value;
+    B || l(n), a(n, e);
+  }, te = (e, n, we) => {
     if (!o.current)
       return;
     const f = {
@@ -73,66 +75,67 @@ const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te
       type: "change",
       timeStamp: Date.now()
     };
-    f.target.unmaskedValue = a.unmaskedValue, x || l(e), n(e, f);
-  }, ee = (e) => {
-    V(!0), j(e);
-  }, te = (e) => {
-    V(!1), _(e);
+    f.target.unmaskedValue = n.unmaskedValue, B || l(e), a(e, f);
   }, se = (e) => {
-    A(e);
+    x(!0), A(e);
+  }, ae = (e) => {
+    x(!1), j(e);
   }, ne = (e) => {
-    l(""), n("", e), C && C(e);
-  }, ae = h(
+    K(e);
+  }, oe = (e) => {
+    l(""), a("", e), k && k(e);
+  }, re = h(
     "ClearableInput",
     "input-group",
     L && "has-error",
     c && "pointer-events-none",
-    I && I
-  ), oe = h(
+    P && P
+  ), le = h(
     "form-control",
-    q,
-    w && "withClearButton",
+    G,
+    N && g && "withClearButton",
     r && "withInputMask",
     c && "disabled"
-  ), re = h("clearButton", !w && "hide"), E = B?.toLowerCase(), le = ke.indexOf(E) !== -1 ? E : R, m = {
-    ...me(G, ["value", "defaultValue", "onClear"]),
-    className: oe,
-    autoComplete: O,
-    type: le,
+  ), ue = h("clearButton", (!N || !g) && "hide"), E = D?.toLowerCase(), ie = Ie.indexOf(E) !== -1 ? E : R, m = {
+    ...de(J, ["value", "defaultValue", "onClear"]),
+    className: le,
+    autoComplete: _,
+    type: ie,
     value: b,
-    onKeyPress: se,
-    onBlur: te,
-    onFocus: ee,
-    onChange: r ? void 0 : X,
+    onKeyPress: ne,
+    onBlur: ae,
+    onFocus: se,
+    onChange: r ? void 0 : ee,
     // In case of masked input, the onAccept callback is used
-    onClick: K,
+    onClick: U,
     disabled: c,
-    maxLength: r ? void 0 : M,
-    tabIndex: S
+    readOnly: H,
+    maxLength: r ? void 0 : S,
+    tabIndex: O
   }, F = {};
-  y && (F.dispatch = y);
-  const ie = r ? /* @__PURE__ */ i(
-    ge,
+  I && (F.dispatch = I);
+  const ce = r ? /* @__PURE__ */ u(
+    ve,
     {
       ...m,
-      inputRef: Q,
-      mask: k,
-      definitions: $,
+      inputRef: X,
+      mask: y,
+      definitions: q,
       ...F,
-      placeholderChar: U,
-      onAccept: Z,
-      lazy: !W(),
-      overwrite: z
+      placeholderChar: Y,
+      onAccept: te,
+      lazy: !Z(),
+      overwrite: $
     }
-  ) : /* @__PURE__ */ i("input", { ...m, ref: v || g });
-  return /* @__PURE__ */ ue("div", { className: ae, children: [
-    p && he(p) ? p(m) : ie,
-    /* @__PURE__ */ i("span", { className: re, onClick: ne, children: /* @__PURE__ */ i("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) })
+  ) : /* @__PURE__ */ u("input", { ...m, ref: v || C });
+  return /* @__PURE__ */ pe("div", { className: re, children: [
+    p && ge(p) ? p(m) : ce,
+    /* @__PURE__ */ u("span", { className: ue, onClick: oe, children: /* @__PURE__ */ u("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) })
   ] });
 });
 export {
   R as DEFAULT_TYPE,
-  ke as SUPPORTED_TYPES,
-  Te as default
+  Ie as SUPPORTED_TYPES,
+  De as default
 };
 //# sourceMappingURL=ClearableInput.js.map

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 { 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 classNames from '../../utils/classNames';\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","_event","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 { 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 classNames from '../../utils/classNames';\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     * Pattern used by IMask date masks.\n     *\n     * @example\n     * 'Y-m-d'\n     */\n    pattern?: string;\n\n    /**\n     * Formats a typed date value to the masked string representation.\n     */\n    format?: (value: Date | null, masked: unknown) => string;\n\n    /**\n     * Parses the masked string representation back to a typed date value.\n     */\n    parse?: (value: string, masked: unknown) => Date | null;\n\n    /**\n     * Enables IMask autofix behavior for date and number masks.\n     */\n    autofix?: boolean | 'pad';\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     * Makes the input read-only.\n     */\n    readOnly?: boolean;\n\n    /**\n     * Controls whether the clear button is rendered.\n     * This might be useful to reuse this component for other use-cases.\n     *\n     * @default true\n     */\n    showClearButton?: 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        showClearButton = true,\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        readOnly = 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 && showClearButton && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', (!showClear || !showClearButton) && '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        readOnly,\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","showClearButton","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","readOnly","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","_event","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/datepicker/DateRangePicker.js

@@ -121,7 +121,6 @@ class E extends W {
    * @param {object} nextProps - The next props.
    * @returns {undefined}
    */
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(e) {
     const { startValue: a, endValue: s, textDefault: i, customRangeOnly: n, locale: l, defaultStartValue: d, defaultEndValue: r } = e, { internalStartValue: u, internalEndValue: c } = this.state, m = R(a) && R(s) && R(u) && R(c), g = T(a) && T(s);
     m || g ? this.setState({
@@ -340,7 +339,6 @@ class E extends W {
       i
     ), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: this.toggleDropdownOpen, className: "btn btn-default pull-right" }, n)));
   }
-  // eslint-disable-next-line complexity
   render() {
     const {
       locale: e,