glints-aries 4.0.268 → 4.0.269

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 (5) hide show
  1. package/es/@next/TextArea/TextArea.d.ts +19 -1
  2. package/es/@next/TextArea/TextArea.js +28 -28
  3. package/lib/@next/TextArea/TextArea.d.ts +19 -1
  4. package/lib/@next/TextArea/TextArea.js +27 -27
  5. package/package.json +1 -1
package/es/@next/TextArea/TextArea.d.ts CHANGED
@@ -1,13 +1,31 @@
1
- import React, { TextareaHTMLAttributes } from 'react';
1
+ import React, { TextareaHTMLAttributes, RefObject } from 'react';
2
2
  export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
3
3
  value: string;
4
4
  onChange: (value: string) => void;
5
5
  error?: boolean;
6
6
  width?: string;
7
+ forwardedRef?: RefObject<HTMLTextAreaElement>;
8
+ /**
9
+ * if true, allows the user to type more than the maxLength.
10
+ * if false, the user will not be able to type more than the maxLength,
11
+ * all the characters typed after the maxLength will be ignored.
12
+ *
13
+ * **defaults to** `true`
14
+ */
15
+ canExceedMaxLength: boolean;
7
16
  };
8
17
  export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
9
18
  value: string;
10
19
  onChange: (value: string) => void;
11
20
  error?: boolean;
12
21
  width?: string;
22
+ forwardedRef?: RefObject<HTMLTextAreaElement>;
23
+ /**
24
+ * if true, allows the user to type more than the maxLength.
25
+ * if false, the user will not be able to type more than the maxLength,
26
+ * all the characters typed after the maxLength will be ignored.
27
+ *
28
+ * **defaults to** `true`
29
+ */
30
+ canExceedMaxLength: boolean;
13
31
  } & React.RefAttributes<HTMLTextAreaElement>>;
package/es/@next/TextArea/TextArea.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange"];
4
- import React, { useEffect, useRef, useState } from 'react';
3
+ var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength"];
4
+ import React, { useRef, useState } from 'react';
5
5
  import { StyledTextAreaContainer, StyledTextArea, StyledWordCountContainer } from './TextAreaStyle';
6
6
  import { Typography } from '../Typography';
7
- export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
7
+ var _TextArea = function _TextArea(_ref) {
8
8
  var value = _ref.value,
9
9
  _ref$rows = _ref.rows,
10
10
  rows = _ref$rows === void 0 ? 3 : _ref$rows,
@@ -16,28 +16,20 @@ export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref)
16
16
  _ref$width = _ref.width,
17
17
  width = _ref$width === void 0 ? '520px' : _ref$width,
18
18
  onChange = _ref.onChange,
19
+ forwardedRef = _ref.forwardedRef,
20
+ _ref$canExceedMaxLeng = _ref.canExceedMaxLength,
21
+ canExceedMaxLength = _ref$canExceedMaxLeng === void 0 ? true : _ref$canExceedMaxLeng,
19
22
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
20
- var _useState = useState(0),
21
- charCount = _useState[0],
22
- setCharCount = _useState[1];
23
- var _useState2 = useState(false),
24
- isFocused = _useState2[0],
25
- setIsFocused = _useState2[1];
26
- var isError = error || !!maxLength && charCount > maxLength;
23
+ var _useState = useState(false),
24
+ isFocused = _useState[0],
25
+ setIsFocused = _useState[1];
26
+ var charCount = value.length;
27
+ var hasMaxLengthEnforced = maxLength > 0;
28
+ var hasError = error || canExceedMaxLength && charCount > maxLength;
27
29
  var localRef = useRef(null);
