npm - @chayns-components/core - Versions diffs - 5.0.0-beta.1294 → 5.0.0-beta.1296 - Mend

@chayns-components/core 5.0.0-beta.1294 → 5.0.0-beta.1296

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/cjs/components/input/Input.js +1 -1
package/lib/cjs/components/input/Input.js.map +1 -1
package/lib/cjs/components/text-area/TextArea.js +1 -1
package/lib/cjs/components/text-area/TextArea.js.map +1 -1
package/lib/esm/components/input/Input.js +1 -1
package/lib/esm/components/input/Input.js.map +1 -1
package/lib/esm/components/text-area/TextArea.js +1 -1
package/lib/esm/components/text-area/TextArea.js.map +1 -1
package/package.json +2 -2

package/lib/cjs/components/input/Input.js CHANGED Viewed

@@ -11,7 +11,7 @@ var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Input = require("./Input.styles");
 var _contentCard = require("../../types/contentCard");
-var _resize = require("../../hooks/resize.ts");
+var _resize = require("../../hooks/resize");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 let InputSize = exports.InputSize = /*#__PURE__*/function (InputSize) {

package/lib/cjs/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize.ts';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let color: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $color={color}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let color: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $color={color}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 var _Input = require("../input/Input.styles");
 var _TextArea = require("./TextArea.styles");
-var _resize = require("../../hooks/resize.ts");
+var _resize = require("../../hooks/resize");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   isDisabled,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_resize","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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","useCursorRepaint","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 { BrowserName } from '../../types/chayns';\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';\nimport { useCursorRepaint } from '../../hooks/resize.ts';\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 useCursorRepaint(textareaRef);\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 as BrowserName}\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":[]}
1	+ {"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_resize","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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","useCursorRepaint","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 { BrowserName } from '../../types/chayns';\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';\nimport { useCursorRepaint } from '../../hooks/resize';\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 useCursorRepaint(textareaRef);\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 as BrowserName}\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/input/Input.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { AreaContext } from '../area-provider/AreaContextProvider';
 import Icon from '../icon/Icon';
 import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
 import { ContentCardType } from '../../types/contentCard';
-import { useCursorRepaint } from '../../hooks/resize.ts';
+import { useCursorRepaint } from '../../hooks/resize';
 export let InputSize = /*#__PURE__*/function (InputSize) {
   InputSize["Small"] = "small";
   InputSize["Medium"] = "medium";

package/lib/esm/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize.ts';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let color: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $color={color}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let color: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $color={color}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHan
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledInputRightElement } from '../input/Input.styles';
 import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
-import { useCursorRepaint } from '../../hooks/resize.ts';
+import { useCursorRepaint } from '../../hooks/resize';
 const TextArea = /*#__PURE__*/forwardRef(({
   isDisabled,
   isInvalid,

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

	@@ -1 +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","useCursorRepaint","TextArea","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","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 { BrowserName } from '../../types/chayns';\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';\nimport { useCursorRepaint } from '../../hooks/resize.ts';\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 useCursorRepaint(textareaRef);\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 as BrowserName}\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":[]}
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","useCursorRepaint","TextArea","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","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 { BrowserName } from '../../types/chayns';\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';\nimport { useCursorRepaint } from '../../hooks/resize';\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 useCursorRepaint(textareaRef);\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 as BrowserName}\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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1294",
+    "version": "5.0.0-beta.1296",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "beb6157aa3b903133a5eec2e85e686f7a973be25"
+    "gitHead": "5dcb976918f2639f635e6cc9c85bc0cddc027efe"
 }