@chayns-components/core 5.0.43 → 5.0.44

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 (15) hide show
  1. package/lib/cjs/components/list/List.js +60 -46
  2. package/lib/cjs/components/list/List.js.map +1 -1
  3. package/lib/cjs/components/text-area/TextArea.js +140 -56
  4. package/lib/cjs/components/text-area/TextArea.js.map +1 -1
  5. package/lib/cjs/components/text-area/TextArea.styles.js +10 -9
  6. package/lib/cjs/components/text-area/TextArea.styles.js.map +1 -1
  7. package/lib/esm/components/list/List.js +60 -46
  8. package/lib/esm/components/list/List.js.map +1 -1
  9. package/lib/esm/components/text-area/TextArea.js +140 -56
  10. package/lib/esm/components/text-area/TextArea.js.map +1 -1
  11. package/lib/esm/components/text-area/TextArea.styles.js +10 -9
  12. package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
  13. package/lib/types/components/text-area/TextArea.d.ts +8 -0
  14. package/lib/types/components/text-area/TextArea.styles.d.ts +5 -1
  15. package/package.json +2 -2
package/lib/cjs/components/list/List.js CHANGED
@@ -18,12 +18,13 @@ ListContext.displayName = 'ListContext';
18
18
  const List = t0 => {
19
19
  "use memo";
20
20
 
21
- const $ = (0, _reactCompilerRuntime.c)(13);
21
+ const $ = (0, _reactCompilerRuntime.c)(14);
22
22
  const {
23
23
  children,
24
24
  isWrapped: t1
25
25
  } = t0;
26
26
  const isWrapped = t1 === undefined ? false : t1;
27
+ const isListItemElement = _temp;
27
28
  const [openItemUuid, setOpenItemUuid] = (0, _react2.useState)(undefined);
28
29
  let t2;
29
30
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -43,77 +44,90 @@ const List = t0 => {
43
44
  t2 = $[0];
44
45
  }
45
46
  const updateOpenItemUuid = t2;
46
- const hasExpandableChildren = _temp;
47
47
  let t3;
48
- if ($[1] !== children) {
49
- t3 = hasExpandableChildren(children);
50
- $[1] = children;
51
- $[2] = t3;
48
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
49
+ t3 = node => {
50
+ let found = false;
51
+ _react2.default.Children.forEach(node, child_0 => {
52
+ if (found) {
53
+ return;
54
+ }
55
+ if (isListItemElement(child_0) && child_0.props.children !== undefined) {
56
+ found = true;
57
+ }
58
+ });
59
+ return found;
60
+ };
61
+ $[1] = t3;
52
62
  } else {
53
- t3 = $[2];
63
+ t3 = $[1];
54
64
  }
65
+ const hasExpandableChildren = t3;
55
66
  let t4;
56
- if ($[3] !== isWrapped || $[4] !== openItemUuid || $[5] !== t3) {
57
- t4 = {
58
- isAnyItemExpandable: t3,
67
+ if ($[2] !== children) {
68
+ t4 = hasExpandableChildren(children);
69
+ $[2] = children;
70
+ $[3] = t4;
71
+ } else {
72
+ t4 = $[3];
73
+ }
74
+ let t5;
75
+ if ($[4] !== isWrapped || $[5] !== openItemUuid || $[6] !== t4) {
76
+ t5 = {
77
+ isAnyItemExpandable: t4,
59
78
  isWrapped,
60
79
  openItemUuid,
61
80
  updateOpenItemUuid
62
81
  };
63
- $[3] = isWrapped;
64
- $[4] = openItemUuid;
65
- $[5] = t3;
82
+ $[4] = isWrapped;
83
+ $[5] = openItemUuid;
66
84
  $[6] = t4;
85
+ $[7] = t5;
67
86
  } else {
68
- t4 = $[6];
87
+ t5 = $[7];
69
88
  }
70
- const providerValue = t4;
71
- let t5;
72
- if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
73
- t5 = {
89
+ const providerValue = t5;
90
+ let t6;
91
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
92
+ t6 = {
74
93
  type: "tween"
75
94
  };
76
- $[7] = t5;
95
+ $[8] = t6;
77
96
  } else {
78
- t5 = $[7];
97
+ t6 = $[8];
79
98
  }
80
- let t6;
81
- if ($[8] !== children) {
82
- t6 = /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
83
- transition: t5
99
+ let t7;
100
+ if ($[9] !== children) {
101
+ t7 = /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
102
+ transition: t6
84
103
  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
85
104
  initial: false
86
105
  }, children));
87
- $[8] = children;
88
- $[9] = t6;
106
+ $[9] = children;
107
+ $[10] = t7;
89
108
  } else {
90
- t6 = $[9];
109
+ t7 = $[10];
91
110
  }
92
- let t7;
93
- if ($[10] !== providerValue || $[11] !== t6) {
94
- t7 = /*#__PURE__*/_react2.default.createElement(ListContext.Provider, {
111
+ let t8;
112
+ if ($[11] !== providerValue || $[12] !== t7) {
113
+ t8 = /*#__PURE__*/_react2.default.createElement(ListContext.Provider, {
95
114
  value: providerValue
96
- }, t6);
97
- $[10] = providerValue;
98
- $[11] = t6;
115
+ }, t7);
116
+ $[11] = providerValue;
99
117
  $[12] = t7;
118
+ $[13] = t8;
100
119
  } else {
101
- t7 = $[12];
120
+ t8 = $[13];
102
121
  }
103
- return t7;
122
+ return t8;
104
123
  };
105
124
  List.displayName = 'List';
106
125
  var _default = exports.default = List;
107
- function _temp(node) {
108
- let found = false;
109
- _react2.default.Children.forEach(node, child => {
110
- if (found) {
111
- return;
112
- }
113
- if (/*#__PURE__*/_react2.default.isValidElement(child) && child.props.children !== undefined) {
114
- found = true;
115
- }
116
- });
117
- return found;
126
+ function _temp(child) {
127
+ if (! /*#__PURE__*/_react2.default.isValidElement(child)) {
128
+ return false;
129
+ }
130
+ const elementType = child.type;
131
+ return elementType.displayName === "ListItem" || elementType.name === "ListItem";
118
132
  }
119
133
  //# sourceMappingURL=List.js.map
package/lib/cjs/components/list/List.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","names":["_react","require","_react2","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListContext","exports","React","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_reactCompilerRuntime","c","children","t1","setOpenItemUuid","useState","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","hasExpandableChildren","_temp","t4","providerValue","t5","type","t6","createElement","MotionConfig","transition","AnimatePresence","initial","t7","Provider","_default","node","found","Children","forEach","child","isValidElement","props"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n 'use memo';\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const hasExpandableChildren = (node: ReactNode): boolean => {\n let found = false;\n React.Children.forEach(node, (child) => {\n if (found) return;\n if (\n React.isValidElement<{\n children?: ReactNode;\n }>(child) &&\n child.props.children !== undefined\n ) {\n found = true;\n }\n });\n return found;\n };\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: hasExpandableChildren(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [children, isWrapped, openItemUuid, updateOpenItemUuid],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"List.js","names":["_react","require","_react2","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListContext","exports","React","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_reactCompilerRuntime","c","children","t1","isListItemElement","_temp","setOpenItemUuid","useState","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","node","found","Children","forEach","child_0","child","props","hasExpandableChildren","t4","t5","providerValue","t6","type","t7","createElement","MotionConfig","transition","AnimatePresence","initial","t8","Provider","_default","isValidElement","elementType","name"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n 'use memo';\n\n const isListItemElement = (\n child: ReactNode,\n ): child is React.ReactElement<{ children?: ReactNode }> => {\n if (!React.isValidElement(child)) {\n return false;\n }\n\n const elementType = child.type as { displayName?: string; name?: string };\n\n return elementType.displayName === 'ListItem' || elementType.name === 'ListItem';\n };\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const hasExpandableChildren = (node: ReactNode): boolean => {\n let found = false;\n React.Children.forEach(node, (child) => {\n if (found) return;\n if (isListItemElement(child) && child.props.children !== undefined) {\n found = true;\n }\n });\n return found;\n };\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: hasExpandableChildren(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [children, isWrapped, openItemUuid, updateOpenItemUuid],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/text-area/TextArea.js CHANGED
@@ -4,74 +4,158 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ var _reactCompilerRuntime = require("react-compiler-runtime");
7
8
  var _react = _interopRequireWildcard(require("react"));
8
9
  var _AreaContextProvider = require("../area-provider/AreaContextProvider");
9
10
  var _Input = require("../input/Input.styles");
10
11
  var _TextArea = require("./TextArea.styles");
11
12
  var _resize = require("../../hooks/resize");
12
13
  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); }
