@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-63cb5e7-01112024

package/Modal/index.js

@@ -1,251 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useRef, useState, useCallback } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import { n as noop } from '../index-5f37f281.js';
-import useKeyDown from '../hooks/useKeyDown.js';
-import '../configs-00612ce0.js';
-import Button from '../Button/index.js';
-import Portal from '../Portal/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-import '../Icon/index.js';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .modal-splash{animation:modal-splash .3s forwards;display:flex;height:calc(100% - var(--header-height, 0px));left:0;opacity:0;overflow-y:auto;padding:2.8rem;position:fixed;top:var(--header-height,0);width:100%;z-index:300}@keyframes modal-splash{to{opacity:1}}[data-gene-ui-version=\"2.16.4\"] .modal-splash.p-top{padding-top:0}[data-gene-ui-version=\"2.16.4\"] .modal-splash.p-bottom{padding-bottom:0}[data-gene-ui-version=\"2.16.4\"] .modal-splash.light-background{background:#fff9}[data-gene-ui-version=\"2.16.4\"] .modal-splash.dark-background{background:#0006}[data-gene-ui-version=\"2.16.4\"] .modal-content{animation:modal-content .4s .1s forwards;background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:2rem;box-shadow:0 .2rem .4rem 0 #0000001a;display:flex;flex-direction:column;margin:auto;max-width:100%;opacity:0;position:relative}@keyframes modal-content{to{opacity:1}}[data-gene-ui-version=\"2.16.4\"] .modal-content.s-default{width:35rem}[data-gene-ui-version=\"2.16.4\"] .modal-content .modal-close{position:absolute;top:.5rem}html:not([dir=rtl]) .modal-content .modal-close{right:1.6rem}html[dir=rtl] .modal-content .modal-close{left:1.6rem}[data-gene-ui-version=\"2.16.4\"] .modal-splash.p-top .modal-content{align-self:flex-start;border-top-left-radius:0;border-top-right-radius:0;margin:0 auto}[data-gene-ui-version=\"2.16.4\"] .modal-splash.p-bottom .modal-content{align-self:flex-end;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 -.2rem .4rem 0 #0000001a;margin:0 auto}[data-gene-ui-version=\"2.16.4\"] .modal-head{align-items:center;border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:flex;font:700 1.4rem/1.8rem var(--font-family);justify-content:center;min-height:4rem;padding:0 5.4rem;position:relative;text-align:center;width:100%}[data-gene-ui-version=\"2.16.4\"] .modal-head .modal-close{top:50%;transform:translateY(-50%)}[data-gene-ui-version=\"2.16.4\"] .a-compact .modal-head{border-bottom:0;line-height:1.6rem;margin:2.6rem 0 .6rem;min-height:inherit}[data-gene-ui-version=\"2.16.4\"] .modal-body{color:rgba(var(--background-sc-rgb),.62);font:600 1.2rem/1.42 var(--font-family);padding:2rem;width:100%}[data-gene-ui-version=\"2.16.4\"] .modal-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;padding:1.5rem 2.5rem;width:100%}[data-gene-ui-version=\"2.16.4\"] .modal-footer>*{margin:0 .5rem}";
-styleInject(css_248z);
-
-const sizes = ['default', 'content-size'];
-const backgrounds = ['transparent', 'light-background', 'dark-background'];
-const appearances = ['default', 'compact'];
-const positions = ['center', 'top', 'bottom'];
-const KEYBOARD_ENTER_KEY = 13;
-const KEYBOARD_ESC_KEY = 27;
-function Modal(_ref) {
-  let {
-    visible,
-    size,
-    background,
-    appearance,
-    withPortal,
-    portalContainer,
-    customActions,
-    position,
-    closable,
-    cancelText,
-    okText,
-    title,
-    width,
-    zIndex,
-    children,
-    onOK,
-    onCancel,
-    footer,
-    isOkActive,
-    className,
-    disableFooter,
-    needEnter,
-    closeOnClickOutside,
-    onClose,
-    isOkButtonLoading,
-    ...rest
-  } = _ref;
-  const modalSplashRef = useRef(null);
-  const [mouseDown, setMouseDown] = useState(false);
-
-  // We need this 2 functions, because must be closed only when
-  // mouseDown and mouseUp are outside of modal
-  const handleMouseDown = useCallback(e => e.target === modalSplashRef.current && setMouseDown(true), [modalSplashRef.current]);
-  const handleMouseUp = useCallback(e => {
-    if (mouseDown && e.target === modalSplashRef.current) {
-      closeOnClickOutside && onCancel(e);
-      setMouseDown(false);
-    } else if (e.target !== modalSplashRef.current) {
-      setMouseDown(false);
-    }
-  }, [closeOnClickOutside, onCancel, modalSplashRef.current, mouseDown]);
-  useKeyDown(e => {
-    if (visible) {
-      e.keyCode === KEYBOARD_ESC_KEY && onCancel(e);
-      e.keyCode === KEYBOARD_ENTER_KEY && isOkActive && needEnter && onOK(e);
-    }
-  }, [visible, isOkActive, onCancel, onOK], {
-    current: window
-  }, ['Escape', 'Enter']);
-  const Content = /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames('modal-splash', "".concat(background), "a-".concat(appearance), "p-".concat(position), className),
-    onMouseDown: handleMouseDown,
-    onMouseUp: handleMouseUp,
-    style: {
-      zIndex
-    },
-    ref: modalSplashRef
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('modal-content', "s-".concat(size)),
-    style: {
-      width
-    }
-  }, closable && !title && /*#__PURE__*/React__default.createElement(Button, {
-    icon: "bc-icon-close",
-    size: "medium",
-    className: "modal-close",
-    appearance: "minimal",
-    color: "default",
-    onClick: onClose || onCancel
-  }), (title || customActions) && /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-head"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "ellipsis-text"
-  }, title), closable && /*#__PURE__*/React__default.createElement(Button, {
-    icon: "bc-icon-close",
-    size: "medium",
-    className: "modal-close",
-    appearance: "minimal",
-    color: "default",
-    onClick: onClose || onCancel
-  }), customActions), children && /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-body"
-  }, children), !disableFooter && /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-footer"
-  }, footer || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    appearance: "minimal",
-    size: "medium",
-    color: "default",
-    onClick: onCancel
-  }, cancelText), /*#__PURE__*/React__default.createElement(Button, {
-    disabled: !isOkActive || isOkButtonLoading,
-    size: "medium",
-    onClick: onOK,
-    loading: isOkButtonLoading
-  }, okText)))));
-  const portalWrapper = withPortal ? /*#__PURE__*/React__default.createElement(Portal, {
-    isOpen: visible,
-    container: portalContainer
-  }, Content) : Content;
-  return visible && portalWrapper;
-}
-Modal.propTypes = {
-  /**
-   * Displays modal if [true]
-   */
-  visible: PropTypes.bool,
-  /**
-   * Controls modal size
-   */
-  size: PropTypes.oneOf(sizes),
-  /**
-   * Controls background color of modal
-   */
-  background: PropTypes.oneOf(backgrounds),
-  /**
-   * Controls divider between modal's header and body
-   */
-  appearance: PropTypes.oneOf(appearances),
-  /**
-   * Controls modal position on screen
-   */
-  position: PropTypes.oneOf(positions),
-  /**
-   * Displays close button on modal,
-   * Fires onCancel function when clicked
-   */
-  closable: PropTypes.bool,
-  /**
-   * Disables footer in modal
-   */
-  disableFooter: PropTypes.bool,
-  /**
-   * Enables footers Ok button in modal
-   */
-  isOkActive: PropTypes.bool,
-  /**
-   * Custom text for cancel button
-   */
-  cancelText: PropTypes.string,
-  /**
-   * Custom text for ok button
-   */
-  okText: PropTypes.string,
-  /**
-   * Custom title for modal
-   */
-  title: PropTypes.any,
-  /**
-   * Wraps component with Portal component if [true]
-   */
-  withPortal: PropTypes.bool,
-  portalContainer: PropTypes.any,
-  /**
-   * Custom value to override default css value
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Custom  zIndex value to overRide default css value
-   */
-  zIndex: PropTypes.number,
-  /**
-   * Valid React elements for modal body
-   */
-  children: PropTypes.node,
-  /**
-   * Additional classname
-   */
-  className: PropTypes.string,
-  /**
-   * Fires event when user clicks on ok button
-   * (event: Event) => void
-   */
-  onOK: PropTypes.func,
-  /**
-   * Fires event when user clicks on Cancel button
-   * (event: Event) => void
-   */
-  onCancel: PropTypes.func,
-  /**
-   * Custom footer element for modal
-   */
-  footer: PropTypes.element,
-  /**
-   * Pass [true] if you need to hide a modal when people click outside of it's content
-   */
-  closeOnClickOutside: PropTypes.bool,
-  /**
-   * Custom action elements for modal's header
-   */
-  customActions: PropTypes.node,
-  /**
-   * Enable keyboard Enter
-   */
-  needEnter: PropTypes.bool,
-  /**
-   * Fires event when user clicks on Close icon
-   * (event: Event) => void
-   */
-  onClose: PropTypes.func,
-  /**
-   * Loader for ok button
-   */
-  isOkButtonLoading: PropTypes.bool
-};
-Modal.defaultProps = {
-  visible: false,
-  size: sizes[0],
-  onOK: noop,
-  onCancel: noop,
-  background: backgrounds[2],
-  appearance: appearances[0],
-  position: positions[0],
-  closable: true,
-  cancelText: 'Cancel',
-  okText: 'OK',
-  closeOnClickOutside: true,
-  isOkActive: true,
-  disableFooter: false,
-  needEnter: true,
-  isOkButtonLoading: false
-};
-
-export { Modal as default };

