@activecollab/components 2.0.128 → 2.0.129

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 (17) hide show
  1. package/dist/cjs/components/Textarea/Styles.js +23 -2
  2. package/dist/cjs/components/Textarea/Styles.js.map +1 -1
  3. package/dist/cjs/components/Textarea/Textarea.js +52 -6
  4. package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
  5. package/dist/esm/components/Textarea/Styles.d.ts +2 -0
  6. package/dist/esm/components/Textarea/Styles.d.ts.map +1 -1
  7. package/dist/esm/components/Textarea/Styles.js +22 -1
  8. package/dist/esm/components/Textarea/Styles.js.map +1 -1
  9. package/dist/esm/components/Textarea/Textarea.d.ts +5 -1
  10. package/dist/esm/components/Textarea/Textarea.d.ts.map +1 -1
  11. package/dist/esm/components/Textarea/Textarea.js +41 -7
  12. package/dist/esm/components/Textarea/Textarea.js.map +1 -1
  13. package/dist/index.js +243 -184
  14. package/dist/index.js.map +1 -1
  15. package/dist/index.min.js +1 -1
  16. package/dist/index.min.js.map +1 -1
  17. package/package.json +1 -1
package/dist/cjs/components/Textarea/Styles.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledTextarea = void 0;
6
+ exports.StyledTextarea = exports.StyledTextAreaWrapper = exports.StyledProgressRingWrapper = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _BoxSizingStyle = require("../BoxSizingStyle");
9
9
  var _FontStyle = require("../FontStyle");
@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
12
12
  var StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea.withConfig({
13
13
  displayName: "Styles__StyledTextarea",
14
14
  componentId: "sc-m6jqw8-0"
15
- })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
15
+ })(["", " ", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
16
16
  "fontSize": "0.875rem"
17
17
  }, {
18
18
  "color": "var(--color-theme-900)"
@@ -22,6 +22,8 @@ var StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea
22
22
  "letterSpacing": "0.02em"
23
23
  }, {
24
24
  "fontWeight": "400"
25
+ }, {
26
+ "resize": "none"
25
27
  }, {
26
28
  "borderColor": "var(--color-theme-500)"
27
29
  }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
@@ -44,5 +46,24 @@ var StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea
44
46
  }, function (props) {
45
47
  return !props.disabled && props.$invalid && props.$mode === "flat" && (0, _styledComponents.css)(["color:var(--red-alert);"]);
46
48
  });
49
+ var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = _styledComponents.default.div.withConfig({
50
+ displayName: "Styles__StyledTextAreaWrapper",
51
+ componentId: "sc-m6jqw8-1"
52
+ })(["", ""], {
53
+ "position": "relative",
54
+ "display": "flex",
55
+ "width": "fit-content"
56
+ });
57
+ var StyledProgressRingWrapper = exports.StyledProgressRingWrapper = _styledComponents.default.div.withConfig({
58
+ displayName: "Styles__StyledProgressRingWrapper",
59
+ componentId: "sc-m6jqw8-2"
60
+ })(["", ""], {
61
+ "position": "absolute",
62
+ "bottom": "0.5rem",
63
+ "right": "0.5rem",
64
+ "display": "flex"
65
+ });
47
66
  StyledTextarea.displayName = "StyledTextarea";
67
+ StyledTextAreaWrapper.displayName = "StyledTextAreaWrapper";
68
+ StyledProgressRingWrapper.displayName = "StyledProgressRingWrapper";
48
69
  //# sourceMappingURL=Styles.js.map
