@ntbjs/react-components 2.0.2-rc.3 → 2.0.2-rc.5

package/build/inputs/MultiSelect/MultiSelect.styled.js

@@ -1,35 +1,22 @@
 import styled, { css } from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
 
-const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
 const showMoreHeight = 114;
-const MultiSelectWrapper = styled.div`
+const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const sharedStyle = css`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 12px;
+  font-weight: 400;
   position: relative;
-  /* Targets internal container to ensure overlay is visible even if library tries to clip it */
-  & [class*='ValueContainer'] {
-    overflow: visible !important;
-  }
-`;
-const Label = styled.label.attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-  font-size: 0.875rem;
-  margin-bottom: 4px;
-  display: block;
 `;
-const Control = styled.div`
-  & > div {
-    cursor: ${props => props.$readOnly ? 'default' : 'pointer'};
-  }
+const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
 `;
-const ValueContainer = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  max-height: ${props => props.$showMore ? props.$error || props.$warning ? 'none' : `${showMoreHeight + 16}px` : 'none'};
+const InnerWrapper = styled.div`
   ${props => (props.$error || props.$warning) && css`
       border: 1px solid;
       border-radius: 3px;
@@ -37,85 +24,192 @@ const ValueContainer = styled.div.attrs(applyDefaultTheme)`
       border-color: ${props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
     `}
 `;
-const MultiValueWrapper = styled.div`
-  margin: 0;
+const Label = styled.label.attrs(applyDefaultTheme)`
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  cursor: pointer;
+  height: 19px;
+  display: flex;
+  align-items: center;
 `;
-const MultiValueRemoveIcon = styled(SvgClose)`
-  width: 8px;
-  stroke: white;
-  stroke-width: 2px;
+const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+
+    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'))}
+
+    ${props => props.isDisabled && css`
+        opacity: 0.6;
+        cursor: not-allowed !important;
+
+        & > * {
+          pointer-events: none;
+          cursor: not-allowed !important;
+        }
+      `}
+
+    ${props => props.isReadOnly && !props.isDisabled && css`
+        cursor: default !important;
+      `}
+
+    
+    & > div:first-of-type {
+      font-size: 12px;
+      min-height: 26px;
+      display: flex;
+      align-items: center;
+      padding: ${props => props.isDisabled || props.isReadOnly ? '0 8px' : '0 3px 0 8px'};
+      color: ${props => props.theme.getColor('gray-100')};
+      cursor: ${props => props.isDisabled ? 'not-allowed' : props.isReadOnly ? 'default' : 'pointer'};
+    }
+
+    /* Target the Remove Button */
+    .multi-select__multi-value__remove,
+    & > div:last-of-type {
+      display: flex;
+      align-items: center;
+      padding: 0 8px 0 5px;
+      height: 26px;
+      width: fit-content;
+      cursor: pointer;
+      background-color: transparent;
+
+      ${props => !props.isDisabled && !props.isReadOnly && css`
+          &:hover {
+            background-color: ${props.theme.getColor('red-500')} !important;
+            border-radius: 0 3px 3px 0;
+          }
+        `}
+
+      svg {
+        stroke: white;
+        stroke-width: 2px;
+        width: 8px;
+      }
+    }
+  }
 `;
-const InputWrapper = styled.div.attrs(applyDefaultTheme)`
-  min-width: 150px;
+const MultiSelect = styled(Select)`
+  ${sharedStyle}
+`;
+const CreatableMultiSelect = styled(CreatableSelect)`
+  ${sharedStyle}
+`;
+const AsyncMultiSelect = styled(AsyncPaginate)`
+  ${sharedStyle}
+`;
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate)`
+  ${sharedStyle}
+`;
+const InputWrapper = styled.div`
   position: relative;
