@rio-cloud/rio-uikit 2.5.0-beta.1 → 2.5.0

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     * 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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"}
+{"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     * Custom IMask blocks for pattern masks.\n     */\n    blocks?: Record<string, unknown>;\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/countedInput/CountedInput.d.ts

@@ -0,0 +1,91 @@
+import { default as React } from 'react';
+import { ClearableInputProps } from '../clearableInput/ClearableInput';
+export type CountedInputProps = Omit<ClearableInputProps, 'children' | 'max' | 'min' | 'onChange' | 'showClearButton'> & {
+    /**
+     * Defines the minimum amount of characters required for a valid value.
+     * If set, the counter counts up to this value because this is the threshold for success.
+     * If no `maxLength` is set, this value is also used as the maximum amount of characters that can be entered.
+     * Set at least one of `minLength` or `maxLength`.
+     *
+     * @default 0
+     */
+    minLength?: number;
+    /**
+     * Defines the maximum amount of characters that can be entered.
+     * If no `minLength` is set, the counter counts up to this value.
+     * Set at least one of `minLength` or `maxLength`.
+     */
+    maxLength?: number;
+    /**
+     * Controls whether the clear button is rendered.
+     *
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Controls whether success or warning feedback styling is rendered. If omitted, feedback is shown after user
+     * interaction or when the input has a value.
+     */
+    showValidationState?: boolean;
+    /**
+     * Controls whether an initially empty input is validated before user interaction.
+     *
+     * @default false
+     */
+    validateInitialEmpty?: boolean;
+    /**
+     * Defines the invalid feedback style used while the character criteria are not met.
+     *
+     * @default 'warning'
+     */
+    validationState?: 'warning' | 'error';
+    /**
+     * Callback function for when the value changes. Receives the new value and validity as arguments.
+     */
+    onChange?: (newValue: string, isValid: boolean, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
+};
+declare const CountedInput: React.ForwardRefExoticComponent<Omit<ClearableInputProps, "max" | "min" | "children" | "onChange" | "showClearButton"> & {
+    /**
+     * Defines the minimum amount of characters required for a valid value.
+     * If set, the counter counts up to this value because this is the threshold for success.
+     * If no `maxLength` is set, this value is also used as the maximum amount of characters that can be entered.
+     * Set at least one of `minLength` or `maxLength`.
+     *
+     * @default 0
+     */
+    minLength?: number;
+    /**
+     * Defines the maximum amount of characters that can be entered.
+     * If no `minLength` is set, the counter counts up to this value.
+     * Set at least one of `minLength` or `maxLength`.
+     */
+    maxLength?: number;
+    /**
+     * Controls whether the clear button is rendered.
+     *
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Controls whether success or warning feedback styling is rendered. If omitted, feedback is shown after user
+     * interaction or when the input has a value.
+     */
+    showValidationState?: boolean;
+    /**
+     * Controls whether an initially empty input is validated before user interaction.
+     *
+     * @default false
+     */
+    validateInitialEmpty?: boolean;
+    /**
+     * Defines the invalid feedback style used while the character criteria are not met.
+     *
+     * @default 'warning'
+     */
+    validationState?: "warning" | "error";
+    /**
+     * Callback function for when the value changes. Receives the new value and validity as arguments.
+     */
+    onChange?: (newValue: string, isValid: boolean, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
+} & React.RefAttributes<HTMLInputElement>>;
+export default CountedInput;

package/components/countedInput/CountedInput.js

@@ -0,0 +1,65 @@
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { forwardRef as K, useState as I } from "react";
+import { isNil as O } from "es-toolkit/predicate";
+import { noop as N } from "es-toolkit/function";
+import c from "../../utils/classNames.js";
+import Q from "../clearableInput/ClearableInput.js";
+const v = (l, i, u) => {
+  const t = l.length;
+  return t >= i && t <= u;
+}, tt = K((l, i) => {
+  const {
+    defaultValue: u,
+    value: t,
+    minLength: h = 0,
+    maxLength: V,
+    clearable: S = !1,
+    showValidationState: w,
+    validateInitialEmpty: L = !1,
+    validationState: m = "warning",
+    className: b = "",
+    onChange: B = N,
+    onBlur: T = N,
+    ...y
+  } = l, n = V ?? h ?? 0, s = h ?? 0, M = t || u || "", [j, k] = I(M), [$, p] = I(!1), g = !O(t), o = g ? t || "" : j, d = v(o, s, n), a = w ?? (L || o.length > 0 || $), E = m === "error" ? "has-error" : "has-warning", P = m === "error" ? "text-color-danger" : "text-color-warning", f = a && d, C = s > 0 ? s : n, R = `${Math.min(o.length, C)}/${C}`, q = (e, H) => {
+    const J = v(e, s, n);
+    p(!0), g || k(e), B(e, J, H);
+  }, z = (e) => {
+    p(!0), T(e);
+  }, A = c(
+    "form-group",
+    "CountedInput",
+    a && "has-feedback",
+    a && (d ? "has-success" : E),
+    b
+  ), D = c(
+    "input-group-addon",
+    "CountedInputCounter text-bold",
+    a && (d ? "text-color-success" : P)
+  ), F = c("CountedInputCounterValue text-italic", f && "is-hidden"), G = c(
+    "CountedInputSuccessIcon rioglyph rioglyph-ok text-color-success",
+    f && "is-visible"
+  );
+  return /* @__PURE__ */ r("div", { className: A, children: /* @__PURE__ */ x("div", { className: "input-group", children: [
+    /* @__PURE__ */ r(
+      Q,
+      {
+        ...y,
+        ref: i,
+        value: o,
+        maxLength: n,
+        showClearButton: S,
+        onChange: q,
+        onBlur: z
+      }
+    ),
+    /* @__PURE__ */ x("span", { className: D, children: [
+      /* @__PURE__ */ r("span", { className: F, children: R }),
+      /* @__PURE__ */ r("span", { className: G, "aria-hidden": !0 })
+    ] })
+  ] }) });
+});
+export {
+  tt as default
+};
+//# sourceMappingURL=CountedInput.js.map

package/components/countedInput/CountedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountedInput.js","sources":["../../../src/components/countedInput/CountedInput.tsx"],"sourcesContent":["import React, { forwardRef, useState, type ForwardedRef } from 'react';\nimport { isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type CountedInputProps = Omit<\n    ClearableInputProps,\n    'children' | 'max' | 'min' | 'onChange' | 'showClearButton'\n> & {\n    /**\n     * Defines the minimum amount of characters required for a valid value.\n     * If set, the counter counts up to this value because this is the threshold for success.\n     * If no `maxLength` is set, this value is also used as the maximum amount of characters that can be entered.\n     * Set at least one of `minLength` or `maxLength`.\n     *\n     * @default 0\n     */\n    minLength?: number;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     * If no `minLength` is set, the counter counts up to this value.\n     * Set at least one of `minLength` or `maxLength`.\n     */\n    maxLength?: number;\n\n    /**\n     * Controls whether the clear button is rendered.\n     *\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Controls whether success or warning feedback styling is rendered. If omitted, feedback is shown after user\n     * interaction or when the input has a value.\n     */\n    showValidationState?: boolean;\n\n    /**\n     * Controls whether an initially empty input is validated before user interaction.\n     *\n     * @default false\n     */\n    validateInitialEmpty?: boolean;\n\n    /**\n     * Defines the invalid feedback style used while the character criteria are not met.\n     *\n     * @default 'warning'\n     */\n    validationState?: 'warning' | 'error';\n\n    /**\n     * Callback function for when the value changes. Receives the new value and validity as arguments.\n     */\n    onChange?: (\n        newValue: string,\n        isValid: boolean,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n};\n\nconst getIsValid = (value: string, minLength: number, maxLength: number) => {\n    const length = value.length;\n    return length >= minLength && length <= maxLength;\n};\n\nconst CountedInput = forwardRef((props: CountedInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        defaultValue,\n        value,\n        minLength = 0,\n        maxLength,\n        clearable = false,\n        showValidationState,\n        validateInitialEmpty = false,\n        validationState = 'warning',\n        className = '',\n        onChange = noop,\n        onBlur = noop,\n        ...remainingProps\n    } = props;\n\n    const effectiveMaxLength = maxLength ?? minLength ?? 0;\n    const effectiveMinLength = minLength ?? 0;\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [isTouched, setTouched] = useState(false);\n\n    const isControlled = !isNil(value);\n    const currentValue = isControlled ? value || '' : inputValue;\n\n    const isValid = getIsValid(currentValue, effectiveMinLength, effectiveMaxLength);\n\n    const shouldShowValidationState =\n        showValidationState ?? (validateInitialEmpty || currentValue.length > 0 || isTouched);\n\n    const invalidClassName = validationState === 'error' ? 'has-error' : 'has-warning';\n    const invalidTextColor = validationState === 'error' ? 'text-color-danger' : 'text-color-warning';\n\n    const showSuccessIcon = shouldShowValidationState && isValid;\n    const counterTargetLength = effectiveMinLength > 0 ? effectiveMinLength : effectiveMaxLength;\n    const counter = `${Math.min(currentValue.length, counterTargetLength)}/${counterTargetLength}`;\n\n    const handleChange: ClearableInputProps['onChange'] = (newValue, event) => {\n        const nextIsValid = getIsValid(newValue, effectiveMinLength, effectiveMaxLength);\n\n        setTouched(true);\n\n        if (!isControlled) {\n            setInputValue(newValue);\n        }\n\n        onChange(newValue, nextIsValid, event);\n    };\n\n    const handleBlur: ClearableInputProps['onBlur'] = event => {\n        setTouched(true);\n        onBlur(event);\n    };\n\n    const classes = classNames(\n        'form-group',\n        'CountedInput',\n        shouldShowValidationState && 'has-feedback',\n        shouldShowValidationState && (isValid ? 'has-success' : invalidClassName),\n        className\n    );\n\n    const counterClassNames = classNames(\n        'input-group-addon',\n        'CountedInputCounter text-bold',\n        shouldShowValidationState && (isValid ? 'text-color-success' : invalidTextColor)\n    );\n\n    const counterValueClassNames = classNames('CountedInputCounterValue text-italic', showSuccessIcon && 'is-hidden');\n    const successIconClassNames = classNames(\n        'CountedInputSuccessIcon rioglyph rioglyph-ok text-color-success',\n        showSuccessIcon && 'is-visible'\n    );\n\n    return (\n        <div className={classes}>\n            <div className='input-group'>\n                <ClearableInput\n                    {...remainingProps}\n                    ref={ref}\n                    value={currentValue}\n                    maxLength={effectiveMaxLength}\n                    showClearButton={clearable}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                />\n                <span className={counterClassNames}>\n                    <span className={counterValueClassNames}>{counter}</span>\n                    <span className={successIconClassNames} aria-hidden />\n                </span>\n            </div>\n        </div>\n    );\n});\n\nexport default CountedInput;\n"],"names":["getIsValid","value","minLength","maxLength","length","CountedInput","forwardRef","props","ref","defaultValue","clearable","showValidationState","validateInitialEmpty","validationState","className","onChange","noop","onBlur","remainingProps","effectiveMaxLength","effectiveMinLength","initialValue","inputValue","setInputValue","useState","isTouched","setTouched","isControlled","isNil","currentValue","isValid","shouldShowValidationState","invalidClassName","invalidTextColor","showSuccessIcon","counterTargetLength","counter","handleChange","newValue","event","nextIsValid","handleBlur","classes","classNames","counterClassNames","counterValueClassNames","successIconClassNames","jsxs","jsx","ClearableInput"],"mappings":";;;;;;AAiEA,MAAMA,IAAa,CAACC,GAAeC,GAAmBC,MAAsB;AACxE,QAAMC,IAASH,EAAM;AACrB,SAAOG,KAAUF,KAAaE,KAAUD;AAC5C,GAEME,KAAeC,EAAW,CAACC,GAA0BC,MAAwC;AAC/F,QAAM;AAAA,IACF,cAAAC;AAAA,IACA,OAAAR;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,WAAAO,IAAY;AAAA,IACZ,qBAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,iBAAAC,IAAkB;AAAA,IAClB,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAWC;AAAA,IACX,QAAAC,IAASD;AAAA,IACT,GAAGE;AAAA,EAAA,IACHX,GAEEY,IAAqBhB,KAAaD,KAAa,GAC/CkB,IAAqBlB,KAAa,GAClCmB,IAAepB,KAASQ,KAAgB,IAExC,CAACa,GAAYC,CAAa,IAAIC,EAASH,CAAY,GACnD,CAACI,GAAWC,CAAU,IAAIF,EAAS,EAAK,GAExCG,IAAe,CAACC,EAAM3B,CAAK,GAC3B4B,IAAeF,IAAe1B,KAAS,KAAKqB,GAE5CQ,IAAU9B,EAAW6B,GAAcT,GAAoBD,CAAkB,GAEzEY,IACFpB,MAAwBC,KAAwBiB,EAAa,SAAS,KAAKJ,IAEzEO,IAAmBnB,MAAoB,UAAU,cAAc,eAC/DoB,IAAmBpB,MAAoB,UAAU,sBAAsB,sBAEvEqB,IAAkBH,KAA6BD,GAC/CK,IAAsBf,IAAqB,IAAIA,IAAqBD,GACpEiB,IAAU,GAAG,KAAK,IAAIP,EAAa,QAAQM,CAAmB,CAAC,IAAIA,CAAmB,IAEtFE,IAAgD,CAACC,GAAUC,MAAU;AACvE,UAAMC,IAAcxC,EAAWsC,GAAUlB,GAAoBD,CAAkB;AAE/E,IAAAO,EAAW,EAAI,GAEVC,KACDJ,EAAce,CAAQ,GAG1BvB,EAASuB,GAAUE,GAAaD,CAAK;AAAA,EACzC,GAEME,IAA4C,CAAAF,MAAS;AACvD,IAAAb,EAAW,EAAI,GACfT,EAAOsB,CAAK;AAAA,EAChB,GAEMG,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAZ,KAA6B;AAAA,IAC7BA,MAA8BD,IAAU,gBAAgBE;AAAA,IACxDlB;AAAA,EAAA,GAGE8B,IAAoBD;AAAA,IACtB;AAAA,IACA;AAAA,IACAZ,MAA8BD,IAAU,uBAAuBG;AAAA,EAAA,GAG7DY,IAAyBF,EAAW,wCAAwCT,KAAmB,WAAW,GAC1GY,IAAwBH;AAAA,IAC1B;AAAA,IACAT,KAAmB;AAAA,EAAA;AAGvB,2BACK,OAAA,EAAI,WAAWQ,GACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAG/B;AAAA,QACJ,KAAAV;AAAA,QACA,OAAOqB;AAAA,QACP,WAAWV;AAAA,QACX,iBAAiBT;AAAA,QACjB,UAAU2B;AAAA,QACV,QAAQI;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAM,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA;AAAA,MAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWH,GAAyB,UAAAT,GAAQ;AAAA,MAClD,gBAAAY,EAAC,QAAA,EAAK,WAAWF,GAAuB,eAAW,GAAA,CAAC;AAAA,IAAA,EAAA,CACxD;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER,CAAC;"}

package/components/datepicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Moment } from 'moment';
-import { default as DatetimeImport, DatetimepickerProps } from 'react-datetime';
+import { default as DatetimeImport, DatetimepickerProps } from '@rio-cloud/react-datetime';
 export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
     /**
      * An id used for the internal input element.

package/components/datepicker/DatePicker.js

@@ -1,6 +1,6 @@
 import { jsx as C } from "react/jsx-runtime";
 import { forwardRef as L, useState as N } from "react";
-import o from "react-datetime";
+import o from "@rio-cloud/react-datetime";
 import { noop as O } from "es-toolkit/function";
 import _ from "../../utils/classNames.js";
 const A = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {

package/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport type { Moment } from 'moment';\nimport DatetimeImport, { type DatetimepickerProps } from 'react-datetime';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\n// Fix: Handle ESM/CJS interop by unwrapping default if necessary\n// @ts-expect-error\nconst Datetime = DatetimeImport?.default ? DatetimeImport.default : DatetimeImport;\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, _ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"names":["Datetime","DatetimeImport","DEFAULT_LOCALE","DEFAULT_MIN_WIDTH","DatePicker","forwardRef","props","_ref","id","dropup","alignRight","locale","minWidth","onChange","noop","mandatory","dateValidation","clearableInput","closeOnSelect","inputProps","className","remainingProp","hasError","setHasError","useState","validateDate","dateToValidate","handleChange","date","isValid","classes","classNames","enhancedInputProps","jsx"],"mappings":";;;;;AAUA,MAAMA,IAAWC,GAAgB,UAAUA,EAAe,UAAUA,GAE9DC,IAAiB,SACjBC,IAAoB,GAoHpBC,IAAaC,EAAW,CAACC,GAAwBC,MAAS;AAC5D,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAST;AAAA,IACT,UAAAU,IAAWT;AAAA,IACX,UAAAU,IAAWC;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAe,CAACC,MAUXV,IAAiBA,EAAeU,CAAc,IAFhC,OAAOA,KAAmB,UAK7CC,IAAe,CAACC,MAA0B;AAC5C,UAAMC,IAAUd,IAAYU,EAAaG,CAAI,IAAI;AACjD,IAAAL,EAAY,CAACM,CAAO,GACpBhB,EAASe,GAAMC,CAAO;AAAA,EAC1B,GAEMC,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAT,KAAY;AAAA,IACZb,KAAU;AAAA,IACVC,KAAc;AAAA,IACdU,KAAaA;AAAA,EAAA,GAKXY,IAAqB,EAAE,IAAAxB,GAAI,GAAGW,EAAA;AAEpC,SACI,gBAAAc;AAAA,IAACjC;AAAA,IAAA;AAAA,MAGI,GAAGqB;AAAA,MACJ,QAAAV;AAAA,MACA,gBAAAM;AAAA,MACA,eAAAC;AAAA,MACA,UAAUS;AAAA,MACV,UAAAf;AAAA,MACA,YAAYoB;AAAA,MACZ,WAAWF;AAAA,IAAA;AAAA,EAAA;AAGvB,CAAC;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport type { Moment } from 'moment';\nimport DatetimeImport, { type DatetimepickerProps } from '@rio-cloud/react-datetime';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\n// Fix: Handle ESM/CJS interop by unwrapping default if necessary\n// @ts-expect-error\nconst Datetime = DatetimeImport?.default ? DatetimeImport.default : DatetimeImport;\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, _ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"names":["Datetime","DatetimeImport","DEFAULT_LOCALE","DEFAULT_MIN_WIDTH","DatePicker","forwardRef","props","_ref","id","dropup","alignRight","locale","minWidth","onChange","noop","mandatory","dateValidation","clearableInput","closeOnSelect","inputProps","className","remainingProp","hasError","setHasError","useState","validateDate","dateToValidate","handleChange","date","isValid","classes","classNames","enhancedInputProps","jsx"],"mappings":";;;;;AAUA,MAAMA,IAAWC,GAAgB,UAAUA,EAAe,UAAUA,GAE9DC,IAAiB,SACjBC,IAAoB,GAoHpBC,IAAaC,EAAW,CAACC,GAAwBC,MAAS;AAC5D,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAST;AAAA,IACT,UAAAU,IAAWT;AAAA,IACX,UAAAU,IAAWC;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAe,CAACC,MAUXV,IAAiBA,EAAeU,CAAc,IAFhC,OAAOA,KAAmB,UAK7CC,IAAe,CAACC,MAA0B;AAC5C,UAAMC,IAAUd,IAAYU,EAAaG,CAAI,IAAI;AACjD,IAAAL,EAAY,CAACM,CAAO,GACpBhB,EAASe,GAAMC,CAAO;AAAA,EAC1B,GAEMC,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAT,KAAY;AAAA,IACZb,KAAU;AAAA,IACVC,KAAc;AAAA,IACdU,KAAaA;AAAA,EAAA,GAKXY,IAAqB,EAAE,IAAAxB,GAAI,GAAGW,EAAA;AAEpC,SACI,gBAAAc;AAAA,IAACjC;AAAA,IAAA;AAAA,MAGI,GAAGqB;AAAA,MACJ,QAAAV;AAAA,MACA,gBAAAM;AAAA,MACA,eAAAC;AAAA,MACA,UAAUS;AAAA,MACV,UAAAf;AAAA,MACA,YAAYoB;AAAA,MACZ,WAAWF;AAAA,IAAA;AAAA,EAAA;AAGvB,CAAC;"}

package/components/datepicker/DayPicker.js

@@ -13,7 +13,8 @@ import { isSingleDayPickerProps as L, isMultipleDayPickerProps as Q, isRangeDayP
 import xe from "./useDayPickerInputState.js";
 import "date-fns";
 import "date-fns/locale";
-const Ae = (e) => Object.hasOwn(e, "value"), Ke = (e) => Object.hasOwn(e, "closeOnSelect"), w = (e, o) => typeof e == "function" ? e(o) : e ?? null, nt = (e) => {
+import "react-imask";
+const Ae = (e) => Object.hasOwn(e, "value"), Ke = (e) => Object.hasOwn(e, "closeOnSelect"), w = (e, o) => typeof e == "function" ? e(o) : e ?? null, rt = (e) => {
   const {
     id: o,
     name: l,
@@ -286,6 +287,6 @@ const Ae = (e) => Object.hasOwn(e, "value"), Ke = (e) => Object.hasOwn(e, "close
 };
 export {
   Fe as DayPickerCalendar,
-  nt as default
+  rt as default
 };
 //# sourceMappingURL=DayPicker.js.map

package/components/datepicker/DayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPicker.js","sources":["../../../src/components/datepicker/DayPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport useClickOutside from '../../hooks/useClickOutside';\nimport useKey from '../../hooks/useKey';\nimport usePopperDropdown from '../../hooks/usePopperDropdown';\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nimport DayPickerCalendar from './DayPickerCalendar';\nimport DayPickerDropdown from './DayPickerDropdown';\nimport DayPickerInput from './DayPickerInput';\nimport {\n    isMultipleDayPickerProps,\n    isRangeDayPickerProps,\n    isSingleDayPickerProps,\n    type DateRange,\n    type DayPickerProps,\n    type DayPickerSelection,\n    type Modifiers,\n} from './dayPickerTypes';\nimport useDayPickerInputState from './useDayPickerInputState';\nexport { supportedDayPickerLocales } from './dayPickerUtils';\n\nexport type {\n    DateRange,\n    DayPickerCalendarProps,\n    DayPickerProps,\n    DayPickerSlotRenderProps,\n    DayPickerTriggerRenderProps,\n    Modifiers,\n} from './dayPickerTypes';\nexport { default as DayPickerCalendar } from './DayPickerCalendar';\n\nconst hasValueProp = (props: DayPickerProps) => Object.hasOwn(props, 'value');\nconst hasCloseOnSelectProp = (props: DayPickerProps) => Object.hasOwn(props, 'closeOnSelect');\n\nconst renderSlot = (slot: unknown, slotProps: unknown) => {\n    if (typeof slot === 'function') {\n        return (slot as (props: unknown) => ReactNode)(slotProps);\n    }\n\n    return (slot as ReactNode) ?? null;\n};\n\nconst DayPicker = (props: DayPickerProps) => {\n    const {\n        id,\n        name,\n        mode = 'single',\n        locale = 'en-GB',\n        placeholder,\n        iconName = 'rioglyph-calendar',\n        dateFormat,\n        onBlur,\n        inputProps,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        inputClassName,\n        className,\n        dropdownClassName,\n        leftSidebarClassName,\n        rightSidebarClassName,\n        footerClassName,\n        usePortal = false,\n        alignRight,\n        isClearable = false,\n        closeOnOutsideClick = true,\n        selectionBehavior = 'immediate',\n    } = props;\n\n    const isControlled = hasValueProp(props);\n    const isSingleMode = isSingleDayPickerProps(props);\n    const closeOnSelect = hasCloseOnSelectProp(props)\n        ? props.closeOnSelect !== false\n        : selectionBehavior !== 'deferred';\n    const [internalValue, setInternalValue] = useState<DayPickerSelection>(props.defaultValue);\n    const committedValue = (isControlled ? props.value : internalValue) as DayPickerSelection;\n    const [draftValue, setDraftValue] = useState<DayPickerSelection>(committedValue);\n\n    const {\n        isOpen: isDropdownOpen,\n        open: openPopper,\n        close: closePopper,\n        update: updatePopperPosition,\n        referenceRef: popperRef,\n        popperElementRef: setPopperElement,\n        popperStyles,\n        popperAttributes,\n    } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const popperElementRef = useRef<HTMLElement | null>(null);\n\n    useEffect(() => {\n        setDraftValue(committedValue);\n    }, [committedValue]);\n\n    const assignPopperElement = (element: HTMLElement | null) => {\n        popperElementRef.current = element;\n        setPopperElement(element);\n    };\n\n    const notifyChange = (value: DayPickerSelection, modifiers: Modifiers) => {\n        if (isSingleMode) {\n            props.onChange?.(value as Date | undefined, modifiers);\n            return;\n        }\n\n        if (isMultipleDayPickerProps(props)) {\n            props.onChange?.(value as Date[] | undefined, modifiers);\n            return;\n        }\n\n        if (isRangeDayPickerProps(props)) {\n            props.onChange?.(value as DateRange | undefined, modifiers);\n        }\n    };\n\n    const commitValue = (value: DayPickerSelection, modifiers: Modifiers = {}) => {\n        if (!isControlled) {\n            setInternalValue(value);\n        }\n\n        setDraftValue(value);\n        notifyChange(value, modifiers);\n    };\n\n    const clearValue = () => {\n        commitValue(undefined, {});\n    };\n\n    const closeDropdown = () => {\n        closePopper();\n        setDraftValue(committedValue);\n    };\n\n    const applyDraftValue = () => {\n        commitValue(draftValue, {});\n        closePopper();\n    };\n\n    const outsideRef = useClickOutside<HTMLDivElement>(\n        event => {\n            if (!closeOnOutsideClick) {\n                return;\n            }\n\n            const target = event.target as Node | null;\n            if (!target) {\n                closeDropdown();\n                return;\n            }\n\n            const clickedWithinTrigger = popperRef.current?.contains(target);\n            const clickedWithinInput = inputRef.current?.contains(target);\n\n            if (clickedWithinTrigger || clickedWithinInput) {\n                return;\n            }\n\n            closeDropdown();\n        },\n        undefined,\n        isDropdownOpen\n    );\n\n    useKey('Escape', event => {\n        const target = event.target as Node | null;\n        if (!target || !isDropdownOpen) {\n            return;\n        }\n\n        const isInputTarget = inputRef.current && inputRef.current === target;\n        const isTriggerTarget = !!popperRef.current?.contains(target);\n\n        if (isInputTarget || isTriggerTarget) {\n            closeDropdown();\n        }\n    });\n\n    const {\n        displayValue,\n        handleInputBlur,\n        handleInputChange,\n        handleClearInput,\n        handleInputFocus,\n        handleInputKeyDown,\n        inputMaskProps,\n    } = useDayPickerInputState({\n        props,\n        locale,\n        dateFormat,\n        inputProps,\n        onBlur,\n        isDropdownOpen,\n        isSingleMode,\n        selectionBehavior,\n        closeOnOutsideClick,\n        committedValue,\n        draftValue,\n        setDraftValue,\n        commitValue,\n        clearValue,\n        openDropdown: openPopper,\n        closeDropdown,\n        applyDraftValue,\n        popperElementRef,\n    });\n\n    const handleInputClick = () => {\n        openPopper();\n        inputRef.current?.focus();\n    };\n\n    const toggleDropdown = () => {\n        if (isDropdownOpen) {\n            closeDropdown();\n            return;\n        }\n\n        openPopper();\n    };\n\n    const slotProps = createSlotProps({\n        props,\n        value: committedValue,\n        draftValue,\n        setDraftValue,\n        apply: applyDraftValue,\n        clear: handleClearInput,\n        close: closeDropdown,\n    });\n\n    const triggerContent = slotProps.trigger\n        ? renderSlot(slotProps.trigger, {\n              ...slotProps.renderProps,\n              id,\n              name,\n              displayValue,\n              isOpen: isDropdownOpen,\n              open: openPopper,\n              toggle: toggleDropdown,\n          })\n        : null;\n\n    const handleCalendarChange = (value: DayPickerSelection, modifiers: Modifiers) => {\n        if (modifiers.disabled || modifiers.hidden) {\n            return;\n        }\n\n        const shouldApplyImmediately = selectionBehavior === 'immediate';\n\n        if (shouldApplyImmediately) {\n            commitValue(value, modifiers);\n        } else {\n            setDraftValue(value);\n        }\n\n        const shouldCloseRange =\n            mode !== 'range' || (!!(value as DateRange | undefined)?.from && !!(value as DateRange | undefined)?.to);\n\n        if (closeOnSelect && shouldCloseRange) {\n            if (!shouldApplyImmediately) {\n                commitValue(value, modifiers);\n            }\n            closePopper();\n        }\n    };\n\n    const hasFeedback = !!(errorMessage || warningMessage);\n\n    const mergedInputProps = {\n        ...inputProps,\n        name: name || inputProps?.name,\n        autoComplete: inputProps?.autoComplete || 'off',\n        placeholder: placeholder || inputProps?.placeholder,\n    };\n\n    const leftSidebarContent = slotProps.leftSidebar ? renderSlot(slotProps.leftSidebar, slotProps.renderProps) : null;\n\n    const rightSidebarContent = slotProps.rightSidebar\n        ? renderSlot(slotProps.rightSidebar, slotProps.renderProps)\n        : null;\n\n    const footerContent = slotProps.footer ? renderSlot(slotProps.footer, slotProps.renderProps) : null;\n\n    const dropdownRoot = usePortal ? getOrCreatePortalRoot() : null;\n\n    const dropdownContent = (\n        <DayPickerDropdown\n            assignPopperElement={assignPopperElement}\n            popperStyles={popperStyles}\n            popperAttributes={popperAttributes}\n            enableStackedCalendars={(props.numberOfMonths ?? 1) > 1}\n            dropdownClassName={dropdownClassName}\n            outsideRef={outsideRef}\n            updatePopperPosition={updatePopperPosition}\n            leftSidebar={leftSidebarContent}\n            rightSidebar={rightSidebarContent}\n            footer={footerContent}\n            leftSidebarClassName={leftSidebarClassName}\n            rightSidebarClassName={rightSidebarClassName}\n            footerClassName={footerClassName}\n        >\n            <DayPickerCalendar\n                {...props}\n                size='sm'\n                value={draftValue as never}\n                onChange={handleCalendarChange as never}\n                className='margin-15'\n            />\n        </DayPickerDropdown>\n    );\n\n    return (\n        <>\n            <div\n                className={classNames(\n                    'form-group',\n                    hasFeedback && 'has-feedback',\n                    errorMessage && 'has-error',\n                    warningMessage && 'has-warning',\n                    className\n                )}\n            >\n                {triggerContent ? (\n                    <>\n                        <div ref={popperRef} className='display-inline-block'>\n                            {triggerContent}\n                        </div>\n                        {hasFeedback ? (\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        ) : null}\n                    </>\n                ) : (\n                    <DayPickerInput\n                        id={id}\n                        triggerRef={popperRef}\n                        inputRef={inputRef}\n                        displayValue={displayValue}\n                        iconName={iconName}\n                        isSingleMode={isSingleMode}\n                        isClearable={isClearable}\n                        inputMaskProps={inputMaskProps}\n                        mergedInputProps={mergedInputProps}\n                        inputClassName={inputClassName}\n                        errorMessage={errorMessage}\n                        warningMessage={warningMessage}\n                        messageWhiteSpace={messageWhiteSpace}\n                        onChange={handleInputChange}\n                        onAddonClick={handleInputClick}\n                        onClick={event => {\n                            inputProps?.onClick?.(event);\n                            handleInputClick();\n                        }}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onKeyDown={handleInputKeyDown}\n                        onClear={handleClearInput}\n                    />\n                )}\n            </div>\n            {isDropdownOpen && usePortal && dropdownRoot && ReactDOM.createPortal(dropdownContent, dropdownRoot)}\n            {isDropdownOpen && !usePortal && dropdownContent}\n        </>\n    );\n};\n\nconst createSlotProps = ({\n    props,\n    value,\n    draftValue,\n    setDraftValue,\n    apply,\n    clear,\n    close,\n}: {\n    props: DayPickerProps;\n    value: DayPickerSelection;\n    draftValue: DayPickerSelection;\n    setDraftValue: (value: DayPickerSelection) => void;\n    apply: () => void;\n    clear: () => void;\n    close: () => void;\n}) => {\n    if (isSingleDayPickerProps(props)) {\n        return {\n            trigger: props.trigger,\n            leftSidebar: props.leftSidebar,\n            rightSidebar: props.rightSidebar,\n            footer: props.footer,\n            renderProps: {\n                value: value as Date | undefined,\n                draftValue: draftValue as Date | undefined,\n                setDraftValue: setDraftValue as (value: Date | undefined) => void,\n                apply,\n                clear,\n                close,\n                mode: props.mode || 'single',\n                locale: props.locale || 'en-GB',\n            },\n        };\n    }\n\n    if (isMultipleDayPickerProps(props)) {\n        return {\n            trigger: props.trigger,\n            leftSidebar: props.leftSidebar,\n            rightSidebar: props.rightSidebar,\n            footer: props.footer,\n            renderProps: {\n                value: value as Date[] | undefined,\n                draftValue: draftValue as Date[] | undefined,\n                setDraftValue: setDraftValue as (value: Date[] | undefined) => void,\n                apply,\n                clear,\n                close,\n                mode: props.mode,\n                locale: props.locale || 'en-GB',\n            },\n        };\n    }\n\n    return {\n        trigger: props.trigger,\n        leftSidebar: props.leftSidebar,\n        rightSidebar: props.rightSidebar,\n        footer: props.footer,\n        renderProps: {\n            value: value as DateRange | undefined,\n            draftValue: draftValue as DateRange | undefined,\n            setDraftValue: setDraftValue as (value: DateRange | undefined) => void,\n            apply,\n            clear,\n            close,\n            mode: props.mode,\n            locale: props.locale || 'en-GB',\n        },\n    };\n};\n\nexport default DayPicker;\n"],"names":["hasValueProp","props","hasCloseOnSelectProp","renderSlot","slot","slotProps","DayPicker","id","name","mode","locale","placeholder","iconName","dateFormat","onBlur","inputProps","errorMessage","warningMessage","messageWhiteSpace","inputClassName","className","dropdownClassName","leftSidebarClassName","rightSidebarClassName","footerClassName","usePortal","alignRight","isClearable","closeOnOutsideClick","selectionBehavior","isControlled","isSingleMode","isSingleDayPickerProps","closeOnSelect","internalValue","setInternalValue","useState","committedValue","draftValue","setDraftValue","isDropdownOpen","openPopper","closePopper","updatePopperPosition","popperRef","setPopperElement","popperStyles","popperAttributes","usePopperDropdown","inputRef","useRef","popperElementRef","useEffect","assignPopperElement","element","notifyChange","value","modifiers","isMultipleDayPickerProps","isRangeDayPickerProps","commitValue","clearValue","closeDropdown","applyDraftValue","outsideRef","useClickOutside","event","target","clickedWithinTrigger","clickedWithinInput","useKey","isInputTarget","isTriggerTarget","displayValue","handleInputBlur","handleInputChange","handleClearInput","handleInputFocus","handleInputKeyDown","inputMaskProps","useDayPickerInputState","handleInputClick","toggleDropdown","createSlotProps","triggerContent","handleCalendarChange","shouldApplyImmediately","shouldCloseRange","hasFeedback","mergedInputProps","leftSidebarContent","rightSidebarContent","footerContent","dropdownRoot","getOrCreatePortalRoot","dropdownContent","jsx","DayPickerDropdown","DayPickerCalendar","jsxs","Fragment","classNames","DayPickerInput","ReactDOM","apply","clear","close"],"mappings":"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"}
+{"version":3,"file":"DayPicker.js","sources":["../../../src/components/datepicker/DayPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport useClickOutside from '../../hooks/useClickOutside';\nimport useKey from '../../hooks/useKey';\nimport usePopperDropdown from '../../hooks/usePopperDropdown';\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nimport DayPickerCalendar from './DayPickerCalendar';\nimport DayPickerDropdown from './DayPickerDropdown';\nimport DayPickerInput from './DayPickerInput';\nimport {\n    isMultipleDayPickerProps,\n    isRangeDayPickerProps,\n    isSingleDayPickerProps,\n    type DateRange,\n    type DayPickerProps,\n    type DayPickerSelection,\n    type Modifiers,\n} from './dayPickerTypes';\nimport useDayPickerInputState from './useDayPickerInputState';\nexport { supportedDayPickerLocales } from './dayPickerUtils';\n\nexport type {\n    DateRange,\n    DayPickerCalendarProps,\n    DayPickerProps,\n    DayPickerSlotRenderProps,\n    DayPickerTriggerRenderProps,\n    Modifiers,\n} from './dayPickerTypes';\nexport { default as DayPickerCalendar } from './DayPickerCalendar';\n\nconst hasValueProp = (props: DayPickerProps) => Object.hasOwn(props, 'value');\nconst hasCloseOnSelectProp = (props: DayPickerProps) => Object.hasOwn(props, 'closeOnSelect');\n\nconst renderSlot = (slot: unknown, slotProps: unknown) => {\n    if (typeof slot === 'function') {\n        return (slot as (props: unknown) => ReactNode)(slotProps);\n    }\n\n    return (slot as ReactNode) ?? null;\n};\n\nconst DayPicker = (props: DayPickerProps) => {\n    const {\n        id,\n        name,\n        mode = 'single',\n        locale = 'en-GB',\n        placeholder,\n        iconName = 'rioglyph-calendar',\n        dateFormat,\n        onBlur,\n        inputProps,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        inputClassName,\n        className,\n        dropdownClassName,\n        leftSidebarClassName,\n        rightSidebarClassName,\n        footerClassName,\n        usePortal = false,\n        alignRight,\n        isClearable = false,\n        closeOnOutsideClick = true,\n        selectionBehavior = 'immediate',\n    } = props;\n\n    const isControlled = hasValueProp(props);\n    const isSingleMode = isSingleDayPickerProps(props);\n    const closeOnSelect = hasCloseOnSelectProp(props)\n        ? props.closeOnSelect !== false\n        : selectionBehavior !== 'deferred';\n    const [internalValue, setInternalValue] = useState<DayPickerSelection>(props.defaultValue);\n    const committedValue = (isControlled ? props.value : internalValue) as DayPickerSelection;\n    const [draftValue, setDraftValue] = useState<DayPickerSelection>(committedValue);\n\n    const {\n        isOpen: isDropdownOpen,\n        open: openPopper,\n        close: closePopper,\n        update: updatePopperPosition,\n        referenceRef: popperRef,\n        popperElementRef: setPopperElement,\n        popperStyles,\n        popperAttributes,\n    } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const popperElementRef = useRef<HTMLElement | null>(null);\n\n    useEffect(() => {\n        setDraftValue(committedValue);\n    }, [committedValue]);\n\n    const assignPopperElement = (element: HTMLElement | null) => {\n        popperElementRef.current = element;\n        setPopperElement(element);\n    };\n\n    const notifyChange = (value: DayPickerSelection, modifiers: Modifiers) => {\n        if (isSingleMode) {\n            props.onChange?.(value as Date | undefined, modifiers);\n            return;\n        }\n\n        if (isMultipleDayPickerProps(props)) {\n            props.onChange?.(value as Date[] | undefined, modifiers);\n            return;\n        }\n\n        if (isRangeDayPickerProps(props)) {\n            props.onChange?.(value as DateRange | undefined, modifiers);\n        }\n    };\n\n    const commitValue = (value: DayPickerSelection, modifiers: Modifiers = {}) => {\n        if (!isControlled) {\n            setInternalValue(value);\n        }\n\n        setDraftValue(value);\n        notifyChange(value, modifiers);\n    };\n\n    const clearValue = () => {\n        commitValue(undefined, {});\n    };\n\n    const closeDropdown = () => {\n        closePopper();\n        setDraftValue(committedValue);\n    };\n\n    const applyDraftValue = () => {\n        commitValue(draftValue, {});\n        closePopper();\n    };\n\n    const outsideRef = useClickOutside<HTMLDivElement>(\n        event => {\n            if (!closeOnOutsideClick) {\n                return;\n            }\n\n            const target = event.target as Node | null;\n            if (!target) {\n                closeDropdown();\n                return;\n            }\n\n            const clickedWithinTrigger = popperRef.current?.contains(target);\n            const clickedWithinInput = inputRef.current?.contains(target);\n\n            if (clickedWithinTrigger || clickedWithinInput) {\n                return;\n            }\n\n            closeDropdown();\n        },\n        undefined,\n        isDropdownOpen\n    );\n\n    useKey('Escape', event => {\n        const target = event.target as Node | null;\n        if (!target || !isDropdownOpen) {\n            return;\n        }\n\n        const isInputTarget = inputRef.current && inputRef.current === target;\n        const isTriggerTarget = !!popperRef.current?.contains(target);\n\n        if (isInputTarget || isTriggerTarget) {\n            closeDropdown();\n        }\n    });\n\n    const {\n        displayValue,\n        handleInputBlur,\n        handleInputChange,\n        handleClearInput,\n        handleInputFocus,\n        handleInputKeyDown,\n        inputMaskProps,\n    } = useDayPickerInputState({\n        props,\n        locale,\n        dateFormat,\n        inputProps,\n        onBlur,\n        isDropdownOpen,\n        isSingleMode,\n        selectionBehavior,\n        closeOnOutsideClick,\n        committedValue,\n        draftValue,\n        setDraftValue,\n        commitValue,\n        clearValue,\n        openDropdown: openPopper,\n        closeDropdown,\n        applyDraftValue,\n        popperElementRef,\n    });\n\n    const handleInputClick = () => {\n        openPopper();\n        inputRef.current?.focus();\n    };\n\n    const toggleDropdown = () => {\n        if (isDropdownOpen) {\n            closeDropdown();\n            return;\n        }\n\n        openPopper();\n    };\n\n    const slotProps = createSlotProps({\n        props,\n        value: committedValue,\n        draftValue,\n        setDraftValue,\n        apply: applyDraftValue,\n        clear: handleClearInput,\n        close: closeDropdown,\n    });\n\n    const triggerContent = slotProps.trigger\n        ? renderSlot(slotProps.trigger, {\n              ...slotProps.renderProps,\n              id,\n              name,\n              displayValue,\n              isOpen: isDropdownOpen,\n              open: openPopper,\n              toggle: toggleDropdown,\n          })\n        : null;\n\n    const handleCalendarChange = (value: DayPickerSelection, modifiers: Modifiers) => {\n        if (modifiers.disabled || modifiers.hidden) {\n            return;\n        }\n\n        const shouldApplyImmediately = selectionBehavior === 'immediate';\n\n        if (shouldApplyImmediately) {\n            commitValue(value, modifiers);\n        } else {\n            setDraftValue(value);\n        }\n\n        const shouldCloseRange =\n            mode !== 'range' || (!!(value as DateRange | undefined)?.from && !!(value as DateRange | undefined)?.to);\n\n        if (closeOnSelect && shouldCloseRange) {\n            if (!shouldApplyImmediately) {\n                commitValue(value, modifiers);\n            }\n            closePopper();\n        }\n    };\n\n    const hasFeedback = !!(errorMessage || warningMessage);\n\n    const mergedInputProps = {\n        ...inputProps,\n        name: name || inputProps?.name,\n        autoComplete: inputProps?.autoComplete || 'off',\n        placeholder: placeholder || inputProps?.placeholder,\n    };\n\n    const leftSidebarContent = slotProps.leftSidebar ? renderSlot(slotProps.leftSidebar, slotProps.renderProps) : null;\n\n    const rightSidebarContent = slotProps.rightSidebar\n        ? renderSlot(slotProps.rightSidebar, slotProps.renderProps)\n        : null;\n\n    const footerContent = slotProps.footer ? renderSlot(slotProps.footer, slotProps.renderProps) : null;\n\n    const dropdownRoot = usePortal ? getOrCreatePortalRoot() : null;\n\n    const dropdownContent = (\n        <DayPickerDropdown\n            assignPopperElement={assignPopperElement}\n            popperStyles={popperStyles}\n            popperAttributes={popperAttributes}\n            enableStackedCalendars={(props.numberOfMonths ?? 1) > 1}\n            dropdownClassName={dropdownClassName}\n            outsideRef={outsideRef}\n            updatePopperPosition={updatePopperPosition}\n            leftSidebar={leftSidebarContent}\n            rightSidebar={rightSidebarContent}\n            footer={footerContent}\n            leftSidebarClassName={leftSidebarClassName}\n            rightSidebarClassName={rightSidebarClassName}\n            footerClassName={footerClassName}\n        >\n            <DayPickerCalendar\n                {...props}\n                size='sm'\n                value={draftValue as never}\n                onChange={handleCalendarChange as never}\n                className='margin-15'\n            />\n        </DayPickerDropdown>\n    );\n\n    return (\n        <>\n            <div\n                className={classNames(\n                    'form-group',\n                    hasFeedback && 'has-feedback',\n                    errorMessage && 'has-error',\n                    warningMessage && 'has-warning',\n                    className\n                )}\n            >\n                {triggerContent ? (\n                    <>\n                        <div ref={popperRef} className='display-inline-block'>\n                            {triggerContent}\n                        </div>\n                        {hasFeedback ? (\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        ) : null}\n                    </>\n                ) : (\n                    <DayPickerInput\n                        id={id}\n                        triggerRef={popperRef}\n                        inputRef={inputRef}\n                        displayValue={displayValue}\n                        iconName={iconName}\n                        isSingleMode={isSingleMode}\n                        isClearable={isClearable}\n                        inputMaskProps={inputMaskProps}\n                        mergedInputProps={mergedInputProps}\n                        inputClassName={inputClassName}\n                        errorMessage={errorMessage}\n                        warningMessage={warningMessage}\n                        messageWhiteSpace={messageWhiteSpace}\n                        onChange={handleInputChange}\n                        onAddonClick={handleInputClick}\n                        onClick={event => {\n                            inputProps?.onClick?.(event);\n                            handleInputClick();\n                        }}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onKeyDown={handleInputKeyDown}\n                        onClear={handleClearInput}\n                    />\n                )}\n            </div>\n            {isDropdownOpen && usePortal && dropdownRoot && ReactDOM.createPortal(dropdownContent, dropdownRoot)}\n            {isDropdownOpen && !usePortal && dropdownContent}\n        </>\n    );\n};\n\nconst createSlotProps = ({\n    props,\n    value,\n    draftValue,\n    setDraftValue,\n    apply,\n    clear,\n    close,\n}: {\n    props: DayPickerProps;\n    value: DayPickerSelection;\n    draftValue: DayPickerSelection;\n    setDraftValue: (value: DayPickerSelection) => void;\n    apply: () => void;\n    clear: () => void;\n    close: () => void;\n}) => {\n    if (isSingleDayPickerProps(props)) {\n        return {\n            trigger: props.trigger,\n            leftSidebar: props.leftSidebar,\n            rightSidebar: props.rightSidebar,\n            footer: props.footer,\n            renderProps: {\n                value: value as Date | undefined,\n                draftValue: draftValue as Date | undefined,\n                setDraftValue: setDraftValue as (value: Date | undefined) => void,\n                apply,\n                clear,\n                close,\n                mode: props.mode || 'single',\n                locale: props.locale || 'en-GB',\n            },\n        };\n    }\n\n    if (isMultipleDayPickerProps(props)) {\n        return {\n            trigger: props.trigger,\n            leftSidebar: props.leftSidebar,\n            rightSidebar: props.rightSidebar,\n            footer: props.footer,\n            renderProps: {\n                value: value as Date[] | undefined,\n                draftValue: draftValue as Date[] | undefined,\n                setDraftValue: setDraftValue as (value: Date[] | undefined) => void,\n                apply,\n                clear,\n                close,\n                mode: props.mode,\n                locale: props.locale || 'en-GB',\n            },\n        };\n    }\n\n    return {\n        trigger: props.trigger,\n        leftSidebar: props.leftSidebar,\n        rightSidebar: props.rightSidebar,\n        footer: props.footer,\n        renderProps: {\n            value: value as DateRange | undefined,\n            draftValue: draftValue as DateRange | undefined,\n            setDraftValue: setDraftValue as (value: DateRange | undefined) => void,\n            apply,\n            clear,\n            close,\n            mode: props.mode,\n            locale: props.locale || 'en-GB',\n        },\n    };\n};\n\nexport default DayPicker;\n"],"names":["hasValueProp","props","hasCloseOnSelectProp","renderSlot","slot","slotProps","DayPicker","id","name","mode","locale","placeholder","iconName","dateFormat","onBlur","inputProps","errorMessage","warningMessage","messageWhiteSpace","inputClassName","className","dropdownClassName","leftSidebarClassName","rightSidebarClassName","footerClassName","usePortal","alignRight","isClearable","closeOnOutsideClick","selectionBehavior","isControlled","isSingleMode","isSingleDayPickerProps","closeOnSelect","internalValue","setInternalValue","useState","committedValue","draftValue","setDraftValue","isDropdownOpen","openPopper","closePopper","updatePopperPosition","popperRef","setPopperElement","popperStyles","popperAttributes","usePopperDropdown","inputRef","useRef","popperElementRef","useEffect","assignPopperElement","element","notifyChange","value","modifiers","isMultipleDayPickerProps","isRangeDayPickerProps","commitValue","clearValue","closeDropdown","applyDraftValue","outsideRef","useClickOutside","event","target","clickedWithinTrigger","clickedWithinInput","useKey","isInputTarget","isTriggerTarget","displayValue","handleInputBlur","handleInputChange","handleClearInput","handleInputFocus","handleInputKeyDown","inputMaskProps","useDayPickerInputState","handleInputClick","toggleDropdown","createSlotProps","triggerContent","handleCalendarChange","shouldApplyImmediately","shouldCloseRange","hasFeedback","mergedInputProps","leftSidebarContent","rightSidebarContent","footerContent","dropdownRoot","getOrCreatePortalRoot","dropdownContent","jsx","DayPickerDropdown","DayPickerCalendar","jsxs","Fragment","classNames","DayPickerInput","ReactDOM","apply","clear","close"],"mappings":"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"}

package/components/datepicker/DayPickerInput.d.ts

@@ -10,7 +10,7 @@ type DayPickerInputProps = {
     iconName: RioglyphIconType;
     isSingleMode: boolean;
     isClearable: boolean;
-    inputMaskProps?: Pick<ClearableInputProps, 'mask' | 'pattern' | 'format' | 'parse'>;
+    inputMaskProps?: Pick<ClearableInputProps, 'mask' | 'pattern' | 'format' | 'parse' | 'blocks'>;
     mergedInputProps: DayPickerInputPropsShape;
     inputClassName?: string;
     errorMessage?: string | ReactNode;

package/components/datepicker/DayPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPickerInput.js","sources":["../../../src/components/datepicker/DayPickerInput.tsx"],"sourcesContent":["import type { ChangeEvent, FocusEvent, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\nimport type { RioglyphIconType } from '../rioglyph/RioglyphIconType';\n\ntype DayPickerInputPropsShape = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'children' | 'value' | 'defaultValue' | 'onChange' | 'size'\n>;\n\ntype DayPickerInputProps = {\n    id?: string;\n    triggerRef?: Ref<HTMLDivElement>;\n    inputRef: Ref<HTMLInputElement>;\n    displayValue: string;\n    iconName: RioglyphIconType;\n    isSingleMode: boolean;\n    isClearable: boolean;\n    inputMaskProps?: Pick<ClearableInputProps, 'mask' | 'pattern' | 'format' | 'parse'>;\n    mergedInputProps: DayPickerInputPropsShape;\n    inputClassName?: string;\n    errorMessage?: string | ReactNode;\n    warningMessage?: string | ReactNode;\n    messageWhiteSpace: 'normal' | 'nowrap' | 'pre-line';\n    onChange: (nextValue: string, event?: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLSpanElement>) => void;\n    onAddonClick: () => void;\n    onClick: (event: MouseEvent<HTMLInputElement>) => void;\n    onFocus: (event: FocusEvent<HTMLInputElement>) => void;\n    onBlur: (event: FocusEvent<HTMLInputElement>) => void;\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onClear: () => void;\n};\n\nconst DayPickerInput = (props: DayPickerInputProps) => {\n    const {\n        id,\n        triggerRef,\n        inputRef,\n        displayValue,\n        iconName,\n        isSingleMode,\n        isClearable,\n        inputMaskProps,\n        mergedInputProps,\n        inputClassName,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace,\n        onChange,\n        onAddonClick,\n        onClick,\n        onFocus,\n        onBlur,\n        onKeyDown,\n        onClear,\n    } = props;\n\n    const hasFeedback = !!(errorMessage || warningMessage);\n\n    return (\n        <div>\n            <div ref={triggerRef} className='input-group'>\n                <span className='input-group-addon' onClick={onAddonClick}>\n                    <span className={classNames('rioglyph', iconName)} aria-hidden='true' />\n                </span>\n                <div className='form-control-feedback-wrapper flex-1-1'>\n                    <ClearableInput\n                        {...mergedInputProps}\n                        id={id}\n                        ref={inputRef}\n                        type='text'\n                        value={displayValue}\n                        {...(isSingleMode ? inputMaskProps : undefined)}\n                        maskVisibility='never'\n                        maskOverwrite='shift'\n                        readOnly={!isSingleMode}\n                        showClearButton={isClearable}\n                        onChange={onChange}\n                        onClick={onClick}\n                        onFocus={onFocus}\n                        onBlur={onBlur}\n                        onKeyPress={event => onKeyDown(event)}\n                        onClear={() => onClear()}\n                        inputClassName={classNames('bg-white', !isSingleMode && 'cursor-pointer', inputClassName)}\n                    />\n                    {hasFeedback ? (\n                        <>\n                            {errorMessage ? (\n                                <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n                            ) : null}\n                            {!errorMessage && warningMessage ? (\n                                <span className='form-control-feedback rioglyph rioglyph-warning-sign' />\n                            ) : null}\n                        </>\n                    ) : null}\n                </div>\n            </div>\n            {hasFeedback ? (\n                <span className={`help-block white-space-${messageWhiteSpace}`}>\n                    <span>{errorMessage || warningMessage}</span>\n                </span>\n            ) : null}\n        </div>\n    );\n};\n\nexport default DayPickerInput;\n"],"names":["DayPickerInput","props","id","triggerRef","inputRef","displayValue","iconName","isSingleMode","isClearable","inputMaskProps","mergedInputProps","inputClassName","errorMessage","warningMessage","messageWhiteSpace","onChange","onAddonClick","onClick","onFocus","onBlur","onKeyDown","onClear","hasFeedback","jsxs","jsx","classNames","ClearableInput","event","Fragment"],"mappings":";;;AAkCA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACApB,GAEEqB,IAAc,CAAC,EAAEV,KAAgBC;AAEvC,2BACK,OAAA,EACG,UAAA;AAAA,IAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKpB,GAAY,WAAU,eAC5B,UAAA;AAAA,MAAA,gBAAAqB,EAAC,QAAA,EAAK,WAAU,qBAAoB,SAASR,GACzC,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAW,YAAYnB,CAAQ,GAAG,eAAY,QAAO,GAC1E;AAAA,MACA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,0CACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACI,GAAGhB;AAAA,YACJ,IAAAR;AAAA,YACA,KAAKE;AAAA,YACL,MAAK;AAAA,YACL,OAAOC;AAAA,YACN,GAAIE,IAAeE,IAAiB;AAAA,YACrC,gBAAe;AAAA,YACf,eAAc;AAAA,YACd,UAAU,CAACF;AAAA,YACX,iBAAiBC;AAAA,YACjB,UAAAO;AAAA,YACA,SAAAE;AAAA,YACA,SAAAC;AAAA,YACA,QAAAC;AAAA,YACA,YAAY,CAAAQ,MAASP,EAAUO,CAAK;AAAA,YACpC,SAAS,MAAMN,EAAA;AAAA,YACf,gBAAgBI,EAAW,YAAY,CAAClB,KAAgB,kBAAkBI,CAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3FW,IACG,gBAAAC,EAAAK,GAAA,EACK,UAAA;AAAA,UAAAhB,IACG,gBAAAY,EAAC,QAAA,EAAK,WAAU,qDAAA,CAAqD,IACrE;AAAA,UACH,CAACZ,KAAgBC,sBACb,QAAA,EAAK,WAAU,wDAAuD,IACvE;AAAA,QAAA,EAAA,CACR,IACA;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,GACJ;AAAA,IACCS,IACG,gBAAAE,EAAC,QAAA,EAAK,WAAW,0BAA0BV,CAAiB,IACxD,UAAA,gBAAAU,EAAC,QAAA,EAAM,UAAAZ,KAAgBC,EAAA,CAAe,EAAA,CAC1C,IACA;AAAA,EAAA,GACR;AAER;"}
+{"version":3,"file":"DayPickerInput.js","sources":["../../../src/components/datepicker/DayPickerInput.tsx"],"sourcesContent":["import type { ChangeEvent, FocusEvent, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\nimport type { RioglyphIconType } from '../rioglyph/RioglyphIconType';\n\ntype DayPickerInputPropsShape = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'children' | 'value' | 'defaultValue' | 'onChange' | 'size'\n>;\n\ntype DayPickerInputProps = {\n    id?: string;\n    triggerRef?: Ref<HTMLDivElement>;\n    inputRef: Ref<HTMLInputElement>;\n    displayValue: string;\n    iconName: RioglyphIconType;\n    isSingleMode: boolean;\n    isClearable: boolean;\n    inputMaskProps?: Pick<ClearableInputProps, 'mask' | 'pattern' | 'format' | 'parse' | 'blocks'>;\n    mergedInputProps: DayPickerInputPropsShape;\n    inputClassName?: string;\n    errorMessage?: string | ReactNode;\n    warningMessage?: string | ReactNode;\n    messageWhiteSpace: 'normal' | 'nowrap' | 'pre-line';\n    onChange: (nextValue: string, event?: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLSpanElement>) => void;\n    onAddonClick: () => void;\n    onClick: (event: MouseEvent<HTMLInputElement>) => void;\n    onFocus: (event: FocusEvent<HTMLInputElement>) => void;\n    onBlur: (event: FocusEvent<HTMLInputElement>) => void;\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onClear: () => void;\n};\n\nconst DayPickerInput = (props: DayPickerInputProps) => {\n    const {\n        id,\n        triggerRef,\n        inputRef,\n        displayValue,\n        iconName,\n        isSingleMode,\n        isClearable,\n        inputMaskProps,\n        mergedInputProps,\n        inputClassName,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace,\n        onChange,\n        onAddonClick,\n        onClick,\n        onFocus,\n        onBlur,\n        onKeyDown,\n        onClear,\n    } = props;\n\n    const hasFeedback = !!(errorMessage || warningMessage);\n\n    return (\n        <div>\n            <div ref={triggerRef} className='input-group'>\n                <span className='input-group-addon' onClick={onAddonClick}>\n                    <span className={classNames('rioglyph', iconName)} aria-hidden='true' />\n                </span>\n                <div className='form-control-feedback-wrapper flex-1-1'>\n                    <ClearableInput\n                        {...mergedInputProps}\n                        id={id}\n                        ref={inputRef}\n                        type='text'\n                        value={displayValue}\n                        {...(isSingleMode ? inputMaskProps : undefined)}\n                        maskVisibility='never'\n                        maskOverwrite='shift'\n                        readOnly={!isSingleMode}\n                        showClearButton={isClearable}\n                        onChange={onChange}\n                        onClick={onClick}\n                        onFocus={onFocus}\n                        onBlur={onBlur}\n                        onKeyPress={event => onKeyDown(event)}\n                        onClear={() => onClear()}\n                        inputClassName={classNames('bg-white', !isSingleMode && 'cursor-pointer', inputClassName)}\n                    />\n                    {hasFeedback ? (\n                        <>\n                            {errorMessage ? (\n                                <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n                            ) : null}\n                            {!errorMessage && warningMessage ? (\n                                <span className='form-control-feedback rioglyph rioglyph-warning-sign' />\n                            ) : null}\n                        </>\n                    ) : null}\n                </div>\n            </div>\n            {hasFeedback ? (\n                <span className={`help-block white-space-${messageWhiteSpace}`}>\n                    <span>{errorMessage || warningMessage}</span>\n                </span>\n            ) : null}\n        </div>\n    );\n};\n\nexport default DayPickerInput;\n"],"names":["DayPickerInput","props","id","triggerRef","inputRef","displayValue","iconName","isSingleMode","isClearable","inputMaskProps","mergedInputProps","inputClassName","errorMessage","warningMessage","messageWhiteSpace","onChange","onAddonClick","onClick","onFocus","onBlur","onKeyDown","onClear","hasFeedback","jsxs","jsx","classNames","ClearableInput","event","Fragment"],"mappings":";;;AAkCA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACApB,GAEEqB,IAAc,CAAC,EAAEV,KAAgBC;AAEvC,2BACK,OAAA,EACG,UAAA;AAAA,IAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKpB,GAAY,WAAU,eAC5B,UAAA;AAAA,MAAA,gBAAAqB,EAAC,QAAA,EAAK,WAAU,qBAAoB,SAASR,GACzC,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAW,YAAYnB,CAAQ,GAAG,eAAY,QAAO,GAC1E;AAAA,MACA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,0CACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACI,GAAGhB;AAAA,YACJ,IAAAR;AAAA,YACA,KAAKE;AAAA,YACL,MAAK;AAAA,YACL,OAAOC;AAAA,YACN,GAAIE,IAAeE,IAAiB;AAAA,YACrC,gBAAe;AAAA,YACf,eAAc;AAAA,YACd,UAAU,CAACF;AAAA,YACX,iBAAiBC;AAAA,YACjB,UAAAO;AAAA,YACA,SAAAE;AAAA,YACA,SAAAC;AAAA,YACA,QAAAC;AAAA,YACA,YAAY,CAAAQ,MAASP,EAAUO,CAAK;AAAA,YACpC,SAAS,MAAMN,EAAA;AAAA,YACf,gBAAgBI,EAAW,YAAY,CAAClB,KAAgB,kBAAkBI,CAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3FW,IACG,gBAAAC,EAAAK,GAAA,EACK,UAAA;AAAA,UAAAhB,IACG,gBAAAY,EAAC,QAAA,EAAK,WAAU,qDAAA,CAAqD,IACrE;AAAA,UACH,CAACZ,KAAgBC,sBACb,QAAA,EAAK,WAAU,wDAAuD,IACvE;AAAA,QAAA,EAAA,CACR,IACA;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,GACJ;AAAA,IACCS,IACG,gBAAAE,EAAC,QAAA,EAAK,WAAW,0BAA0BV,CAAiB,IACxD,UAAA,gBAAAU,EAAC,QAAA,EAAM,UAAAZ,KAAgBC,EAAA,CAAe,EAAA,CAC1C,IACA;AAAA,EAAA,GACR;AAER;"}

package/components/datepicker/dayPickerTypes.d.ts

@@ -271,8 +271,9 @@ type CommonDayPickerProps = Omit<CommonCalendarProps, 'size'> & {
      */
     iconName?: RioglyphIconType;
     /**
-     * Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting.
-     * If omitted, locale-based display is used for the input.
+     * Custom date-fns format string (e.g., 'yyyy-MM-dd' or 'dd.MM.yyyy HH:mm') to override locale-based formatting.
+     * The built-in input mask supports numeric `dd`, `MM`, `yyyy`, `HH` and `mm` tokens with separators.
+     * If omitted, locale-based date-only display is used for the input.
      */
     dateFormat?: string;
     /**