@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

package/esm/components/inputs/TextArea/TextArea.js

@@ -0,0 +1,182 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import { isEmpty } from 'lodash';
+import useMergedRefs from '../../../node_modules/@restart/hooks/esm/useMergedRefs.js';
+import { nanoid } from 'nanoid';
+import PropTypes from '../../../node_modules/prop-types/index.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 Tooltip from '../../data/Tooltip/Tooltip.js';
+import { r as react } from '../../../_virtual/index.js';
+
+const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"];
+const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
+  let {
+      value,
+      defaultValue,
+      name,
+      label,
+      placeholder,
+      required,
+      disabled,
+      hidden,
+      readOnly,
+      edit,
+      autoComplete,
+      description,
+      type,
+      icon,
+      rows,
+      className,
+      style,
+      onChange,
+      onBlur,
+      noBorder,
+      instructionsTextArea,
+      loadingIcon,
+      successIcon,
+      padding,
+      descriptionToolTip,
+      borderRadius,
+      fieldLabel
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const textInputDomNode = react.exports.useRef(null);
+  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
+  const [inputIsEmpty, setInputIsEmpty] = react.exports.useState(!(value || defaultValue));
+  const [autoFocus, setAutoFocus] = react.exports.useState(false);
+  const [uniqueId] = react.exports.useState(nanoid());
+  const memoizedDescriptionToolTip = react.exports.useMemo(() => {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  react.exports.useEffect(() => {
+    setAutoFocus(false);
+  }, [value, defaultValue]);
+  const onKeyDown = react.exports.useCallback(event => {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+    }
+  }, []);
+  const input = () => {
+    return React.createElement(TextAreaContainter, null, fieldLabel && React.createElement(Label, {
+      htmlFor: uniqueId,
+      disabled: disabled
+    }, fieldLabel, React.createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React.createElement(TextInput, {
+      $fieldLabel: !isEmpty(fieldLabel),
+      disabled: disabled,
+      readOnly: readOnly,
+      type: type,
+      className: className,
+      style: style
+    }, React.createElement(TextInputFieldIconAlert, {
+      type: type
+    }, icon), React.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,
+      instructionsTextArea: instructionsTextArea,
+      type: type,
+      autoComplete: autoComplete,
+      hasIcon: Boolean(icon),
+      icon: 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.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React.createElement(InputIconContainer, {
+      disabled: disabled
+    }, React.createElement(SvgEditNote, {
+      className: padding === 'small' ? 'smallPadingIcon' : undefined
+    })), label && React.createElement(TextInputLabel, {
+      htmlFor: `text-input-${uniqueId}`,
+      hasPlaceholder: Boolean(placeholder),
+      hasIcon: Boolean(icon),
+      inputIsEmpty: inputIsEmpty,
+      type: type
+    }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React.createElement(Description, {
+      type: type
+    }, description)));
+  };
+  if (hidden) return null;
+  return React.createElement(React.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React.createElement("div", null, React.createElement(Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
+});
+TextArea.defaultProps = {
+  rows: 4,
+  noBorder: false,
+  readOnly: false,
+  edit: false,
+  hidden: false,
+  type: '',
+  padding: 'medium',
+  instructionsTextArea: false,
+  descriptionToolTip: '',
+  isExpanded: () => {},
+  onChange: () => {},
+  borderRadius: 0
+};
+TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  fieldLabel: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  edit: PropTypes.bool,
+  autoComplete: PropTypes.string,
+  description: PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  icon: PropTypes.element,
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  padding: PropTypes.oneOf(['small', 'medium', 'large']),
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  noBorder: PropTypes.bool,
+  isExpanded: PropTypes.func,
+  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
+  instructionsTextArea: PropTypes.bool,
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element,
+  descriptionToolTip: PropTypes.string,
+  borderRadius: PropTypes.number
+} : {};
+var TextArea$1 = TextArea;
+
+export { TextArea$1 as default };

package/esm/components/inputs/TextArea/TextArea.styled.js

@@ -0,0 +1,437 @@
+import styled, { keyframes, css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26,
+  _t27,
+  _t28,
+  _t29,
+  _t30,
+  _t31,
+  _t32,
+  _t33,
+  _t34,
+  _t35,
+  _t36,
+  _t37,
+  _t38,
+  _t39,
+  _t40,
+  _t41,
+  _t42,
+  _t43,
+  _t44;
+const fadeInCheck = keyframes(_t || (_t = _`
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+`));
+const fadeOutCheck = keyframes(_t2 || (_t2 = _`
+  from {
+    opacity: 1
+  }
+  to {
+    opacity: 0
+  }
+`));
+const activeLabel = css(_t3 || (_t3 = _`
+  font-size: 0.75rem;
+  padding: 0 3px;
+  top: -7px;
+  letter-spacing: 0.03em;
+  left: 8px !important;
+  opacity: 1 !important;
+`));
+const placeholderBaseStyle = css(_t4 || (_t4 = _`
+  ${0}
+
+  ${0}
+
+     ${0}
+
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-600')), props => props.type === 'error-border' && css(_t5 || (_t5 = _`
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-500'), props.theme.getColor('red-500'))), props => props.type === 'warning-border' && css(_t6 || (_t6 = _`
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))), props => props.theme.themeProp('opacity', 0.6, 0.5));
+const TextAreaContainter = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+  display: flex;
+`));
+const Label = styled.label.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+  ${0};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  height: 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 13px;
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t9 || (_t9 = _`
+      cursor: not-allowed;
+    `)));
+const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+  opacity: 0;
+  pointer-events: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  display: flex;
+  align-items: flex-start;
+
+  position: absolute;
+  right: 15px;
+  top: 10px;
+  bottom: 0;
+  > .smallPadingIcon {
+    padding: 4px;
+    width: 15px;
+    height: 15px;
+    border-radius: 5px;
+    opacity: 1;
+    margin-top: -5px;
+    ${0}
+  }
+  svg {
+    width: 15px;
+    opacity: 0.7;
+    transition: opacity 250ms;
+
+    ${0}
+  }
+`), props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important'), props => props.disabled && css(_t11 || (_t11 = _`
+        display: none;
+      `)));
+const TextInputField = styled.textarea.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  border-radius: 2px;
+  padding: 5px 10px;
+  resize: vertical;
+  z-index: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  appearance: none;
+  border: 1px solid;
+  transition: height 550ms ease-in-out; border-color 350ms;
+
+
+   ${0}
+
+
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+ 
+  ${0}
+
+ 
+  ${0}
+
+  ${0}
+
+  ${0} 
+
+  ${0}  
+  
+
+  ${0}   
+
+     
+    
+  ${0}
+
+      ${0}       
+
+  ${0}
+    
+  
+    ${0}
+
+
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+      ${0}
+
+
+
+  &&:hover:not(:focus) {
+    ${0};
+
+      ${0};
+
+    ${0};
+
+  
+     ${0}; 
+
+
+    ${0};
+    transition: background 350ms;
+    & + ${0} {
+      opacity: 1;
+      ${0};
+      transition: opacity 350ms;
+    }
+  }
+
+  &::placeholder {
+   
+   ${0}
+    
+  }
+
+
+
+  &&:focus {
+    outline: none;
+    ${0}
+
+    ${0};
+
+        
+    ${0}  
+      
+    ${0}
+
+  }
+
+  &&:not(:hover):not(:focus) {
+    ${0};
+    ${0};
+
+       ${0}
+       
+  }
+`), props => props.borderRadius && css(_t13 || (_t13 = _`
+       border-radius: ${0}px;
+     `), props.borderRadius), props => props.theme.themeProp('color', 'white', 'black'), props => props.readOnly && css(_t14 || (_t14 = _`
+      cursor: default;
+      border-color: transparent !important;
+      padding: 12px 10px; ;
+    `)), props => props.disabled && css(_t15 || (_t15 = _`
+      cursor: not-allowed;
+    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.noBorder && css(_t16 || (_t16 = _`
+      ${0}
+    `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))), props => props.type === 'warning' && css(_t17 || (_t17 = _`
+      ${0}
+      ${0}
+      ${0}
+    `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8')), props => props.type === 'error' && css(_t18 || (_t18 = _`
+      ${0}
+      ${0}
+      ${0}
+    `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.noBorder && props.type === 'warning' && css(_t19 || (_t19 = _`
+      ${0}
+    `), props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')), props => props.noBorder && props.type === 'error' && css(_t20 || (_t20 = _`
+          ${0}
+        `), props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning-border' && css(_t21 || (_t21 = _`
+      ${0}
+    `), props.theme.themeProp('border-color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))), props => props.type === 'error-border' && css(_t22 || (_t22 = _`
+        ${0}
+      `), props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'))), props => props.padding === 'small' && css(_t23 || (_t23 = _`
+      padding: 5px 10px;
+    `)), props => props.padding === 'medium' && css(_t24 || (_t24 = _`
+      padding: 13px 15px;
+    `)), props => props.padding === 'large' && css(_t25 || (_t25 = _`
+      padding: 15px 55px;
+    `)), props => props.hasIcon && css(_t26 || (_t26 = _`
+          padding-left: 55px;
+          padding-right: 35px;
+          padding-top: 13.5px;
+        `)), props => !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0'), props => props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent', InputIconContainer, props => props.type === 'success' && css(_t27 || (_t27 = _`
+          opacity: 0;
+        `)), placeholderBaseStyle, props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600')), props => props.theme.themeProp('background', 'transparent', props.theme.getColor('white')), props => props.type === 'warning' && css(_t28 || (_t28 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props => props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.type === 'error' && css(_t29 || (_t29 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props => props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)'), props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.noBorder && props.edit && css(_t30 || (_t30 = _`
+           ${0}
+         `), props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')));
+const TextInputLabel = styled.label.attrs(applyDefaultTheme)(_t31 || (_t31 = _`
+  position: absolute;
+  top: 13px;
+  left: 11px;
+  line-height: 1.2;
+  font-size: 0.875rem;
+  transition: all 150ms;
+  margin-botton: 50px;
+
+  ${0};
+
+  ${0};
+
+  ${0}
+
+  ${0}
+
+  ${0}
+  content: "";
+
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), placeholderBaseStyle, props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => !props.inputIsEmpty && css(_t32 || (_t32 = _`
+      ${0}
+    `), activeLabel), props => props.hasPlaceholder && css(_t33 || (_t33 = _`
+      ${0};
+    `), activeLabel), props => props.hasIcon && css(_t34 || (_t34 = _`
+      left: 55px;
+    `)));
+const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)(_t35 || (_t35 = _`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 2.625rem;
+  display: flex;
+  padding: 0 10px;
+
+  svg {
+    width: 15px;
+    opacity: 0.6;
+    transition: opacity 250ms;
+  }
+`));
+const TextInputFieldIconAlert = styled.div.attrs(applyDefaultTheme)(_t36 || (_t36 = _`
+  position: absolute;
+  top: 2.8px;
+  display: flex;
+  padding: 0 10px 0 30px;
+  opacity: 0.6;
+  transition: opacity 250ms;
+  ${0}
+  svg {
+    margin-top: 12px;
+    width: 15px;
+  }
+`), props => props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402'));
+const TextInput = styled.div.attrs(applyDefaultTheme)(_t37 || (_t37 = _`
+  position: relative;
+  flex-basis: ${0};
+
+  ${0}
+
+  ${0}
+
+    
+
+  &:focus-within {
+    ${0} {
+      ${0};
+    }
+
+    ${0} {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  ${0}:not(:placeholder-shown) + ${0} {
+    ${0};
+    ${0}
+  }
+  }
+`), props => props.$fieldLabel ? '66.66%' : '100%', props => props.readOnly && css(_t38 || (_t38 = _`
+      overflow: auto;
+    `)), props => props.disabled && css(_t39 || (_t39 = _`
+      opacity: 0.5;
+
+      > * {
+        cursor: not-allowed;
+      }
+    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
+const Description = styled.div.attrs(applyDefaultTheme)(_t40 || (_t40 = _`
+  margin: 8px 0 0 0;
+  padding: 0 0.6875rem;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${0};
+
+  ${0}
+
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => (props.type === 'warning-border' || props.type === 'warning') && css(_t41 || (_t41 = _`
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))), props => (props.type === 'error-border' || props.type === 'error') && css(_t42 || (_t42 = _`
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
+const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t43 || (_t43 = _`
+  opacity: 1;
+  pointer-events: none;
+  opacity: ${0};
+  animation: ${0} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  position: absolute;
+  margin-top: -35px;
+  margin-left: 5px;
+  width: 15px;
+  height: 15px;
+  padding: 5px;
+  ${0}
+
+  > svg {
+    width: 15px;
+  }
+`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+const SuccessContainerLabel = styled.div.attrs(applyDefaultTheme)(_t44 || (_t44 = _`
+  opacity: 1;
+  pointer-events: none;
+  opacity: ${0};
+  animation: ${0} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  margin-right: 5px;
+  margin-top: -7px;
+  width: 15px;
+  height: 15px;
+  padding: 5px;
+  ${0}
+
+  > svg {
+    width: 13px;
+  }
+`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+
+export { Description, InputIconContainer, Label, SuccessContainer, SuccessContainerLabel, TextAreaContainter, TextInput, TextInputField, TextInputFieldIcon, TextInputFieldIconAlert, TextInputLabel };

package/esm/components/inputs/TextArea/inputs/TextArea/index.js

@@ -0,0 +1 @@
+export { default } from '../../TextArea.js';