-  ${props => !props.$focused && props.$editText && css`
-      &::before {
+  display: flex;
+  align-items: center;
+  min-width: 150px;
+
+  input {
+    color: ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))} !important;
+    font-size: ${props => props.$focused ? '14px' : '12px'} !important;
+  }
+
+  ${props => !props.$focused && css`
+      &:before {
         content: '${props.$editText}';
-        color: ${p => p.theme.getColor('gray-400')};
-        font-size: 12px;
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
+        left: 2px;
+        color: ${props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
         pointer-events: none;
+        font-size: 12px;
       }
     `}
-  input {
-    color: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))} !important;
+
+  ${props => props.isDisabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `};
+`;
+const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`
+  font-size: 14px;
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'))}
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const sharedOptionStyle = css`
+  ${props => props.isFocused && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  ${props => props.isSelected && css`
+      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}
+
+      ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+    `}
+
+  ${props => props.isFocused && props.isSelected && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  :hover {
+    cursor: pointer;
   }
 `;
-const OptionContent = styled.div`
-  display: flex;
+const Option = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+  padding: 8px 12px;
+`;
+const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+  display: flex !important;
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
-  width: 100%;
-  font-size: 14px;
-  color: inherit;
-`;
-styled.div`
-  [class*='menu'] {
-    z-index: 9999 !important;
-    border-radius: 4px;
-  }
 `;
 const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+  stroke-width: 1px;
   width: 8px;
-  stroke: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+  ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
 `;
 const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
   position: absolute;
+  max-height: ${showMoreHeight + 16}px;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  z-index: 50;
-  color: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};
+  z-index: 2;
+  cursor: pointer;
+  color: ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};
   &:hover {
-    cursor: pointer;
     text-decoration: underline;
   }
 `;
 const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
-  flex: 1;
-  background: ${props => props.theme.themeProp('linear-gradient(180deg, #12121200 0%, #121212 100%)', 'linear-gradient(180deg, #fefefe00 0%, #fefefe 100%)')};
+  height: 100%;
+  max-height: ${showMoreHeight}px;
+  ${props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box')}
 `;
 const ShowMoreText = styled.div.attrs(applyDefaultTheme)`
-  background-color: ${props => props.theme.themeProp('#121212', '#fefefe')};
-  text-align: right;
   font-size: 0.875rem;
+  width: 100%;
+  background-color: ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')};
 `;
 const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
