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

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

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

package/build/inputs/TextArea/TextArea.js

@@ -1,5 +1,5 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import React__default, { useRef, useState, useEffect, useCallback, useMemo, memo } 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 { TextAreaContainter, Label, SuccessContainerLabel, TextInput, TextInputFieldIconAlert, TextInputField, SuccessContainer, InputIconContainer, TextInputLabel, Description } from './TextArea.styled.js';
+import { TextInputField, TextAreaContainter, Label, SuccessContainerLabel, TextInput, TextInputFieldIconAlert, SuccessContainer, InputIconContainer, TextInputLabel, Description } from './TextArea.styled.js';
 
 const TextArea = React__default.forwardRef(function TextArea({
   value,
@@ -46,89 +46,77 @@ const TextArea = React__default.forwardRef(function TextArea({
   const textInputDomNode = useRef(null);
   const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
   const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));
-  const [autoFocus, setAutoFocus] = useState(false);
-  const [uniqueId] = useState(nanoid());
-  const memoizedDescriptionToolTip = useMemo(() => {
-    return descriptionToolTip;
-  }, [descriptionToolTip]);
+  const [uniqueId] = useState(() => nanoid());
   useEffect(() => {
-    setAutoFocus(false);
+    setInputIsEmpty(!(value || defaultValue));
   }, [value, defaultValue]);
   const onKeyDown = useCallback(event => {
     if (event.key === 'Enter') {
       event.stopPropagation();
     }
   }, []);
-  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 && 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)));
-  };
+  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]);
   if (hidden) return null;
-  return React__default.createElement(React__default.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default.createElement("div", null, React__default.createElement(Tooltip, {
-    content: memoizedDescriptionToolTip,
-    key: "tooltipTextArea1",
+  return React__default.createElement(Tooltip, {
+    content: descriptionToolTip || '',
     placement: "bottom-end",
-    trigger: 'mouseenter',
-    zIndex: 999999
-  }, input())));
+    trigger: "mouseenter",
+    zIndex: 999999,
+    disabled: !descriptionToolTip
+  }, wrappedInput);
 });
 TextArea.defaultProps = {
   rows: 4,
@@ -164,12 +152,14 @@ 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 as default };
+export { TextArea$1 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 } 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":"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"}
+{"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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"}