package/dist/cjs/components/Textarea/Styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledTextarea","exports","styled","textarea","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n $invalid: boolean;\n $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n border-width: 1px;\n border-style: solid;\n background-color: var(--input-background-color);\n ${tw`tw-border-theme-500`}\n border-radius: 8px;\n padding: 4px 8px 6px 8px;\n height: auto;\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n outline: none;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n border: none;\n background-color: transparent;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ${tw`tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n !props.disabled &&\n !props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n &:active,\n &:focus,\n &:hover {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n ${tw`tw-text-theme-transparent-500`}\n }\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n `}\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"flat\" &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASlC,IAAMY,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wSACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAIjB;EAAA;AAAoB,CAAC,EAQvBC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,MAAM,QACtBC,qBAAG,gDAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,QAAQ,QACdD,qBAAG,YACG;IAAA;IAAA;EAAoC,CAAC,CAC1C;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,QAAQ,IACf,CAACH,KAAK,CAACI,QAAQ,IACfJ,KAAK,CAACC,KAAK,KAAK,UAAU,QAC1BC,qBAAG,sCAIK;IAAA;EAAkB,CAAC,CAE1B;AAAA,GAGG;EAAA;AAA8B,CAAC,EAGnC,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACI,QAAQ,IACdJ,KAAK,CAACC,KAAK,KAAK,UAAU,QAC1BC,qBAAG,YACG;IAAA;EAAgB,CAAC,CACtB;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACI,QAAQ,IACdJ,KAAK,CAACC,KAAK,KAAK,MAAM,QACtBC,qBAAG,8BAEF;AAAA,EACJ;AAEDX,cAAc,CAACK,WAAW,GAAG,gBAAgB"}
1
+ {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledTextarea","exports","styled","textarea","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","disabled","$invalid","StyledTextAreaWrapper","div","StyledProgressRingWrapper"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n $invalid: boolean;\n $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n ${tw`tw-resize-none`}\n border-width: 1px;\n border-style: solid;\n background-color: var(--input-background-color);\n ${tw`tw-border-theme-500`}\n border-radius: 8px;\n padding: 4px 8px 6px 8px;\n height: auto;\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n outline: none;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n border: none;\n background-color: transparent;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ${tw`tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n !props.disabled &&\n !props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n &:active,\n &:focus,\n &:hover {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n ${tw`tw-text-theme-transparent-500`}\n }\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n `}\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"flat\" &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nexport const StyledTextAreaWrapper = styled.div`\n ${tw`tw-w-fit tw-relative tw-flex`}\n`;\n\nexport const StyledProgressRingWrapper = styled.div`\n ${tw`tw-absolute tw-right-2 tw-bottom-2 tw-flex`}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\nStyledTextAreaWrapper.displayName = \"StyledTextAreaWrapper\";\nStyledProgressRingWrapper.displayName = \"StyledProgressRingWrapper\";\n"],"mappings":"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"}
package/dist/cjs/components/Textarea/Textarea.js CHANGED
@@ -7,14 +7,23 @@ exports.Textarea = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _classnames = _interopRequireDefault(require("classnames"));
9
9
  var _Styles = require("./Styles");
10
- var _excluded = ["className", "disabled", "invalid", "mode"];
10
+ var _utils = require("../../utils");
11
+ var _ProgressRing = require("../ProgressRing");
12
+ var _excluded = ["className", "disabled", "invalid", "mode", "maxLength", "value", "hideProgress", "onChange"];
11
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
16
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
18
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
19
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
20
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
21
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
22
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
23
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
16
24
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
17
25
  var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
26
+ var _value$length;
18
27
  var className = _ref.className,
19
28
  _ref$disabled = _ref.disabled,
20
29
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -22,17 +31,54 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
22
31
  invalid = _ref$invalid === void 0 ? false : _ref$invalid,
23
32
  _ref$mode = _ref.mode,
24
33
  mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
34
+ maxLength = _ref.maxLength,
35
+ value = _ref.value,
36
+ _ref$hideProgress = _ref.hideProgress,
37
+ hideProgress = _ref$hideProgress === void 0 ? false : _ref$hideProgress,
38
+ onChange = _ref.onChange,
25
39
  rest = _objectWithoutProperties(_ref, _excluded);