package/ModuleTitle/index.js

@@ -1,141 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { b as moduleTitleConfig } from '../configs-00612ce0.js';
-import { n as noop } from '../index-5f37f281.js';
-import Icon from '../Icon/index.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .module-header{background:var(--background);display:flex;flex-shrink:0;height:5rem;padding:0 .5rem 0 2rem;width:100%}html[dir=rtl] .module-header{padding:0 2rem 0 .5rem}[data-gene-ui-version=\"2.16.4\"] .module-header.headerBorder.p-top{border-bottom:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.4\"] .module-header.headerBorder.p-top.cr-position-radius{border-radius:2rem 2rem 0 0}[data-gene-ui-version=\"2.16.4\"] .module-header.headerBorder.p-bottom{border-top:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.4\"] .module-header.headerBorder.p-bottom.cr-position-radius{border-radius:0 0 2rem 2rem}[data-gene-ui-version=\"2.16.4\"] .module-header.cr-full-radius{border-radius:2rem}[data-gene-ui-version=\"2.16.4\"] .module-header>li{align-items:center;display:flex}[data-gene-ui-version=\"2.16.4\"] .module-header>li.left-content{flex:auto;overflow:hidden;position:relative}[data-gene-ui-version=\"2.16.4\"] .module-header>li.left-content .left-inner{max-width:100%}[data-gene-ui-version=\"2.16.4\"] .module-header>li.left-content .left-inner:nth-last-child(2){max-width:calc(100% - 3.2rem)}[data-gene-ui-version=\"2.16.4\"] .module-header>li.left-content .left-inner-icon{margin-inline-start:.8rem}[data-gene-ui-version=\"2.16.4\"] .module-header>li.right-content{flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .module-header.s-small{height:3rem}[data-gene-ui-version=\"2.16.4\"] .module-header.s-small .module-description-title .m-title,[data-gene-ui-version=\"2.16.4\"] .module-header.s-small .module-title{font-size:1.2rem;line-height:normal}[data-gene-ui-version=\"2.16.4\"] .module-header.s-medium{height:4rem}[data-gene-ui-version=\"2.16.4\"] .module-header.s-extra-big{height:6rem}[data-gene-ui-version=\"2.16.4\"] .module-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .module-title:before{background:var(--hero);content:\"\";display:block;height:.3rem;position:absolute;width:3.4rem}html:not([dir=rtl]) .module-title:before{left:0}html[dir=rtl] .module-title:before{right:0}[data-gene-ui-version=\"2.16.4\"] .p-top .module-title:before{bottom:0}[data-gene-ui-version=\"2.16.4\"] .p-bottom .module-title:before{top:0}[data-gene-ui-version=\"2.16.4\"] .module-title-without-border{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .module-description-title{width:100%}[data-gene-ui-version=\"2.16.4\"] .module-description-title .m-description{font:600 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .module-description-title .m-title{font:600 1.6rem/2.8rem var(--font-family)}";
-styleInject(css_248z);
-
-function IconWithTooltip(_ref) {
-  let {
-    toolTip,
-    children
-  } = _ref;
-  return toolTip ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: toolTip
-  }, children) : children;
-}
-function ModuleTitle(_ref2) {
-  let {
-    size,
-    title,
-    color,
-    hideBeforeBorder,
-    position,
-    children,
-    className,
-    description,
-    cornerRadius,
-    headerBorder,
-    titleIcon,
-    titleIconTooltip,
-    onTitleIconClick,
-    ...restProps
-  } = _ref2;
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
-    className: classnames('module-header', "cr-".concat(cornerRadius), "p-".concat(position), "s-".concat(size), className, {
-      headerBorder
-    })
-  }, restProps), /*#__PURE__*/React__default.createElement("li", {
-    className: "left-content",
-    style: {
-      '--hero': color || ''
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "left-inner"
-  }, description ? /*#__PURE__*/React__default.createElement("div", {
-    className: "module-description-title"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "m-description ellipsis-text"
-  }, description), /*#__PURE__*/React__default.createElement("div", {
-    className: "m-title ellipsis-text"
-  }, title)) : title && /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('ellipsis-text', {
-      'module-title-without-border': hideBeforeBorder,
-      'module-title': !hideBeforeBorder
-    }),
-    title: typeof title === 'string' ? title : ''
-  }, title)), titleIcon && /*#__PURE__*/React__default.createElement(IconWithTooltip, {
-    toolTip: titleIconTooltip
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "left-inner-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: titleIcon,
-    onClick: onTitleIconClick
-  })))), /*#__PURE__*/React__default.createElement("li", {
-    className: "right-content"
-  }, children));
-}
-ModuleTitle.propTypes = {
-  /**
-   * Title property. Any valid React node.
-   */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * Additonal description. Any valid React node
-   */
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * ModuleTitle sizing
-   */
-  size: PropTypes.oneOf(moduleTitleConfig.size),
-  /**
-   * Addional className
-   */
-  className: PropTypes.string,
-  /**
-   * Hide border after title
-   */
-  hideBeforeBorder: PropTypes.bool,
-  /**
-   * Hide header main border
-   */
-  headerBorder: PropTypes.bool,
-  /**
-   * ModuleTitle positioning
-   */
-  position: PropTypes.oneOf(moduleTitleConfig.position),
-  /**
-   * ModuleTitle corner radius
-   */
-  cornerRadius: PropTypes.oneOf(moduleTitleConfig.cornerRadius),
-  /**
-   * Module title content can be passed as child. Any valid React node.
-   */
-  children: PropTypes.node,
-  /**
-   * Use this prop to override ModuleTitle's underline color. Will not work when "descroiption" prop is specified
-   */
-  color: PropTypes.string,
-  /**
-   * Will add an "Icon" atom to the left side of ModuleTitle. Valid values are the same as "type" prop for "Icon" atom
-   */
-  titleIcon: PropTypes.string,
-  /**
-   * Tooltip for icon
-   */
-  titleIconTooltip: PropTypes.string,
-  /**
-   * Title Icon onClick event
-   */
-  onTitleIconClick: PropTypes.func
-};
-ModuleTitle.defaultProps = {
-  onTitleIconClick: noop,
-  headerBorder: true,
-  size: moduleTitleConfig.size[2],
-  position: moduleTitleConfig.position[0],
-  cornerRadius: moduleTitleConfig.cornerRadius[0]
-};
-
-export { ModuleTitle as default };