-  color: ${props => props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
+  color: ${props => props.$error ? props.theme.getColor('red-500') : props.$warning ? props.theme.getColor('orange-500') : 'inherit'};
   font-size: 0.75rem;
   margin-top: 8px;
+  padding: 0 12px;
 `;
-const MultiSelect = styled(Select).attrs(applyDefaultTheme)``;
-const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)``;
-const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)``;
-const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)``;
 
-export { AsyncCreatableMultiSelect, AsyncMultiSelect, Control, CreatableMultiSelect, DropdownOptionDeleteIcon, ErrorMessage, InputWrapper, Label, MultiSelect, MultiSelectWrapper, MultiValueRemoveIcon, MultiValueWrapper, OptionContent, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper, ValueContainer };
+export { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, InnerWrapper, InputWrapper, Label, MultiSelect, MultiSelectWrapper, MultiValue, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper };
 //# sourceMappingURL=MultiSelect.styled.js.map

package/build/inputs/MultiSelect/MultiSelect.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\nconst showMoreHeight = 114;\n\nexport const MultiSelectWrapper = styled.div`\n  position: relative;\n  /* Targets internal container to ensure overlay is visible even if library tries to clip it */\n  & [class*='ValueContainer'] {\n    overflow: visible !important;\n  }\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  font-size: 0.875rem;\n  margin-bottom: 4px;\n  display: block;\n`;\n\nexport const Control = styled.div`\n  & > div {\n    cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};\n  }\n`;\n\nexport const ValueContainer = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  max-height: ${props =>\n    props.$showMore\n      ? props.$error || props.$warning\n        ? 'none'\n        : `${showMoreHeight + 16}px`\n      : 'none'};\n  ${props =>\n    (props.$error || props.$warning) &&\n    css`\n      border: 1px solid;\n      border-radius: 3px;\n      padding: 4px;\n      border-color: ${props.$error\n        ? props.theme.getColor('red-500')\n        : props.theme.getColor('orange-500')};\n    `}\n`;\n\nexport const MultiValueWrapper = styled.div`\n  margin: 0;\n`;\n\nexport const MultiValueRemoveIcon = styled(CloseIcon)`\n  width: 8px;\n  stroke: white;\n  stroke-width: 2px;\n`;\n\nexport const InputWrapper = styled.div.attrs(applyDefaultTheme)`\n  min-width: 150px;\n  position: relative;\n  ${props =>\n    !props.$focused &&\n    props.$editText &&\n    css`\n      &::before {\n        content: '${props.$editText}';\n        color: ${p => p.theme.getColor('gray-400')};\n        font-size: 12px;\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        pointer-events: none;\n      }\n    `}\n  input {\n    color: ${props =>\n      props.theme.themeProp(\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )} !important;\n  }\n`;\n\nexport const OptionContent = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  width: 100%;\n  font-size: 14px;\n  color: inherit;\n`;\n\nexport const DropdownMenu = styled.div`\n  [class*='menu'] {\n    z-index: 9999 !important;\n    border-radius: 4px;\n  }\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  width: 8px;\n  stroke: ${props =>\n    props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  z-index: 50;\n  color: ${props =>\n    props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};\n  &:hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  flex: 1;\n  background: ${props =>\n    props.theme.themeProp(\n      'linear-gradient(180deg, #12121200 0%, #121212 100%)',\n      'linear-gradient(180deg, #fefefe00 0%, #fefefe 100%)'\n    )};\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n  background-color: ${props => props.theme.themeProp('#121212', '#fefefe')};\n  text-align: right;\n  font-size: 0.875rem;\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};\n  font-size: 0.75rem;\n  margin-top: 8px;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)``;\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)``;\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n  applyDefaultTheme\n)``;\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)``;\n"],"names":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","MultiSelectWrapper","styled","div","Label","label","attrs","applyDefaultTheme","props","theme","themeProp","getColor","Control","$readOnly","ValueContainer","$showMore","$error","$warning","css","MultiValueWrapper","MultiValueRemoveIcon","CloseIcon","InputWrapper","$focused","$editText","p","OptionContent","DropdownOptionDeleteIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { components } from 'react-select';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\n\nconst showMoreHeight = 114;\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const InnerWrapper = styled.div`\n  ${props =>\n    (props.$error || props.$warning) &&\n    css`\n      border: 1px solid;\n      border-radius: 3px;\n      padding: 4px;\n      border-color: ${props.$error\n        ? props.theme.getColor('red-500')\n        : props.theme.getColor('orange-500')};\n    `}\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  cursor: pointer;\n  height: 19px;\n  display: flex;\n  align-items: center;\n`;\n\nexport const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    border: none;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-800')\n      )}\n\n    ${props =>\n      props.isDisabled &&\n      css`\n        opacity: 0.6;\n        cursor: not-allowed !important;\n\n        & > * {\n          pointer-events: none;\n          cursor: not-allowed !important;\n        }\n      `}\n\n    ${props =>\n      props.isReadOnly &&\n      !props.isDisabled &&\n      css`\n        cursor: default !important;\n      `}\n\n    \n    & > div:first-of-type {\n      font-size: 12px;\n      min-height: 26px;\n      display: flex;\n      align-items: center;\n      padding: ${props => (props.isDisabled || props.isReadOnly ? '0 8px' : '0 3px 0 8px')};\n      color: ${props => props.theme.getColor('gray-100')};\n      cursor: ${props =>\n        props.isDisabled ? 'not-allowed' : props.isReadOnly ? 'default' : 'pointer'};\n    }\n\n    /* Target the Remove Button */\n    .multi-select__multi-value__remove,\n    & > div:last-of-type {\n      display: flex;\n      align-items: center;\n      padding: 0 8px 0 5px;\n      height: 26px;\n      width: fit-content;\n      cursor: pointer;\n      background-color: transparent;\n\n      ${props =>\n        !props.isDisabled &&\n        !props.isReadOnly &&\n        css`\n          &:hover {\n            background-color: ${props.theme.getColor('red-500')} !important;\n            border-radius: 0 3px 3px 0;\n          }\n        `}\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n    }\n  }\n`;\n\nexport const MultiSelect = styled(Select)`\n  ${sharedStyle}\n`;\nexport const CreatableMultiSelect = styled(CreatableSelect)`\n  ${sharedStyle}\n`;\nexport const AsyncMultiSelect = styled(AsyncPaginate)`\n  ${sharedStyle}\n`;\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate)`\n  ${sharedStyle}\n`;\n\nexport const InputWrapper = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-width: 150px;\n\n  input {\n    color: ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )} !important;\n    font-size: ${props => (props.$focused ? '14px' : '12px')} !important;\n  }\n\n  ${props =>\n    !props.$focused &&\n    css`\n      &:before {\n        content: '${props.$editText}';\n        position: absolute;\n        left: 2px;\n        color: ${props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-500')\n        )};\n        pointer-events: none;\n        font-size: 12px;\n      }\n    `}\n\n  ${props =>\n    props.isDisabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n    `};\n`;\n\n/* MultiSelect.styled.js */\n\n/* MultiSelect.styled.js */\n\nexport const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`\n  font-size: 14px;\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-600'),\n      props.theme.getColor('white')\n    )}\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nconst sharedOptionStyle = css`\n  ${props =>\n    props.isFocused &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  ${props =>\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}\n\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )}\n    `}\n\n  ${props =>\n    props.isFocused &&\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n\nexport const Option = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n  padding: 8px 12px;\n`;\n\nexport const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n  display: flex !important;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  stroke-width: 1px;\n  width: 8px;\n  ${props =>\n    props.theme.themeProp(\n      'stroke',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ${showMoreHeight + 16}px;\n  top: 0;\n  width: 100%;\n  z-index: 2;\n  cursor: pointer;\n  color: ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('emerald-500')\n    )};\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  height: 100%;\n  max-height: ${showMoreHeight}px;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n      'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n    )}\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  width: 100%;\n  background-color: ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')};\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.$error\n      ? props.theme.getColor('red-500')\n      : props.$warning\n        ? props.theme.getColor('orange-500')\n        : 'inherit'};\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n`;\n"],"names":["showMoreHeight","AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","attrs","applyDefaultTheme","InnerWrapper","$error","$warning","getColor","Label","label","themeProp","MultiValue","components","isDisabled","isReadOnly","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","InputWrapper","$focused","$editText","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"mappings":"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"}

package/build/inputs/TextArea/TextArea.js

@@ -1,5 +1,5 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useEffect, useCallback, useMemo, memo } from 'react';
+import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { isEmpty } from 'lodash';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import { nanoid } from 'nanoid';
@@ -12,7 +12,7 @@ import '../../data/Tabs/Tabs.js';
 import Tooltip from '../../data/Tooltip/Tooltip.js';
 import '../../data/VerificationStatusIcon/VerificationStatusIcon.js';
 import { ReactComponent as SvgEditNote } from '../../icons/edit-note.svg.js';