13
- const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
14
- isDisabled,
15
- isInvalid,
16
- placeholder,
17
- value,
18
- onChange,
19
- onFocus,
20
- onKeyDown,
21
- rightElement,
22
- onBlur,
23
- maxHeight = '120px',
24
- minHeight = '41px'
25
- }, ref) => {
14
+ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
15
+ "use memo";
16
+
26
17
  var _rightElement$props;
18
+ const $ = (0, _reactCompilerRuntime.c)(28);
19
+ const {
20
+ isDisabled,
21
+ isInvalid,
22
+ placeholder,
23
+ value,
24
+ onChange,
25
+ onFocus,
26
+ onKeyDown,
27
+ rightElement,
28
+ onBlur,
29
+ maxHeight: t1,
30
+ minHeight: t2,
31
+ colors
32
+ } = t0;
33
+ const maxHeight = t1 === undefined ? "120px" : t1;
34
+ const minHeight = t2 === undefined ? "41px" : t2;
27
35
  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
28
36
  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
29
37
  const textareaRef = (0, _react.useRef)(null);
30
38
  (0, _resize.useCursorRepaint)(textareaRef);
31
-
32
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
33
39
  const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
34
- const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
35
- const adjustTextareaHeight = (0, _react.useCallback)(() => {
36
- if (textareaRef.current) {
37
- textareaRef.current.style.height = 'auto';
38
- textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
39
- setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
40
- }
41
- }, [maxHeight]);
42
- (0, _react.useImperativeHandle)(ref, () => textareaRef.current);
43
-
44
- /**
45
- * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
46
- * To maintain the functionality while clearing the input, the length need to be greater than -1.
47
- */
48
- (0, _react.useEffect)(() => {
49
- if (typeof value === 'string' && value.length > -1) {
50
- adjustTextareaHeight();
51
- }
52
- }, [adjustTextareaHeight, value]);
53
- return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
54
- $isDisabled: isDisabled
55
- }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
56
- $isInvalid: isInvalid,
57
- $shouldChangeColor: shouldChangeColor
58
- }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
59
- className: "chayns-scrollbar",
60
- disabled: isDisabled,
61
- $isInvalid: isInvalid,
62
- ref: textareaRef,
63
- value: value,
64
- onBlur: onBlur,
65
- onChange: onChange,
66
- onFocus: onFocus,
67
- onKeyDown: onKeyDown,
68
- $maxHeight: maxHeight,
69
- $minHeight: minHeight,
70
- $isOverflowing: isOverflowing,
71
- rows: 1
72
- }), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
73
- $isInvalid: isInvalid
74
- }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
40
+ const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
41
+ let t3;
42
+ if ($[0] !== maxHeight) {
43
+ t3 = () => {
44
+ if (textareaRef.current) {
45
+ textareaRef.current.style.height = "auto";
46
+ textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
47
+ setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
48
+ }
49
+ };
50
+ $[0] = maxHeight;
51
+ $[1] = t3;
52
+ } else {
53
+ t3 = $[1];
54
+ }
55
+ const adjustTextareaHeight = t3;
56
+ let t4;
57
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
58
+ t4 = () => textareaRef.current;
59
+ $[2] = t4;
60
+ } else {
61
+ t4 = $[2];
62
+ }
63
+ (0, _react.useImperativeHandle)(ref, t4);
64
+ let t5;
65
+ let t6;
66
+ if ($[3] !== adjustTextareaHeight || $[4] !== value) {
67
+ t5 = () => {
68
+ if (typeof value === "string" && value.length > -1) {
69
+ adjustTextareaHeight();
70
+ }
71
+ };
72
+ t6 = [adjustTextareaHeight, value];
73
+ $[3] = adjustTextareaHeight;
74
+ $[4] = value;
75
+ $[5] = t5;
76
+ $[6] = t6;
77
+ } else {
78
+ t5 = $[5];
79
+ t6 = $[6];
80
+ }
81
+ (0, _react.useEffect)(t5, t6);
82
+ const hasValue = value && value.length > 0;
83
+ let t7;
84
+ if ($[7] !== hasValue) {
85
+ t7 = hasValue ? {
86
+ bottom: "2px",
87
+ right: "2px"
88
+ } : {
89
+ top: "12px",
90
+ left: "10px"
91
+ };
92
+ $[7] = hasValue;
93
+ $[8] = t7;
94
+ } else {
95
+ t7 = $[8];
96
+ }
97
+ const labelPosition = t7;
98
+ let t8;
99
+ if ($[9] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== value) {
100
+ colors === null || colors === void 0 || colors.backgroundColor;
101
+ colors === null || colors === void 0 || colors.borderColor;
102
+ t8 = (() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
103
+ $isDisabled: isDisabled
104
+ }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
105
+ $isInvalid: isInvalid,
106
+ $shouldChangeColor: shouldChangeColor,
107
+ $backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundColor,
108
+ $borderColor: colors === null || colors === void 0 ? void 0 : colors.borderColor
109
+ }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
110
+ className: "chayns-scrollbar",
111
+ disabled: isDisabled,
112
+ $isInvalid: isInvalid,
113
+ ref: textareaRef,
114
+ value: value,
115
+ onBlur: onBlur,
116
+ onChange: onChange,
117
+ onFocus: onFocus,
118
+ onKeyDown: onKeyDown,
119
+ $maxHeight: maxHeight,
120
+ $minHeight: minHeight,
121
+ $isOverflowing: isOverflowing,
122
+ rows: 1
123
+ }), /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, {
124
+ animate: {
125
+ fontSize: hasValue ? "9px" : undefined
126
+ },
127
+ initial: false,
128
+ layout: true,
129
+ style: labelPosition,
130
+ transition: {
131
+ type: "tween"
132
+ }
133
+ }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
134
+ $isInvalid: isInvalid
135
+ }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)))();
136
+ $[9] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
137
+ $[10] = colors === null || colors === void 0 ? void 0 : colors.borderColor;
138
+ $[11] = hasValue;
139
+ $[12] = isDisabled;
140
+ $[13] = isInvalid;
141
+ $[14] = isOverflowing;
142
+ $[15] = labelPosition;
143
+ $[16] = maxHeight;
144
+ $[17] = minHeight;
145
+ $[18] = onBlur;
146
+ $[19] = onChange;
147
+ $[20] = onFocus;
148
+ $[21] = onKeyDown;
149
+ $[22] = placeholder;
150
+ $[23] = rightElement;
151
+ $[24] = shouldChangeColor;
152
+ $[25] = shouldShowBorder;
153
+ $[26] = value;
154
+ $[27] = t8;
155
+ } else {
156
+ t8 = $[27];
157
+ }
158
+ return t8;
75
159
  });
