@chayns-components/core 5.0.0-beta.694 → 5.0.0-beta.695
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.
- package/lib/cjs/components/text-area/TextArea.js +6 -2
- package/lib/cjs/components/text-area/TextArea.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.styles.js +3 -0
- package/lib/cjs/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.js +6 -2
- package/lib/esm/components/text-area/TextArea.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.styles.js +22 -16
- package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/types/components/text-area/TextArea.d.ts +4 -0
- package/lib/types/components/text-area/TextArea.styles.d.ts +4 -1
- package/package.json +2 -2
|
@@ -12,6 +12,7 @@ var _TextArea = require("./TextArea.styles");
|
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
14
|
const TextArea = ({
|
|
15
|
+
isDisabled,
|
|
15
16
|
placeholder,
|
|
16
17
|
value,
|
|
17
18
|
onChange,
|
|
@@ -48,10 +49,13 @@ const TextArea = ({
|
|
|
48
49
|
adjustTextareaHeight();
|
|
49
50
|
}
|
|
50
51
|
}, [adjustTextareaHeight, value]);
|
|
51
|
-
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea,
|
|
52
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
|
|
53
|
+
$isDisabled: isDisabled
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
|
|
52
55
|
$shouldChangeColor: shouldChangeColor
|
|
53
56
|
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
|
|
54
57
|
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
|
|
58
|
+
disabled: isDisabled,
|
|
55
59
|
ref: textareaRef,
|
|
56
60
|
value: value,
|
|
57
61
|
onBlur: onBlur,
|
|
@@ -60,7 +64,7 @@ const TextArea = ({
|
|
|
60
64
|
$minHeight: minHeight,
|
|
61
65
|
$isOverflowing: isOverflowing,
|
|
62
66
|
rows: 1
|
|
63
|
-
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
|
|
67
|
+
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
|
|
64
68
|
};
|
|
65
69
|
TextArea.displayName = 'TextArea';
|
|
66
70
|
var _default = exports.default = TextArea;
|
|
@@ -1 +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","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","_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","useEffect","length","createElement","StyledTextArea","StyledTextAreaContentWrapper","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","ref","$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 FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\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 * 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: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\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(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\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>\n <StyledTextAreaContentWrapper $shouldChangeColor={shouldChangeColor}>\n <StyledTextAreaContent>\n <StyledTextAreaInput\n $browser={browser?.name}\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>{placeholder}</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 isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n rightElement,\n shouldChangeColor,\n shouldShowBorder,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAaA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAO2B,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;
|
|
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","isDisabled","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","_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","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","ref","$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 FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\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 * 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: FC<TextAreaProps> = ({\n isDisabled,\n placeholder,\n value,\n onChange,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\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(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\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 $shouldChangeColor={shouldChangeColor}>\n <StyledTextAreaContent>\n <StyledTextAreaInput\n $browser={browser?.name}\n disabled={isDisabled}\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>{placeholder}</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 isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n rightElement,\n shouldChangeColor,\n shouldShowBorder,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,9 @@ const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
|
|
|
11
11
|
display: flex;
|
|
12
12
|
flex: 1 1 auto;
|
|
13
13
|
min-width: 0;
|
|
14
|
+
opacity: ${({
|
|
15
|
+
$isDisabled
|
|
16
|
+
}) => $isDisabled ? 0.5 : 1};
|
|
14
17
|
position: relative;
|
|
15
18
|
`;
|
|
16
19
|
const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _styledComponents.default.div`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{ $shouldChangeColor: boolean }>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $isOverflowing: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n color: ${({ theme }: StyledTextAreaLabelProps) => theme['006']};\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,6 +5,7 @@ import { StyledInputRightElement } from '../input/Input.styles';
|
|
|
5
5
|
import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
|
|
6
6
|
const TextArea = _ref => {
|
|
7
7
|
let {
|
|
8
|
+
isDisabled,
|
|
8
9
|
placeholder,
|
|
9
10
|
value,
|
|
10
11
|
onChange,
|
|
@@ -40,10 +41,13 @@ const TextArea = _ref => {
|
|
|
40
41
|
adjustTextareaHeight();
|
|
41
42
|
}
|
|
42
43
|
}, [adjustTextareaHeight, value]);
|
|
43
|
-
return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea,
|
|
44
|
+
return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, {
|
|
45
|
+
$isDisabled: isDisabled
|
|
46
|
+
}, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
|
|
44
47
|
$shouldChangeColor: shouldChangeColor
|
|
45
48
|
}, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
|
|
46
49
|
$browser: browser?.name,
|
|
50
|
+
disabled: isDisabled,
|
|
47
51
|
ref: textareaRef,
|
|
48
52
|
value: value,
|
|
49
53
|
onBlur: onBlur,
|
|
@@ -52,7 +56,7 @@ const TextArea = _ref => {
|
|
|
52
56
|
$minHeight: minHeight,
|
|
53
57
|
$isOverflowing: isOverflowing,
|
|
54
58
|
rows: 1
|
|
55
|
-
}), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, null, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
|
|
59
|
+
}), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, null, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
|
|
56
60
|
};
|
|
57
61
|
TextArea.displayName = 'TextArea';
|
|
58
62
|
export default TextArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useContext","useEffect","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","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","$shouldChangeColor","$browser","name","ref","$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 FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\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 * 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: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\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(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\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>\n <StyledTextAreaContentWrapper $shouldChangeColor={shouldChangeColor}>\n <StyledTextAreaContent>\n <StyledTextAreaInput\n $browser={browser?.name}\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>{placeholder}</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 isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n rightElement,\n shouldChangeColor,\n shouldShowBorder,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAMRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,WAAW,QAAQ,sCAAsC;AAClE,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SACIC,cAAc,EACdC,qBAAqB,EACrBC,4BAA4B,EAC5BC,mBAAmB,EACnBC,mBAAmB,EACnBC,0BAA0B,QACvB,mBAAmB;
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useContext","useEffect","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","isDisabled","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","$shouldChangeColor","$browser","name","disabled","ref","$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 FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\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 * 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: FC<TextAreaProps> = ({\n isDisabled,\n placeholder,\n value,\n onChange,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\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(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\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 $shouldChangeColor={shouldChangeColor}>\n <StyledTextAreaContent>\n <StyledTextAreaInput\n $browser={browser?.name}\n disabled={isDisabled}\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>{placeholder}</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 isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n rightElement,\n shouldChangeColor,\n shouldShowBorder,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,14 +3,20 @@ export const StyledTextArea = styled.div`
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex: 1 1 auto;
|
|
5
5
|
min-width: 0;
|
|
6
|
+
opacity: ${_ref => {
|
|
7
|
+
let {
|
|
8
|
+
$isDisabled
|
|
9
|
+
} = _ref;
|
|
10
|
+
return $isDisabled ? 0.5 : 1;
|
|
11
|
+
}};
|
|
6
12
|
position: relative;
|
|
7
13
|
`;
|
|
8
14
|
export const StyledTextAreaContentWrapper = styled.div`
|
|
9
|
-
background-color: ${
|
|
15
|
+
background-color: ${_ref2 => {
|
|
10
16
|
let {
|
|
11
17
|
theme,
|
|
12
18
|
$shouldChangeColor
|
|
13
|
-
} =
|
|
19
|
+
} = _ref2;
|
|
14
20
|
return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
|
|
15
21
|
}};
|
|
16
22
|
border-radius: 3px;
|
|
@@ -23,30 +29,30 @@ export const StyledTextAreaContent = styled.div`
|
|
|
23
29
|
width: 100%;
|
|
24
30
|
`;
|
|
25
31
|
export const StyledTextAreaInput = styled.textarea`
|
|
26
|
-
color: ${
|
|
32
|
+
color: ${_ref3 => {
|
|
27
33
|
let {
|
|
28
34
|
theme
|
|
29
|
-
} =
|
|
35
|
+
} = _ref3;
|
|
30
36
|
return theme.text;
|
|
31
37
|
}};
|
|
32
38
|
border: none;
|
|
33
39
|
resize: none;
|
|
34
|
-
overflow-y: ${
|
|
40
|
+
overflow-y: ${_ref4 => {
|
|
35
41
|
let {
|
|
36
42
|
$isOverflowing
|
|
37
|
-
} =
|
|
43
|
+
} = _ref4;
|
|
38
44
|
return $isOverflowing ? 'scroll' : 'hidden';
|
|
39
45
|
}};
|
|
40
|
-
max-height: ${
|
|
46
|
+
max-height: ${_ref5 => {
|
|
41
47
|
let {
|
|
42
48
|
$maxHeight
|
|
43
|
-
} =
|
|
49
|
+
} = _ref5;
|
|
44
50
|
return typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight;
|
|
45
51
|
}};
|
|
46
|
-
min-height: ${
|
|
52
|
+
min-height: ${_ref6 => {
|
|
47
53
|
let {
|
|
48
54
|
$minHeight
|
|
49
|
-
} =
|
|
55
|
+
} = _ref6;
|
|
50
56
|
return typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight;
|
|
51
57
|
}};
|
|
52
58
|
width: 100%;
|
|
@@ -54,11 +60,11 @@ export const StyledTextAreaInput = styled.textarea`
|
|
|
54
60
|
cursor: text;
|
|
55
61
|
|
|
56
62
|
// Styles for custom scrollbar
|
|
57
|
-
${
|
|
63
|
+
${_ref7 => {
|
|
58
64
|
let {
|
|
59
65
|
$browser,
|
|
60
66
|
theme
|
|
61
|
-
} =
|
|
67
|
+
} = _ref7;
|
|
62
68
|
return $browser === 'firefox' ? css`
|
|
63
69
|
scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
|
|
64
70
|
scrollbar-width: thin;
|
|
@@ -100,10 +106,10 @@ export const StyledTextAreaLabelWrapper = styled.label`
|
|
|
100
106
|
cursor: text;
|
|
101
107
|
`;
|
|
102
108
|
export const StyledTextAreaLabel = styled.label`
|
|
103
|
-
color: rgba(${
|
|
109
|
+
color: rgba(${_ref8 => {
|
|
104
110
|
let {
|
|
105
111
|
theme
|
|
106
|
-
} =
|
|
112
|
+
} = _ref8;
|
|
107
113
|
return theme['text-rgb'];
|
|
108
114
|
}}, 0.45);
|
|
109
115
|
line-height: 1.3;
|
|
@@ -112,10 +118,10 @@ export const StyledTextAreaLabel = styled.label`
|
|
|
112
118
|
overflow: hidden;
|
|
113
119
|
cursor: text;
|
|
114
120
|
text-overflow: ellipsis;
|
|
115
|
-
color: ${
|
|
121
|
+
color: ${_ref9 => {
|
|
116
122
|
let {
|
|
117
123
|
theme
|
|
118
|
-
} =
|
|
124
|
+
} = _ref9;
|
|
119
125
|
return theme['006'];
|
|
120
126
|
}};
|
|
121
127
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaContentWrapper","
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","_ref","$isDisabled","StyledTextAreaContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","StyledTextAreaContent","StyledTextAreaInput","textarea","_ref3","text","_ref4","$isOverflowing","_ref5","$maxHeight","_ref6","$minHeight","_ref7","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref8","_ref9"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{ $shouldChangeColor: boolean }>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $isOverflowing: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n color: ${({ theme }: StyledTextAreaLabelProps) => theme['006']};\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGN,MAAM,CAACG,GAAsC;AACzF,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAsD,CAAC,GAAAF,KAAA;EAAA,OACjFC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,qBAAqB,GAAGX,MAAM,CAACG,GAAG;AAC/C;AACA;AACA,CAAC;AASD,OAAO,MAAMS,mBAAmB,GAAGZ,MAAM,CAACa,QAAkC;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAgC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AAChE;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAChF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEf;EAAgC,CAAC,GAAAc,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBtB,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMgB,0BAA0B,GAAGxB,MAAM,CAACyB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAG1B,MAAM,CAACyB,KAA+B;AACzE,kBAAkBE,KAAA;EAAA,IAAC;IAAEnB;EAAgC,CAAC,GAAAmB,KAAA;EAAA,OAAKnB,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,aAAaoB,KAAA;EAAA,IAAC;IAAEpB;EAAgC,CAAC,GAAAoB,KAAA;EAAA,OAAKpB,KAAK,CAAC,KAAK,CAAC;AAAA;AAClE,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { ChangeEventHandler, CSSProperties, FC, FocusEventHandler, ReactElement } from 'react';
|
|
2
2
|
export type TextAreaProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Disables the text area so that it cannot be changed.
|
|
5
|
+
*/
|
|
6
|
+
isDisabled?: boolean;
|
|
3
7
|
/**
|
|
4
8
|
* The maximum height of the text area.
|
|
5
9
|
*/
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { Browser } from 'detect-browser';
|
|
2
2
|
import type { CSSProperties } from 'react';
|
|
3
3
|
import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
4
|
-
|
|
4
|
+
type StyledTextAreaProps = WithTheme<{
|
|
5
|
+
$isDisabled?: boolean;
|
|
6
|
+
}>;
|
|
7
|
+
export declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTextAreaProps>> & string;
|
|
5
8
|
type StyledTextAreaContentWrapperProps = WithTheme<{
|
|
6
9
|
$shouldChangeColor: boolean;
|
|
7
10
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.695",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "d005729d02541beb59ab9dc6b583f779f1fda16b"
|
|
89
89
|
}
|