@chayns-components/core 5.0.0-beta.583 → 5.0.0-beta.585
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 +5 -1
- package/lib/cjs/components/text-area/TextArea.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.styles.js +3 -2
- 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 +3 -2
- package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/types/components/text-area/TextArea.styles.d.ts +2 -1
- package/package.json +2 -2
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
|
|
9
10
|
var _TextArea = require("./TextArea.styles");
|
|
10
11
|
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); }
|
|
11
12
|
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; }
|
|
@@ -18,10 +19,12 @@ const TextArea = ({
|
|
|
18
19
|
minHeight = '41px'
|
|
19
20
|
}) => {
|
|
20
21
|
const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
|
|
22
|
+
const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
|
|
21
23
|
const textareaRef = (0, _react.useRef)(null);
|
|
22
24
|
const {
|
|
23
25
|
browser
|
|
24
26
|
} = (0, _chaynsApi.getDevice)();
|
|
27
|
+
const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
|
|
25
28
|
const adjustTextareaHeight = (0, _react.useCallback)(() => {
|
|
26
29
|
if (textareaRef.current) {
|
|
27
30
|
textareaRef.current.style.height = 'auto';
|
|
@@ -40,6 +43,7 @@ const TextArea = ({
|
|
|
40
43
|
}
|
|
41
44
|
}, [adjustTextareaHeight, value]);
|
|
42
45
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
|
|
46
|
+
$shouldChangeColor: shouldChangeColor,
|
|
43
47
|
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
|
|
44
48
|
ref: textareaRef,
|
|
45
49
|
value: value,
|
|
@@ -49,7 +53,7 @@ const TextArea = ({
|
|
|
49
53
|
$minHeight: minHeight,
|
|
50
54
|
$isOverflowing: isOverflowing,
|
|
51
55
|
rows: 1
|
|
52
|
-
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder))), [browser === null || browser === void 0 ? void 0 : browser.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, value]);
|
|
56
|
+
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder))), [browser === null || browser === void 0 ? void 0 : browser.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, shouldChangeColor, value]);
|
|
53
57
|
};
|
|
54
58
|
TextArea.displayName = 'TextArea';
|
|
55
59
|
var _default = exports.default = TextArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_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","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","useState","textareaRef","useRef","browser","getDevice","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_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","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","createElement","StyledTextArea","StyledTextAreaInput","$shouldChangeColor","$browser","name","ref","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","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 {\n StyledTextArea,\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 * 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 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 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 (value && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea>\n <StyledTextAreaInput\n $shouldChangeColor={shouldChangeColor}\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 {' '}\n <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextArea>\n ),\n [\n browser?.name,\n isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n shouldChangeColor,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,8 +17,9 @@ const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.defa
|
|
|
17
17
|
border-radius: 3px;
|
|
18
18
|
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
19
19
|
background-color: ${({
|
|
20
|
-
theme
|
|
21
|
-
|
|
20
|
+
theme,
|
|
21
|
+
$shouldChangeColor
|
|
22
|
+
}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
|
|
22
23
|
color: ${({
|
|
23
24
|
theme
|
|
24
25
|
}) => theme.text};
|
|
@@ -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","StyledTextAreaInput","textarea","theme","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type {
|
|
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","StyledTextAreaInput","textarea","theme","$shouldChangeColor","colorMode","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`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) => $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) => $minHeight};\n width: 100%;\n padding: 8px 10px;\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`;\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 text-overflow: ellipsis;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { getDevice } from 'chayns-api';
|
|
2
|
-
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { AreaContext } from '../area-provider/AreaContextProvider';
|
|
3
4
|
import { StyledTextArea, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
|
|
4
5
|
const TextArea = _ref => {
|
|
5
6
|
let {
|
|
@@ -11,10 +12,12 @@ const TextArea = _ref => {
|
|
|
11
12
|
minHeight = '41px'
|
|
12
13
|
} = _ref;
|
|
13
14
|
const [isOverflowing, setIsOverflowing] = useState(false);
|
|
15
|
+
const areaProvider = useContext(AreaContext);
|
|
14
16
|
const textareaRef = useRef(null);
|
|
15
17
|
const {
|
|
16
18
|
browser
|
|
17
19
|
} = getDevice();
|
|
20
|
+
const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
|
|
18
21
|
const adjustTextareaHeight = useCallback(() => {
|
|
19
22
|
if (textareaRef.current) {
|
|
20
23
|
textareaRef.current.style.height = 'auto';
|
|
@@ -33,6 +36,7 @@ const TextArea = _ref => {
|
|
|
33
36
|
}
|
|
34
37
|
}, [adjustTextareaHeight, value]);
|
|
35
38
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
|
|
39
|
+
$shouldChangeColor: shouldChangeColor,
|
|
36
40
|
$browser: browser?.name,
|
|
37
41
|
ref: textareaRef,
|
|
38
42
|
value: value,
|
|
@@ -42,7 +46,7 @@ const TextArea = _ref => {
|
|
|
42
46
|
$minHeight: minHeight,
|
|
43
47
|
$isOverflowing: isOverflowing,
|
|
44
48
|
rows: 1
|
|
45
|
-
}), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/React.createElement(StyledTextAreaLabel, null, placeholder))), [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, value]);
|
|
49
|
+
}), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/React.createElement(StyledTextAreaLabel, null, placeholder))), [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, shouldChangeColor, value]);
|
|
46
50
|
};
|
|
47
51
|
TextArea.displayName = 'TextArea';
|
|
48
52
|
export default TextArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","StyledTextArea","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","textareaRef","browser","adjustTextareaHeight","current","style","height","scrollHeight","parseInt","toString","length","createElement","$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 useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledTextArea,\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 * 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 onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n}) => {\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const { browser } = getDevice();\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 (value && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea>\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 {' '}\n <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextArea>\n ),\n [browser?.name
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useContext","useEffect","useMemo","useRef","useState","AreaContext","StyledTextArea","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldChangeColor","adjustTextareaHeight","current","style","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 {\n StyledTextArea,\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 * 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 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 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 (value && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea>\n <StyledTextAreaInput\n $shouldChangeColor={shouldChangeColor}\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 {' '}\n <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextArea>\n ),\n [\n browser?.name,\n isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n shouldChangeColor,\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,SACIC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,EACnBC,0BAA0B,QACvB,mBAAmB;AA6B1B,MAAMC,QAA2B,GAAGC,IAAA,IAO9B;EAAA,IAP+B;IACjCC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,SAAS,GAAG,OAAO;IACnBC,SAAS,GAAG;EAChB,CAAC,GAAAN,IAAA;EACG,MAAM,CAACO,aAAa,EAAEC,gBAAgB,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAMgB,YAAY,GAAGpB,UAAU,CAACK,WAAW,CAAC;EAE5C,MAAMgB,WAAW,GAAGlB,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAM;IAAEmB;EAAQ,CAAC,GAAGzB,SAAS,CAAC,CAAC;EAE/B,MAAM0B,iBAAiB,GAAGrB,OAAO,CAC7B,MAAMkB,YAAY,CAACG,iBAAiB,IAAI,KAAK,EAC7C,CAACH,YAAY,CAACG,iBAAiB,CACnC,CAAC;EAED,MAAMC,oBAAoB,GAAGzB,WAAW,CAAC,MAAM;IAC3C,IAAIsB,WAAW,CAACI,OAAO,EAAE;MACrBJ,WAAW,CAACI,OAAO,CAACC,KAAK,CAACC,MAAM,GAAG,MAAM;MACzCN,WAAW,CAACI,OAAO,CAACC,KAAK,CAACC,MAAM,GAAI,GAAEN,WAAW,CAACI,OAAO,CAACG,YAAa,IAAG;MAE1ET,gBAAgB,CAACE,WAAW,CAACI,OAAO,CAACG,YAAY,GAAGC,QAAQ,CAACb,SAAS,CAACc,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3F;EACJ,CAAC,EAAE,CAACd,SAAS,CAAC,CAAC;;EAEf;AACJ;AACA;AACA;EACIf,SAAS,CAAC,MAAM;IACZ,IAAIY,KAAK,IAAIA,KAAK,CAACkB,MAAM,GAAG,CAAC,CAAC,EAAE;MAC5BP,oBAAoB,CAAC,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,oBAAoB,EAAEX,KAAK,CAAC,CAAC;EAEjC,OAAOX,OAAO,CACV,mBACIJ,KAAA,CAAAkC,aAAA,CAAC1B,cAAc,qBACXR,KAAA,CAAAkC,aAAA,CAACzB,mBAAmB;IAChB0B,kBAAkB,EAAEV,iBAAkB;IACtCW,QAAQ,EAAEZ,OAAO,EAAEa,IAAK;IACxBC,GAAG,EAAEf,WAAY;IACjBR,KAAK,EAAEA,KAAM;IACbE,MAAM,EAAEA,MAAO;IACfD,QAAQ,EAAEA,QAAS;IACnBuB,UAAU,EAAErB,SAAU;IACtBsB,UAAU,EAAErB,SAAU;IACtBsB,cAAc,EAAErB,aAAc;IAC9BsB,IAAI,EAAE;EAAE,CACX,CAAC,EACD,CAAC3B,KAAK,iBACHf,KAAA,CAAAkC,aAAA,CAACvB,0BAA0B,QACtB,GAAG,eACJX,KAAA,CAAAkC,aAAA,CAACxB,mBAAmB,QAAEI,WAAiC,CAC/B,CAEpB,CACnB,EACD,CACIU,OAAO,EAAEa,IAAI,EACbjB,aAAa,EACbF,SAAS,EACTC,SAAS,EACTF,MAAM,EACND,QAAQ,EACRF,WAAW,EACXW,iBAAiB,EACjBV,KAAK,CAEb,CAAC;AACL,CAAC;AAEDH,QAAQ,CAAC+B,WAAW,GAAG,UAAU;AAEjC,eAAe/B,QAAQ","ignoreList":[]}
|
|
@@ -10,9 +10,10 @@ export const StyledTextAreaInput = styled.textarea`
|
|
|
10
10
|
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
11
11
|
background-color: ${_ref => {
|
|
12
12
|
let {
|
|
13
|
-
theme
|
|
13
|
+
theme,
|
|
14
|
+
$shouldChangeColor
|
|
14
15
|
} = _ref;
|
|
15
|
-
return theme['100'];
|
|
16
|
+
return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
|
|
16
17
|
}};
|
|
17
18
|
color: ${_ref2 => {
|
|
18
19
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaInput","textarea","_ref","theme","_ref2","text","_ref3","$isOverflowing","_ref4","$maxHeight","_ref5","$minHeight","_ref6","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref7"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaInput","textarea","_ref","theme","$shouldChangeColor","colorMode","_ref2","text","_ref3","$isOverflowing","_ref4","$maxHeight","_ref5","$minHeight","_ref6","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref7"],"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`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) => $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) => $minHeight};\n width: 100%;\n padding: 8px 10px;\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`;\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 text-overflow: ellipsis;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAI;AACzC;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,QAAmC;AAC7E;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA6C,CAAC,GAAAF,IAAA;EAAA,OACxEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1F,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAAgC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AACjE;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACjF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OAAKC,UAAU;AAAA,CAAC;AAC3E,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OAAKC,UAAU;AAAA,CAAC;AAC3E;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEZ;EAAgC,CAAC,GAAAW,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBlB,GAAI;AAClB,0CAA0CM,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACDN,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CM,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGpB,MAAM,CAACqB,KAAM;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGtB,MAAM,CAACqB,KAAgC;AAC1E,kBAAkBE,KAAA;EAAA,IAAC;IAAEhB;EAAgC,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import type { CSSProperties } from 'react';
|
|
2
1
|
import type { Browser } from 'detect-browser';
|
|
2
|
+
import type { CSSProperties } from 'react';
|
|
3
3
|
import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
4
4
|
export declare const StyledTextArea: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
5
|
type StyledTextAreaInputProps = WithTheme<{
|
|
6
6
|
$maxHeight: CSSProperties['maxHeight'];
|
|
7
7
|
$minHeight: CSSProperties['minHeight'];
|
|
8
|
+
$shouldChangeColor: boolean;
|
|
8
9
|
$isOverflowing: boolean;
|
|
9
10
|
$browser: Browser | 'bot' | null | undefined;
|
|
10
11
|
}>;
|
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.585",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "9ae196d3f395e90749eee152d4ac1fd60b971e34"
|
|
87
87
|
}
|