@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.27

package/build/CompactTextInput-42ca5d42.js

@@ -0,0 +1,516 @@
+import { isFunction, isEmpty } from 'lodash';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import * as React from 'react';
+import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+import { S as SvgEditNote } from './edit-note-283a0e15.js';
+import './Alert-e6847a22.js';
+import './Badge-d93586a9.js';
+import { P as Popover } from './Popover-20050b91.js';
+import './Tab-04d435c3.js';
+import './Tabs-74d1ea8a.js';
+import { T as Tooltip } from './Tooltip-c1d1199e.js';
+import './VerificationStatusIcon-49cb1c1b.js';
+import styled, { keyframes, css } from 'styled-components';
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgLink(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 10"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M9 10H5c-1.38 0-2.56-.49-3.54-1.46S0 6.39 0 5s.49-2.56 1.46-3.54S3.62 0 5 0h4v2H5c-.83 0-1.54.29-2.13.88s-.88 1.29-.88 2.13.29 1.54.88 2.13 1.29.88 2.13.88h4v2zM6 6V4h8v2H6zm5 4V8h4c.83 0 1.54-.29 2.13-.88s.88-1.29.88-2.13-.29-1.54-.88-2.13-1.29-.88-2.13-.88h-4V0h4c1.38 0 2.56.49 3.54 1.46S20 3.61 20 5s-.49 2.56-1.46 3.54S16.39 10 15 10h-4z"
+  })));
+}
+
+const fadeIn = keyframes`
+  from {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
+  }
+  to {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
+  }
+`;
+const fadeOut = keyframes`
+  from {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
+  }
+  to {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
+  }
+`;
+const fadeInCheck = keyframes`
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+`;
+const fadeOutCheck = keyframes`
+  from {
+    opacity: 1
+  }
+  to {
+    opacity: 0
+  }
+`;
+const linkColor = css`
+  ${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}
+  ${props => !props.disabled && css`
+      &:hover {
+        text-decoration: underline;
+      }
+    `}
+`;
+const commonAnchorTagStyle = css`
+  a,
+  && {
+    font-size: 0.875rem;
+    text-decoration: none;
+  }
+`;
+const readOnlyBackground = css`
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
+`;
+const CompactTextInput$1 = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+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;
+  justify-content: space-between;
+  height: 19px;
+  display: flex;
+  align-items: center;
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+const InputContainer = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
+  height: 19px;
+  flex-basis: ${props => props.$hasLabel ? '66.66%' : '100%'};
+`;
+const SuccessContainer = styled.div.attrs(applyDefaultTheme)`
+  opacity: 1;
+  pointer-events: none;
+  display: flex;
+  opacity: ${props => props.fadeIn ? 0 : 1};
+  animation: ${props => props.fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  margin-right: 5px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
+  > svg {
+    width: 13px;
+  }
+`;
+const InputSuccessContainer = styled.div.attrs(applyDefaultTheme)`
+  opacity: 1;
+  pointer-events: none;
+  display: flex;
+  justify-content: flex-end;
+  opacity: ${props => props.fadeIn ? 0 : 1};
+  animation: ${props => props.fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  position: relative;
+  margin-top: -20px;
+  margin-right: 8px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
+  > svg {
+    width: 13px;
+  }
+`;
+const InputIconContainer = styled.div.attrs(applyDefaultTheme)`
+  opacity: 0;
+  pointer-events: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding: 5px 10px 0 0;
+  ${props => props.theme.themeProp('background', css`
+        linear-gradient(-90deg,
+        ${props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')} 55%,
+        transparent)
+      `, css`
+        linear-gradient(-90deg,
+        ${props => props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100')} 55%,
+        transparent)
+      `)};
+
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: ${props => props.theme.getColor('gray-400')};
+
+  ${props => props.type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}
+
+  ${props => props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F')}
+
+  > svg {
+    width: 12px;
+  }
+`;
+const Input = styled.input.attrs(applyDefaultTheme)`
+  box-sizing: border-box;
+  height: 22px;
+  width: 100%;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  font-family: inherit;
+  padding: 1px 10px;
+  border-radius: 3px;
+  border: 1px solid transparent;
+
+${props => {
+  if (props.type === 'error') {
+    return css`
+      ${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;
+    `;
+  } else if (props.type === 'warning') {
+    return css`
+      ${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;
+    `;
+  } else {
+    return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+  }
+}}
+
+  ${props => props.readOnly && css`
+      cursor: default;
+    `}
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+    `}
+
+  ${props => props.type === 'success' && css`
+      animation: ${props => props.type === 'success' ? fadeIn : fadeOut} 0.5s ease-in-out;
+    `}
+
+
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))}
+
+
+      
+   
+
+      ${props => props.hasLink && css`
+          &&:not(:focus),
+          &&:read-only {
+            ${linkColor}
+          }
+          &&:read-only {
+            cursor: default;
+          }
+        `};
+
+        
+
+
+  &&:not(:hover):not(:focus) {
+
+    ${props => {
+  if (props.edit) {
+    if (props.type === 'error') {
+      return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
+    } else if (props.type === 'warning') {
+      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
+    } else {
+      return 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.hasLink && css`
+        &&:not(:focus),
+        &&:read-only {
+          cursor: default;
+          ${linkColor}
+        }
+      `}
+  }
+
+  &&:hover:not(:focus) {
+
+    ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
+
+    ${props => props.readOnly && css`
+        ${readOnlyBackground}
+      `};
+
+    ${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.hasLink && css`
+        cursor: pointer;
+        &&:read-only {
+          background: none !important;
+          cursor: default;
+        }
+      `}
+      & + ${InputIconContainer} {
+        opacity: 1;
+        
+      }
+  }
+
+    ${props => props.disabled && css`
+        background: none !important;
+        cursor: not-allowed;
+      `}
+      ${props => props.disabled && props.hasLink && css`
+          background: none !important;
+          cursor: not-allowed !important;
+        `}
+
+  }
+
+  &&:focus {
+    ${props => !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
+
+      ${props => props.readOnly && css`
+          ${readOnlyBackground}
+        `};
+    
+    ${props => props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};
+
+    ${props => !props.readOnly && css`
+        border-color: ${props => props.theme.getColor('gray-600')};
+      `};
+    outline: none;
+
+    ${props => props.type === 'warning' && css`
+        ${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`
+        ${props => props.theme.themeProp('border-color', '#D83018', '#D83018')}
+        ${props.theme.themeProp('background', 'white', 'white')}
+        ${props.theme.themeProp('color', 'black', 'black')}
+      `};
+  }
+
+  &&::placeholder {
+    color: inherit;
+    opacity: 0.6;
+  }
+
+  ${props => props.bold && css`
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: 1.0625;
+      padding-top: 3px;
+      padding-bottom: 2px;
+    `}
+`;
+const LinkPopoverContainer = styled.div.attrs(applyDefaultTheme)`
+  ${commonAnchorTagStyle}
+
+  padding: 5px 8px;
+
+  svg {
+    width: 18px;
+    margin-right: 8px;
+  }
+`;
+const StyledLink = styled.a.attrs(applyDefaultTheme)`
+  ${commonAnchorTagStyle}
+  ${linkColor}
+`;
+const ReadOnlyLinkContainer = styled.div.attrs(applyDefaultTheme)`
+  ${readOnlyBackground};
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 0 10px 1px;
+`;
+
+const CompactTextInput = React__default.forwardRef(function CompactTextInput({
+  label,
+  inputType,
+  name,
+  defaultValue,
+  value,
+  placeholder,
+  link,
+  linkTarget,
+  linkHandler,
+  activeLinkHandler,
+  autoSelect,
+  readOnly,
+  disabled,
+  edit,
+  type,
+  descriptionToolTip,
+  bold,
+  hidden,
+  onChange: onChangeProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  loadingIcon,
+  successIcon,
+  ...props
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  const [currentValue, setCurrentValue] = useState();
+  const [autoFocus, setAutoFocus] = useState(false);
+  const memoizedDescriptionToolTip = useMemo(() => {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  useEffect(() => {
+    setCurrentValue(value || defaultValue);
+    setAutoFocus(false);
+  }, [value, defaultValue]);
+  const onChange = useCallback(event => {
+    setCurrentValue(event.target.value);
+    if (!autoFocus) {
+      setAutoFocus(true);
+    }
+    if (isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  const onFocus = useCallback(event => {
+    if (autoSelect) {
+      event.target.select();
+    }
+    if (isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  const onBlur = useCallback(event => {
+    if (isFunction(onBlurProp)) {
+      onBlurProp(event);
+    }
+  }, [onBlurProp]);
+  const input = () => {
+    return React__default.createElement(Input, {
+      ref: forwardedRef,
+      id: uniqueId,
+      key: uniqueId,
+      autoFocus: autoFocus,
+      inputType: inputType,
+      name: name,
+      readOnly: readOnly,
+      disabled: disabled,
+      edit: edit,
+      placeholder: placeholder,
+      defaultValue: defaultValue,
+      value: value,
+      type: type,
+      bold: bold,
+      hasLink: !isEmpty(link),
+      onFocus: onFocus,
+      onChange: onChange,
+      onBlur: onBlur
+    });
+  };
+  if (hidden) return null;
+  return React__default.createElement(CompactTextInput$1, props, label && React__default.createElement(Label, {
+    htmlFor: uniqueId,
+    disabled: disabled
+  }, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(InputContainer, {
+    $hasLabel: !isEmpty(label)
+  }, !memoizedDescriptionToolTip && !link && React__default.createElement("div", null, input()), memoizedDescriptionToolTip && !link && React__default.createElement("div", null, React__default.createElement(Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltip1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())), link && !readOnly && React__default.createElement("div", null, React__default.createElement(Popover, {
+    arrow: false,
+    content: React__default.createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default.createElement(StyledLink, {
+      href: link,
+      target: linkTarget,
+      onClick: e => {
+        if (activeLinkHandler) {
+          e.preventDefault();
+          linkHandler();
+        }
+      },
+      rel: "noreferrer"
+    }, React__default.createElement(SvgLink, null), currentValue) : React__default.createElement(StyledLink, {
+      href: link,
+      target: linkTarget,
+      rel: "noreferrer"
+    }, React__default.createElement(SvgLink, null), currentValue)),
+    key: "tooltip2",
+    placement: "bottom-start",
+    trigger: "focusin",
+    zIndex: 999999,
+    interactive: true
+  }, input())), link && readOnly && React__default.createElement(ReadOnlyLinkContainer, null, React__default.createElement(StyledLink, {
+    href: link,
+    rel: "noreferrer",
+    style: {
+      display: 'inline-block'
+    },
+    target: linkTarget
+  }, currentValue)), !readOnly && !disabled && React__default.createElement(React__default.Fragment, null, React__default.createElement(InputIconContainer, {
+    type: type
+  }, React__default.createElement(SvgEditNote, null)), isEmpty(label) && React__default.createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
+});
+CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.string,
+  success: PropTypes.bool,
+  inputType: PropTypes.string,
+  name: PropTypes.string,
+  defaultValue: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  link: PropTypes.string,
+  linkTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  linkHandler: PropTypes.func,
+  activeLinkHandler: PropTypes.bool,
+  autoSelect: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  edit: PropTypes.bool,
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  bold: PropTypes.bool,
+  hidden: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
+  descriptionToolTip: PropTypes.string,
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element
+} : {};
+CompactTextInput.defaultProps = {
+  inputType: 'text',
+  autoSelect: true,
+  linkTarget: '_self',
+  bold: false,
+  readOnly: false,
+  descriptionToolTip: '',
+  edit: false,
+  hidden: false,
+  type: '',
+  linkHandler: () => {},
+  activeLinkHandler: false,
+  onChange: () => {}
+};
+
+export { CompactTextInput as C };

package/build/InputGroup-1294d190.js

@@ -0,0 +1,23 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+
+const InputGroup$1 = styled.div.attrs(applyDefaultTheme)`
+  margin: 8px 0;
+`;
+
+const InputGroup = React__default.forwardRef(function InputGroup({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(InputGroup$1, _extends({
+    ref: forwardedRef
+  }, props), children);
+});
+InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.node
+} : {};
+InputGroup.defaultProps = {};
+
+export { InputGroup as I };