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

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

@@ -1,256 +0,0 @@
-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,
-  _t0,
-  _t1,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20;
-const fadeIn = keyframes(_t || (_t = _`
-  from {
-    background-color: ${0};
-  }
-  to {
-    background-color: ${0};
-  }
-`), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'));
-const fadeOut = keyframes(_t2 || (_t2 = _`
-  from {
-    background-color: ${0};
-  }
-  to {
-    background-color: ${0};
-  }
-`), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'));
-const fadeInCheck = keyframes(_t3 || (_t3 = _`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`));
-const fadeOutCheck = keyframes(_t4 || (_t4 = _`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`));
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const CompactStarRating = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 500;
-  height: 24px;
-  width: 100%;
-  display: flex;
-
-  align-items: center;
-  input[type='number'] {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    margin: 0;
-  }
-
-  ${0}
-
-  ${0}
-`), props => props.theme.primaryFontFamily, props => props.readOnly && css(_t6 || (_t6 = _`
-      pointer-events: none;
-    `)), props => props.disabled && css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)));
-const labelWidth = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  width: 33.33%;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  font: normal normal normal 14px/16px Roboto;
-  letter-spacing: 0px;
-  padding: 0;
-  height: 19px;
-  cursor: default;
-  justify-content: space-between;
-  ${0};
-  ${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 SuccessContainer = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t0 || (_t0 = _`
-  opacity: 1;
-  pointer-events: none;
-  display: flex;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 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')));
-const starsWidth = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
-  display: flex;
-  width: 66.66%;
-  border-radius: 3px;
-  height: 24px;
-  align-items: center;
-  padding-left: 8px;
-  box-sizing: border-box;
-  border: 1px solid;
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-  &&:not(:hover):not(:focus) {
-    ${0};
-    ${0};
-  }
-  &&:hover:not(:focus) {
-    ${0}
-
-    ${0};
-
-    ${0};
-
-    ${0};
-  }
-`), props => props.readOnly && css(_t10 || (_t10 = _`
-      border: none;
-    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'success' && css(_t11 || (_t11 = _`
-      animation: ${0} 0.5s ease-in-out;
-    `), props => props.success ? fadeIn : fadeOut), props => props.type === 'error' && css(_t12 || (_t12 = _`
-      ${0};
-      ${0}
-    `), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning' && css(_t13 || (_t13 = _`
-      ${0};
-      ${0}
-    `), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8')), 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.$edit && 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.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0'));
-const Star = styled.button.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    height: 12px;
-    padding-left: 4px;
-    transition: color 250ms;
-  }
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.$hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.readOnly && css(_t15 || (_t15 = _`
-      pointer-events: none;
-    `)), props => props.disabled && css(_t16 || (_t16 = _`
-      button {
-        cursor: not-allowed;
-      }
-      > * {
-        cursor: not-allowed;
-      }
-    `)));
-const StarFill = styled.button.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t17 || (_t17 = _`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    height: 12px;
-    padding-left: 4px;
-    transition: color 250ms;
-  }
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.$hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.readOnly && css(_t18 || (_t18 = _`
-      pointer-events: none;
-    `)), props => props.disabled && css(_t19 || (_t19 = _`
-      button {
-        cursor: not-allowed;
-      }
-      > * {
-        cursor: not-allowed;
-      }
-    `)));
-styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t20 || (_t20 = _`
-  opacity: 1;
-  pointer-events: none;
-  margin-left: auto;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  ${0}
-  > svg {
-    width: 13px;
-  }
-`), props => props.type === 'success' ? 0 : 1, props => props.type === 'success' ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500')));
-
-export { CompactStarRating, Star, StarFill, SuccessContainer, labelWidth, starsWidth };

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

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

package/esm/components/inputs/CompactTextInput/CompactTextInput.js

@@ -1,183 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { isFunction, isEmpty } from 'lodash';
-import { nanoid } from 'nanoid';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import React from '../../../node_modules/react/index.js';
-import { ReactComponent as SvgEditNote } from '../../../icons/edit-note.svg.js';
-import { ReactComponent as SvgLink } from '../../../icons/link.svg.js';
-import { CompactTextInput as CompactTextInput$2, Label, SuccessContainer, InputContainer, LinkPopoverContainer, StyledLink, ReadOnlyLinkContainer, InputIconContainer, InputSuccessContainer, Input } from './CompactTextInput.styled.js';
-import { r as react } from '../../../_virtual/index.js';
-import Tooltip from '../../data/Tooltip/Tooltip.js';
-import Popover from '../../data/Popover/Popover.js';
-
-const _excluded = ["label", "inputType", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "linkHandler", "activeLinkHandler", "autoSelect", "readOnly", "disabled", "edit", "type", "descriptionToolTip", "bold", "hidden", "onChange", "onFocus", "onBlur", "loadingIcon", "successIcon"];
-const CompactTextInput = React.forwardRef(function CompactTextInput(_ref, forwardedRef) {
-  let {
-      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
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const [uniqueId] = react.exports.useState(nanoid());
-  const [currentValue, setCurrentValue] = react.exports.useState();
-  const [autoFocus, setAutoFocus] = react.exports.useState(false);
-  const memoizedDescriptionToolTip = react.exports.useMemo(() => {
-    return descriptionToolTip;
-  }, [descriptionToolTip]);
-  react.exports.useEffect(() => {
-    setCurrentValue(value || defaultValue);
-    setAutoFocus(false);
-  }, [value, defaultValue]);
-  const onChange = react.exports.useCallback(event => {
-    setCurrentValue(event.target.value);
-    if (!autoFocus) {
-      setAutoFocus(true);
-    }
-    if (isFunction(onChangeProp)) {
-      onChangeProp(event);
-    }
-  }, [onChangeProp]);
-  const onFocus = react.exports.useCallback(event => {
-    if (autoSelect) {
-      event.target.select();
-    }
-    if (isFunction(onFocusProp)) {
-      onFocusProp(event);
-    }
-  }, [autoSelect, readOnly, onFocusProp]);
-  const onBlur = react.exports.useCallback(event => {
-    if (isFunction(onBlurProp)) {
-      onBlurProp(event);
-    }
-  }, [onBlurProp]);
-  const input = () => {
-    return React.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.createElement(CompactTextInput$2, props, label && React.createElement(Label, {
-    htmlFor: uniqueId,
-    disabled: disabled
-  }, label, React.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React.createElement(InputContainer, {
-    $hasLabel: !isEmpty(label)
-  }, !memoizedDescriptionToolTip && !link && React.createElement("div", null, input()), memoizedDescriptionToolTip && !link && React.createElement("div", null, React.createElement(Tooltip, {
-    content: memoizedDescriptionToolTip,
-    key: "tooltip1",
-    placement: "bottom-end",
-    trigger: 'mouseenter',
-    zIndex: 999999
-  }, input())), link && !readOnly && React.createElement("div", null, React.createElement(Popover, {
-    arrow: false,
-    content: React.createElement(LinkPopoverContainer, null, activeLinkHandler ? React.createElement(StyledLink, {
-      href: link,
-      target: linkTarget,
-      onClick: e => {
-        if (activeLinkHandler) {
-          e.preventDefault();
-          linkHandler();
-        }
-      },
-      rel: "noreferrer"
-    }, React.createElement(SvgLink, null), currentValue) : React.createElement(StyledLink, {
-      href: link,
-      target: linkTarget,
-      rel: "noreferrer"
-    }, React.createElement(SvgLink, null), currentValue)),
-    key: "tooltip2",
-    placement: "bottom-start",
-    trigger: "focusin",
-    zIndex: 999999,
-    interactive: true
-  }, input())), link && readOnly && React.createElement(ReadOnlyLinkContainer, null, React.createElement(StyledLink, {
-    href: link,
-    rel: "noreferrer",
-    style: {
-      display: 'inline-block'
-    },
-    target: linkTarget
-  }, currentValue)), !readOnly && !disabled && React.createElement(React.Fragment, null, React.createElement(InputIconContainer, {
-    type: type
-  }, React.createElement(SvgEditNote, null)), isEmpty(label) && React.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: () => {}
-};
-var CompactTextInput$1 = CompactTextInput;
-
-export { CompactTextInput$1 as default };