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

package/cjs/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.js

@@ -1,363 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-var Select = require('react-select');
-var reactSelectAsyncPaginate = require('react-select-async-paginate');
-var reactSelectCreatable_esm = require('../../../node_modules/react-select/creatable/dist/react-select-creatable.esm.js');
-var close = require('../../../icons/close.svg.js');
-var expandMore = require('../../../icons/expand-more.svg.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
-
-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,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25,
-  _t26,
-  _t27,
-  _t28,
-  _t29,
-  _t30,
-  _t31,
-  _t32,
-  _t33,
-  _t34,
-  _t35,
-  _t36,
-  _t37;
-const fadeIn = styled.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 = styled.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 = styled.keyframes(_t3 || (_t3 = _`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`));
-const fadeOutCheck = styled.keyframes(_t4 || (_t4 = _`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`));
-const AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm["default"]);
-const sharedStyle = styled.css(_t5 || (_t5 = _`
-  font-family: ${0};
-  font-size: 0.875rem;
-  line-height: 1rem;
-  width: 100%;
-  display: block;
-  box-shadow: 'none';
-  flex-basis: ${0};
-`), props => props.theme.primaryFontFamily, props => props.$hasLabel ? '66.66%' : '100%');
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const CompactAutocompleteSelect = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
-  display: flex;
-  align-items: center;
-  height: 24px;
-  font-family: ${0};
-  ${0}
-`), props => props.theme.primaryFontFamily, props => props.disabled && styled.css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)));
-const Label = styled__default["default"].label.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.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: 2px;
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t9 || (_t9 = _`
-      cursor: not-allowed;
-    `)));
-const InputContainer = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _`
-  display: flex;
-  width: 100%;
-  height: 19px;
-`));
-const SuccessContainer = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
-  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 AsyncCreatableAutocompleteSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
-  ${0}
-  ${0}
-    &&:hover:not(:focus) {
-    ${0}
-  }
-`), sharedStyle, props => props.disabled && styled.css(_t11 || (_t11 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)), props => props.disabled && styled.css(_t12 || (_t12 = _`
-        background: none !important;
-        cursor: not-allowed;
-      `)));
-const AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
-  ${0}
-  ${0}
-    &&:hover:not(:focus) {
-    ${0}
-  }
-`), sharedStyle, props => props.disabled && styled.css(_t14 || (_t14 = _`
-      opacity: 0.5;
-    `)), props => props.disabled && styled.css(_t15 || (_t15 = _`
-        background: none !important;
-        cursor: not-allowed;
-      `)));
-const AutocompletSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
-  ${0}
-  ${0}
-    &&:hover:not(:focus) {
-    ${0}
-  }
-`), sharedStyle, props => props.disabled && styled.css(_t17 || (_t17 = _`
-      opacity: 0.5;
-    `)), props => props.disabled && styled.css(_t18 || (_t18 = _`
-        background: none !important;
-        cursor: not-allowed;
-      `)));
-const AutocompletCreatableSelect = styled__default["default"](reactSelectCreatable_esm["default"]).attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
-  ${0}
-  ${0}
-`), sharedStyle, props => props.disabled && styled.css(_t20 || (_t20 = _`
-      opacity: 0.5;
-    `)));
-const Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
-  && {
-    ${0};
-    ${0};
-
-    height: 22px;
-    min-height: 22px;
-    box-shadow: none;
-    box-sizing: border-box;
-    padding: 1px 3px 0 8.7px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    background-color: transparent;
-    ${0}
-
-    ${0};
-
-    ${0};
-
-    ${0};
-
-    ${0};
-
-    ${0}
-    ${0}
-        ${0}
-  }
-
-  & .dropdown-indicator {
-    display: none;
-  }
-
-  &:hover .dropdown-indicator {
-    display: flex;
-  }
-
-  &&:hover {
-    border-color: transparent;
-    ${0};
-
-    ${0};
-
-    ${0};
-
-    ${0};
-  }
-`), 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.type && styled.css(_t22 || (_t22 = _`
-        animation: ${0} 0.5s ease-in-out;
-      `), props => props.type === 'success' ? fadeIn : fadeOut), props => props.type === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFFDE8'), props => props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C'), props => props.type === 'instructions-warning' && props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C'), props => props.type === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#FBEAE6'), props => props.isFocused && !props.type === 'instructions-warning' && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600')), props => props.type === 'warning' && props.isFocused && props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props => props.type === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500')), props => !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#F4E21E'), props => props.type === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0'));
-const Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
-  && {
-    min-height: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    padding: 6px;
-    cursor: pointer;
-    padding: 1px 13px;
-    ${0}
-    ${0}
-    ${0}
-      ${0}
-  }
-  svg {
-    width: 15px;
-    margin: 0 9px 0 0;
-  }
-  a {
-    display: flex;
-    text-decoration: none;
-    color: inherit;
-  }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.isFocused && styled.css(_t24 || (_t24 = _`
-        ${0}
-      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && styled.css(_t25 || (_t25 = _`
-        ${0}
-
-        ${0}
-      `), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => props.isFocused && props.isSelected && styled.css(_t26 || (_t26 = _`
-        ${0}
-      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))));
-const Placeholder = styled__default["default"](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_t27 || (_t27 = _`
-  && {
-    ${0}
-    ${0};
-  }
-`), props => (props.type === 'error' || props.type === 'warning') && styled.css(_t28 || (_t28 = _`
-        ${0}
-      `), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => (props.type === 'error' || props.type === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6'));
-const SingleValue = styled__default["default"](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
-  && {
-    ${0};
-  }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
-const Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_t30 || (_t30 = _`
-  && {
-    margin: 0;
-    padding: 0;
-    padding-left: 2px;
-    ${0}
-  }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
-const Menu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_t31 || (_t31 = _`
-  && {
-    ${0};
-  }
-`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const ValueContainer = styled__default["default"](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_t32 || (_t32 = _`
-  && {
-    padding: 0;
-  }
-`));
-const ClearIndicator = styled__default["default"](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_t33 || (_t33 = _`
-  && {
-    display: ${0};
-    padding: 0;
-    cursor: pointer;
-    ${0};
-  }
-`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const DropdownIndicator = styled__default["default"](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_t34 || (_t34 = _`
-  && {
-    display: ${0};
-    padding: 0;
-    width: 18px;
-    margin-left: 2px;
-    cursor: pointer;
-    margin-top: 1px;
-    ${0};
-  }
-`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const DropdownIndicatorIcon = styled__default["default"](expandMore.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t35 || (_t35 = _`
-  width: 12px;
-`));
-const ClearIndicatorIcon = styled__default["default"](close.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t36 || (_t36 = _`
-  width: 8px;
-  margin-right: 4px;
-  ${0};
-  stroke-width: 2px;
-`), props => props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const IndicatorSeparator = styled__default["default"](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_t37 || (_t37 = _`
-  && {
-    display: ${0};
-    margin: 4px;
-    ${0};
-  }
-`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-
-exports.AsyncAutocompleteSelect = AsyncAutocompleteSelect;
-exports.AsyncCreatableAutocompleteSelect = AsyncCreatableAutocompleteSelect;
-exports.AutocompletCreatableSelect = AutocompletCreatableSelect;
-exports.AutocompletSelect = AutocompletSelect;
-exports.ClearIndicator = ClearIndicator;
-exports.ClearIndicatorIcon = ClearIndicatorIcon;
-exports.CompactAutocompleteSelect = CompactAutocompleteSelect;
-exports.Control = Control;
-exports.DropdownIndicator = DropdownIndicator;
-exports.DropdownIndicatorIcon = DropdownIndicatorIcon;
-exports.IndicatorSeparator = IndicatorSeparator;
-exports.Input = Input;
-exports.InputContainer = InputContainer;
-exports.Label = Label;
-exports.Menu = Menu;
-exports.Option = Option;
-exports.Placeholder = Placeholder;
-exports.SingleValue = SingleValue;
-exports.SuccessContainer = SuccessContainer;
-exports.ValueContainer = ValueContainer;

package/cjs/components/inputs/CompactAutocompleteSelect/inputs/CompactAutocompleteSelect/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect.js');
-
-
-
-exports["default"] = CompactAutocompleteSelect["default"];

package/cjs/components/inputs/CompactStarRating/CompactStarRating.js

@@ -1,177 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var starFilled = require('../../../icons/star-filled.svg.js');
-var star = require('../../../icons/star.svg.js');
-var CompactStarRating_styled = require('./CompactStarRating.styled.js');
-var Tooltip = require('../../data/Tooltip/Tooltip.js');
-var index$1 = require('../../../_virtual/index.js');
-
-const _excluded = ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "type", "descriptionToolTip", "disabled", "readOnly", "edit", "hidden", "loadingIcon", "successIcon"];
-const CompactStarRating = index["default"].forwardRef(function CompactStarRating(_ref, forwardedRef) {
-  let {
-      label,
-      icon,
-      iconFill,
-      max,
-      defaultValue,
-      value,
-      name,
-      viewEmpty,
-      onChange,
-      onBlur,
-      type,
-      descriptionToolTip,
-      disabled,
-      readOnly,
-      edit,
-      hidden,
-      loadingIcon,
-      successIcon
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const stars = Array.from(Array(max).keys());
-  const [rating, setRating] = index$1.react.exports.useState('');
-  const [hover, setHover] = index$1.react.exports.useState(false);
-  const [tempRating, setTempRating] = index$1.react.exports.useState('');
-  const [initialRating, setInitialRating] = index$1.react.exports.useState('');
-  const inputRef = index$1.react.exports.useRef();
-  index$1.react.exports.useEffect(() => {
-    setRating(value || defaultValue);
-    setInitialRating(value || defaultValue);
-  }, [value, defaultValue]);
-  index$1.react.exports.useEffect(() => {
-    inputRef.current.value = String(rating);
-    if (rating === initialRating) {
-      return undefined;
-    } else {
-      setInitialRating(rating);
-      onChange({
-        target: inputRef.current
-      });
-    }
-  }, [rating]);
-  const memoizedDescriptionToolTip = index$1.react.exports.useMemo(() => {
-    return descriptionToolTip;
-  }, [descriptionToolTip]);
-  const starIconRender = key => {
-    if (rating > 0 && rating >= key + 1) {
-      return index["default"].createElement(CompactStarRating_styled.StarFill, {
-        readOnly: readOnly,
-        disabled: disabled,
-        onClick: event => {
-          event.preventDefault();
-          if (key + 1 > 1) {
-            return setRating(key + 1);
-          } else if (key + 1 == 1) {
-            setRating(current => {
-              return current === 1 ? 0 : key + 1;
-            });
-          }
-        },
-        onMouseEnter: () => {
-          setTempRating(key + 1);
-          setHover(true);
-        },
-        onMouseLeave: () => {
-          setTempRating(0);
-          setHover(false);
-        },
-        $hover: hover && key + 1 <= tempRating,
-        type: "button",
-        key: key
-      }, iconFill);
-    } else if (viewEmpty) {
-      return index["default"].createElement(CompactStarRating_styled.Star, {
-        readOnly: readOnly,
-        disabled: disabled,
-        onClick: event => {
-          event.preventDefault();
-          setRating(key + 1);
-        },
-        onMouseEnter: () => {
-          setTempRating(key + 1);
-          setHover(true);
-        },
-        onMouseLeave: () => {
-          setTempRating(0);
-          setHover(false);
-        },
-        $hover: hover && key + 1 <= tempRating,
-        type: "button",
-        key: key
-      }, icon);
-    }
-  };
-  const input = () => {
-    return index["default"].createElement(CompactStarRating_styled.CompactStarRating, _rollupPluginBabelHelpers["extends"]({
-      ref: forwardedRef,
-      readOnly: readOnly,
-      disabled: disabled,
-      onChange: onChange,
-      onBlur: onBlur
-    }, props), index["default"].createElement(CompactStarRating_styled.labelWidth, {
-      disabled: disabled
-    }, label, index["default"].createElement(CompactStarRating_styled.SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), index["default"].createElement(CompactStarRating_styled.starsWidth, {
-      $edit: edit,
-      type: type,
-      readOnly: readOnly
-    }, stars.map(key => {
-      return index["default"].createElement("div", {
-        key: key
-      }, index["default"].createElement("input", {
-        type: "number",
-        name: name,
-        ref: inputRef
-      }), starIconRender(key));
-    })));
-  };
-  if (hidden) return null;
-  return index["default"].createElement(index["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && index["default"].createElement("div", null, index["default"].createElement(Tooltip["default"], {
-    content: memoizedDescriptionToolTip,
-    key: "tooltipTextArea1",
-    placement: "bottom-end",
-    trigger: 'mouseenter',
-    zIndex: 999999
-  }, input())));
-});
-CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
-  readOnly: index$2["default"].bool,
-  disabled: index$2["default"].bool,
-  edit: index$2["default"].bool,
-  value: index$2["default"].number,
-  type: index$2["default"].oneOf(['', 'error', 'warning', 'loading', 'success']),
-  defaultValue: index$2["default"].number,
-  label: index$2["default"].string,
-  name: index$2["default"].string,
-  icon: index$2["default"].element,
-  iconFill: index$2["default"].element,
-  max: index$2["default"].number,
-  viewEmpty: index$2["default"].bool,
-  onChange: index$2["default"].func,
-  onBlur: index$2["default"].func,
-  hidden: index$2["default"].bool,
-  loadingIcon: index$2["default"].element,
-  successIcon: index$2["default"].element,
-  descriptionToolTip: index$2["default"].string
-} : {};
-CompactStarRating.defaultProps = {
-  label: 'Rating',
-  max: 5,
-  value: 0,
-  defaultValue: 0,
-  viewEmpty: true,
-  icon: index["default"].createElement(star.ReactComponent, null),
-  iconFill: index["default"].createElement(starFilled.ReactComponent, null),
-  hidden: false,
-  type: '',
-  descriptionToolTip: '',
-  onChange: () => {}
-};
-var CompactStarRating$1 = CompactStarRating;
-
-exports["default"] = CompactStarRating$1;