76
160
  TextArea.displayName = 'TextArea';
77
161
  var _default = exports.default = TextArea;
package/lib/cjs/components/text-area/TextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_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","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","className","disabled","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\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 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 className=\"chayns-scrollbar\"\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 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":["_react","_interopRequireWildcard","require","_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","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","useImperativeHandle","t5","t6","length","useEffect","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","fontSize","initial","layout","transition","type","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\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 * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\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 colors,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\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 const hasValue = value && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\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 <StyledTextAreaLabelWrapper\n animate={{ fontSize: hasValue ? '9px' : undefined }}\n initial={false}\n layout\n style={labelPosition}\n transition={{ type: 'tween' }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && rightElement}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/text-area/TextArea.styles.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.StyledTextAreaLabelWrapper = exports.StyledTextAreaLabel = exports.StyledTextAreaInput = exports.StyledTextAreaContentWrapper = exports.StyledTextAreaContent = exports.StyledTextArea = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _react = require("motion/react");
8
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
10
  const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
10
11
  display: flex;
@@ -18,14 +19,16 @@ const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
18
19
  const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _styledComponents.default.div`
19
20
  background-color: ${({
20
21
  theme,
21
- $shouldChangeColor
22
- }) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
22
+ $shouldChangeColor,
23
+ $backgroundColor
24
+ }) => $backgroundColor ?? (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};
23
25
  border-radius: 3px;
24
26
  border: 1px solid
25
27
  ${({
26
28
  theme,
27
- $isInvalid
28
- }) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
29
+ $isInvalid,
30
+ $borderColor
31
+ }) => $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};
29
32
  width: 100%;
30
33
  display: flex;
31
34
  `;
@@ -55,10 +58,8 @@ const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.defa
55
58
  padding: 8px 10px;
56
59
  cursor: text;
57
60
  `;
58
- const StyledTextAreaLabelWrapper = exports.StyledTextAreaLabelWrapper = _styledComponents.default.label`
59
- left: 10px;
60
- top: 12px;
61
- align-items: baseline;
61
+ const StyledTextAreaLabelWrapper = exports.StyledTextAreaLabelWrapper = (0, _styledComponents.default)(_react.motion.label)`
62
+ align-items: center;
62
63
  display: flex;
63
64
  flex: 0 0 auto;
64
65
  gap: 4px;
@@ -66,7 +67,7 @@ const StyledTextAreaLabelWrapper = exports.StyledTextAreaLabelWrapper = _styledC
66
67
  pointer-events: none;
67
68
  position: absolute;
68
69
  user-select: none;
69
- width: calc(100% - 20px);
70
+ max-width: calc(100% - 20px);
70
71
  cursor: text;
71
72
  `;
72
73
  const StyledTextAreaLabel = exports.StyledTextAreaLabel = _styledComponents.default.label`
package/lib/cjs/components/text-area/TextArea.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\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<{\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\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\n ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\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\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<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${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`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAOM,MAAMC,4BAA4B,GAAAJ,OAAA,CAAAI,4BAAA,GAAGH,yBAAM,CAACC,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAsD,CAAC,KACjFD,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEG;AAA8C,CAAC,KACvDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AACjE;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAV,OAAA,CAAAU,qBAAA,GAAGT,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASM,MAAMS,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAGV,yBAAM,CAACW,QAAkC;AAC5E,aAAa,CAAC;EAAEP,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACQ,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAjB,OAAA,CAAAiB,0BAAA,GAAGhB,yBAAM,CAACiB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAnB,OAAA,CAAAmB,mBAAA,GAAGlB,yBAAM,CAACiB,KAA+B;AACzE,aAAa,CAAC;EAAEb,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,QAAQJ,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","e","__esModule","default","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","motion","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\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`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $borderColor?: CSSProperties['borderColor'];\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n $backgroundColor ??\n (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid, $borderColor }) =>\n $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\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\nexport const StyledTextAreaLabelWrapper = styled(motion.label)`\n align-items: center;\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 max-width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${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`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAI/B,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQM,MAAMC,4BAA4B,GAAAJ,OAAA,CAAAI,4BAAA,GAAGH,yBAAM,CAACC,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC,kBAAkB;EAAEC;AAAiB,CAAC,KAChEA,gBAAgB,KACfF,KAAK,CAACG,SAAS,KAAK,SAAS,IAAIF,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3F;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEI,UAAU;EAAEC;AAAa,CAAC,KAClCA,YAAY,KAAKD,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,0BAA0B,CAAC;AACnF;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAZ,OAAA,CAAAY,qBAAA,GAAGX,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASM,MAAMW,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAGZ,yBAAM,CAACa,QAAkC;AAC5E,aAAa,CAAC;EAAET,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACU,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAnB,OAAA,CAAAmB,0BAAA,GAAG,IAAAlB,yBAAM,EAACmB,aAAM,CAACC,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAtB,OAAA,CAAAsB,mBAAA,GAAGrB,yBAAM,CAACoB,KAA+B;AACzE,aAAa,CAAC;EAAEhB,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
package/lib/esm/components/list/List.js CHANGED
@@ -11,12 +11,13 @@ ListContext.displayName = 'ListContext';
11
11
  const List = t0 => {
12
12
  "use memo";
13
13
 
14
- const $ = _c(13);
14
+ const $ = _c(14);
15
15
  const {
16
16
  children,
17
17
  isWrapped: t1
18
18
  } = t0;
19
19
  const isWrapped = t1 === undefined ? false : t1;
20
+ const isListItemElement = _temp;
20
21
  const [openItemUuid, setOpenItemUuid] = useState(undefined);
21
22
  let t2;
22
23
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -36,77 +37,90 @@ const List = t0 => {
36
37
  t2 = $[0];
37
38
  }
38
39
  const updateOpenItemUuid = t2;
39
- const hasExpandableChildren = _temp;
40
40
  let t3;
41
- if ($[1] !== children) {
42
- t3 = hasExpandableChildren(children);
43
- $[1] = children;
44
- $[2] = t3;
41
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
42
+ t3 = node => {
43
+ let found = false;
44
+ React.Children.forEach(node, child_0 => {
45
+ if (found) {
46
+ return;
47
+ }
48
+ if (isListItemElement(child_0) && child_0.props.children !== undefined) {
49
+ found = true;
50
+ }
51
+ });
52
+ return found;
53
+ };
54
+ $[1] = t3;
45
55
  } else {
46
- t3 = $[2];
56
+ t3 = $[1];
47
57
  }
58
+ const hasExpandableChildren = t3;
48
59
  let t4;
49
- if ($[3] !== isWrapped || $[4] !== openItemUuid || $[5] !== t3) {
50
- t4 = {
51
- isAnyItemExpandable: t3,
60
+ if ($[2] !== children) {
61
+ t4 = hasExpandableChildren(children);
62
+ $[2] = children;
63
+ $[3] = t4;
64
+ } else {
65
+ t4 = $[3];
66
+ }
67
+ let t5;
68
+ if ($[4] !== isWrapped || $[5] !== openItemUuid || $[6] !== t4) {
69
+ t5 = {
70
+ isAnyItemExpandable: t4,
52
71
  isWrapped,
53
72
  openItemUuid,
54
73
  updateOpenItemUuid
55
74
  };
56
- $[3] = isWrapped;
57
- $[4] = openItemUuid;
58
- $[5] = t3;
75
+ $[4] = isWrapped;
76
+ $[5] = openItemUuid;
59
77
  $[6] = t4;
78
+ $[7] = t5;
60
79
  } else {
61
- t4 = $[6];
80
+ t5 = $[7];
62
81
  }
63
- const providerValue = t4;
64
- let t5;
65
- if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
66
- t5 = {
82
+ const providerValue = t5;
83
+ let t6;
84
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
85
+ t6 = {
67
86
  type: "tween"
68
87
  };
69
- $[7] = t5;
88
+ $[8] = t6;
70
89
  } else {
71
- t5 = $[7];
90
+ t6 = $[8];
72
91
  }
73
- let t6;
74
- if ($[8] !== children) {
75
- t6 = /*#__PURE__*/React.createElement(MotionConfig, {
76
- transition: t5
92
+ let t7;
93
+ if ($[9] !== children) {
94
+ t7 = /*#__PURE__*/React.createElement(MotionConfig, {
95
+ transition: t6
77
96
  }, /*#__PURE__*/React.createElement(AnimatePresence, {
78
97
  initial: false
79
98
  }, children));
80
- $[8] = children;
81
- $[9] = t6;
99
+ $[9] = children;
100
+ $[10] = t7;
82
101
  } else {
83
- t6 = $[9];
102
+ t7 = $[10];
84
103
  }
85
- let t7;
86
- if ($[10] !== providerValue || $[11] !== t6) {
87
- t7 = /*#__PURE__*/React.createElement(ListContext.Provider, {
104
+ let t8;
105
+ if ($[11] !== providerValue || $[12] !== t7) {
106
+ t8 = /*#__PURE__*/React.createElement(ListContext.Provider, {
88
107
  value: providerValue
89
- }, t6);
90
- $[10] = providerValue;
91
- $[11] = t6;
108
+ }, t7);
109
+ $[11] = providerValue;
92
110
  $[12] = t7;
111
+ $[13] = t8;
93
112
  } else {
94
- t7 = $[12];
113
+ t8 = $[13];
95
114
  }
96
- return t7;
115
+ return t8;
97
116
  };
98
117
  List.displayName = 'List';
99
118
  export default List;
100
- function _temp(node) {
101
- let found = false;
102
- React.Children.forEach(node, child => {
103
- if (found) {
104
- return;
105
- }
106
- if (/*#__PURE__*/React.isValidElement(child) && child.props.children !== undefined) {
107
- found = true;
108
- }
109
- });
110
- return found;
119
+ function _temp(child) {
120
+ if (! /*#__PURE__*/React.isValidElement(child)) {
121
+ return false;
122
+ }
123
+ const elementType = child.type;
124
+ return elementType.displayName === "ListItem" || elementType.name === "ListItem";
111
125
  }
112
126
  //# sourceMappingURL=List.js.map
package/lib/esm/components/list/List.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_c","children","t1","setOpenItemUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","hasExpandableChildren","_temp","t4","providerValue","t5","type","t6","createElement","transition","initial","t7","Provider","node","found","Children","forEach","child","isValidElement","props"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n 'use memo';\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const hasExpandableChildren = (node: ReactNode): boolean => {\n let found = false;\n React.Children.forEach(node, (child) => {\n if (found) return;\n if (\n React.isValidElement<{\n children?: ReactNode;\n }>(child) &&\n child.props.children !== undefined\n ) {\n found = true;\n }\n });\n return found;\n };\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: hasExpandableChildren(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [children, isWrapped, openItemUuid, updateOpenItemUuid],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_c","children","t1","isListItemElement","_temp","setOpenItemUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","node","found","Children","forEach","child_0","child","props","hasExpandableChildren","t4","t5","providerValue","t6","type","t7","createElement","transition","initial","t8","Provider","isValidElement","elementType","name"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n 'use memo';\n\n const isListItemElement = (\n child: ReactNode,\n ): child is React.ReactElement<{ children?: ReactNode }> => {\n if (!React.isValidElement(child)) {\n return false;\n }\n\n const elementType = child.type as { displayName?: string; name?: string };\n\n return elementType.displayName === 'ListItem' || elementType.name === 'ListItem';\n };\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const hasExpandableChildren = (node: ReactNode): boolean => {\n let found = false;\n React.Children.forEach(node, (child) => {\n if (found) return;\n if (isListItemElement(child) && child.props.children !== undefined) {\n found = true;\n }\n });\n return found;\n };\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: hasExpandableChildren(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [children, isWrapped, openItemUuid, updateOpenItemUuid],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/text-area/TextArea.js CHANGED
@@ -1,69 +1,153 @@
1
+ import { c as _c } from "react-compiler-runtime";
1
2
  import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
2
3
  import { AreaContext } from '../area-provider/AreaContextProvider';
3
4
  import { StyledInputRightElement } from '../input/Input.styles';
4
5
  import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
5
6
  import { useCursorRepaint } from '../../hooks/resize';
6
- const TextArea = /*#__PURE__*/forwardRef(({
7
- isDisabled,
8
- isInvalid,
9
- placeholder,
10
- value,
11
- onChange,
12
- onFocus,
13
- onKeyDown,
14
- rightElement,
15
- onBlur,
16
- maxHeight = '120px',
17
- minHeight = '41px'
18
- }, ref) => {
7
+ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
8
+ "use memo";
9
+
10
+ const $ = _c(28);
11
+ const {
12
+ isDisabled,
13
+ isInvalid,
14
+ placeholder,
15
+ value,
16
+ onChange,
17
+ onFocus,
18
+ onKeyDown,
19
+ rightElement,
20
+ onBlur,
21
+ maxHeight: t1,
22
+ minHeight: t2,
23
+ colors
24
+ } = t0;
25
+ const maxHeight = t1 === undefined ? "120px" : t1;
26
+ const minHeight = t2 === undefined ? "41px" : t2;
19
27
  const [isOverflowing, setIsOverflowing] = useState(false);
20
28
  const areaProvider = useContext(AreaContext);
21
29
  const textareaRef = useRef(null);
22
30
  useCursorRepaint(textareaRef);
23
-
24
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
25
31
  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
26
- const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
27
- const adjustTextareaHeight = useCallback(() => {
28
- if (textareaRef.current) {
29
- textareaRef.current.style.height = 'auto';
30
- textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
31
- setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
32
- }
33
- }, [maxHeight]);
34
- useImperativeHandle(ref, () => textareaRef.current);
35
-
36
- /**
37
- * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
38
- * To maintain the functionality while clearing the input, the length need to be greater than -1.
39
- */
40
- useEffect(() => {
41
- if (typeof value === 'string' && value.length > -1) {
42
- adjustTextareaHeight();
43
- }
44
- }, [adjustTextareaHeight, value]);
45
- return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, {
46
- $isDisabled: isDisabled
47
- }, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
48
- $isInvalid: isInvalid,
49
- $shouldChangeColor: shouldChangeColor
50
- }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
51
- className: "chayns-scrollbar",
52
- disabled: isDisabled,
53
- $isInvalid: isInvalid,
54
- ref: textareaRef,
55
- value: value,
56
- onBlur: onBlur,
57
- onChange: onChange,
58
- onFocus: onFocus,
59
- onKeyDown: onKeyDown,
60
- $maxHeight: maxHeight,
61
- $minHeight: minHeight,
62
- $isOverflowing: isOverflowing,
63
- rows: 1
64
- }), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
65
- $isInvalid: isInvalid
66
- }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
32
+ const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
33
+ let t3;
34
+ if ($[0] !== maxHeight) {
35
+ t3 = () => {
36
+ if (textareaRef.current) {
37
+ textareaRef.current.style.height = "auto";
38
+ textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
39
+ setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
40
+ }
41
+ };
42
+ $[0] = maxHeight;
43
+ $[1] = t3;
44
+ } else {
45
+ t3 = $[1];
46
+ }
47
+ const adjustTextareaHeight = t3;
48
+ let t4;
49
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
50
+ t4 = () => textareaRef.current;
51
+ $[2] = t4;
52
+ } else {
53
+ t4 = $[2];
54
+ }
55
+ useImperativeHandle(ref, t4);
56
+ let t5;
57
+ let t6;
58
+ if ($[3] !== adjustTextareaHeight || $[4] !== value) {
59
+ t5 = () => {
60
+ if (typeof value === "string" && value.length > -1) {
61
+ adjustTextareaHeight();
62
+ }
63
+ };
64
+ t6 = [adjustTextareaHeight, value];
65
+ $[3] = adjustTextareaHeight;
66
+ $[4] = value;
67
+ $[5] = t5;
68
+ $[6] = t6;
69
+ } else {
70
+ t5 = $[5];
71
+ t6 = $[6];
72
+ }
73
+ useEffect(t5, t6);
74
+ const hasValue = value && value.length > 0;
75
+ let t7;
76
+ if ($[7] !== hasValue) {
77
+ t7 = hasValue ? {
78
+ bottom: "2px",
79
+ right: "2px"
80
+ } : {
81
+ top: "12px",
82
+ left: "10px"
83
+ };
84
+ $[7] = hasValue;
85
+ $[8] = t7;
86
+ } else {
87
+ t7 = $[8];
88
+ }
89
+ const labelPosition = t7;
90
+ let t8;
91
+ if ($[9] !== colors?.backgroundColor || $[10] !== colors?.borderColor || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== value) {
92
+ colors?.backgroundColor;
93
+ colors?.borderColor;
94
+ t8 = (() => /*#__PURE__*/React.createElement(StyledTextArea, {
95
+ $isDisabled: isDisabled
96
+ }, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
97
+ $isInvalid: isInvalid,
98
+ $shouldChangeColor: shouldChangeColor,
99
+ $backgroundColor: colors?.backgroundColor,
100
+ $borderColor: colors?.borderColor
101
+ }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
102
+ className: "chayns-scrollbar",
103
+ disabled: isDisabled,
104
+ $isInvalid: isInvalid,
105
+ ref: textareaRef,
106
+ value: value,
107
+ onBlur: onBlur,
108
+ onChange: onChange,
109
+ onFocus: onFocus,
110
+ onKeyDown: onKeyDown,
111
+ $maxHeight: maxHeight,
112
+ $minHeight: minHeight,
113
+ $isOverflowing: isOverflowing,
114
+ rows: 1
115
+ }), /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, {
116
+ animate: {
117
+ fontSize: hasValue ? "9px" : undefined
118
+ },
119
+ initial: false,
120
+ layout: true,
121
+ style: labelPosition,
122
+ transition: {
123
+ type: "tween"
124
+ }
125
+ }, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
126
+ $isInvalid: isInvalid
127
+ }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)))();
128
+ $[9] = colors?.backgroundColor;
129
+ $[10] = colors?.borderColor;
130
+ $[11] = hasValue;
131
+ $[12] = isDisabled;
132
+ $[13] = isInvalid;
133
+ $[14] = isOverflowing;
134
+ $[15] = labelPosition;
135
+ $[16] = maxHeight;
136
+ $[17] = minHeight;
137
+ $[18] = onBlur;
138
+ $[19] = onChange;
139
+ $[20] = onFocus;
140
+ $[21] = onKeyDown;
141
+ $[22] = placeholder;
142
+ $[23] = rightElement;
143
+ $[24] = shouldChangeColor;
144
+ $[25] = shouldShowBorder;
145
+ $[26] = value;
146
+ $[27] = t8;
147
+ } else {
148
+ t8 = $[27];
149
+ }
150
+ return t8;
67
151
  });
68
152
  TextArea.displayName = 'TextArea';
69
153
  export default TextArea;
package/lib/esm/components/text-area/TextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","names":["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","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","className","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\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 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 className=\"chayns-scrollbar\"\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 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":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","t5","t6","length","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","$backgroundColor","$borderColor","className","rows","animate","fontSize","initial","layout","transition","type","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\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 * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\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 colors,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\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 const hasValue = value && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\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 <StyledTextAreaLabelWrapper\n animate={{ fontSize: hasValue ? '9px' : undefined }}\n initial={false}\n layout\n style={labelPosition}\n transition={{ type: 'tween' }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && rightElement}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/text-area/TextArea.styles.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import styled from 'styled-components';
2
+ import { motion } from 'motion/react';
2
3
  export const StyledTextArea = styled.div`
3
4
  display: flex;
4
5
  flex: 1 1 auto;
@@ -11,14 +12,16 @@ export const StyledTextArea = styled.div`
11
12
  export const StyledTextAreaContentWrapper = styled.div`
12
13
  background-color: ${({
13
14
  theme,
14
- $shouldChangeColor
15
- }) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
15
+ $shouldChangeColor,
16
+ $backgroundColor
17
+ }) => $backgroundColor ?? (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};
16
18
  border-radius: 3px;
17
19
  border: 1px solid
18
20
  ${({
19
21
  theme,
20
- $isInvalid
21
- }) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
22
+ $isInvalid,
23
+ $borderColor
24
+ }) => $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};
22
25
  width: 100%;