package/NavigationMenu/index.js

@@ -1,222 +0,0 @@
-import React__default, { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { n as noop } from '../index-5f37f281.js';
-import useDeviceType from '../hooks/useDeviceType.js';
-import Icon from '../Icon/index.js';
-import Option from '../Option/index.js';
-import Popover from '../Popover/index.js';
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import '../dateValidation-67caec66.js';
-import { d as debounce } from '../debounce-4419bc2f.js';
-import 'react-dom';
-import Menu from '../Menu/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../configs-00612ce0.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../index-031ff73c.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../index-c7646e48.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../index-122432cd.js';
-import '../hooks/useUpdatableRef.js';
-import '../hooks/useForceUpdate.js';
-import '../Portal/index.js';
-import '../Scrollbar/index.js';
-import '../guid-8ddf77b3.js';
-
-const getTitle = (id, data) => {
-  if (data) {
-    const matchedDatum = data.find(datum => datum.id === id);
-    return matchedDatum && matchedDatum.title ? matchedDatum : data.map(datum => getTitle(id, datum.data)).filter(Boolean)[0];
-  }
-};
-const getTitlesArray = (ids, data) => ids.map(id => getTitle(id, data)).filter(Boolean);
-const navigationOptionsToMenu = (navigationOptions, optionId) => navigationOptions.map(_ref => {
-  let {
-    data,
-    ...rest
-  } = _ref;
-  return {
-    ...rest,
-    active: (optionId === null || optionId === void 0 ? void 0 : optionId.toString()) === rest.id.toString(),
-    ...(data ? {
-      children: navigationOptionsToMenu(data, optionId)
-    } : {})
-  };
-});
-const indexStackFromItems = (stack, items, selectedItemId) => {
-  if (!(items !== null && items !== void 0 && items.length)) {
-    return [];
-  }
-  for (const itemIndex in items) {
-    const item = items[itemIndex];
-    if (item.id === selectedItemId) {
-      return stack;
-    }
-    if (item.children) {
-      const currentIndexStack = indexStackFromItems([...stack, Number(itemIndex)], item.children, selectedItemId);
-      if (currentIndexStack.length) {
-        return currentIndexStack;
-      }
-    }
-  }
-  return [];
-};
-
-function NavigationMenuContent(_ref) {
-  let {
-    depth,
-    path,
-    options,
-    onChange,
-    splitedValue
-  } = _ref;
-  const [activeItem, setActiveItem] = useState();
-  const navigationRef = useRef(null);
-  const isHovered = useRef(true);
-  const optionId = useMemo(() => splitedValue === null || splitedValue === void 0 ? void 0 : splitedValue[depth], [depth, splitedValue]);
-  const isActiveItem = useMemo(() => (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) && optionId === activeItem.id, [activeItem, optionId]);
-  const mobileOptions = useMemo(() => options ? navigationOptionsToMenu(options, optionId) : undefined, [options, optionId]);
-  const initialIndexStack = useMemo(() => indexStackFromItems([], mobileOptions, optionId), [mobileOptions, activeItem]);
-  const {
-    isMobile
-  } = useDeviceType();
-  const onMouseEnterHandler = useCallback(debounce(_ref2 => {
-    let {
-      isColaps,
-      item
-    } = _ref2;
-    if (!isHovered.current) return;
-    isColaps ? setActiveItem(item) : setActiveItem(null);
-  }, 200), [isHovered, setActiveItem]);
-  useEffect(() => {
-    if (optionId && options !== null && options !== void 0 && options.length) {
-      const item = options.find(item => item.id === optionId);
-      item && setActiveItem(item);
-    }
-  }, [optionId, options]);
-  const onItemClick = item => {
-    onChange(path ? "".concat(path, "/").concat(item.id) : item.id, item);
-    setActiveItem(item);
-  };
-  if (isMobile) {
-    return /*#__PURE__*/React__default.createElement(Menu, {
-      data: mobileOptions,
-      onSelect: (_, item) => onItemClick(item),
-      selectedItem: activeItem,
-      initialIndexStack: initialIndexStack
-    });
-  }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (options === null || options === void 0 ? void 0 : options.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "bc-navigation-menu_content-menu",
-    ref: navigationRef,
-    onMouseEnter: () => isHovered.current = true,
-    onMouseLeave: () => isHovered.current = false
-  }, options.map(item => {
-    const isColaps = !!(item.data && item.data.length);
-    return item.isHidden !== true && /*#__PURE__*/React__default.createElement(Option, _extends({}, item, {
-      key: item.id,
-      active: optionId === item.id,
-      forwardMark: isColaps,
-      onClick: () => !isColaps && onItemClick(item),
-      onMouseEnter: () => onMouseEnterHandler({
-        isColaps,
-        item
-      })
-    }));
-  })), activeItem && /*#__PURE__*/React__default.createElement(NavigationMenuContent, {
-    depth: depth + 1,
-    path: path ? "".concat(path, "/").concat(activeItem.id) : activeItem.id,
-    options: activeItem.data,
-    onChange: onChange,
-    splitedValue: isActiveItem && splitedValue
-  }));
-}
-NavigationMenuContent.defaultProps = {
-  depth: 0
-};
-var NavigationMenuContent$1 = /*#__PURE__*/memo(NavigationMenuContent);
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu{--size:3.6rem;align-items:center;border:1px solid #0000;border-radius:var(--button-external-size,var(--size));color:#fff;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);justify-content:center;min-height:var(--button-external-size,var(--size));min-width:var(--button-external-size,var(--size));padding:0 1rem;position:relative;transition:color .3s,background .3s,opacity .2s;-webkit-user-select:none;user-select:none}@media (hover:hover){[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu:hover{background:#ffffff1a}}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu.active{background:#ffffff1a}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_head{align-items:center;display:flex;justify-content:center;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_layer{align-items:center;display:flex;margin:0 .8rem;opacity:.7}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_layer.active,[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_layer:last-child{opacity:1}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_content{display:flex;padding:1rem 0}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_content-menu{width:25.8rem}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_content-menu:not(.bc-navigation-menu_content-menu:last-child){border-right:1px solid #0000001a}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_title-wrapper{align-items:center;display:flex;justify-content:center}[data-gene-ui-version=\"2.16.4\"] .bc-navigation-menu_title-wrapper:not(.bc-navigation-menu_title-wrapper:last-child):after{background-color:#fff;content:\"\";display:block;height:2.3rem;margin-inline:.6rem;transform:rotate(15deg);width:1px}";
-styleInject(css_248z);
-
-function NavigationMenu(_ref) {
-  let {
-    data,
-    value,
-    onChange,
-    disabled
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    isMobile
-  } = useDeviceType();
-  const splitedValue = useMemo(() => value && value.split('/').filter(Boolean), [value]);
-  const title = useMemo(() => getTitlesArray(splitedValue, data), [splitedValue, data]);
-  const handleChange = useCallback(function () {
-    setIsOpen(false);
-    onChange(...arguments);
-  }, [onChange]);
-  const handleToggle = useCallback(() => setIsOpen(prev => !prev), []);
-  return /*#__PURE__*/React__default.createElement(Popover, {
-    isOpen: isOpen,
-    extendTargetWidth: false,
-    toggleHandler: handleToggle,
-    fullHeight: true,
-    children: /*#__PURE__*/React__default.createElement("button", {
-      className: "bc-navigation-menu",
-      disabled: disabled
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "bc-navigation-menu_head"
-    }, title.map((item, index) => /*#__PURE__*/React__default.createElement("div", {
-      className: "bc-navigation-menu_title-wrapper"
-    }, (item === null || item === void 0 ? void 0 : item.icon) && isMobile && /*#__PURE__*/React__default.createElement(Icon, {
-      type: item.icon
-    }), /*#__PURE__*/React__default.createElement("span", {
-      key: index,
-      className: "bc-navigation-menu_layer"
-    }, item.title)))), /*#__PURE__*/React__default.createElement(Icon, {
-      type: "bc-icon-arrow-down"
-    })),
-    Content: /*#__PURE__*/React__default.createElement("div", {
-      className: "bc-navigation-menu_content"
-    }, /*#__PURE__*/React__default.createElement(NavigationMenuContent$1, {
-      options: data,
-      onChange: handleChange,
-      splitedValue: splitedValue
-    }))
-  });
-}
-NavigationMenu.propTypes = {
-  /**
-   * This is where you send data (options) for the menu, if you need to send
-   * nested options, send the date to the option in the same structure as the options.
-   * example => data={[{ id: 'item_1', title: 'Item 1', isHidden: false, data: [ { id: 'item_1_1', title: 'Item 1.1', isHidden: false } ]}]}
-   */
-  data: PropTypes.arrayOf(PropTypes.shape(Option.propTypes)).isRequired,
-  /**
-   * For value you need to send id selectable options id,
-   * and if you select the nested option, then you need to send the id to the hierarchy.
-   * example => 'item_1/item_1_1'
-   */
-  value: PropTypes.string.isRequired,
-  /**
-   * onChange handler is called by clicking on the option
-   * This callback gives you the option you clicked on and its id and
-   * if it is nested then the give and parent option id are associated with a forward slash.
-   * (id: NavigationMenu.value, item: Option) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Disabled status for the navigation menu button
-   */
-  disabled: PropTypes.bool
-};
-NavigationMenu.defaultProps = {
-  onChange: noop
-};
-
-export { NavigationMenu as default };