28
- var setRefs = function setRefs(node) {
29
- localRef.current = node;
30
- if (typeof ref === 'function') {
31
- ref(node);
32
- } else if (ref) {
33
- ref.current = node;
34
- }
35
- };
36
- useEffect(function () {
37
- setCharCount(value.length);
38
- }, [value]);
30
+ var textAreaInputRef = forwardedRef || localRef;
39
31
  var handleContainerClick = function handleContainerClick() {
40
- if (localRef.current) {
32
+ if (textAreaInputRef.current) {
41
33
  localRef.current.focus();
42
34
  }
43
35
  };
@@ -46,30 +38,38 @@ export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref)
46
38
  onChange(val);
47
39
  };
48
40
  return /*#__PURE__*/React.createElement(StyledTextAreaContainer, {
49
- "data-error": isError,
41
+ "data-error": hasError,
50
42
  "data-disabled": disabled,
51
43
  "data-focus": isFocused,
52
- "data-has-counter": !!maxLength,
44
+ "data-has-counter": hasMaxLengthEnforced,
53
45
  width: width,
54
46
  onClick: handleContainerClick
55
47
  }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
56
- ref: setRefs,
48
+ ref: textAreaInputRef,
57
49
  value: value,
58
50
  rows: rows,
59
51
  width: width,
60
52
  onChange: handleChange,
61
53
  disabled: disabled,
54
+ maxLength: !canExceedMaxLength && maxLength,
62
55
  onFocus: function onFocus() {
63
56
  return setIsFocused(true);
64
57
  },
65
58
  onBlur: function onBlur() {
66
59
  return setIsFocused(false);
67
60
  }
68
- }, props)), !!maxLength && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
61
+ }, props)), hasMaxLengthEnforced && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
69
62
  "data-disabled": disabled,
70
- "data-error": isError
63
+ "data-error": hasError
71
64
  }, /*#__PURE__*/React.createElement(Typography, {
72
65
  as: "span",
73
66
  variant: "overline"
74
67
  }, charCount, " / ", maxLength)));
75
- });
68
+ };
69
+ var forwardRef = function forwardRef(props, ref) {
70
+ return /*#__PURE__*/React.createElement(_TextArea, _extends({}, props, {
71
+ forwardedRef: ref
72
+ }));
73
+ };
74
+ forwardRef.displayName = _TextArea.name;
75
+ export var TextArea = /*#__PURE__*/React.forwardRef(forwardRef);
package/lib/@next/TextArea/TextArea.d.ts CHANGED
@@ -1,13 +1,31 @@
1
- import React, { TextareaHTMLAttributes } from 'react';
1
+ import React, { TextareaHTMLAttributes, RefObject } from 'react';
2
2
  export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
3
3
  value: string;
4
4
  onChange: (value: string) => void;
5
5
  error?: boolean;
6
6
  width?: string;
7
+ forwardedRef?: RefObject<HTMLTextAreaElement>;
8
+ /**
9
+ * if true, allows the user to type more than the maxLength.
10
+ * if false, the user will not be able to type more than the maxLength,
11
+ * all the characters typed after the maxLength will be ignored.
12
+ *
13
+ * **defaults to** `true`
14
+ */
15
+ canExceedMaxLength: boolean;
7
16
  };
8
17
  export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
9
18
  value: string;
10
19
  onChange: (value: string) => void;
11
20
  error?: boolean;
12
21
  width?: string;
22
+ forwardedRef?: RefObject<HTMLTextAreaElement>;
23
+ /**
24
+ * if true, allows the user to type more than the maxLength.
25
+ * if false, the user will not be able to type more than the maxLength,
26
+ * all the characters typed after the maxLength will be ignored.
27
+ *
28
+ * **defaults to** `true`
29
+ */
30
+ canExceedMaxLength: boolean;
13
31
  } & React.RefAttributes<HTMLTextAreaElement>>;
package/lib/@next/TextArea/TextArea.js CHANGED
@@ -8,10 +8,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _TextAreaStyle = require("./TextAreaStyle");
10
10
  var _Typography = require("../Typography");
