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

package/build/MultiSelect-9f497e62.js

@@ -0,0 +1,461 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState, useEffect, useMemo } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import { nanoid } from 'nanoid';
+import styled, { css } from 'styled-components';
+import { S as SvgClose } from './close-a5d37608.js';
+import Select, { components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
+
+const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const showMoreHeight = 114;
+const sharedStyle = css`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 12px;
+  font-weight: 400;
+  position: relative;
+`;
+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;
+  cursor: pointer;
+  height: 19px;
+  display: flex;
+  align-items: center;
+`;
+const MultiSelect$1 = styled(Select).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
+`;
+const Control = styled(components.Control).attrs(applyDefaultTheme)`
+  && {
+    align-items: flex-start;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  :hover {
+    cursor: ${props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer'};
+  }
+`;
+const ValueContainer = styled(components.ValueContainer)`
+  && {
+    align-items: flex-start;
+    gap: 8px;
+    padding: 0;
+
+    max-height: ${props => {
+  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}} !important;
+
+    ${props => (props.error || props.warning) && css`
+        border: 1px solid;
+        border-radius: 3px;
+        padding: 4px;
+
+        border-color: ${props => props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
+      `}
+  }
+`;
+const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+  }
+`;
+const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+
+    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'))}
+
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))}
+
+    > div {
+      align-items: center;
+      display: flex;
+      font-size: 12px;
+      min-height: 26px;
+
+      :first-of-type {
+        padding: ${props => props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px'};
+      }
+
+      :last-of-type:not(:only-child) {
+        padding: 0 8px 0 5px;
+        height: 100%;
+        width: fit-content;
+      }
+
+      :last-of-type:not(:only-child):hover {
+        background-color: ${props => props.theme.getColor('red-500')};
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        cursor: pointer;
+      }
+
+      svg {
+        stroke: white;
+        stroke-width: 2px;
+        width: 8px;
+      }
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+`;
+const MultiValueRemove$1 = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;
+const Input = styled(components.Input).attrs(applyDefaultTheme)`
+  align-self: center;
+  font-size: ${props => props.$focused ? '14px' : '12px'};
+  min-width: 150px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+
+  ${props => !props.$focused && css`
+      ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
+
+      :before {
+        height: 100%;
+        white-space: nowrap;
+        width: fit-content;
+        content: '${props => props.edittext}';
+      }
+    `}
+  }
+`;
+const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`
+  font-size: 14px;
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'))}
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const sharedOptionStyle = css`
+  ${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-100'), props.theme.getColor('gray-900'))}
+    `}
+
+  ${props => props.isFocused && props.isSelected && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const Option$1 = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+`;
+const SelectedOption$1 = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+
+  display: flex !important;
+  justify-content: space-between;
+`;
+const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+  stroke-width: 1px;
+  width: 8px;
+
+  ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  max-height: ${showMoreHeight + 16}px;
+  top: 0;
+  width: 100%;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))}
+
+  :hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+`;
+const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: block;
+  height: 100%;
+  max-height: ${showMoreHeight}px;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  ${props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box')}
+`;
+const ShowMoreText = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  width: 100%;
+  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}
+`;
+const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
+  color: ${props => props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
+  font-size: 0.75rem;
+  margin-top: 8px;
+  padding: 0 12px;
+`;
+
+const MultiSelect = React__default.forwardRef(function MultiSelect({
+  label,
+  selectedOptions,
+  availableOptions,
+  loadOptions,
+  loadingMessageFunc,
+  onUpdateCallback,
+  editText,
+  createNewOptionMessageFunc,
+  noOptionsMessageFunc,
+  onMultiValueClick,
+  showMore,
+  showMoreText,
+  displayTotalOnShowMore,
+  creatable,
+  readOnly,
+  hidden,
+  disabled,
+  error,
+  warning,
+  ...props
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  const [selected, setSelected] = useState(selectedOptions);
+  const [focused, setFocused] = useState(false);
+  const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
+  const [cacheUnique, setCacheUnique] = useState(0);
+  useEffect(() => {
+    setSelected(selectedOptions);
+  }, [selectedOptions]);
+  const handleShowMoreClick = () => {
+    setDisplayShowMore(false);
+  };
+  const Control$1 = useMemo(() => {
+    const ControlWrapper = innerProps => {
+      return React__default.createElement(Control, _extends({
+        className: "multi-select-control",
+        readOnly: readOnly
+      }, innerProps));
+    };
+    ControlWrapper.displayName = 'ControlWrapper';
+    return ControlWrapper;
+  }, []);
+  const ValueContainer$1 = useMemo(() => {
+    const ValueContainerWrapper = innerProps => {
+      return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, {
+        htmlFor: uniqueId
+      }, label), React__default.createElement(ValueContainer, _extends({
+        showMore: displayShowMore,
+        error: error,
+        warning: warning,
+        className: "multi-select-values-container"
+      }, innerProps)));
+    };
+    ValueContainerWrapper.displayName = 'ValueContainerWrapper';
+    return ValueContainerWrapper;
+  }, [displayShowMore, error, warning]);
+  const MultiValue$1 = innerProps => {
+    return React__default.createElement(MultiValueWrapper, {
+      className: "multi-value-wrapper",
+      onMouseDown: e => {
+        e.stopPropagation();
+        if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
+          onMultiValueClick(innerProps.data);
+        }
+      }
+    }, React__default.createElement(MultiValue, _extends({
+      className: "multi-value",
+      readOnly: readOnly
+    }, innerProps)));
+  };
+  const Input$1 = useMemo(() => {
+    const InputWrapper = innerProps => {
+      return React__default.createElement(Input, _extends({
+        className: "multi-select-input",
+        $focused: focused,
+        edittext: editText
+      }, innerProps, {
+        isDisabled: readOnly || disabled
+      }));
+    };
+    InputWrapper.displayName = 'InputWrapper';
+    return InputWrapper;
+  }, [focused]);
+  const innerComponents = {
+    DropdownIndicator: null,
+    Control: Control$1,
+    MultiValue: MultiValue$1,
+    MultiValueRemove: innerProps => {
+      return readOnly || disabled ? false : MultiValueRemove(innerProps);
+    },
+    ValueContainer: ValueContainer$1,
+    Input: Input$1,
+    Menu,
+    Option: innerProps => {
+      return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);
+    }
+  };
+  const sharedSelectProps = {
+    ref: forwardedRef,
+    value: selected,
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    editText: editText,
+    formatCreateLabel: createNewOptionMessageFunc,
+    showMore: displayShowMore,
+    readOnly: readOnly,
+    isDisabled: disabled,
+    components: innerComponents,
+    focused: focused,
+    isMulti: true,
+    isClearable: false,
+    placeholder: null,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    noOptionsMessage: input => {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onChange: (selectedOptions, actionMeta) => {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          if (loadOptions) {
+            setCacheUnique(cacheUnique + 1);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'select-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'remove-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'pop-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'deselect-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'clear':
+          break;
+        default:
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          setSelected(selectedOptions);
+          break;
+      }
+    }
+  };
+  if (hidden) return null;
+  return React__default.createElement(MultiSelectWrapper, {
+    error: error,
+    warning: warning
+  }, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(AsyncMultiSelect, _extends({}, sharedSelectProps, props)) : creatable ? React__default.createElement(CreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(MultiSelect$1, _extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
+    onClick: handleShowMoreClick
+  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default.createElement(ErrorMessage, {
+    error: error,
+    warning: warning
+  }, error ? error : warning));
+});
+MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.string,
+  availableOptions: PropTypes.arrayOf(PropTypes.object),
+  selectedOptions: PropTypes.arrayOf(PropTypes.object),
+  loadOptions: PropTypes.func,
+  loadingMessageFunc: PropTypes.func,
+  onUpdateCallback: PropTypes.func,
+  editText: PropTypes.string.isRequired,
+  creatable: PropTypes.bool,
+  createNewOptionMessageFunc: PropTypes.func,
+  noOptionsMessageFunc: PropTypes.func,
+  onMultiValueClick: PropTypes.func,
+  showMore: PropTypes.bool,
+  showMoreText: PropTypes.string,
+  displayTotalOnShowMore: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  hidden: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+} : {};
+MultiSelect.defaultProps = {
+  noOptionsMessageFunc: inputValue => {
+    if (inputValue) {
+      return `No matches for "${inputValue}"`;
+    } else {
+      return 'No available options';
+    }
+  },
+  showMore: false,
+  displayTotalOnShowMore: true,
+  readOnly: false,
+  disabled: false,
+  creatable: false,
+  error: false,
+  warning: false,
+  showMoreText: 'Show more',
+  hidden: false
+};
+const MultiValueRemove = innerProps => {
+  return React__default.createElement(MultiValueRemove$1, innerProps, React__default.createElement(SvgClose, {
+    className: "multi-value-remove-icon"
+  }));
+};
+const Menu = innerProps => {
+  return React__default.createElement(DropdownMenu, innerProps);
+};
+const Option = innerProps => {
+  return React__default.createElement(Option$1, _extends({
+    className: "multi-select-dropdown-item"
+  }, innerProps));
+};
+const SelectedOption = innerProps => {
+  return React__default.createElement(SelectedOption$1, innerProps, innerProps.label, React__default.createElement(DropdownOptionDeleteIcon, null));
+};
+
+export { MultiSelect as M };

package/build/Popover-20050b91.js

@@ -0,0 +1,232 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { isBoolean } from 'lodash';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import React__default, { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import TippyTooltip from '@tippyjs/react';
+import './shift-away-subtle-0dd94a03.js';
+import maxSize from 'popper-max-size-modifier';
+
+const Popover$1 = styled(TippyTooltip).attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 400;
+  color: inherit;
+  border-radius: 0;
+  line-height: inherit;
+  max-height: inherit;
+
+  ${props => props.maxWidth && css`
+      max-width: ${props.maxWidth};
+    `}
+
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
+
+  ${props => props.theme.themeProp('box-shadow', `0px 1px 6px -3px ${rgba(props.theme.getColor('black'), 0.7)}`, `0 1px 6px -4px ${props.theme.getColor('black')}`)}
+
+  ${props => props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-800')}`, `1px solid ${props.theme.getColor('gray-300')}`)}
+
+  ${props => props.contextMenu && css`
+      border-radius: 4px;
+
+      ${props => props.theme.themeProp('border', 'none', 'none')}
+
+      ${props => props.theme.themeProp('box-shadow', `none`, `0 1px 6px ${rgba(props.theme.getColor('gray-900'), 0.3)}`)}
+    `}
+
+  ${props => props.contextMenuSublevel && css`
+      &[data-placement^='right-start'],
+      &[data-placement^='left-start'] {
+        margin-top: -4px;
+      }
+
+      &[data-placement^='left'] {
+        margin-right: -6px;
+      }
+
+      &[data-placement^='right'] {
+        margin-left: -6px;
+      }
+    `}
+
+  .tippy-content {
+    padding: 0;
+    max-height: inherit;
+
+    > div {
+      max-height: inherit;
+    }
+  }
+
+  .tippy-arrow {
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1)}
+  }
+
+  && > .tippy-arrow::before {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  & > .tippy-arrow::after {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  &[data-placement^='top'] {
+    & > .tippy-arrow:before {
+      bottom: -16px;
+      left: -5px;
+      border-width: 15px 13px 0;
+      ${props => props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .tippy-arrow:after {
+      bottom: -15px;
+      left: -5px;
+      border-width: 15px 13px 0;
+      border-top-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='right'] {
+    & > .tippy-arrow:before {
+      bottom: -5px;
+      left: -16px;
+      border-width: 13px 15px 13px 0;
+      ${props => props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .tippy-arrow:after {
+      bottom: -5px;
+      left: -15px;
+      border-width: 13px 15px 13px 0;
+      border-right-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='bottom'] {
+    & > .tippy-arrow:before {
+      top: -16px;
+      left: -5px;
+      border-width: 0 13px 15px 13px;
+      ${props => props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .tippy-arrow:after {
+      top: -14.5px;
+      left: -5px;
+      border-width: 0 13px 15px 13px;
+      border-bottom-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='left'] {
+    & > .tippy-arrow::before {
+      bottom: -5px;
+      right: -16px;
+      border-width: 13px 0 13px 15px;
+      ${props => props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .tippy-arrow::after {
+      bottom: -5px;
+      right: -15px;
+      border-width: 13px 0 13px 15px;
+      border-left-color: initial;
+      transform-origin: center top;
+    }
+  }
+`;
+
+const Popover = React__default.forwardRef(function Popover({
+  content = 'Tooltip',
+  interactive = true,
+  placement = 'bottom-end',
+  duration = 350,
+  trigger = 'click focus',
+  offset = [0, 8],
+  arrow = true,
+  visible = undefined,
+  contextMenu = false,
+  contextMenuSublevel = false,
+  children,
+  modifiers = [],
+  maxWidth = 'none',
+  ...props
+}, ref) {
+  const errorOffset = useMemo(() => arrow ? 15 : 0, [arrow]);
+  const isControlled = useMemo(() => isBoolean(visible), [visible]);
+  const handleContextMenuItemClick = () => {
+    document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(item => item.addEventListener('click', () => {
+      document.querySelectorAll('[data-tippy-root]').forEach(node => {
+        if (node._tippy) {
+          node._tippy.hide();
+        }
+      });
+    }));
+  };
+  return React__default.createElement("div", null, React__default.createElement(Popover$1, _extends({
+    ref: ref,
+    content: content,
+    interactive: interactive,
+    placement: contextMenuSublevel ? 'right-start' : placement,
+    duration: duration,
+    animation: 'shift-away-subtle',
+    trigger: isControlled ? undefined : contextMenuSublevel ? 'mouseenter click focus' : trigger,
+    offset: [offset[0], offset[1] + errorOffset],
+    arrow: contextMenu ? false : arrow,
+    visible: visible,
+    popperOptions: {
+      modifiers: [{
+        ...maxSize,
+        options: {
+          boundary: 'viewport',
+          rootBoundary: 'viewport',
+          padding: 10
+        }
+      }, {
+        name: 'applyMaxSize',
+        enabled: true,
+        phase: 'beforeWrite',
+        requires: ['maxSize'],
+        fn({
+          state
+        }) {
+          const {
+            height
+          } = state.modifiersData.maxSize;
+          state.styles.popper = {
+            ...state.styles.popper,
+            maxHeight: `${height}px`
+          };
+        }
+      }, ...modifiers]
+    },
+    onShown: contextMenu ? handleContextMenuItemClick : undefined,
+    maxWidth: maxWidth
+  }, props), children));
+});
+Popover.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  interactive: PropTypes.bool,
+  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
+  duration: PropTypes.number,
+  trigger: PropTypes.string,
+  offset: PropTypes.arrayOf(PropTypes.number),
+  arrow: PropTypes.bool,
+  visible: PropTypes.bool,
+  modifiers: PropTypes.array,
+  maxWidth: PropTypes.string,
+  contextMenu: PropTypes.bool,
+  contextMenuSublevel: PropTypes.bool,
+  children: PropTypes.node.isRequired
+} : {};
+
+export { Popover as P };