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

package/build/CompactAutocompleteSelect-52c49513.js

@@ -0,0 +1,546 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { isEmpty } from 'lodash';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import React__default, { useState, useMemo } from 'react';
+import './Alert-e6847a22.js';
+import './Badge-d93586a9.js';
+import './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';
+import Select, { components } from 'react-select';
+import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
+import CreatableSelect from 'react-select/creatable';
+import { S as SvgClose } from './close-a5d37608.js';
+import { S as SvgExpandMore } from './expand-more-c5523c46.js';
+
+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 AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const sharedStyle = css`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 0.875rem;
+  line-height: 1rem;
+  width: 100%;
+  display: block;
+  box-shadow: 'none';
+  flex-basis: ${props => props.$hasLabel ? '66.66%' : '100%'};
+`;
+const CompactAutocompleteSelect$1 = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-family: ${props => props.theme.primaryFontFamily};
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+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;
+  height: 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 2px;
+  ${props => props.disabled && css`
+      cursor: not-allowed;
+    `}
+`;
+const InputContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  width: 100%;
+  height: 19px;
+`;
+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 AsyncCreatableAutocompleteSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+    &&:hover:not(:focus) {
+    ${props => props.disabled && css`
+        background: none !important;
+        cursor: not-allowed;
+      `}
+  }
+`;
+const AsyncAutocompleteSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+  ${props => props.disabled && css`
+      opacity: 0.5;
+    `}
+    &&:hover:not(:focus) {
+    ${props => props.disabled && css`
+        background: none !important;
+        cursor: not-allowed;
+      `}
+  }
+`;
+const AutocompletSelect = styled(Select).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+  ${props => props.disabled && css`
+      opacity: 0.5;
+    `}
+    &&:hover:not(:focus) {
+    ${props => props.disabled && css`
+        background: none !important;
+        cursor: not-allowed;
+      `}
+  }
+`;
+const AutocompletCreatableSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+  ${props => props.disabled && css`
+      opacity: 0.5;
+    `}
+`;
+const Control = styled(components.Control).attrs(applyDefaultTheme)`
+  && {
+    ${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)')};
+
+    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;
+    ${props => props.type && css`
+        animation: ${props => props.type === 'success' ? fadeIn : fadeOut} 0.5s ease-in-out;
+      `}
+
+    ${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'))}
+  }
+
+  & .dropdown-indicator {
+    display: none;
+  }
+
+  &:hover .dropdown-indicator {
+    display: flex;
+  }
+
+  &&:hover {
+    border-color: transparent;
+    ${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(components.Option).attrs(applyDefaultTheme)`
+  && {
+    min-height: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    padding: 6px;
+    cursor: pointer;
+    padding: 1px 13px;
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))}
+    ${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-200'), props.theme.getColor('gray-700'))}
+      `}
+      ${props => props.isFocused && props.isSelected && css`
+        ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+      `}
+  }
+  svg {
+    width: 15px;
+    margin: 0 9px 0 0;
+  }
+  a {
+    display: flex;
+    text-decoration: none;
+    color: inherit;
+  }
+`;
+const Placeholder = styled(components.Placeholder).attrs(applyDefaultTheme)`
+  && {
+    ${props => (props.type === 'error' || props.type === 'warning') && css`
+        ${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(components.SingleValue).attrs(applyDefaultTheme)`
+  && {
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};
+  }
+`;
+const Input = styled(components.Input).attrs(applyDefaultTheme)`
+  && {
+    margin: 0;
+    padding: 0;
+    padding-left: 2px;
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))}
+  }
+`;
+const Menu = styled(components.Menu).attrs(applyDefaultTheme)`
+  && {
+    ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))};
+  }
+`;
+const ValueContainer = styled(components.ValueContainer).attrs(applyDefaultTheme)`
+  && {
+    padding: 0;
+  }
+`;
+const ClearIndicator = styled(components.ClearIndicator).attrs(applyDefaultTheme)`
+  && {
+    display: ${props => props.isFocused ? 'flex' : 'none'};
+    padding: 0;
+    cursor: pointer;
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+  }
+`;
+const DropdownIndicator = styled(components.DropdownIndicator).attrs(applyDefaultTheme)`
+  && {
+    display: ${props => props.isFocused ? 'flex' : 'none'};
+    padding: 0;
+    width: 18px;
+    margin-left: 2px;
+    cursor: pointer;
+    margin-top: 1px;
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+  }
+`;
+const DropdownIndicatorIcon = styled(SvgExpandMore).attrs(applyDefaultTheme)`
+  width: 12px;
+`;
+const ClearIndicatorIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+  width: 8px;
+  margin-right: 4px;
+  ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+  stroke-width: 2px;
+`;
+const IndicatorSeparator = styled(components.IndicatorSeparator).attrs(applyDefaultTheme)`
+  && {
+    display: ${props => props.isFocused ? 'flex' : 'none'};
+    margin: 4px;
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+  }
+`;
+
+const CompactAutocompleteSelect = React__default.forwardRef(function CompactAutocompleteSelect({
+  label,
+  availableOptions,
+  placeholder,
+  selectedOption,
+  loadOptions,
+  noOptionsMessageFunc,
+  createNewOptionMessageFunc,
+  onUpdateCallback,
+  loadingMessageFunc,
+  creatable,
+  readOnly,
+  edit,
+  disabled,
+  hidden,
+  type,
+  descriptionToolTip,
+  loadingIcon,
+  successIcon,
+  ...props
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  const [selected, setSelected] = useState(selectedOption);
+  const [focused, setFocused] = useState(false);
+  const [cacheUnique, setCacheUnique] = useState(0);
+  const memoizedDescriptionToolTip = useMemo(() => {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  const Control$1 = props => {
+    return React__default.createElement(Control, _extends({
+      className: "select-control",
+      edit: edit,
+      type: type
+    }, props));
+  };
+  const ValueContainer$1 = useMemo(() => {
+    const valueContainer = props => {
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(ValueContainer, _extends({
+        type: type
+      }, props)));
+    };
+    valueContainer.displayName = 'ValueContainerWrapper';
+    return valueContainer;
+  }, [type]);
+  const Input$1 = useMemo(() => {
+    const selectInput = props => {
+      return React__default.createElement(Input, _extends({
+        className: "select-input"
+      }, props));
+    };
+    selectInput.displayName = 'InputWrapper';
+    return selectInput;
+  }, []);
+  const Menu$1 = useMemo(() => {
+    const menu = props => {
+      return React__default.createElement(Menu, _extends({
+        className: "select-menu"
+      }, props));
+    };
+    menu.displayName = 'MenuWrapper';
+    return menu;
+  }, []);
+  const Placeholder$1 = props => {
+    return React__default.createElement(Placeholder, _extends({
+      className: "select-placeholder",
+      type: type
+    }, props));
+  };
+  const Option$1 = props => {
+    return !props.data.link ? React__default.createElement(Option, _extends({
+      className: "menu-item"
+    }, props)) : React__default.createElement(Option, props, React__default.createElement("a", {
+      href: props.data.link
+    }, props.data.icon, props.label));
+  };
+  const SingleValue$1 = props => {
+    return React__default.createElement(SingleValue, _extends({
+      className: "menu-value"
+    }, props));
+  };
+  Option$1.propTypes = process.env.NODE_ENV !== "production" ? {
+    data: PropTypes.shape({
+      icon: PropTypes.node,
+      link: PropTypes.string
+    }),
+    label: PropTypes.string
+  } : {};
+  const DropdownIndicator$1 = props => {
+    return React__default.createElement(DropdownIndicator, _extends({
+      className: "dropdown-indicator"
+    }, props), React__default.createElement(DropdownIndicatorIcon, null));
+  };
+  const ClearIndicator$1 = props => {
+    return React__default.createElement(ClearIndicator, _extends({
+      className: "clear-indicator"
+    }, props), React__default.createElement(ClearIndicatorIcon, null));
+  };
+  const IndicatorSeparator$1 = props => {
+    return React__default.createElement(IndicatorSeparator, _extends({
+      className: "indicator-separator"
+    }, props));
+  };
+  const innerComponents = {
+    Control: Control$1,
+    ValueContainer: ValueContainer$1,
+    DropdownIndicator: DropdownIndicator$1,
+    IndicatorSeparator: IndicatorSeparator$1,
+    ClearIndicator: ClearIndicator$1,
+    Option: Option$1,
+    SingleValue: SingleValue$1,
+    Input: Input$1,
+    Placeholder: Placeholder$1,
+    Menu: Menu$1
+  };
+  const sharedSelectProps = {
+    ref: forwardedRef,
+    options: loadOptions ? undefined : availableOptions,
+    value: selected,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    formatCreateLabel: createNewOptionMessageFunc,
+    noOptionsMessage: input => {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onFocus: () => {
+      setFocused(true);
+    },
+    onBlur: () => {
+      setFocused(false);
+    },
+    focused: focused,
+    isDisabled: disabled || readOnly,
+    components: innerComponents,
+    isClearable: true,
+    isSearchable: true,
+    placeholder: placeholder,
+    id: uniqueId,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onChange: (selected, actionMeta) => {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          if (loadOptions) {
+            setCacheUnique(cacheUnique + 1);
+          }
+          setSelected(selected);
+          break;
+        case 'select-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'remove-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'pop-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'deselect-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'clear':
+          setSelected(selected);
+          break;
+        default:
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+      }
+    }
+  };
+  if (hidden) return null;
+  const input = () => {
+    return React__default.createElement(CompactAutocompleteSelect$1, {
+      disabled: disabled
+    }, React__default.createElement(InputContainer, null, label && React__default.createElement(Label, {
+      htmlFor: uniqueId,
+      disabled: disabled
+    }, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), loadOptions ? creatable ? React__default.createElement(AsyncCreatableAutocompleteSelect, _extends({
+      $hasLabel: !isEmpty(label)
+    }, sharedSelectProps, props)) : React__default.createElement(AsyncAutocompleteSelect, _extends({
+      $hasLabel: !isEmpty(label)
+    }, sharedSelectProps, props)) : creatable ? React__default.createElement(AutocompletCreatableSelect, _extends({
+      $hasLabel: !isEmpty(label)
+    }, sharedSelectProps, props)) : React__default.createElement(AutocompletSelect, _extends({
+      $hasLabel: !isEmpty(label)
+    }, sharedSelectProps, props))));
+  };
+  return React__default.createElement(React__default.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default.createElement("div", null, React__default.createElement(Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
+});
+CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  availableOptions: PropTypes.arrayOf(PropTypes.object),
+  selectedOption: PropTypes.object,
+  loadOptions: PropTypes.func,
+  loadingMessageFunc: PropTypes.func,
+  createNewOptionMessageFunc: PropTypes.func,
+  noOptionsMessageFunc: PropTypes.func,
+  readOnly: PropTypes.bool,
+  edit: PropTypes.bool,
+  hidden: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  onUpdateCallback: PropTypes.func,
+  creatable: PropTypes.bool,
+  disabled: PropTypes.bool,
+  type: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  descriptionToolTip: PropTypes.string,
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element
+} : {};
+CompactAutocompleteSelect.defaultProps = {
+  noOptionsMessageFunc: inputValue => {
+    if (inputValue) {
+      return `No matches for "${inputValue}"`;
+    } else {
+      return 'No available options';
+    }
+  },
+  readOnly: false,
+  disabled: false,
+  creatable: true,
+  edit: false,
+  error: false,
+  warning: false,
+  hidden: false,
+  type: '',
+  descriptionToolTip: ''
+};
+
+export { CompactAutocompleteSelect as C };