26
- return /*#__PURE__*/_react.default.createElement(_Styles.StyledTextarea, _extends({}, rest, {
40
+ var innerRef = (0, _react.useRef)(null);
41
+ var handleRef = (0, _utils.useForkRef)(ref, innerRef);
42
+ var _React$useState = _react.default.useState((_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0),
43
+ _React$useState2 = _slicedToArray(_React$useState, 2),
44
+ currentLength = _React$useState2[0],
45
+ setCurrentLength = _React$useState2[1];
46
+ var warningGauge = (0, _react.useMemo)(function () {
47
+ return 75 * Number(maxLength) / 100;
48
+ }, [maxLength]);
49
+ var progressColor = (0, _react.useMemo)(function () {
50
+ if (currentLength >= Number(maxLength)) {
51
+ return "var(--red-alert)";
52
+ }
53
+ if (currentLength > warningGauge && currentLength < Number(maxLength)) {
54
+ return "var(--warning)";
55
+ }
56
+ return "var(--color-sucess-green)";
57
+ }, [currentLength, maxLength, warningGauge]);
58
+ var max = Number(maxLength !== null && maxLength !== void 0 ? maxLength : 1);
59
+ var progress = Math.min(currentLength / max * 100, 100);
60
+ var handleChange = function handleChange(e) {
61
+ setCurrentLength(e.target.value.length);
62
+ if (onChange) {
63
+ onChange(e);
64
+ }
65
+ };
66
+ return /*#__PURE__*/_react.default.createElement(_Styles.StyledTextAreaWrapper, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledTextarea, _extends({}, rest, {
67
+ value: value,
27
68
  $invalid: invalid,
28
- ref: ref,
69
+ ref: handleRef,
29
70
  $mode: mode,
30
71
  disabled: disabled,
31
72
  "aria-invalid": invalid,
32
73
  className: (0, _classnames.default)("c-textarea", {
33
74
  "c-textarea__disabled": disabled
34
- }, className)
35
- }));
75
+ }, className),
76
+ onChange: handleChange
77
+ })), maxLength && !hideProgress && /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressRingWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressRing.ProgressRing, {
78
+ progress: progress,
79
+ radius: 10,
80
+ stroke: 1.5,
81
+ progressColor: progressColor
82
+ })));
36
83
  });
37
- Textarea.displayName = "Textarea";
38
84
  //# sourceMappingURL=Textarea.js.map
package/dist/cjs/components/Textarea/Textarea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Textarea","exports","forwardRef","_ref","ref","className","_ref$disabled","disabled","_ref$invalid","invalid","_ref$mode","mode","rest","createElement","StyledTextarea","$invalid","$mode","classnames","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n return (\n <StyledTextarea\n {...rest}\n $invalid={invalid}\n ref={ref}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n />\n );\n }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":"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"}
1
+ {"version":3,"file":"Textarea.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_utils","_ProgressRing","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Textarea","exports","forwardRef","_ref","ref","_value$length","className","_ref$disabled","disabled","_ref$invalid","invalid","_ref$mode","mode","maxLength","_ref$hideProgress","hideProgress","onChange","rest","innerRef","useRef","handleRef","useForkRef","_React$useState","React","useState","_React$useState2","currentLength","setCurrentLength","warningGauge","useMemo","Number","progressColor","max","progress","Math","min","handleChange","createElement","StyledTextAreaWrapper","StyledTextarea","$invalid","$mode","classnames","StyledProgressRingWrapper","ProgressRing","radius","stroke"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, Ref, useMemo, useRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n StyledProgressRingWrapper,\n StyledTextarea,\n StyledTextAreaWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { InputMode } from \"../Input/types\";\nimport { ProgressRing } from \"../ProgressRing\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n maxLength?: number;\n value?: string;\n hideProgress?: boolean;\n onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n maxLength,\n value,\n hideProgress = false,\n onChange,\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n const innerRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(ref, innerRef);\n\n const [currentLength, setCurrentLength] = React.useState<number>(\n value?.length ?? 0\n );\n\n const warningGauge = useMemo(\n () => (75 * Number(maxLength)) / 100,\n [maxLength]\n );\n\n const progressColor = useMemo(() => {\n if (currentLength >= Number(maxLength)) {\n return \"var(--red-alert)\";\n }\n if (currentLength > warningGauge && currentLength < Number(maxLength)) {\n return \"var(--warning)\";\n }\n return \"var(--color-sucess-green)\";\n }, [currentLength, maxLength, warningGauge]);\n\n const max = Number(maxLength ?? 1);\n\n const progress = Math.min((currentLength / max) * 100, 100);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentLength(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <StyledTextAreaWrapper>\n <StyledTextarea\n {...rest}\n value={value}\n $invalid={invalid}\n ref={handleRef}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n onChange={handleChange}\n />\n {maxLength && !hideProgress && (\n <StyledProgressRingWrapper>\n <ProgressRing\n progress={progress}\n radius={10}\n stroke={1.5}\n progressColor={progressColor}\n />\n </StyledProgressRingWrapper>\n )}\n </StyledTextAreaWrapper>\n );\n }\n);\n"],"mappings":"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"}
package/dist/esm/components/Textarea/Styles.d.ts CHANGED
@@ -5,5 +5,7 @@ interface StyledTextareaProps {
5
5
  $mode: InputMode;
6
6
  }
