@ntbjs/react-components 2.0.1-rc.31 → 2.0.2-rc.10

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 (36) hide show
  1. package/build/data/Badge/Badge.js +6 -6
  2. package/build/data/Badge/Badge.js.map +1 -1
  3. package/build/data/Badge/Badge.styled.js +10 -11
  4. package/build/data/Badge/Badge.styled.js.map +1 -1
  5. package/build/inputs/CompactTextInput/CompactTextInput.js +2 -2
  6. package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
  7. package/build/inputs/CompactTextInput/CompactTextInput.styled.js +107 -117
  8. package/build/inputs/CompactTextInput/CompactTextInput.styled.js.map +1 -1
  9. package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
  10. package/build/inputs/MultiSelect/MultiSelect.js +163 -103
  11. package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
  12. package/build/inputs/MultiSelect/MultiSelect.styled.js +123 -111
  13. package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
  14. package/build/inputs/Radio/Radio.js +13 -4
  15. package/build/inputs/Radio/Radio.js.map +1 -1
  16. package/build/inputs/Radio/Radio.styled.js +40 -23
  17. package/build/inputs/Radio/Radio.styled.js.map +1 -1
  18. package/build/inputs/TextArea/TextArea.js +5 -5
  19. package/build/inputs/TextArea/TextArea.js.map +1 -1
  20. package/build/inputs/TextArea/TextArea.styled.js +48 -56
  21. package/build/inputs/TextArea/TextArea.styled.js.map +1 -1
  22. package/build/styles/.config.scss +2 -2
  23. package/build/utils/defaultTheme.js +10 -1
  24. package/build/utils/defaultTheme.js.map +1 -1
  25. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +8 -8
  26. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
  27. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +2 -2
  28. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
  29. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js +2 -2
  30. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map +1 -1
  31. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js +7 -7
  32. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map +1 -1
  33. package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js +0 -4
  34. package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map +1 -1
  35. package/package.json +11 -4
  36. package/styles/.config.scss +2 -2
package/build/inputs/Radio/Radio.styled.js CHANGED
@@ -3,27 +3,31 @@ import styled, { css } from 'styled-components';
3
3
  import { applyDefaultTheme } from '../../utils/defaultTheme.js';
4
4
 
5
5
  const radioSize = '18px';
6
- const shouldForwardProp = prop => {
7
- return prop !== 'theme' && !prop.startsWith('$');
8
- };
9
- const RadioLabel = styled.div.withConfig({
10
- shouldForwardProp
11
- }).attrs(applyDefaultTheme)`
6
+ const RadioLabel = styled.div.attrs(applyDefaultTheme)`
12
7
  padding-left: ${math(`${radioSize} + 10px`)};
13
8
  font-weight: 400;
14
9
  font-size: 0.875rem;
10
+ pointer-events: none;
15
11
 
16
12
  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
17
13
  `;
18
- const Radio = styled.label.withConfig({
19
- shouldForwardProp
20
- }).attrs(applyDefaultTheme)`
14
+ const Radio = styled.label.attrs(applyDefaultTheme)`
21
15
  display: block;
22
16
  position: relative;
23
- cursor: pointer;
17
+ cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
24
18
  line-height: ${radioSize};
25
19
  user-select: none;
26
20
 
21
+ input[type='radio'] {
22
+ position: absolute;
23
+ opacity: 0;
24
+ width: ${radioSize};
25
+ height: ${radioSize};
26
+ margin: 0;
27
+ cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
28
+ z-index: 1;
29
+ }
30
+
27
31
  &::before {
28
32
  content: '';
29
33
  position: absolute;
@@ -31,9 +35,16 @@ const Radio = styled.label.withConfig({
31
35
  width: ${radioSize};
32
36
  height: ${radioSize};
33
37
  top: 0;
38
+ left: 0;
34
39
  border-radius: 50%;
35
40
  transition: all 200ms;
36
41
  box-sizing: border-box;
42
+ pointer-events: none;
43
+
44
+ /* Apply checked styling based on $isChecked prop */
45
+ ${props => props.$isChecked && css`
46
+ border-color: ${props.theme.getColor('emerald-500')};
47
+ `}
37
48
  }
38
49
 
39
50
  &::after {
@@ -44,30 +55,32 @@ const Radio = styled.label.withConfig({
44
55
  top: 5px;
45
56
  left: 5px;
46
57
  border-radius: 50%;
58
+ background: transparent;
47
59
  transform: scale(0);
48
60
  transition: all 200ms;
61
+ pointer-events: none;
62
+
63
+ /* Apply checked styling based on $isChecked prop */
64
+ ${props => props.$isChecked && css`
65
+ background: ${props.theme.getColor('emerald-500')};
66
+ transform: scale(1);
67
+ `}
49
68
  }
50
69
 
51
- &:has(input:checked) {
52
- ::before {
70
+ /* Fallback: :has() selector for browsers that support it */
71
+ &:has(input[type='radio']:checked) {
72
+ &::before {
53
73
  border-color: ${props => props.theme.getColor('emerald-500')};
54
74
  }
55
75
 
56
- ::after {
76
+ &::after {
57
77
  background: ${props => props.theme.getColor('emerald-500')};
58
78
  transform: scale(1);
59
79
  }
60
-
61
- ${RadioLabel} {
62
- opacity: 1;
63
- }
64
80
  }
65
- & {
66
- input[type='radio'] {
67
- position: absolute;
68
- opacity: 0;
69
- pointer-events: none;
70
- }
81
+
82
+ input[type='radio']:checked + ${RadioLabel} {
83
+ opacity: 1;
71
84
  }
72
85
 
73
86
  ${props => props.readOnly && css`