11
- var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange"];
11
+ var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength"];
12
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
- var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref, ref) {
14
+ var _TextArea = function _TextArea(_ref) {
15
15
  var value = _ref.value,
16
16
  _ref$rows = _ref.rows,
17
17
  rows = _ref$rows === void 0 ? 3 : _ref$rows,
@@ -23,28 +23,20 @@ var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref,
23
23
  _ref$width = _ref.width,
24
24
  width = _ref$width === void 0 ? '520px' : _ref$width,
25
25
  onChange = _ref.onChange,
26
+ forwardedRef = _ref.forwardedRef,
27
+ _ref$canExceedMaxLeng = _ref.canExceedMaxLength,
28
+ canExceedMaxLength = _ref$canExceedMaxLeng === void 0 ? true : _ref$canExceedMaxLeng,
26
29
  props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
27
- var _useState = (0, _react.useState)(0),
28
- charCount = _useState[0],
29
- setCharCount = _useState[1];
30
- var _useState2 = (0, _react.useState)(false),
31
- isFocused = _useState2[0],
32
- setIsFocused = _useState2[1];
33
- var isError = error || !!maxLength && charCount > maxLength;
30
+ var _useState = (0, _react.useState)(false),
31
+ isFocused = _useState[0],
32
+ setIsFocused = _useState[1];
33
+ var charCount = value.length;
34
+ var hasMaxLengthEnforced = maxLength > 0;
35
+ var hasError = error || canExceedMaxLength && charCount > maxLength;
34
36
  var localRef = (0, _react.useRef)(null);
35
- var setRefs = function setRefs(node) {
36
- localRef.current = node;
37
- if (typeof ref === 'function') {
38
- ref(node);
39
- } else if (ref) {
40
- ref.current = node;
41
- }
42
- };
43
- (0, _react.useEffect)(function () {
44
- setCharCount(value.length);
45
- }, [value]);
37
+ var textAreaInputRef = forwardedRef || localRef;
46
38
  var handleContainerClick = function handleContainerClick() {
47
- if (localRef.current) {
39
+ if (textAreaInputRef.current) {
48
40
  localRef.current.focus();
49
41
  }
50
42
  };
@@ -53,31 +45,39 @@ var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref,
53
45
  onChange(val);
54
46
  };
55
47
  return /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledTextAreaContainer, {
56
- "data-error": isError,
48
+ "data-error": hasError,
57
49
  "data-disabled": disabled,
58
50
  "data-focus": isFocused,
59
- "data-has-counter": !!maxLength,
51
+ "data-has-counter": hasMaxLengthEnforced,
60
52
  width: width,
61
53
  onClick: handleContainerClick
62
54
  }, /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledTextArea, (0, _extends2["default"])({
63
- ref: setRefs,
55
+ ref: textAreaInputRef,
64
56
  value: value,
65
57
  rows: rows,
66
58
  width: width,
67
59
  onChange: handleChange,
68
60
  disabled: disabled,
61
+ maxLength: !canExceedMaxLength && maxLength,
69
62
  onFocus: function onFocus() {
70
63
  return setIsFocused(true);
71
64
  },
72
65
  onBlur: function onBlur() {
73
66
  return setIsFocused(false);
74
67
  }
75
- }, props)), !!maxLength && /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledWordCountContainer, {
68
+ }, props)), hasMaxLengthEnforced && /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledWordCountContainer, {
76
69
  "data-disabled": disabled,
77
- "data-error": isError
70
+ "data-error": hasError
78
71
  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
79
72
  as: "span",
80
73
  variant: "overline"
81
74
  }, charCount, " / ", maxLength)));
82
- });
75
+ };
76
+ var forwardRef = function forwardRef(props, ref) {
77
+ return /*#__PURE__*/_react["default"].createElement(_TextArea, (0, _extends2["default"])({}, props, {
78
+ forwardedRef: ref
79
+ }));
80
+ };
81
+ forwardRef.displayName = _TextArea.name;
82
+ var TextArea = /*#__PURE__*/_react["default"].forwardRef(forwardRef);
83
83
  exports.TextArea = TextArea;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.268",
3
+ "version": "4.0.269",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",