7
7
  export declare const StyledTextarea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
8
+ export declare const StyledTextAreaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const StyledProgressRingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
10
  export {};
9
11
  //# sourceMappingURL=Styles.d.ts.map
package/dist/esm/components/Textarea/Styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0FAgE1B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0FAiE1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAEjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oEAErC,CAAC"}
package/dist/esm/components/Textarea/Styles.js CHANGED
@@ -4,7 +4,7 @@ import { FontStyle } from "../FontStyle";
4
4
  export const StyledTextarea = styled.textarea.withConfig({
5
5
  displayName: "Styles__StyledTextarea",
6
6
  componentId: "sc-m6jqw8-0"
7
- })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
7
+ })(["", " ", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
8
8
  "fontSize": "0.875rem"
9
9
  }, {
10
10
  "color": "var(--color-theme-900)"
@@ -14,6 +14,8 @@ export const StyledTextarea = styled.textarea.withConfig({
14
14
  "letterSpacing": "0.02em"
15
15
  }, {
16
16
  "fontWeight": "400"
17
+ }, {
18
+ "resize": "none"
17
19
  }, {
18
20
  "borderColor": "var(--color-theme-500)"
19
21
  }, FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["border:none;background-color:transparent;"]), props => props.disabled && css(["", ""], {
@@ -26,5 +28,24 @@ export const StyledTextarea = styled.textarea.withConfig({
26
28
  }, props => !props.disabled && props.$invalid && props.$mode === "outlined" && css(["", ""], {
27
29
  "borderColor": "var(--red-alert)"
28
30
  }), props => !props.disabled && props.$invalid && props.$mode === "flat" && css(["color:var(--red-alert);"]));
31
+ export const StyledTextAreaWrapper = styled.div.withConfig({
32
+ displayName: "Styles__StyledTextAreaWrapper",
33
+ componentId: "sc-m6jqw8-1"
34
+ })(["", ""], {
35
+ "position": "relative",
36
+ "display": "flex",
37
+ "width": "fit-content"
38
+ });
39
+ export const StyledProgressRingWrapper = styled.div.withConfig({
40
+ displayName: "Styles__StyledProgressRingWrapper",
41
+ componentId: "sc-m6jqw8-2"
42
+ })(["", ""], {
43
+ "position": "absolute",
44
+ "bottom": "0.5rem",
45
+ "right": "0.5rem",
46
+ "display": "flex"
47
+ });
29
48
  StyledTextarea.displayName = "StyledTextarea";
49
+ StyledTextAreaWrapper.displayName = "StyledTextAreaWrapper";
50
+ StyledProgressRingWrapper.displayName = "StyledProgressRingWrapper";
30
51
  //# sourceMappingURL=Styles.js.map
package/dist/esm/components/Textarea/Styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","$mode","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n $invalid: boolean;\n $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n border-width: 1px;\n border-style: solid;\n background-color: var(--input-background-color);\n ${tw`tw-border-theme-500`}\n border-radius: 8px;\n padding: 4px 8px 6px 8px;\n height: auto;\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n outline: none;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n border: none;\n background-color: transparent;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ${tw`tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n !props.disabled &&\n !props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n &:active,\n &:focus,\n &:hover {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n ${tw`tw-text-theme-transparent-500`}\n }\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n `}\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"flat\" &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wSACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAIjB;EAAA;AAAoB,CAAC,EAQvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,+CAGF,EAEAQ,KAAK,IACNA,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACf,CAACF,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,6BAEF,CACJ;AAEDG,cAAc,CAACG,WAAW,GAAG,gBAAgB"}
1
+ {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","$mode","disabled","$invalid","StyledTextAreaWrapper","div","StyledProgressRingWrapper"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n $invalid: boolean;\n $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n ${tw`tw-resize-none`}\n border-width: 1px;\n border-style: solid;\n background-color: var(--input-background-color);\n ${tw`tw-border-theme-500`}\n border-radius: 8px;\n padding: 4px 8px 6px 8px;\n height: auto;\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n outline: none;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n border: none;\n background-color: transparent;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ${tw`tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n !props.disabled &&\n !props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n &:active,\n &:focus,\n &:hover {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n ${tw`tw-text-theme-transparent-500`}\n }\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n `}\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"flat\" &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nexport const StyledTextAreaWrapper = styled.div`\n ${tw`tw-w-fit tw-relative tw-flex`}\n`;\n\nexport const StyledProgressRingWrapper = styled.div`\n ${tw`tw-absolute tw-right-2 tw-bottom-2 tw-flex`}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\nStyledTextAreaWrapper.displayName = \"StyledTextAreaWrapper\";\nStyledProgressRingWrapper.displayName = \"StyledProgressRingWrapper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6SACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EACjB;EAAA;AAAe,CAAC,EAIhB;EAAA;AAAoB,CAAC,EAQvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,+CAGF,EAEAQ,KAAK,IACNA,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACf,CAACF,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,6BAEF,CACJ;AAED,OAAO,MAAMY,qBAAqB,GAAGb,MAAM,CAACc,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACzC;EAAA;EAAA;EAAA;AAA6B,CAAC,CACnC;AAED,OAAO,MAAMO,yBAAyB,GAAGf,MAAM,CAACc,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC7C;EAAA;EAAA;EAAA;EAAA;AAA2C,CAAC,CACjD;AAEDJ,cAAc,CAACG,WAAW,GAAG,gBAAgB;AAC7CM,qBAAqB,CAACN,WAAW,GAAG,uBAAuB;AAC3DQ,yBAAyB,CAACR,WAAW,GAAG,2BAA2B"}
package/dist/esm/components/Textarea/Textarea.d.ts CHANGED
@@ -1,8 +1,12 @@
1
- import React from "react";
1
+ import React, { ChangeEvent } from "react";
2
2
  import { InputMode } from "../Input/types";
3
3
  export interface TextareaProps {
4
4
  invalid?: boolean;
5
5
  mode?: InputMode;
6
+ maxLength?: number;
7
+ value?: string;
8
+ hideProgress?: boolean;
9
+ onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
6
10
  }
7
11
  export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof TextareaProps> & React.RefAttributes<HTMLTextAreaElement>>;
8
12
  //# sourceMappingURL=Textarea.d.ts.map
package/dist/esm/components/Textarea/Textarea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAK/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,qOA4BpB,CAAC"}
1
+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAoC,MAAM,OAAO,CAAC;AAU7E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,QAAQ,qOA+EpB,CAAC"}
package/dist/esm/components/Textarea/Textarea.js CHANGED
@@ -1,25 +1,59 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import React, { forwardRef } from "react";
2
+ import React, { forwardRef, useMemo, useRef } from "react";
3
3
  import classnames from "classnames";
4
- import { StyledTextarea } from "./Styles";
4
+ import { StyledProgressRingWrapper, StyledTextarea, StyledTextAreaWrapper } from "./Styles";
5
+ import { useForkRef } from "../../utils";
6
+ import { ProgressRing } from "../ProgressRing";
5
7
  export const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
8
+ var _value$length;
6
9
  let {
7
10
  className,
8
11
  disabled = false,
9
12
  invalid = false,
10
13
  mode = "outlined",
14
+ maxLength,
15
+ value,
16
+ hideProgress = false,
17
+ onChange,
11
18
  ...rest
12
19
  } = _ref;
13
- return /*#__PURE__*/React.createElement(StyledTextarea, _extends({}, rest, {
20
+ const innerRef = useRef(null);
21
+ const handleRef = useForkRef(ref, innerRef);
22
+ const [currentLength, setCurrentLength] = React.useState((_value$length = value == null ? void 0 : value.length) != null ? _value$length : 0);
23
+ const warningGauge = useMemo(() => 75 * Number(maxLength) / 100, [maxLength]);
24
+ const progressColor = useMemo(() => {
25
+ if (currentLength >= Number(maxLength)) {
26
+ return "var(--red-alert)";
27
+ }
28
+ if (currentLength > warningGauge && currentLength < Number(maxLength)) {
29
+ return "var(--warning)";
30
+ }
31
+ return "var(--color-sucess-green)";
32
+ }, [currentLength, maxLength, warningGauge]);
33
+ const max = Number(maxLength != null ? maxLength : 1);
34
+ const progress = Math.min(currentLength / max * 100, 100);
35
+ const handleChange = e => {
36
+ setCurrentLength(e.target.value.length);
37
+ if (onChange) {
38
+ onChange(e);
39
+ }
40
+ };
41
+ return /*#__PURE__*/React.createElement(StyledTextAreaWrapper, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({}, rest, {
42
+ value: value,
14
43
  $invalid: invalid,
15
- ref: ref,
44
+ ref: handleRef,
16
45
  $mode: mode,
17
46
  disabled: disabled,
18
47
  "aria-invalid": invalid,
19
48
  className: classnames("c-textarea", {
20
49
  "c-textarea__disabled": disabled
21
- }, className)
22
- }));
50
+ }, className),
51
+ onChange: handleChange
52
+ })), maxLength && !hideProgress && /*#__PURE__*/React.createElement(StyledProgressRingWrapper, null, /*#__PURE__*/React.createElement(ProgressRing, {
53
+ progress: progress,
54
+ radius: 10,
55
+ stroke: 1.5,
56
+ progressColor: progressColor
57
+ })));
23
58
  });
