@geneui/components 2.11.1

package/Option.js

@@ -0,0 +1,186 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { o as optionConfig, s as screenTypes } from './configs-91c86664.js';
+import './dateValidation-67caec66.js';
+import 'react-dom';
+import { u as useDeviceType } from './useDeviceType-dd51db38.js';
+import { u as useEllipsisDetection } from './useEllipsisDetection-ef536015.js';
+import Tooltip from './Tooltip.js';
+import Icon from './Icon.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './_commonjsHelpers-24198af3.js';
+import './useWindowSize-80369d76.js';
+import './Popover-f4d1cac0.js';
+import './index-ac59cb10.js';
+import './GeneUIProvider.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .option-container{align-items:center;cursor:pointer;display:flex;min-height:4rem;overflow:hidden;padding:0 1.4rem;position:relative;transition:background .4s;-webkit-user-select:none;user-select:none;width:100%;z-index:0}[data-gene-ui-version=\"2.11.0\"] .option-container>*{transition:color .4s}[data-gene-ui-version=\"2.11.0\"] .option-container.mobile-view{min-height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .option-container.border-top{border-top:1px solid}[data-gene-ui-version=\"2.11.0\"] .option-container.border-bottom{border-bottom:1px solid}[data-gene-ui-version=\"2.11.0\"] .option-container.border-bottom,[data-gene-ui-version=\"2.11.0\"] .option-container.border-top{border-color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-bottom,[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-top{position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-top{top:0}[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-bottom{bottom:0}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .option-container.hovered:hover,[data-gene-ui-version=\"2.11.0\"] .option-container:hover:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.11.0\"] .option-container.hovered{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.11.0\"] .option-container.active,[data-gene-ui-version=\"2.11.0\"] .option-container.c-hero{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .option-container.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .option-container a{display:block;height:100%;left:0;line-height:4rem;overflow:hidden;padding:0 1.4rem;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:100%;z-index:1}[data-gene-ui-version=\"2.11.0\"] .option-container a.active~*{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .option-container-relative{position:relative}[data-gene-ui-version=\"2.11.0\"] .option-left-elements{align-items:center;display:flex;flex-shrink:0;justify-content:center;margin-inline-end:1.2rem;min-height:2.4rem;min-width:2.4rem}[data-gene-ui-version=\"2.11.0\"] .option-right-elements{flex-shrink:0;margin-inline-start:1.2rem}[data-gene-ui-version=\"2.11.0\"] .option-right-elements .bc-icon-selected{transition:transform .4s}[data-gene-ui-version=\"2.11.0\"] .option-container:not(.mobile-view) .option-right-elements .bc-icon-selected{margin-inline-end:-.4rem}[data-gene-ui-version=\"2.11.0\"] .option-container:not(.active) .option-right-elements .bc-icon-selected{transform:scale(0)}[data-gene-ui-version=\"2.11.0\"] .mobile-view .bc-icon-selected{margin-inline-end:.8rem!important}[data-gene-ui-version=\"2.11.0\"] .option-texts{align-items:center;display:flex;flex:auto;font:600 1.4rem/2rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .option-texts>li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .option-texts>li:first-child{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .option-texts>li.assigned-value{margin-inline-start:1rem;opacity:.7}[data-gene-ui-version=\"2.11.0\"] .option-description{font:600 1.2rem/1.6rem var(--font-family);opacity:.7}[data-gene-ui-version=\"2.11.0\"] .option-title-center{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.11.0\"] .option-title-end{text-align:end}";
+styleInject(css_248z);
+
+function Option(props) {
+  const {
+    title,
+    description,
+    className,
+    icon,
+    color,
+    active,
+    checkMark,
+    forwardMark,
+    leftCustomElement,
+    rightCustomElement,
+    assignedValue,
+    border,
+    sticky,
+    content,
+    onClick,
+    screenType,
+    forwardedRef,
+    disabled,
+    titlePosition,
+    ...restProps
+  } = props;
+  const titleRef = useRef(null);
+  const hasTooltip = useEllipsisDetection(titleRef);
+  const descriptionRef = useRef(null);
+  const hasDescriptionTooltip = useEllipsisDetection(descriptionRef);
+  const {
+    isMobile
+  } = useDeviceType(screenType);
+  return /*#__PURE__*/React__default.createElement("label", _extends({
+    className: classnames('option-container', className, "border-".concat(border), "sticky-".concat(sticky), "c-".concat(color), {
+      'mobile-view': isMobile,
+      'option-container-relative': titlePosition === optionConfig.titlePosition.center,
+      active,
+      disabled
+    }),
+    onClick: onClick,
+    ref: forwardedRef
+  }, restProps), content, (icon || leftCustomElement) && /*#__PURE__*/React__default.createElement("div", {
+    className: "option-left-elements"
+  }, icon && /*#__PURE__*/React__default.createElement(Icon, {
+    type: icon
+  }), leftCustomElement), /*#__PURE__*/React__default.createElement("ul", {
+    className: "option-texts"
+  }, /*#__PURE__*/React__default.createElement("li", null, title && /*#__PURE__*/React__default.createElement(Tooltip, {
+    text: title,
+    isVisible: hasTooltip
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('option-title', 'ellipsis-text', {
+      'option-title-center': titlePosition === optionConfig.titlePosition.center,
+      'option-title-end': titlePosition === optionConfig.titlePosition.end
+    }),
+    ref: titleRef
+  }, title)), description && /*#__PURE__*/React__default.createElement(Tooltip, {
+    text: description,
+    isVisible: hasDescriptionTooltip
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: descriptionRef,
+    className: "option-description ellipsis-text"
+  }, description))), assignedValue && /*#__PURE__*/React__default.createElement("li", {
+    className: "assigned-value"
+  }, assignedValue)), (checkMark || forwardMark || rightCustomElement) && /*#__PURE__*/React__default.createElement("div", {
+    className: "option-right-elements"
+  }, checkMark && /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-selected"
+  }), forwardMark && /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-arrow-right"
+  }), rightCustomElement));
+}
+Option.defaultProps = {
+  color: optionConfig.color[0],
+  border: optionConfig.border[0],
+  sticky: optionConfig.sticky[0],
+  titlePosition: optionConfig.titlePosition.start,
+  screenType: screenTypes[0]
+};
+Option.propTypes = {
+  /**
+   * Title of the option
+   */
+  title: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
+  /**
+   * Description of the option which is displayed on the bottom of the title with small caps
+   */
+  description: propTypesExports.string,
+  /**
+   * Adds additional className to the option
+   */
+  className: propTypesExports.string,
+  /**
+   * Adds icon on the right side of the option
+   */
+  icon: propTypesExports.string,
+  /**
+   * Changes text colors
+   */
+  color: propTypesExports.oneOf(optionConfig.color),
+  /**
+   * Changes color to hero
+   */
+  active: propTypesExports.bool,
+  /**
+   * Adds check icon and displays it when the option is active
+   */
+  checkMark: propTypesExports.bool,
+  /**
+   * Adds to right arrow icon
+   */
+  forwardMark: propTypesExports.bool,
+  /**
+   * Any element you can add to the left side
+   */
+  leftCustomElement: propTypesExports.any,
+  /**
+   * Any element you can add to the right side
+   */
+  rightCustomElement: propTypesExports.any,
+  /**
+   * Information you can display on the right side of the option
+   */
+  assignedValue: propTypesExports.string,
+  /**
+   * Adds border to the option
+   */
+  border: propTypesExports.oneOf(optionConfig.border),
+  /**
+   * Makes item sticky to scrolling element based on the position you choose
+   */
+  sticky: propTypesExports.oneOf(optionConfig.sticky),
+  /**
+   * Additional elements for rendering in option
+   */
+  content: propTypesExports.any,
+  /**
+   * Fires event when user click on one of the menu items;
+   * (event: Event, item: Object) => void
+   */
+  onClick: propTypesExports.func,
+  /**
+   * Controls screen type
+   */
+  screenType: propTypesExports.oneOf(screenTypes),
+  /**
+   * Controls button disable state
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * ref for label
+   */
+  forwardedRef: propTypesExports.oneOfType([propTypesExports.func,
+  // for callback ref
+  propTypesExports.shape({
+    current: propTypesExports.instanceOf(Element)
+  }) // for createRef() object
+  ]),
+
+  /**
+   * Chose position for title
+   */
+  titlePosition: propTypesExports.oneOf(['start', 'center', 'end'])
+};
+
+export { Option as default };