23
26
  display: flex;
24
27
  `;
@@ -48,10 +51,8 @@ export const StyledTextAreaInput = styled.textarea`
48
51
  padding: 8px 10px;
49
52
  cursor: text;
50
53
  `;
51
- export const StyledTextAreaLabelWrapper = styled.label`
52
- left: 10px;
53
- top: 12px;
54
- align-items: baseline;
54
+ export const StyledTextAreaLabelWrapper = styled(motion.label)`
55
+ align-items: center;
55
56
  display: flex;
56
57
  flex: 0 0 auto;
57
58
  gap: 4px;
@@ -59,7 +60,7 @@ export const StyledTextAreaLabelWrapper = styled.label`
59
60
  pointer-events: none;
60
61
  position: absolute;
61
62
  user-select: none;
62
- width: calc(100% - 20px);
63
+ max-width: calc(100% - 20px);
63
64
  cursor: text;
64
65
  `;
65
66
  export const StyledTextAreaLabel = styled.label`
package/lib/esm/components/text-area/TextArea.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.styles.js","names":["styled","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\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<{\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\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\n ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\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\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<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${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`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAMtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAOD,OAAO,MAAMC,4BAA4B,GAAGJ,MAAM,CAACE,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAsD,CAAC,KACjFD,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEG;AAA8C,CAAC,KACvDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGV,MAAM,CAACE,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMS,mBAAmB,GAAGX,MAAM,CAACY,QAAkC;AAC5E,aAAa,CAAC;EAAEP,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACQ,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGjB,MAAM,CAACkB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGnB,MAAM,CAACkB,KAA+B;AACzE,aAAa,CAAC;EAAEb,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,QAAQJ,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"TextArea.styles.js","names":["styled","motion","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\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`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $borderColor?: CSSProperties['borderColor'];\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n $backgroundColor ??\n (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid, $borderColor }) =>\n $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\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\nexport const StyledTextAreaLabelWrapper = styled(motion.label)`\n align-items: center;\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 max-width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${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`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,SAASC,MAAM,QAAQ,cAAc;AAIrC,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQD,OAAO,MAAMC,4BAA4B,GAAGL,MAAM,CAACG,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC,kBAAkB;EAAEC;AAAiB,CAAC,KAChEA,gBAAgB,KACfF,KAAK,CAACG,SAAS,KAAK,SAAS,IAAIF,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3F;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEI,UAAU;EAAEC;AAAa,CAAC,KAClCA,YAAY,KAAKD,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,0BAA0B,CAAC;AACnF;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGb,MAAM,CAACG,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMW,mBAAmB,GAAGd,MAAM,CAACe,QAAkC;AAC5E,aAAa,CAAC;EAAET,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACU,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGpB,MAAM,CAACC,MAAM,CAACoB,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGtB,MAAM,CAACqB,KAA+B;AACzE,aAAa,CAAC;EAAEf,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
package/lib/types/components/text-area/TextArea.d.ts CHANGED
@@ -1,4 +1,8 @@
1
1
  import React, { ChangeEventHandler, CSSProperties, FocusEventHandler, KeyboardEventHandler, ReactElement } from 'react';
2
+ type TextAreaColors = {
3
+ backgroundColor: CSSProperties['backgroundColor'];
4
+ borderColor: CSSProperties['borderColor'];
5
+ };
2
6
  export type TextAreaProps = {
3
7
  /**
4
8
  * Disables the text area so that it cannot be changed.
@@ -44,6 +48,10 @@ export type TextAreaProps = {
44
48
  * Value if the text area should be controlled.
45
49
  */
46
50
  value?: string;
51
+ /**
52
+ * Provide custom colors to the TextArea Component
53
+ */
54
+ colors?: TextAreaColors;
47
55
  };
48
56
  declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
49
57
  export default TextArea;
package/lib/types/components/text-area/TextArea.styles.d.ts CHANGED
@@ -6,6 +6,8 @@ type StyledTextAreaProps = WithTheme<{
6
6
  }>;
7
7
  export declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTextAreaProps>> & string;
8
8
  type StyledTextAreaContentWrapperProps = WithTheme<{
9
+ $backgroundColor?: CSSProperties['backgroundColor'];
10
+ $borderColor?: CSSProperties['borderColor'];
9
11
  $isInvalid: TextAreaProps['isInvalid'];
10
12
  $shouldChangeColor: boolean;
11
13
  }>;
@@ -18,7 +20,9 @@ type StyledTextAreaInputProps = WithTheme<{
18
20
  $minHeight: CSSProperties['minHeight'];
19
21
  }>;
20
22
  export declare const StyledTextAreaInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextAreaInputProps>> & string;
21
- export declare const StyledTextAreaLabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
23
+ export declare const StyledTextAreaLabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"label">, "ref"> & React.RefAttributes<HTMLLabelElement>, "ref"> & {
24
+ ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
25
+ }, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLLabelElement, import("motion/react").HTMLMotionProps<"label">>, keyof React.Component<any, {}, any>>;
22
26
  type StyledTextAreaLabelProps = WithTheme<{
23
27
  $isInvalid?: TextAreaProps['isInvalid'];
24
28
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.43",
3
+ "version": "5.0.44",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -88,5 +88,5 @@
88
88
  "publishConfig": {
89
89
  "access": "public"
90
90
  },
91
- "gitHead": "998a1afd0cc53accf066791585df71e888a3aec7"
91
+ "gitHead": "9355b0582ecc6200f82b4c52f9636d95609a40b0"
92
92
  }