-import { TextInputField, TextAreaContainter, Label, SuccessContainerLabel, TextInput, TextInputFieldIconAlert, SuccessContainer, InputIconContainer, TextInputLabel, Description } from './TextArea.styled.js';
+import { TextAreaContainter, Label, SuccessContainerLabel, TextInput, TextInputFieldIconAlert, TextInputField, SuccessContainer, InputIconContainer, TextInputLabel, Description } from './TextArea.styled.js';
 
 const TextArea = React__default.forwardRef(function TextArea({
   value,
@@ -46,77 +46,89 @@ const TextArea = React__default.forwardRef(function TextArea({
   const textInputDomNode = useRef(null);
   const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
   const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));
-  const [uniqueId] = useState(() => nanoid());
+  const [autoFocus, setAutoFocus] = useState(false);
+  const [uniqueId] = useState(nanoid());
+  const memoizedDescriptionToolTip = useMemo(() => {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
   useEffect(() => {
-    setInputIsEmpty(!(value || defaultValue));
+    setAutoFocus(false);
   }, [value, defaultValue]);
   const onKeyDown = useCallback(event => {
     if (event.key === 'Enter') {
       event.stopPropagation();
     }
   }, []);
-  const handleChange = useCallback(e => {
-    setInputIsEmpty(!e.target.value);
-    onChange(e);
-  }, [onChange]);
-  const textAreaElement = useMemo(() => React__default.createElement(TextInputField, _extends({
-    ref: textInputRef,
-    rows: rows,
-    value: value,
-    defaultValue: defaultValue,
-    name: name,
-    placeholder: placeholder,
-    required: required,
-    readOnly: readOnly,
-    disabled: disabled,
-    $edit: edit,
-    $type: type,
-    autoComplete: autoComplete,
-    $hasIcon: Boolean(icon),
-    id: `text-input-${uniqueId}`,
-    $padding: padding,
-    $borderRadius: borderRadius,
-    $noBorder: noBorder,
-    onChange: handleChange,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur
-  }, rest)), [textInputRef, rows, value, defaultValue, name, placeholder, required, readOnly, disabled, edit, type, autoComplete, icon, uniqueId, padding, borderRadius, noBorder, handleChange, onKeyDown, onBlur, rest]);
-  const wrappedInput = useMemo(() => React__default.createElement(TextAreaContainter, null, fieldLabel && React__default.createElement(Label, {
-    htmlFor: uniqueId,
-    $disabled: disabled
-  }, fieldLabel, React__default.createElement(SuccessContainerLabel, {
-    $type: type
-  }, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(TextInput, {
-    $fieldLabel: !isEmpty(fieldLabel),
-    disabled: disabled,
-    readOnly: readOnly,
-    $type: type,
-    className: className,
-    style: style
-  }, icon && React__default.createElement(TextInputFieldIconAlert, {
-    $type: type
-  }, icon), textAreaElement, !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, {
-    $type: type
-  }, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default.createElement(InputIconContainer, {
-    $disabled: disabled
-  }, React__default.createElement(SvgEditNote, {
-    className: padding === 'small' ? 'smallPadingIcon' : undefined
-  })), label && React__default.createElement(TextInputLabel, {
-    htmlFor: `text-input-${uniqueId}`,
-    $hasPlaceholder: Boolean(placeholder),
-    $hasIcon: Boolean(icon),
-    $inputIsEmpty: inputIsEmpty
-  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
-    $type: type
-  }, description))), [fieldLabel, uniqueId, disabled, type, loadingIcon, successIcon, icon, textAreaElement, readOnly, noBorder, padding, label, placeholder, inputIsEmpty, required, description, className, style]);
+  const input = () => {
+    return React__default.createElement(TextAreaContainter, null, fieldLabel && React__default.createElement(Label, {
+      htmlFor: uniqueId,
+      disabled: disabled
+    }, fieldLabel, React__default.createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(TextInput, {
+      $fieldLabel: !isEmpty(fieldLabel),
+      disabled: disabled,
+      readOnly: readOnly,
+      $type: type,
+      className: className,
+      style: style
+    }, React__default.createElement(TextInputFieldIconAlert, {
+      $type: type
+    }, icon), React__default.createElement(TextInputField, _extends({
+      autoFocus: autoFocus,
+      $borderRadius: borderRadius,
+      ref: textInputRef,
+      rows: rows,
+      value: value,
+      defaultValue: defaultValue,
+      name: name,
+      placeholder: placeholder || ' ',
+      required: required,
+      readOnly: readOnly,
+      disabled: disabled,
+      $edit: edit,
+      $type: type,
+      autoComplete: autoComplete,
+      $hasIcon: Boolean(icon),
+      id: `text-input-${uniqueId}`,
+      key: uniqueId,
+      $padding: padding,
+      onChange: e => {
+        if (e.target.value) {
+          setInputIsEmpty(false);
+          if (!autoFocus) {
+            setAutoFocus(true);
+          }
+        } else {
+          setInputIsEmpty(true);
+          if (!autoFocus) {
+            setAutoFocus(true);
+          }
+        }
+        onChange(e);
+      },
+      onKeyDown: onKeyDown,
+      onBlur: onBlur,
+      $noBorder: noBorder
+    }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && (edit || noBorder) && React__default.createElement(InputIconContainer, {
+      disabled: disabled
+    }, React__default.createElement(SvgEditNote, {
+      className: padding === 'small' ? 'smallPadingIcon' : undefined
+    })), label && React__default.createElement(TextInputLabel, {
+      htmlFor: `text-input-${uniqueId}`,
+      $hasPlaceholder: Boolean(placeholder),
+      $hasIcon: Boolean(icon),
+      $inputIsEmpty: inputIsEmpty
+    }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
+      $type: type
+    }, description)));
+  };
   if (hidden) return null;
-  return React__default.createElement(Tooltip, {
-    content: descriptionToolTip || '',
+  return React__default.createElement(React__default.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default.createElement("div", null, React__default.createElement(Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
     placement: "bottom-end",
-    trigger: "mouseenter",
-    zIndex: 999999,
-    disabled: !descriptionToolTip
-  }, wrappedInput);
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
 });
 TextArea.defaultProps = {
   rows: 4,
@@ -152,14 +164,12 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
   noBorder: PropTypes.bool,
-  isExpanded: PropTypes.func,
   type: PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
   loadingIcon: PropTypes.element,
   successIcon: PropTypes.element,
   descriptionToolTip: PropTypes.string,
   borderRadius: PropTypes.number
 } : {};
-var TextArea$1 = memo(TextArea);
 
-export { TextArea$1 as default };
+export { TextArea as default };
 //# sourceMappingURL=TextArea.js.map

package/build/inputs/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, useMemo, memo } from 'react';\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 [uniqueId] = useState(() => nanoid());\n\n  useEffect(() => {\n    setInputIsEmpty(!(value || defaultValue));\n  }, [value, defaultValue]);\n\n  const onKeyDown = useCallback(event => {\n    if (event.key === 'Enter') {\n      event.stopPropagation();\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    e => {\n      setInputIsEmpty(!e.target.value);\n      onChange(e);\n    },\n    [onChange]\n  );\n\n  const textAreaElement = useMemo(\n    () => (\n      <S.TextInputField\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        $padding={padding}\n        $borderRadius={borderRadius}\n        $noBorder={noBorder}\n        onChange={handleChange}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        {...rest}\n      />\n    ),\n    [\n      textInputRef,\n      rows,\n      value,\n      defaultValue,\n      name,\n      placeholder,\n      required,\n      readOnly,\n      disabled,\n      edit,\n      type,\n      autoComplete,\n      icon,\n      uniqueId,\n      padding,\n      borderRadius,\n      noBorder,\n      handleChange,\n      onKeyDown,\n      onBlur,\n      rest\n    ]\n  );\n\n  const wrappedInput = useMemo(\n    () => (\n      <S.TextAreaContainter>\n        {fieldLabel && (\n          <S.Label htmlFor={uniqueId} $disabled={disabled}>\n            {fieldLabel}\n            <S.SuccessContainerLabel $type={type}>\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          {icon && <S.TextInputFieldIconAlert $type={type}>{icon}</S.TextInputFieldIconAlert>}\n          {textAreaElement}\n          {!fieldLabel && (type === 'loading' || type === 'success') && (\n            <S.SuccessContainer $type={type}>\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      fieldLabel,\n      uniqueId,\n      disabled,\n      type,\n      loadingIcon,\n      successIcon,\n      icon,\n      textAreaElement,\n      readOnly,\n      noBorder,\n      padding,\n      label,\n      placeholder,\n      inputIsEmpty,\n      required,\n      description,\n      className,\n      style\n    ]\n  );\n\n  if (hidden) return null;\n\n  return (\n    <Tooltip\n      content={descriptionToolTip || ''}\n      placement=\"bottom-end\"\n      trigger=\"mouseenter\"\n      zIndex={999999}\n      disabled={!descriptionToolTip}\n    >\n      {wrappedInput}\n    </Tooltip>\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  isExpanded: PropTypes.func,\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 memo(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","uniqueId","nanoid","useEffect","onKeyDown","useCallback","event","key","stopPropagation","handleChange","e","target","textAreaElement","useMemo","createElement","S","_extends","ref","$edit","$type","$hasIcon","Boolean","id","$padding","$borderRadius","$noBorder","wrappedInput","htmlFor","$disabled","$fieldLabel","isEmpty","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","Tooltip","content","placement","trigger","zIndex","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","bool","element","oneOfType","number","object","oneOf","func","isExpanded","memo"],"mappings":"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"}
+{"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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"}