24
- Textarea.displayName = "Textarea";
25
59
  //# sourceMappingURL=Textarea.js.map
package/dist/esm/components/Textarea/Textarea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","names":["React","forwardRef","classnames","StyledTextarea","Textarea","_ref","ref","className","disabled","invalid","mode","rest","createElement","_extends","$invalid","$mode","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n return (\n <StyledTextarea\n {...rest}\n $invalid={invalid}\n ref={ref}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n />\n );\n }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAa,OAAO;AAE9C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,UAAU;AAQzC,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAChC,CAAAI,IAAA,EASEC,GAAgD,KAC7C;EAAA,IATH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,UAAU;IACjB,GAAGC;EAEiE,CAAC,GAAAN,IAAA;EAGvE,oBACEL,KAAA,CAAAY,aAAA,CAACT,cAAc,EAAAU,QAAA,KACTF,IAAI;IACRG,QAAQ,EAAEL,OAAQ;IAClBH,GAAG,EAAEA,GAAI;IACTS,KAAK,EAAEL,IAAK;IACZF,QAAQ,EAAEA,QAAS;IACnB,gBAAcC,OAAQ;IACtBF,SAAS,EAAEL,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEM;IAAS,CAAC,EACpCD,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACY,WAAW,GAAG,UAAU"}
1
+ {"version":3,"file":"Textarea.js","names":["React","forwardRef","useMemo","useRef","classnames","StyledProgressRingWrapper","StyledTextarea","StyledTextAreaWrapper","useForkRef","ProgressRing","Textarea","_ref","ref","_value$length","className","disabled","invalid","mode","maxLength","value","hideProgress","onChange","rest","innerRef","handleRef","currentLength","setCurrentLength","useState","length","warningGauge","Number","progressColor","max","progress","Math","min","handleChange","e","target","createElement","_extends","$invalid","$mode","radius","stroke"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, Ref, useMemo, useRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n StyledProgressRingWrapper,\n StyledTextarea,\n StyledTextAreaWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { InputMode } from \"../Input/types\";\nimport { ProgressRing } from \"../ProgressRing\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n maxLength?: number;\n value?: string;\n hideProgress?: boolean;\n onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n maxLength,\n value,\n hideProgress = false,\n onChange,\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n const innerRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(ref, innerRef);\n\n const [currentLength, setCurrentLength] = React.useState<number>(\n value?.length ?? 0\n );\n\n const warningGauge = useMemo(\n () => (75 * Number(maxLength)) / 100,\n [maxLength]\n );\n\n const progressColor = useMemo(() => {\n if (currentLength >= Number(maxLength)) {\n return \"var(--red-alert)\";\n }\n if (currentLength > warningGauge && currentLength < Number(maxLength)) {\n return \"var(--warning)\";\n }\n return \"var(--color-sucess-green)\";\n }, [currentLength, maxLength, warningGauge]);\n\n const max = Number(maxLength ?? 1);\n\n const progress = Math.min((currentLength / max) * 100, 100);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentLength(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <StyledTextAreaWrapper>\n <StyledTextarea\n {...rest}\n value={value}\n $invalid={invalid}\n ref={handleRef}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n onChange={handleChange}\n />\n {maxLength && !hideProgress && (\n <StyledProgressRingWrapper>\n <ProgressRing\n progress={progress}\n radius={10}\n stroke={1.5}\n progressColor={progressColor}\n />\n </StyledProgressRingWrapper>\n )}\n </StyledTextAreaWrapper>\n );\n }\n);\n"],"mappings":";AAAA,OAAOA,KAAK,IAAiBC,UAAU,EAAOC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE5E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,yBAAyB,EACzBC,cAAc,EACdC,qBAAqB,QAChB,UAAU;AACjB,SAASC,UAAU,QAAQ,aAAa;AAExC,SAASC,YAAY,QAAQ,iBAAiB;AAW9C,OAAO,MAAMC,QAAQ,gBAAGT,UAAU,CAChC,CAAAU,IAAA,EAaEC,GAAgD,KAC7C;EAAA,IAAAC,aAAA;EAAA,IAbH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,UAAU;IACjBC,SAAS;IACTC,KAAK;IACLC,YAAY,GAAG,KAAK;IACpBC,QAAQ;IACR,GAAGC;EAEiE,CAAC,GAAAX,IAAA;EAGvE,MAAMY,QAAQ,GAAGpB,MAAM,CAAsB,IAAI,CAAC;EAClD,MAAMqB,SAAS,GAAGhB,UAAU,CAACI,GAAG,EAAEW,QAAQ,CAAC;EAE3C,MAAM,CAACE,aAAa,EAAEC,gBAAgB,CAAC,GAAG1B,KAAK,CAAC2B,QAAQ,EAAAd,aAAA,GACtDM,KAAK,oBAALA,KAAK,CAAES,MAAM,YAAAf,aAAA,GAAI,CACnB,CAAC;EAED,MAAMgB,YAAY,GAAG3B,OAAO,CAC1B,MAAO,EAAE,GAAG4B,MAAM,CAACZ,SAAS,CAAC,GAAI,GAAG,EACpC,CAACA,SAAS,CACZ,CAAC;EAED,MAAMa,aAAa,GAAG7B,OAAO,CAAC,MAAM;IAClC,IAAIuB,aAAa,IAAIK,MAAM,CAACZ,SAAS,CAAC,EAAE;MACtC,OAAO,kBAAkB;IAC3B;IACA,IAAIO,aAAa,GAAGI,YAAY,IAAIJ,aAAa,GAAGK,MAAM,CAACZ,SAAS,CAAC,EAAE;MACrE,OAAO,gBAAgB;IACzB;IACA,OAAO,2BAA2B;EACpC,CAAC,EAAE,CAACO,aAAa,EAAEP,SAAS,EAAEW,YAAY,CAAC,CAAC;EAE5C,MAAMG,GAAG,GAAGF,MAAM,CAACZ,SAAS,WAATA,SAAS,GAAI,CAAC,CAAC;EAElC,MAAMe,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAAEV,aAAa,GAAGO,GAAG,GAAI,GAAG,EAAE,GAAG,CAAC;EAE3D,MAAMI,YAAY,GAAIC,CAAyC,IAAK;IAClEX,gBAAgB,CAACW,CAAC,CAACC,MAAM,CAACnB,KAAK,CAACS,MAAM,CAAC;IACvC,IAAIP,QAAQ,EAAE;MACZA,QAAQ,CAACgB,CAAC,CAAC;IACb;EACF,CAAC;EAED,oBACErC,KAAA,CAAAuC,aAAA,CAAChC,qBAAqB,qBACpBP,KAAA,CAAAuC,aAAA,CAACjC,cAAc,EAAAkC,QAAA,KACTlB,IAAI;IACRH,KAAK,EAAEA,KAAM;IACbsB,QAAQ,EAAEzB,OAAQ;IAClBJ,GAAG,EAAEY,SAAU;IACfkB,KAAK,EAAEzB,IAAK;IACZF,QAAQ,EAAEA,QAAS;IACnB,gBAAcC,OAAQ;IACtBF,SAAS,EAAEV,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEW;IAAS,CAAC,EACpCD,SACF,CAAE;IACFO,QAAQ,EAAEe;EAAa,EACxB,CAAC,EACDlB,SAAS,IAAI,CAACE,YAAY,iBACzBpB,KAAA,CAAAuC,aAAA,CAAClC,yBAAyB,qBACxBL,KAAA,CAAAuC,aAAA,CAAC9B,YAAY;IACXwB,QAAQ,EAAEA,QAAS;IACnBU,MAAM,EAAE,EAAG;IACXC,MAAM,EAAE,GAAI;IACZb,aAAa,EAAEA;EAAc,CAC9B,CACwB,CAER,CAAC;AAE5B,CACF,CAAC"}