package/Overlay.js

@@ -0,0 +1,99 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './index-6ff23041.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+import './useKeyDown-38102ae7.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './Button.js';
+import './Divider.js';
+export { O as default } from './index-0cf65939.js';
+import './globalStyling-9c60a159.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './style-inject.es-746bb8ed.js';
+import './Icon.js';
+import './Editor.js';
+import './useMount-6fef51a5.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';

package/Overspread.js

@@ -0,0 +1,343 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { n as noop } from './index-ac59cb10.js';
+import './configs-91c86664.js';
+import { u as useClickOutside } from './useClickOutside-5183e396.js';
+import Icon from './Icon.js';
+import Portal from './Portal.js';
+import { m as Dropdown } from './index-0cf65939.js';
+import { P as Popover } from './index-a4635754.js';
+import Menu from './Menu.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-6ff23041.js';
+import './GeneUIProvider.js';
+import './Editor.js';
+import './useMount-6fef51a5.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './Option.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .overspread-container{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:300}[data-gene-ui-version=\"2.11.0\"] .overspread-holder{animation:overspread-reveal .5s forwards;background:var(--background);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr;height:100%;transform:translate3d(0,100%,0);width:100%}@keyframes overspread-reveal{to{transform:translateZ(0)}}[data-gene-ui-version=\"2.11.0\"] .overspread-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.05);display:grid;grid-template-areas:\"left center right\";grid-template-columns:1fr auto 1fr;padding:0 1rem;position:relative;width:100%}[data-gene-ui-version=\"2.11.0\"] .overspread-head>li{align-items:center;display:flex;height:4.6rem;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .overspread-head>li.over-h-act{font:600 1.5rem/2.3rem var(--font-family);grid-area:left;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;width:100%}[data-gene-ui-version=\"2.11.0\"] .overspread-head>li.over-h-act:last-child{grid-area:right;justify-content:flex-end}[data-gene-ui-version=\"2.11.0\"] .overspread-head>li.over-h-tt{font:600 1.7rem/2.3rem var(--font-family);grid-area:center}[data-gene-ui-version=\"2.11.0\"] .overspread-head>li>*{margin:0 .5rem}[data-gene-ui-version=\"2.11.0\"] .overspread-head>li .color-hero{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .overspread-head button{transition:opacity .4s}[data-gene-ui-version=\"2.11.0\"] .overspread-head button:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .overspread-body{-webkit-overflow-scrolling:touch;overflow-y:auto;padding:1.5rem}[data-gene-ui-version=\"2.11.0\"] .overspread-search{position:relative}[data-gene-ui-version=\"2.11.0\"] .overspread-search:not(:focus-within,.show-search) input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .overspread-search:not(:focus-within,.show-search) .bc-icon-search{pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .overspread-search:not(:focus-within,.show-search) .bc-icon-close{display:none}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within{background:var(--background);display:flex;left:0;margin:0;padding:0 1rem;position:absolute;top:50%;transform:translateY(-50%);width:100%;z-index:10}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search>*,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within>*{padding:0 .5rem}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search .bc-icon-search,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within .bc-icon-search{display:none}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search input,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within input{font:600 1.4rem var(--font-family);height:2.4rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search input::input-placeholder,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within input::input-placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search input:placeholder,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within input:placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search input::placeholder,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within input::placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.11.0\"] .overspread-search.show-search input:input-placeholder,[data-gene-ui-version=\"2.11.0\"] .overspread-search:focus-within input:input-placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.11.0\"] .back-button-holder{align-items:center;cursor:pointer;display:flex}";
+styleInject(css_248z);
+
+function Overspread(props) {
+  const {
+    opened,
+    title,
+    hasDone,
+    disabledDone,
+    children,
+    hasSearch,
+    hasOptions,
+    titleHasOptions,
+    searchOutput,
+    hasBack,
+    doneText,
+    backWithIcon,
+    backText,
+    doneWithIcon,
+    onClose,
+    onDone,
+    onBack,
+    onSelectingOption,
+    onSelectingTitleOption,
+    dataForOptions,
+    dataForTitleWithOptions,
+    defaultValueForTitleWithOptions,
+    onAnimationEnd,
+    ...restProps
+  } = props;
+  const isControlled = ('opened' in props);
+  const [isOpen, setIsOpen] = useState(opened);
+  const [optionsPopoverIsOpen, setOptionsPopoverIsOpen] = useState(false);
+  const portalRef = useRef(null);
+  useEffect(() => setIsOpen(opened), [opened]);
+  const handleSearchOutput = useCallback(e => {
+    searchOutput && searchOutput(e.target.value);
+  }, [searchOutput]);
+  const handleClose = useCallback(e => {
+    !isControlled && setIsOpen(isOpen => !isOpen);
+    onClose && onClose(e);
+  }, [onClose, isControlled]);
+  const handleDone = useCallback(e => {
+    !isControlled && setIsOpen(isOpen => !isOpen);
+    onDone && onDone(e);
+  }, [onDone, isControlled]);
+  const outsideClickHandler = useCallback(() => {
+    setOptionsPopoverIsOpen(false);
+  }, []);
+  const outsideClickRef = useClickOutside(outsideClickHandler);
+  const onAnimationEndHandler = useCallback(() => {
+    onAnimationEnd && onAnimationEnd();
+  }, [onAnimationEnd]);
+  useEffect(() => {
+    var _portalRef$current;
+    portalRef === null || portalRef === void 0 ? void 0 : (_portalRef$current = portalRef.current) === null || _portalRef$current === void 0 ? void 0 : _portalRef$current.addEventListener('animationend', onAnimationEndHandler);
+  }, [portalRef.current, isOpen]);
+  const cleanup = () => {
+    var _portalRef$current2;
+    portalRef === null || portalRef === void 0 ? void 0 : (_portalRef$current2 = portalRef.current) === null || _portalRef$current2 === void 0 ? void 0 : _portalRef$current2.removeEventListener('animationend', onAnimationEndHandler);
+  };
+  useEffect(() => cleanup, []);
+  return /*#__PURE__*/React__default.createElement(Portal, {
+    isOpen: isOpen
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "overspread-container"
+  }, restProps), /*#__PURE__*/React__default.createElement("div", {
+    className: "overspread-holder",
+    ref: portalRef
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: "overspread-head"
+  }, /*#__PURE__*/React__default.createElement("li", {
+    className: "over-h-act"
+  }, hasBack ? /*#__PURE__*/React__default.createElement("p", {
+    onClick: onBack,
+    className: "back-button-holder cursor-pointer"
+  }, backWithIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-arrow-left"
+  }), /*#__PURE__*/React__default.createElement("span", null, backText)) : /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-close",
+    onClick: handleClose,
+    className: "cursor-pointer"
+  })), /*#__PURE__*/React__default.createElement("li", {
+    className: "over-h-tt"
+  }, titleHasOptions ? /*#__PURE__*/React__default.createElement(Dropdown, {
+    hasSearch: false,
+    value: defaultValueForTitleWithOptions.value,
+    data: dataForTitleWithOptions,
+    placeholder: " ",
+    appearance: "light",
+    onChange: onSelectingTitleOption,
+    flexibility: "content-size"
+  }) : /*#__PURE__*/React__default.createElement("p", {
+    className: "ellipsis-text"
+  }, title)), /*#__PURE__*/React__default.createElement("li", {
+    className: "over-h-act"
+  }, hasSearch && /*#__PURE__*/React__default.createElement("div", {
+    className: "overspread-search cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-close"
+  }), /*#__PURE__*/React__default.createElement("input", {
+    onChange: handleSearchOutput,
+    placeholder: "Search"
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-search"
+  })), hasOptions && /*#__PURE__*/React__default.createElement(Popover, {
+    isOpen: optionsPopoverIsOpen,
+    extendTargetWidth: false,
+    Content: /*#__PURE__*/React__default.createElement(Menu, {
+      ref: outsideClickRef,
+      data: dataForOptions,
+      onSelect: function () {
+        setOptionsPopoverIsOpen(false);
+        onSelectingOption(...arguments);
+      }
+    }),
+    align: "end"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-more-vertical",
+    onClick: () => setOptionsPopoverIsOpen(true)
+  })), hasDone && /*#__PURE__*/React__default.createElement("button", {
+    disabled: disabledDone,
+    onClick: handleDone,
+    className: "color-hero cursor-pointer"
+  }, doneWithIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-checkbox-checked"
+  }) : doneText))), children && /*#__PURE__*/React__default.createElement("div", {
+    className: "overspread-body"
+  }, children))));
+}
+Overspread.propTypes = {
+  title: propTypesExports.string,
+  /**
+   * Enables title's dropdown,
+   */
+  titleHasOptions: propTypesExports.bool,
+  /**
+   * Fires event for handling change of value/selected option
+   * ((event: Event) => void)
+   */
+  onSelectingTitleOption: propTypesExports.func,
+  /**
+   * Title's dropdown data
+   */
+  dataForTitleWithOptions: propTypesExports.array,
+  /**
+   *  Default value for title's dropdown
+   */
+  defaultValueForTitleWithOptions: propTypesExports.object,
+  /**
+   * Enables search,
+   */
+  hasSearch: propTypesExports.bool,
+  /**
+   * Fires event when user types in search field
+   * (event: Event) => void
+   */
+  searchOutput: propTypesExports.func,
+  /**
+   * Displays dropdown on the right corner,
+   */
+  hasOptions: propTypesExports.bool,
+  /**
+   * Right corner dropdown's data
+   */
+  dataForOptions: propTypesExports.array,
+  /**
+   * Fires event for handling change of value/selected option
+   * ((event: Event) => void)
+   */
+  onSelectingOption: propTypesExports.func,
+  /** Opened state */
+  opened: propTypesExports.bool,
+  /**
+   * Any valid node
+   */
+  children: propTypesExports.node,
+  /**
+   * Enables done button on the right corner,
+   */
+  hasDone: propTypesExports.bool,
+  /**
+   * Shows done icon instead of text
+   */
+  doneWithIcon: propTypesExports.bool,
+  /**
+   * Done button disabled state
+   */
+  disabledDone: propTypesExports.bool,
+  /**
+   * Custom text for done button
+   */
+  doneText: propTypesExports.string,
+  /**
+   * Fires event when done button is clicked
+   * ((event: Event) => void)
+   */
+  onDone: propTypesExports.func,
+  /**
+   * Enables back button on the left corner,
+   */
+  hasBack: propTypesExports.bool,
+  /**
+   * Custom text for back button
+   */
+  backText: propTypesExports.string,
+  /**
+   * Displays chevron icon in back button
+   */
+  backWithIcon: propTypesExports.bool,
+  /**
+   * Fires event when back button is clicked
+   * ((event: Event) => void)
+   */
+  onBack: propTypesExports.func,
+  /**
+   * Fires event when close icon is clicked
+   * ((event: Event) => void)
+   */
+  onClose: propTypesExports.func,
+  /**
+   * Function calls when the animation ends.
+   */
+  onAnimationEnd: propTypesExports.func
+};
+Overspread.defaultProps = {
+  hasSearch: false,
+  hasBack: false,
+  hasOptions: false,
+  doneText: 'Done',
+  titleHasOptions: false,
+  backWithIcon: false,
+  doneWithIcon: false,
+  hasDone: true,
+  onDone: noop,
+  onBack: noop,
+  onClose: noop,
+  onSelectingOption: noop,
+  onSelectingTitleOption: noop,
+  onAnimationEnd: noop
+};
+
+export { Overspread as default };