@chayns-components/core 5.0.0-beta.942 → 5.0.0-beta.943

package/lib/cjs/components/text-area/TextArea.js

@@ -17,6 +17,8 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   placeholder,
   value,
   onChange,
+  onFocus,
+  onKeyDown,
   rightElement,
   onBlur,
   maxHeight = '120px',
@@ -64,13 +66,15 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
     value: value,
     onBlur: onBlur,
     onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
     $maxHeight: maxHeight,
     $minHeight: minHeight,
     $isOverflowing: isOverflowing,
     rows: 1
   }), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
     $isInvalid: isInvalid
-  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
 });
 TextArea.displayName = 'TextArea';
 var _default = exports.default = TextArea;

package/lib/cjs/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","forwardRef","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","ref","_rightElement$props","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","height","scrollHeight","parseInt","toString","useImperativeHandle","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$isInvalid","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","forwardRef","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","_rightElement$props","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","height","scrollHeight","parseInt","toString","useImperativeHandle","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$isInvalid","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js

@@ -10,6 +10,8 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
     placeholder,
     value,
     onChange,
+    onFocus,
+    onKeyDown,
     rightElement,
     onBlur,
     maxHeight = '120px',
@@ -56,13 +58,15 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
     value: value,
     onBlur: onBlur,
     onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
     $maxHeight: maxHeight,
     $minHeight: minHeight,
     $isOverflowing: isOverflowing,
     rows: 1
   }), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
     $isInvalid: isInvalid
-  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
 });
 TextArea.displayName = 'TextArea';
 export default TextArea;

package/lib/esm/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","ref","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","ref","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/text-area/TextArea.d.ts

@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactElement } from 'react';
+import React, { ChangeEventHandler, CSSProperties, FocusEventHandler, KeyboardEventHandler, ReactElement } from 'react';
 export type TextAreaProps = {
     /**
      * Disables the text area so that it cannot be changed.
@@ -24,6 +24,14 @@ export type TextAreaProps = {
      * Function that is executed when the text of the text area changes.
      */
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Function that is executed when the input field is focused
+     */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Function that is executed when a letter is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     /**
      * Placeholder for the text area field.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.942",
+    "version": "5.0.0-beta.943",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "595ec0b1dc187bfd457f9c2070d4ac710a081f2b"
+    "gitHead": "4eb91c24eff645554313e2fc843f43901f1396cc"
 }