@@ -80,6 +93,10 @@ const Radio = styled.label.withConfig({
80
93
  opacity: 0.5;
81
94
  cursor: not-allowed;
82
95
  user-select: text;
96
+
97
+ input[type='radio'] {
98
+ cursor: not-allowed;
99
+ }
83
100
  `}
84
101
  `;
85
102
 
package/build/inputs/Radio/Radio.styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const RadioLabel = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding-left: ${math(`${radioSize} + 10px`)};\n font-weight: 400;\n font-size: 0.875rem;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n`;\n\nexport const Radio = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ${radioSize};\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ${props => props.theme.getColor('gray-300')};\n width: ${radioSize};\n height: ${radioSize};\n top: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n &:has(input:checked) {\n ::before {\n border-color: ${props => props.theme.getColor('emerald-500')};\n }\n\n ::after {\n background: ${props => props.theme.getColor('emerald-500')};\n transform: scale(1);\n }\n\n ${RadioLabel} {\n opacity: 1;\n }\n }\n & {\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n }\n\n ${props =>\n props.readOnly &&\n css`\n opacity: 0.5;\n pointer-events: none;\n user-select: text;\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n `}\n`;\n"],"names":["radioSize","shouldForwardProp","prop","startsWith","RadioLabel","styled","div","withConfig","attrs","applyDefaultTheme","math","props","theme","themeProp","getColor","Radio","label","readOnly","css","disabled"],"mappings":";;;;AAIA,MAAMA,SAAS,GAAG,MAAM,CAAA;AAExB,MAAMC,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CACjCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,gBAAA,EAAkBC,IAAI,CAAC,CAAGV,EAAAA,SAAS,SAAS,CAAC,CAAA;AAC7C;AACA;AACA;AACA,EAAIW,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,KAAK,GAAGV,MAAM,CAACW,KAAK,CAC9BT,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,eAAA,EAAiBT,SAAS,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA,sBAAwBW,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,WAAA,EAAad,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAsBW,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAClE;AACA;AACA;AACA,kBAAoBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAChE;AACA;AACA;AACA,IAAA,EAAMV,UAAU,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIO,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdC,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIP,KAAK,IACLA,KAAK,CAACQ,QAAQ,IACdD,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}
1
+ {"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\nexport const RadioLabel = styled.div.attrs(applyDefaultTheme)`\n padding-left: ${math(`${radioSize} + 10px`)};\n font-weight: 400;\n font-size: 0.875rem;\n pointer-events: none;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n`;\n\nexport const Radio = styled.label.attrs(applyDefaultTheme)`\n display: block;\n position: relative;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n line-height: ${radioSize};\n user-select: none;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n width: ${radioSize};\n height: ${radioSize};\n margin: 0;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n z-index: 1;\n }\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ${props => props.theme.getColor('gray-300')};\n width: ${radioSize};\n height: ${radioSize};\n top: 0;\n left: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n border-color: ${props.theme.getColor('emerald-500')};\n `}\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n background: transparent;\n transform: scale(0);\n transition: all 200ms;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n background: ${props.theme.getColor('emerald-500')};\n transform: scale(1);\n `}\n }\n\n /* Fallback: :has() selector for browsers that support it */\n &:has(input[type='radio']:checked) {\n &::before {\n border-color: ${props => props.theme.getColor('emerald-500')};\n }\n\n &::after {\n background: ${props => props.theme.getColor('emerald-500')};\n transform: scale(1);\n }\n }\n\n input[type='radio']:checked + ${RadioLabel} {\n opacity: 1;\n }\n\n ${props =>\n props.readOnly &&\n css`\n opacity: 0.5;\n pointer-events: none;\n user-select: text;\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n\n input[type='radio'] {\n cursor: not-allowed;\n }\n `}\n`;\n"],"names":["radioSize","RadioLabel","styled","div","attrs","applyDefaultTheme","math","props","theme","themeProp","getColor","Radio","label","disabled","$isChecked","css","readOnly"],"mappings":";;;;AAIA,MAAMA,SAAS,GAAG,MAAM,CAAA;AAEjB,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D,gBAAA,EAAkBC,IAAI,CAAC,CAAGN,EAAAA,SAAS,SAAS,CAAC,CAAA;AAC7C;AACA;AACA;AACA;AACA,EAAIO,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,KAAK,GAAGT,MAAM,CAACU,KAAK,CAACR,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC1D;AACA;AACA,UAAYE,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACjE,eAAA,EAAiBb,SAAS,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA,WAAA,EAAaA,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA,YAAcO,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAwBN,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,WAAA,EAAaV,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMO,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,sBAAA,EAAwBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAC3D,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,oBAAA,EAAsBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AACzD;AACA,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA,oBAAsBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAClE;AACA;AACA;AACA,kBAAoBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAChE;AACA;AACA;AACA;AACA,gCAAA,EAAkCT,UAAU,CAAA;AAC5C;AACA;AACA;AACA,EAAA,EAAIM,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdD,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdE,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}
package/build/inputs/TextArea/TextArea.js CHANGED
@@ -67,11 +67,11 @@ const TextArea = React__default.forwardRef(function TextArea({
67
67
  $fieldLabel: !isEmpty(fieldLabel),
68
68
  disabled: disabled,
69
69
  readOnly: readOnly,
70
- type: type,
70
+ $type: type,
71
71
  className: className,
72
72
  style: style
73
73
  }, React__default.createElement(TextInputFieldIconAlert, {
74
- type: type
74
+ $type: type
75
75
  }, icon), React__default.createElement(TextInputField, _extends({
76
76
  autoFocus: autoFocus,
77
77
  $borderRadius: borderRadius,
@@ -85,7 +85,7 @@ const TextArea = React__default.forwardRef(function TextArea({
85
85
  readOnly: readOnly,
86
86
  disabled: disabled,
87
87
  $edit: edit,
88
- type: type,
88
+ $type: type,
89
89
  autoComplete: autoComplete,
90
90
  $hasIcon: Boolean(icon),
91
91
  id: `text-input-${uniqueId}`,
@@ -108,7 +108,7 @@ const TextArea = React__default.forwardRef(function TextArea({
108
108
  onKeyDown: onKeyDown,
109
109
  onBlur: onBlur,
110
110
  $noBorder: noBorder
111
- }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default.createElement(InputIconContainer, {
111
+ }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && (edit || noBorder) && React__default.createElement(InputIconContainer, {
112
112
  disabled: disabled
113
113
  }, React__default.createElement(SvgEditNote, {
114
114
  className: padding === 'small' ? 'smallPadingIcon' : undefined
@@ -118,7 +118,7 @@ const TextArea = React__default.forwardRef(function TextArea({
118
118
  $hasIcon: Boolean(icon),
119
119
  $inputIsEmpty: inputIsEmpty
120
120
  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
121
- type: type
121
+ $type: type
122
122
  }, description)));
123
123
  };
124
124
  if (hidden) return null;
package/build/inputs/TextArea/TextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';\n\nimport { isEmpty } from 'lodash';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from '../../data';\n\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextArea.styled';\n\n/**\n * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextArea } from '@ntbjs/react-components/inputs'\n * // or\n * import TextArea from '@ntbjs/react-components/inputs/TextArea'\n * ```\n */\nconst TextArea = React.forwardRef(function TextArea(\n {\n value,\n defaultValue,\n name,\n label,\n placeholder,\n required,\n disabled,\n hidden,\n readOnly,\n edit,\n autoComplete,\n description,\n type,\n icon,\n rows,\n className,\n style,\n onChange,\n onBlur,\n noBorder,\n loadingIcon,\n successIcon,\n padding,\n descriptionToolTip,\n borderRadius,\n fieldLabel,\n ...rest\n },\n forwardedRef\n) {\n const textInputDomNode = useRef(null);\n const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n\n const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));\n const [autoFocus, setAutoFocus] = useState(false);\n\n const [uniqueId] = useState(nanoid());\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n useEffect(() => {\n setAutoFocus(false);\n }, [value, defaultValue]);\n\n const onKeyDown = useCallback(event => {\n if (event.key === 'Enter') {\n event.stopPropagation();\n }\n }, []);\n\n const input = () => {\n return (\n <S.TextAreaContainter>\n {fieldLabel && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {fieldLabel}\n <S.SuccessContainerLabel>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainerLabel>\n </S.Label>\n )}\n <S.TextInput\n $fieldLabel={!isEmpty(fieldLabel)}\n disabled={disabled}\n readOnly={readOnly}\n type={type}\n className={className}\n style={style}\n >\n <S.TextInputFieldIconAlert type={type}>{icon}</S.TextInputFieldIconAlert>\n <S.TextInputField\n autoFocus={autoFocus}\n $borderRadius={borderRadius}\n ref={textInputRef}\n rows={rows}\n value={value}\n defaultValue={defaultValue}\n name={name}\n placeholder={placeholder || ' '}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n $edit={edit}\n type={type}\n autoComplete={autoComplete}\n $hasIcon={Boolean(icon)}\n id={`text-input-${uniqueId}`}\n key={uniqueId}\n $padding={padding}\n onChange={e => {\n if (e.target.value) {\n setInputIsEmpty(false);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n } else {\n setInputIsEmpty(true);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n }\n onChange(e);\n }}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n $noBorder={noBorder}\n {...rest}\n />\n {!fieldLabel && (type === 'loading' || type === 'success') && (\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n )}\n {!readOnly && noBorder && (\n <S.InputIconContainer disabled={disabled}>\n <EditNoteIcon className={padding === 'small' ? 'smallPadingIcon' : undefined} />\n </S.InputIconContainer>\n )}\n {label && (\n <S.TextInputLabel\n htmlFor={`text-input-${uniqueId}`}\n $hasPlaceholder={Boolean(placeholder)}\n $hasIcon={Boolean(icon)}\n $inputIsEmpty={inputIsEmpty}\n >\n {label}\n {required && ' *'}\n </S.TextInputLabel>\n )}\n {typeof description === 'string' && description.length > 0 && (\n <S.Description type={type}>{description}</S.Description>\n )}\n </S.TextInput>\n </S.TextAreaContainter>\n );\n };\n\n if (hidden) return null;\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nTextArea.defaultProps = {\n rows: 4,\n noBorder: false,\n readOnly: false,\n edit: false,\n hidden: false,\n type: '',\n padding: 'medium',\n descriptionToolTip: '',\n onChange: () => {},\n borderRadius: 0\n};\n\nTextArea.propTypes = {\n /**\n * Value to be sent. Typically the content of the text area.\n */\n value: PropTypes.string,\n\n /**\n * Default value/text to be displayed in the text area by default.\n */\n defaultValue: PropTypes.string,\n\n /**\n * Name of the text area (used when sending form data)\n */\n name: PropTypes.string,\n\n /**\n * Label text for the text area. If the text area is empty (no input and no placeholder)\n * and isn't in focus, the label text will be displayed grayed out in the text area itself.\n * Otherwise, the label text will be displayed in the top left corner.\n */\n label: PropTypes.string,\n\n /**\n * Field Label text for the text area field. I\n */\n fieldLabel: PropTypes.string,\n\n /**\n * Placeholder text to be displayed if the text area is empty (no input)\n */\n placeholder: PropTypes.string,\n\n /**\n * Whether the user is required to fill in the text area\n */\n required: PropTypes.bool,\n\n /**\n * Whether the text area is disabled\n */\n disabled: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * Whether the text area is read-only\n */\n readOnly: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * ?\n */\n autoComplete: PropTypes.string,\n /**\n * Descriptive text displayed below the text area\n */\n description: PropTypes.string,\n\n /**\n * Optional icon to be displayed left of the text inside the text area\n */\n icon: PropTypes.element,\n /**\n * How many rows/lines of text to be displayed by default\n */\n rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * Add custom class names to the HTML element\n */\n className: PropTypes.string,\n /**\n * Add custom CSS styling\n */\n style: PropTypes.object,\n /**\n * Add padding (small-medium-large)\n */\n padding: PropTypes.oneOf(['small', 'medium', 'large']),\n /**\n * Optional callback function for the `onChange` event\n */\n onChange: PropTypes.func,\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur: PropTypes.func,\n noBorder: PropTypes.bool,\n // warningAlert: PropTypes.bool,\n // errorAlert: PropTypes.bool,\n /**\n * Define the type based on error,error-border , warning, loading and success.\n */\n type: PropTypes.oneOf([\n '',\n 'error',\n 'error-border',\n 'warning-border',\n 'warning',\n 'loading',\n 'success'\n ]),\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element,\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Border Radius for rounded borders.\n */\n borderRadius: PropTypes.number\n};\n\nexport default TextArea;\n"],"names":["TextArea","React","forwardRef","value","defaultValue","name","label","placeholder","required","disabled","hidden","readOnly","edit","autoComplete","description","type","icon","rows","className","style","onChange","onBlur","noBorder","loadingIcon","successIcon","padding","descriptionToolTip","borderRadius","fieldLabel","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","inputIsEmpty","setInputIsEmpty","useState","autoFocus","setAutoFocus","uniqueId","nanoid","memoizedDescriptionToolTip","useMemo","useEffect","onKeyDown","useCallback","event","key","stopPropagation","input","createElement","S","htmlFor","$fieldLabel","isEmpty","_extends","$borderRadius","ref","$edit","$hasIcon","Boolean","id","$padding","e","target","$noBorder","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","Fragment","Tooltip","content","placement","trigger","zIndex","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","bool","element","oneOfType","number","object","oneOf","func"],"mappings":";;;;;;;;;;;;;;;;AAsBMA,MAAAA,QAAQ,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,QAAQA,CACjD;EACEG,KAAK;EACLC,YAAY;EACZC,IAAI;EACJC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,IAAI;EACJC,YAAY;EACZC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,WAAW;EACXC,WAAW;EACXC,OAAO;EACPC,kBAAkB;EAClBC,YAAY;EACZC,UAAU;EACV,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AACrC,EAAA,MAAMC,YAAY,GAAGC,aAAa,CAACJ,YAAY,EAAEC,gBAAgB,CAAC,CAAA;AAElE,EAAA,MAAM,CAACI,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAC,EAAElC,KAAK,IAAIC,YAAY,CAAC,CAAC,CAAA;EAC1E,MAAM,CAACkC,SAAS,EAAEC,YAAY,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC,CAAA;EAEjD,MAAM,CAACG,QAAQ,CAAC,GAAGH,QAAQ,CAACI,MAAM,EAAE,CAAC,CAAA;AAErC,EAAA,MAAMC,0BAA0B,GAAGC,OAAO,CAAC,MAAM;AAC/C,IAAA,OAAOjB,kBAAkB,CAAA;AAC3B,GAAC,EAAE,CAACA,kBAAkB,CAAC,CAAC,CAAA;AAExBkB,EAAAA,SAAS,CAAC,MAAM;IACdL,YAAY,CAAC,KAAK,CAAC,CAAA;AACrB,GAAC,EAAE,CAACpC,KAAK,EAAEC,YAAY,CAAC,CAAC,CAAA;AAEzB,EAAA,MAAMyC,SAAS,GAAGC,WAAW,CAACC,KAAK,IAAI;AACrC,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACzBD,KAAK,CAACE,eAAe,EAAE,CAAA;AACzB,KAAA;GACD,EAAE,EAAE,CAAC,CAAA;EAEN,MAAMC,KAAK,GAAGA,MAAM;AAClB,IAAA,OACEjD,cAAA,CAAAkD,aAAA,CAACC,kBAAoB,EAAA,IAAA,EAClBxB,UAAU,IACT3B,cAAA,CAAAkD,aAAA,CAACC,KAAO,EAAA;AAACC,MAAAA,OAAO,EAAEb,QAAS;AAAC/B,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EAC5CmB,UAAU,EACX3B,cAAA,CAAAkD,aAAA,CAACC,qBAAuB,EAAA,IAAA,EACrBrC,IAAI,KAAK,SAAS,IAAIQ,WAAW,EACjCR,IAAI,KAAK,SAAS,IAAIS,WACA,CAClB,CACV,EACDvB,cAAA,CAAAkD,aAAA,CAACC,SAAW,EAAA;AACVE,MAAAA,WAAW,EAAE,CAACC,OAAO,CAAC3B,UAAU,CAAE;AAClCnB,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBI,MAAAA,IAAI,EAAEA,IAAK;AACXG,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EAEblB,cAAA,CAAAkD,aAAA,CAACC,uBAAyB,EAAA;AAACrC,MAAAA,IAAI,EAAEA,IAAAA;KAAOC,EAAAA,IAAgC,CAAC,EACzEf,cAAA,CAAAkD,aAAA,CAACC,cAAgB,EAAAI,QAAA,CAAA;AACflB,MAAAA,SAAS,EAAEA,SAAU;AACrBmB,MAAAA,aAAa,EAAE9B,YAAa;AAC5B+B,MAAAA,GAAG,EAAEzB,YAAa;AAClBhB,MAAAA,IAAI,EAAEA,IAAK;AACXd,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,IAAI,EAAEA,IAAK;MACXE,WAAW,EAAEA,WAAW,IAAI,GAAI;AAChCC,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,QAAQ,EAAEA,QAAS;AACnBkD,MAAAA,KAAK,EAAE/C,IAAK;AACZG,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,YAAY,EAAEA,YAAa;AAC3B+C,MAAAA,QAAQ,EAAEC,OAAO,CAAC7C,IAAI,CAAE;MACxB8C,EAAE,EAAE,CAActB,WAAAA,EAAAA,QAAQ,CAAG,CAAA;AAC7BQ,MAAAA,GAAG,EAAER,QAAS;AACduB,MAAAA,QAAQ,EAAEtC,OAAQ;MAClBL,QAAQ,EAAE4C,CAAC,IAAI;AACb,QAAA,IAAIA,CAAC,CAACC,MAAM,CAAC9D,KAAK,EAAE;UAClBiC,eAAe,CAAC,KAAK,CAAC,CAAA;UACtB,IAAI,CAACE,SAAS,EAAE;YACdC,YAAY,CAAC,IAAI,CAAC,CAAA;AACpB,WAAA;AACF,SAAC,MAAM;UACLH,eAAe,CAAC,IAAI,CAAC,CAAA;UACrB,IAAI,CAACE,SAAS,EAAE;YACdC,YAAY,CAAC,IAAI,CAAC,CAAA;AACpB,WAAA;AACF,SAAA;QACAnB,QAAQ,CAAC4C,CAAC,CAAC,CAAA;OACX;AACFnB,MAAAA,SAAS,EAAEA,SAAU;AACrBxB,MAAAA,MAAM,EAAEA,MAAO;AACf6C,MAAAA,SAAS,EAAE5C,QAAAA;KACPO,EAAAA,IAAI,CACT,CAAC,EACD,CAACD,UAAU,KAAKb,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,SAAS,CAAC,IACxDd,cAAA,CAAAkD,aAAA,CAACC,gBAAkB,EAAA,IAAA,EAChBrC,IAAI,KAAK,SAAS,IAAIQ,WAAW,EACjCR,IAAI,KAAK,SAAS,IAAIS,WACL,CACrB,EACA,CAACb,QAAQ,IAAIW,QAAQ,IACpBrB,cAAA,CAAAkD,aAAA,CAACC,kBAAoB,EAAA;AAAC3C,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EACvCR,cAAA,CAAAkD,aAAA,CAACgB,WAAY,EAAA;AAACjD,MAAAA,SAAS,EAAEO,OAAO,KAAK,OAAO,GAAG,iBAAiB,GAAG2C,SAAAA;KAAY,CAC3D,CACvB,EACA9D,KAAK,IACJL,cAAA,CAAAkD,aAAA,CAACC,cAAgB,EAAA;MACfC,OAAO,EAAE,CAAcb,WAAAA,EAAAA,QAAQ,CAAG,CAAA;AAClC6B,MAAAA,eAAe,EAAER,OAAO,CAACtD,WAAW,CAAE;AACtCqD,MAAAA,QAAQ,EAAEC,OAAO,CAAC7C,IAAI,CAAE;AACxBsD,MAAAA,aAAa,EAAEnC,YAAAA;KAEd7B,EAAAA,KAAK,EACLE,QAAQ,IAAI,IACG,CACnB,EACA,OAAOM,WAAW,KAAK,QAAQ,IAAIA,WAAW,CAACyD,MAAM,GAAG,CAAC,IACxDtE,cAAA,CAAAkD,aAAA,CAACC,WAAa,EAAA;AAACrC,MAAAA,IAAI,EAAEA,IAAAA;KAAOD,EAAAA,WAA2B,CAE9C,CACO,CAAC,CAAA;GAE1B,CAAA;EAED,IAAIJ,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACET,cAAA,CAAAkD,aAAA,CAAAlD,cAAA,CAAAuE,QAAA,EAAA,IAAA,EACG,CAAC9B,0BAA0B,IAAIQ,KAAK,EAAE,EACtCR,0BAA0B,IACzBzC,cAAA,CAAAkD,aAAA,CAAA,KAAA,EAAA,IAAA,EACElD,cAAA,CAAAkD,aAAA,CAACsB,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAEhC,0BAA2B;AACpCM,IAAAA,GAAG,EAAC,kBAAkB;AACtB2B,IAAAA,SAAS,EAAC,YAAY;AACtBC,IAAAA,OAAO,EAAE,YAAa;AACtBC,IAAAA,MAAM,EAAE,MAAA;AAAO,GAAA,EAEd3B,KAAK,EACC,CACN,CAEP,CAAC,CAAA;AAEP,CAAC,EAAC;AAEFlD,QAAQ,CAAC8E,YAAY,GAAG;AACtB7D,EAAAA,IAAI,EAAE,CAAC;AACPK,EAAAA,QAAQ,EAAE,KAAK;AACfX,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,IAAI,EAAE,KAAK;AACXF,EAAAA,MAAM,EAAE,KAAK;AACbK,EAAAA,IAAI,EAAE,EAAE;AACRU,EAAAA,OAAO,EAAE,QAAQ;AACjBC,EAAAA,kBAAkB,EAAE,EAAE;AACtBN,EAAAA,QAAQ,EAAEA,MAAM,EAAE;AAClBO,EAAAA,YAAY,EAAE,CAAA;AAChB,CAAC,CAAA;AAED3B,QAAQ,CAAC+E,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAInB/E,KAAK,EAAEgF,SAAS,CAACC,MAAM;EAKvBhF,YAAY,EAAE+E,SAAS,CAACC,MAAM;EAK9B/E,IAAI,EAAE8E,SAAS,CAACC,MAAM;EAOtB9E,KAAK,EAAE6E,SAAS,CAACC,MAAM;EAKvBxD,UAAU,EAAEuD,SAAS,CAACC,MAAM;EAK5B7E,WAAW,EAAE4E,SAAS,CAACC,MAAM;EAK7B5E,QAAQ,EAAE2E,SAAS,CAACE,IAAI;EAKxB5E,QAAQ,EAAE0E,SAAS,CAACE,IAAI;EAIxB3E,MAAM,EAAEyE,SAAS,CAACE,IAAI;EAItB1E,QAAQ,EAAEwE,SAAS,CAACE,IAAI;EAIxBzE,IAAI,EAAEuE,SAAS,CAACE,IAAI;EAIpBxE,YAAY,EAAEsE,SAAS,CAACC,MAAM;EAI9BtE,WAAW,EAAEqE,SAAS,CAACC,MAAM;EAK7BpE,IAAI,EAAEmE,SAAS,CAACG,OAAO;AAIvBrE,EAAAA,IAAI,EAAEkE,SAAS,CAACI,SAAS,CAAC,CAACJ,SAAS,CAACK,MAAM,EAAEL,SAAS,CAACC,MAAM,CAAC,CAAC;EAI/DlE,SAAS,EAAEiE,SAAS,CAACC,MAAM;EAI3BjE,KAAK,EAAEgE,SAAS,CAACM,MAAM;AAIvBhE,EAAAA,OAAO,EAAE0D,SAAS,CAACO,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;EAItDtE,QAAQ,EAAE+D,SAAS,CAACQ,IAAI;EAIxBtE,MAAM,EAAE8D,SAAS,CAACQ,IAAI;EACtBrE,QAAQ,EAAE6D,SAAS,CAACE,IAAI;EAMxBtE,IAAI,EAAEoE,SAAS,CAACO,KAAK,CAAC,CACpB,EAAE,EACF,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,SAAS,CACV,CAAC;EAIFnE,WAAW,EAAE4D,SAAS,CAACG,OAAO;EAI9B9D,WAAW,EAAE2D,SAAS,CAACG,OAAO;EAI9B5D,kBAAkB,EAAEyD,SAAS,CAACC,MAAM;EAIpCzD,YAAY,EAAEwD,SAAS,CAACK,MAAAA;AAC1B,CAAC,GAAA,EAAA;;;;"}
1
+ {"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';\n\nimport { isEmpty } from 'lodash';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from '../../data';\n\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextArea.styled';\n\n/**\n * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextArea } from '@ntbjs/react-components/inputs'\n * // or\n * import TextArea from '@ntbjs/react-components/inputs/TextArea'\n * ```\n */\nconst TextArea = React.forwardRef(function TextArea(\n {\n value,\n defaultValue,\n name,\n label,\n placeholder,\n required,\n disabled,\n hidden,\n readOnly,\n edit,\n autoComplete,\n description,\n type,\n icon,\n rows,\n className,\n style,\n onChange,\n onBlur,\n noBorder,\n loadingIcon,\n successIcon,\n padding,\n descriptionToolTip,\n borderRadius,\n fieldLabel,\n ...rest\n },\n forwardedRef\n) {\n const textInputDomNode = useRef(null);\n const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n\n const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));\n const [autoFocus, setAutoFocus] = useState(false);\n\n const [uniqueId] = useState(nanoid());\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n useEffect(() => {\n setAutoFocus(false);\n }, [value, defaultValue]);\n\n const onKeyDown = useCallback(event => {\n if (event.key === 'Enter') {\n event.stopPropagation();\n }\n }, []);\n\n const input = () => {\n return (\n <S.TextAreaContainter>\n {fieldLabel && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {fieldLabel}\n <S.SuccessContainerLabel>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainerLabel>\n </S.Label>\n )}\n <S.TextInput\n $fieldLabel={!isEmpty(fieldLabel)}\n disabled={disabled}\n readOnly={readOnly}\n $type={type}\n className={className}\n style={style}\n >\n <S.TextInputFieldIconAlert $type={type}>{icon}</S.TextInputFieldIconAlert>\n <S.TextInputField\n autoFocus={autoFocus}\n $borderRadius={borderRadius}\n ref={textInputRef}\n rows={rows}\n value={value}\n defaultValue={defaultValue}\n name={name}\n placeholder={placeholder || ' '}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n $edit={edit}\n $type={type}\n autoComplete={autoComplete}\n $hasIcon={Boolean(icon)}\n id={`text-input-${uniqueId}`}\n key={uniqueId}\n $padding={padding}\n onChange={e => {\n if (e.target.value) {\n setInputIsEmpty(false);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n } else {\n setInputIsEmpty(true);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n }\n onChange(e);\n }}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n $noBorder={noBorder}\n {...rest}\n />\n {!fieldLabel && (type === 'loading' || type === 'success') && (\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n )}\n {!readOnly && (edit || noBorder) && (\n <S.InputIconContainer disabled={disabled}>\n <EditNoteIcon className={padding === 'small' ? 'smallPadingIcon' : undefined} />\n </S.InputIconContainer>\n )}\n {label && (\n <S.TextInputLabel\n htmlFor={`text-input-${uniqueId}`}\n $hasPlaceholder={Boolean(placeholder)}\n $hasIcon={Boolean(icon)}\n $inputIsEmpty={inputIsEmpty}\n >\n {label}\n {required && ' *'}\n </S.TextInputLabel>\n )}\n {typeof description === 'string' && description.length > 0 && (\n <S.Description $type={type}>{description}</S.Description>\n )}\n </S.TextInput>\n </S.TextAreaContainter>\n );\n };\n\n if (hidden) return null;\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nTextArea.defaultProps = {\n rows: 4,\n noBorder: false,\n readOnly: false,\n edit: false,\n hidden: false,\n type: '',\n padding: 'medium',\n descriptionToolTip: '',\n onChange: () => {},\n borderRadius: 0\n};\n\nTextArea.propTypes = {\n /**\n * Value to be sent. Typically the content of the text area.\n */\n value: PropTypes.string,\n\n /**\n * Default value/text to be displayed in the text area by default.\n */\n defaultValue: PropTypes.string,\n\n /**\n * Name of the text area (used when sending form data)\n */\n name: PropTypes.string,\n\n /**\n * Label text for the text area. If the text area is empty (no input and no placeholder)\n * and isn't in focus, the label text will be displayed grayed out in the text area itself.\n * Otherwise, the label text will be displayed in the top left corner.\n */\n label: PropTypes.string,\n\n /**\n * Field Label text for the text area field. I\n */\n fieldLabel: PropTypes.string,\n\n /**\n * Placeholder text to be displayed if the text area is empty (no input)\n */\n placeholder: PropTypes.string,\n\n /**\n * Whether the user is required to fill in the text area\n */\n required: PropTypes.bool,\n\n /**\n * Whether the text area is disabled\n */\n disabled: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * Whether the text area is read-only\n */\n readOnly: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * ?\n */\n autoComplete: PropTypes.string,\n /**\n * Descriptive text displayed below the text area\n */\n description: PropTypes.string,\n\n /**\n * Optional icon to be displayed left of the text inside the text area\n */\n icon: PropTypes.element,\n /**\n * How many rows/lines of text to be displayed by default\n */\n rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * Add custom class names to the HTML element\n */\n className: PropTypes.string,\n /**\n * Add custom CSS styling\n */\n style: PropTypes.object,\n /**\n * Add padding (small-medium-large)\n */\n padding: PropTypes.oneOf(['small', 'medium', 'large']),\n /**\n * Optional callback function for the `onChange` event\n */\n onChange: PropTypes.func,\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur: PropTypes.func,\n noBorder: PropTypes.bool,\n // warningAlert: PropTypes.bool,\n // errorAlert: PropTypes.bool,\n /**\n * Define the type based on error,error-border , warning, loading and success.\n */\n type: PropTypes.oneOf([\n '',\n 'error',\n 'error-border',\n 'warning-border',\n 'warning',\n 'loading',\n 'success'\n ]),\n /**\n * Icon element â€\" E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element â€\" E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element,\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Border Radius for rounded borders.\n */\n borderRadius: PropTypes.number\n};\n\nexport default TextArea;\n"],"names":["TextArea","React","forwardRef","value","defaultValue","name","label","placeholder","required","disabled","hidden","readOnly","edit","autoComplete","description","type","icon","rows","className","style","onChange","onBlur","noBorder","loadingIcon","successIcon","padding","descriptionToolTip","borderRadius","fieldLabel","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","inputIsEmpty","setInputIsEmpty","useState","autoFocus","setAutoFocus","uniqueId","nanoid","memoizedDescriptionToolTip","useMemo","useEffect","onKeyDown","useCallback","event","key","stopPropagation","input","createElement","S","htmlFor","$fieldLabel","isEmpty","$type","_extends","$borderRadius","ref","$edit","$hasIcon","Boolean","id","$padding","e","target","$noBorder","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","Fragment","Tooltip","content","placement","trigger","zIndex","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","bool","element","oneOfType","number","object","oneOf","func"],"mappings":"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"}
package/build/inputs/TextArea/TextArea.styled.js CHANGED
@@ -107,25 +107,25 @@ const TextInputField = styled.textarea.withConfig({
107
107
  `}
108
108
 
109
109
  ${props => {
110
- if (props.type === 'error') {
110
+ if (props.$type === 'error') {
111
111
  return css`
112
112
  ${props.theme.themeProp('color', 'white', 'black')}
113
113
  ${props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}
114
114
  ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
115
115
  `;
116
- } else if (props.type === 'warning') {
116
+ } else if (props.$type === 'warning') {
117
117
  return css`
118
118
  ${props.theme.themeProp('color', 'white', 'black')}
119
119
  ${props.theme.themeProp('background', '#634E01', '#FFFDE8')}
120
120
  ${props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
121
121
  `;
122
- } else if (props.type === 'error-border') {
122
+ } else if (props.$type === 'error-border') {
123
123
  return css`
124
124
  ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
125
125
  ${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
126
126
  ${props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
127
127
  `;
128
- } else if (props.type === 'warning-border') {
128
+ } else if (props.$type === 'warning-border') {
129
129
  return css`
130
130
  ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
131
131
  ${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
@@ -152,15 +152,15 @@ const TextInputField = styled.textarea.withConfig({
152
152
  `}
153
153
 
154
154
 
155
- ${props => props.$noBorder && !props.type && css`
155
+ ${props => props.$noBorder && !props.$type && css`
156
156
  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
157
157
  `}
158
158
 
159
- ${props => props.$noBorder && props.type === 'warning' && css`
159
+ ${props => props.$noBorder && props.$type === 'warning' && css`
160
160
  ${props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
161
161
  `}
162
162
 
163
- ${props => props.$noBorder && props.type === 'error' && css`
163
+ ${props => props.$noBorder && props.$type === 'error' && css`
164
164
  ${props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
165
165
  `}
166
166
 
@@ -190,16 +190,16 @@ const TextInputField = styled.textarea.withConfig({
190
190
  return '';
191
191
  }
192
192
  if (props.readOnly) {
193
- if (props.type === 'error') {
193
+ if (props.$type === 'error') {
194
194
  return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
195
- } else if (props.type === 'warning') {
195
+ } else if (props.$type === 'warning') {
196
196
  return props.theme.themeProp('background', '#634E01', '#FFFDE8');
197
197
  }
198
198
  return '';
199
199
  }
200
- if (props.type === 'error') {
200
+ if (props.$type === 'error') {
201
201
  return props.theme.themeProp('background', '#901d1d', '#F7D5D0');
202
- } else if (props.type === 'warning') {
202
+ } else if (props.$type === 'warning') {
203
203
  return props.theme.themeProp('background', '#806403', '#FFFEBF');
204
204
  } else if (!props.disabled) {
205
205
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
@@ -209,55 +209,47 @@ const TextInputField = styled.textarea.withConfig({
209
209
 
210
210
  ${props => props.$edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
211
211
 
212
- ${props => props.$noBorder && !props.readOnly && props.type !== 'warning' && props.type !== 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : ''}
212
+ ${props => props.$noBorder && !props.readOnly && props.$type !== 'warning' && props.$type !== 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : ''}
213
213
 
214
214
  & + ${InputIconContainer} {
215
215
  opacity: 1;
216
- ${props => props.type === 'success' && css`
216
+ ${props => props.$type === 'success' && css`
217
217
  opacity: 0;
218
218
  `}
219
219
  }
220
220
  }
221
221
 
222
- &::placeholder {
223
- ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
224
-
225
- ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
226
-
227
- ${props => {
228
- if (props.type === 'warning') {
229
- return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
230
- } else if (props.type === 'error') {
231
- return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
222
+ &::placeholder {
223
+ ${props => {
224
+ if (props.$type === 'error' || props.$type === 'warning') {
225
+ return css`
226
+ color: ${props.theme.getColor('gray-400')};
227
+ opacity: 0.9;
228
+ `;
229
+ } else {
230
+ return css`
231
+ ${props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
232
+ opacity: 0.6;
233
+ `;
232
234
  }
233
- return '';
234
235
  }}
235
- }
236
+ }
236
237
 
237
- &:hover::placeholder {
238
- ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
238
+ ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
239
239
 
240
- ${props => {
241
- if (props.type === 'warning') {
242
- return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
243
- } else if (props.type === 'error') {
244
- return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
245
- } else {
246
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
247
- }
248
- }}
249
- }
250
240
 
251
- &:focus::placeholder {
252
- ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
253
241
 
242
+ &:focus::placeholder {
254
243
  ${props => {
255
- if (props.type === 'warning') {
256
- return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
257
- } else if (props.type === 'error') {
258
- return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
244
+ if (props.$type === 'warning' || props.$type === 'error') {
245
+ return css`
246
+ color: ${props.theme.getColor('gray-500')} !important;
247
+ opacity: 0.8 !important;
248
+ `;
259
249
  } else {
260
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
250
+ return css`
251
+ ${props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
252
+ `;
261
253
  }
262
254
  }}
263
255
  }
@@ -267,20 +259,20 @@ const TextInputField = styled.textarea.withConfig({
267
259
 
268
260
  ${props => {
269
261
  if (props.readOnly) {
270
- if (props.type === 'error') {
262
+ if (props.$type === 'error') {
271
263
  return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
272
- } else if (props.type === 'warning') {
264
+ } else if (props.$type === 'warning') {
273
265
  return props.theme.themeProp('background', '#634E01', '#FFFDE8');
274
266
  }
275
267
  return '';
276
268
  }
277
- if (props.type === 'error') {
269
+ if (props.$type === 'error') {
278
270
  return css`
279
271
  ${props.theme.themeProp('border-color', '#D83018', '#D83018')}
280
272
  ${props.theme.themeProp('background', 'white', 'white')}
281
273
  ${props.theme.themeProp('color', 'black', 'black')}
282
274
  `;
283
- } else if (props.type === 'warning') {
275
+ } else if (props.$type === 'warning') {
284
276
  return css`
285
277
  ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}
286
278
  ${props.theme.themeProp('background', 'white', 'white')}
@@ -288,8 +280,8 @@ const TextInputField = styled.textarea.withConfig({
288
280
  `;
289
281
  } else {
290
282
  return css`
291
- ${props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600'))}
292
- ${props.theme.themeProp('background', 'transparent', props.theme.getColor('white'))}
283
+ border-color: ${props.theme.getColor('gray-600')};
284
+ ${props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
293
285
  `;
294
286
  }
295
287
  }}
@@ -298,9 +290,9 @@ const TextInputField = styled.textarea.withConfig({
298
290
  &&:not(:hover):not(:focus) {
299
291
  ${props => {
300
292
  if (props.$edit) {
301
- if (props.type === 'error') {
293
+ if (props.$type === 'error') {
302
294
  return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
303
- } else if (props.type === 'warning') {
295
+ } else if (props.$type === 'warning') {
304
296
  return props.theme.themeProp('background', '#634E01', '#FFFDE8');
305
297
  } else {
306
298
  return props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
@@ -371,7 +363,7 @@ const TextInputFieldIconAlert = styled.div.withConfig({
371
363
  padding: 0 10px 0 30px;
372
364
  opacity: 0.6;
373
365
  transition: opacity 250ms;
374
- ${props => props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}
366
+ ${props => props.$type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}
375
367
  svg {
376
368
  margin-top: 12px;
377
369
  width: 15px;
@@ -405,7 +397,7 @@ const TextInput = styled.div.withConfig({
405
397
 
406
398
  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {
407
399
  ${activeLabel};
408
- ${props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
400
+ ${props => props.$type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
409
401
  }
410
402
  `;
411
403
  const Description = styled.div.withConfig({
@@ -418,11 +410,11 @@ const Description = styled.div.withConfig({
418
410
 
419
411
  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
420
412
 
421
- ${props => (props.type === 'warning-border' || props.type === 'warning') && css`
413
+ ${props => (props.$type === 'warning-border' || props.$type === 'warning') && css`
422
414
  ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
423
415
  `}
424
416
 
425
- ${props => (props.type === 'error-border' || props.type === 'error') && css`
417
+ ${props => (props.$type === 'error-border' || props.$type === 'error') && css`
426
418
  ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
427
419
  `}
428
420
  `;