@startlibs/components 1.1.4 → 1.2.0-rc.1

package/lib-yak/ContextMenu.mjs

@@ -0,0 +1,642 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef, useEffect, forwardRef, useState, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { styled, css } from '@yak/react';
+import { useEnsureRef, useToggle, useRefState, willUseLayers, willUseSharedState, Fill } from '@startlibs/core';
+import { transparentize, darken } from 'polished';
+import { isMemo } from 'react-is';
+import { oneWayAnimation, animationTiming, getColor, isMobile, callIfFunction, createPressAndMoveEvent, stopPropagation } from '@startlibs/utils';
+import mitt from 'mitt';
+import { Button } from './Button.mjs';
+import { useFlipEnter, useFlipLeave } from './Flip.mjs';
+import { Icon } from './Icon.mjs';
+import { Link } from './Link.mjs';
+import { getDialogLayersSize } from './containers/DialogContainer.mjs';
+import { usePositioning } from './containers/usePositioning.mjs';
+
+const _excluded = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMenu", "icon", "children", "scrollOnHover"],
+  _excluded2 = ["emitter", "index", "menuSlot", "keepOpen", "hover", "layerIndex", "hoverCursor", "scrollOnHover", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"],
+  _excluded3 = ["children", "sub", "hoverIndex", "autoHover", "menuSlot", "withoutIcons", "onClose", "onHover", "fill", "onClick"],
+  _excluded4 = ["slot", "sub", "withoutIcons", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const fadeIn = oneWayAnimation('opacity: 0', 'opacity: 1');
+const slideDown = oneWayAnimation('transform: translateY(-10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
+const slideUpOnTop = oneWayAnimation('transform: translateY(10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
+const slideRight = oneWayAnimation('transform: translateX(-10px)', 'transform: none;');
+const slideLeftOnLeft = oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
+animationTiming('0.2s ease-out');
+const areComponentsEqual = (a, b) => a === b;
+
+// Variantes como classe: no yak, o override de theme.startlibs.ListItem não lê props.
+// Sem variante, sem a chave className: o yak sobrescreveria a do app com undefined.
+const ListItem = styled(yakDomTag("li")).attrs(__yakAttrsProps => {
+  const __yakAttrs = (__yakAttrsProps => {
+    const __yakAttrs = (props => {
+      const variants = [props.hover && 'styled-list-item-hover', props.highlight && 'styled-list-item-highlight'].filter(Boolean);
+      return variants.length ? {
+        className: variants.join(' ')
+      } : {};
+    })(__yakAttrsProps) || {};
+    return Object.assign({}, __yakAttrs, {
+      className: __yakAttrs.className ? "styled-theme-list-item " + __yakAttrs.className : "styled-theme-list-item"
+    });
+  })(__yakAttrsProps) || {};
+  return Object.assign({}, __yakAttrs, {
+    className: __yakAttrs.className ? "styled-list-item " + __yakAttrs.className : "styled-list-item"
+  });
+})`
+  position: relative;
+  font-size: 13px;
+  & > * {
+    padding: 11px 1.5rem 11px 3.5rem;
+    display: block;
+  }
+  ${props => props.hasSubmenu && css`
+    & > * {
+      padding-right: 3rem;
+    }
+  `}
+  ${Icon}, .icon {
+    font-size: ${props => props.iconSize || 23}px;
+    position: absolute;
+    padding-left: 0.25rem;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3.5rem;
+    text-align: center;
+  }
+  @media (max-width: 600px) {
+    font-size: 15px;
+    & > * {
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
+    ${Icon}, .icon {
+      font-size: ${props => (props.iconSize || 23) + 2}px;
+    }
+  }
+  & > a {
+    color: inherit;
+    font-weight: inherit;
+    text-decoration: inherit;
+  }
+  & > a, & > label {
+    cursor: pointer;
+  }
+  ${__yakProps => __yakProps["hover"] && css`
+    & > a, & > label {
+      background: ${props => transparentize(0.88, getColor("main")(props))};
+      color: ${props => darken(0.03, getColor("main")(props))};
+    }`}
+  ${__yakProps => __yakProps["highlight"] && css`
+    color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  `}
+  input[type="radio"] {
+    display: none;
+  }
+  ${__yakProps => __yakProps["noActions"] && css`
+    max-width: 17rem;
+    color: rgba(0,0,0,0.4);
+    pointer-events: none;
+    text-align: center;
+    white-space: normal;
+  `}
+  ${__yakProps => __yakProps["withButton"] && css`
+    padding: 0.25rem 1rem;
+    ${Button} {
+      width: 100%;
+      color: white;
+      font-weight: 500;
+      padding: 10px 1.25rem;
+      @media (max-width: 600px) {
+        padding: 13px 1.25rem;
+      }
+    }
+  `}
+  ${__yakProps => __yakProps["smallPaddingRight"] && css`
+    & > * {
+      padding-right: 1.5rem;
+    }
+  `}
+  
+`;
+const ListItemDescText = styled(yakDomTag("div"))`
+  font-size: 11px;
+  margin-top: 0.25rem;
+  opacity: 0.6;
+  @media (max-width: 600px) {
+    font-size: 12px;
+  }
+`;
+const ListItemHelpText = styled(yakDomTag("span"))`
+  opacity: 0.5;
+`;
+const ListMenu = styled(yakDomTag("ul")).attrs({
+  className: "styled-list-menu"
+})`
+    padding: 0.5rem 0;
+    cursor: default;
+    overflowY: auto;
+    text-align: left;
+    color: inherit;
+    user-select: none;
+`;
+const ContextListMenu = styled(ListMenu).attrs({
+  className: "styled-context-list-menu styled-theme-context-menu"
+})`
+  position: absolute;
+  z-index: 999;
+  background-color: white;
+  backdrop-filter: blur(20px);
+  background-color: rgb(255 255 255 / 80%);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 10px -2px rgba(0,0,0,0.15), 0 0px 2px 0px rgba(0,0,0,0.2);
+  border-radius: 12px;
+  margin-bottom: 0.5rem;
+  overflow: auto;
+  max-height: 100vh;
+  max-height: 100dvh;
+  max-width: 100vw;
+  max-width: 100dvw;
+  ${props => props.withoutIcons && css`
+    ${ListItem} > * {
+      padding-left: 1.5rem;
+    }
+  `}
+  ${__yakProps => __yakProps["sub"] && css`
+    ${props => props.fullHeight ? css`` : props.atTop ? css`margin-top: -0.5rem;` : css`margin-top: 0.5rem;`}
+
+    ${__yakProps => __yakProps["atRight"] ? css`
+      margin-left: -4px;
+      ` : css`
+      margin-left: 4px;
+    `}
+  `}
+  
+`;
+const StickyContainer = styled(yakDomTag("div")).attrs({
+  className: "styled-sticky-container"
+})`
+  position: sticky;
+  background: white;
+  ${props => props.atBottom && css`
+    bottom: -0.5rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: -0.5rem;
+  `}
+  ${props => props.atTop && css`
+    top: -0.5rem;
+    padding-top: 0.5rem;
+    margin-top: -0.5rem;
+  `}
+`;
+const ListSeparator = styled(yakDomTag("li")).attrs({
+  className: "styled-list-separator"
+})`
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    cursor: default;
+    height: 0;
+    ${__yakProps => __yakProps["lighten"] && css`
+      border-color: rgba(255,255,255,0.15);
+    `}
+`;
+const ListHeading = styled(yakDomTag("li")).attrs({
+  className: "styled-list-heading"
+})`
+  display: flex;
+  align-items: center;
+  padding: .5rem 1rem;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+  text-transform: uppercase;
+  &:after {
+    content: '';
+    flex-grow: 1;
+    margin-left: 0.75rem;
+    height: 1px;
+    background: rgba(0,0,0,0.15);
+  }
+`;
+
+/* No sc, styledExtend(Icon) cria uma identidade própria: o seletor ${Icon} do ListItem
+   acima não bate aqui. No yak, styledExtend vira styled(Icon) (plugin, R10) e essa seta
+   herda a classe do Icon, então aquele ${Icon} (2 classes, mais específico) passa a
+   também valer pra ela, incluindo um "left: 0" que nunca existiu aqui. Com left, right
+   e width todos setados o box fica sobreconstrangido e o browser ignora o "right"
+   (ganha left+width): a seta migra pra esquerda. !important nas propriedades em comum,
+   e left:auto explícito, devolvem o tamanho e a posição próprios nos dois modos. */
+const SubmenuArrowIcon = styled(Icon)`
+  font-size: 13px !important;
+  position: absolute;
+  left: auto !important;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3rem !important;
+  padding-left: 0 !important;
+  text-align: center;
+`;
+class SimpleLi extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.scrollToVisibility = () => {
+      const el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
+      const list = el.parentNode;
+      if (el.offsetTop < list.scrollTop) {
+        list.scrollTop = el.offsetTop;
+      } else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.offsetHeight) {
+        list.scrollTop = el.offsetTop + el.offsetHeight - list.offsetHeight;
+      }
+    };
+    this.confirm = () => {
+      if (this.props.hover) {
+        const node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
+        node.click();
+      }
+    };
+    this.onMouseEnter = () => this.props.setCursorOnHover && this.props.setCursorOnHover(this.props.index);
+    this.onMouseOut = () => this.props.setCursorOnHover && this.props.setCursorOnHover(-1);
+    this.touchEnd = e => {
+      if (this.props.children) {
+        e.preventDefault();
+        if (!this.props.hover) this.onMouseEnter();
+      }
+    };
+    this.onClick = e => {
+      this.props.onClick && this.props.onClick();
+    };
+  }
+  componentWillUnmount() {
+    this.props.emitter.off('confirm', this.confirm);
+  }
+  componentDidUpdate() {
+    if (this.props.hover && this.props.scrollOnHover !== false) {
+      this.scrollToVisibility();
+    }
+  }
+  componentDidMount() {
+    this.props.emitter.on('confirm', this.confirm);
+    if (this.props.selected && this.props.setCursorOnHover) {
+      this.props.setCursorOnHover(this.props.index);
+      const el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
+      const list = el.parentNode;
+      list.scrollTop = el.offsetTop + el.offsetHeight / 2 - list.offsetHeight / 2;
+    }
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        label,
+        layerIndex,
+        href,
+        linkTo,
+        prefixWith,
+        subMenu,
+        icon,
+        children,
+        scrollOnHover
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
+    const Tag = linkTo ? Link : 'a';
+    return /*#__PURE__*/React.createElement(ListItem, _extends({}, rest, {
+      onClick: this.onClick,
+      onMouseLeave: this.onMouseOut,
+      onMouseEnter: this.onMouseEnter,
+      onTouchEnd: this.touchEnd
+    }), /*#__PURE__*/React.createElement(Tag, {
+      href: href,
+      to: linkTo
+    }, prefixWith, icon && /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    }), label));
+  }
+}
+SimpleLi.isKeyboardNavigable = true;
+SimpleLi.defaultProps = {
+  emitter: mitt()
+};
+const Li = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      emitter = mitt(),
+      index,
+      menuSlot,
+      keepOpen,
+      hover,
+      layerIndex,
+      hoverCursor,
+      scrollOnHover,
+      passTouchThrough,
+      children,
+      setCursorOnHover,
+      onClick,
+      prefixWith,
+      linkTo,
+      icon,
+      label,
+      descText,
+      helpText,
+      target,
+      href
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  const nodeRef = useEnsureRef(ref);
+  const tagRef = useRef();
+  const subMenu = useToggle();
+  const subPrevented = useRefState(false);
+  const onOpenSub = () => {
+    subPrevented.set(false);
+    if (hover && children) {
+      subMenu.open();
+    }
+  };
+  const onPreventSub = subIndex => {
+    if (index !== subIndex) subMenu.close();
+    subPrevented.set(true);
+  };
+  const confirm = () => {
+    if (hover) {
+      nodeRef.current.click();
+    }
+  };
+  useEffect(() => {
+    if (hover && scrollOnHover !== false) {
+      try {
+        const el = nodeRef.current;
+        const parent = el.parentElement;
+        const stickyContainer = parent.lastChild;
+        const stickyContainerHeight = stickyContainer && stickyContainer.tagName === "DIV" && stickyContainer.offsetTop - parent.scrollTop < parent.offsetHeight ? stickyContainer.offsetHeight : 0;
+        if (el.offsetTop > parent.offsetHeight + parent.scrollTop - stickyContainerHeight - el.offsetHeight) {
+          parent.scroll(0, el.offsetTop - parent.offsetHeight + el.offsetHeight + stickyContainerHeight);
+        } else if (el.offsetTop < parent.scrollTop) {
+          parent.scroll(0, el.offsetTop);
+        }
+      } catch (e) {}
+    }
+    emitter.on('confirm', confirm);
+    emitter.on('preventSub', onPreventSub);
+    emitter.on('openSub', onOpenSub);
+    return () => {
+      emitter.off('confirm', confirm);
+      emitter.off('preventSub', onPreventSub);
+      emitter.off('openSub', onOpenSub);
+    };
+  }, [hover]);
+  useEffect(() => () => subMenu.close(), []);
+  useEffect(() => {
+    if (children && !isMobile()) {
+      if (hover) {
+        if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
+          subMenu.open();
+        }
+      } else {
+        if (subMenu.isOpen) {
+          if (hoverCursor === -1) {
+            // Mouse saiu de todos os itens — provavelmente indo até o submenu (que
+            // abre ao lado, com um pequeno gap). Janela generosa; ao alcançá-lo, o
+            // onMouseEnter/onMouseMove do submenu chama subMenu.open e cancela.
+            subMenu.closeAfter(450);
+          } else {
+            // Mouse foi para outro item do menu — mantém os 200ms originais.
+            subMenu.closeAfter(200);
+          }
+          emitter.emit('preventSub', index);
+        }
+      }
+    }
+  }, [hoverCursor]);
+  const onMouseMove = e => {
+    if (!hover) {
+      callIfFunction(setCursorOnHover, index);
+    }
+    e === null || e === void 0 || e.stopPropagation();
+  };
+  const onMouseOut = e => {
+    callIfFunction(setCursorOnHover, -1);
+    e === null || e === void 0 || e.stopPropagation();
+  };
+  const onClickHandler = e => {
+    if (children || keepOpen) {
+      e.stopPropagation();
+    }
+    if (children) {
+      if (hover) {
+        subMenu.toggle();
+      } else {
+        onMouseMove();
+      }
+    } else {
+      callIfFunction(onClick, e);
+    }
+  };
+  const onCloseSub = () => emitter.emit('openSub');
+  const addProps = children => React.Children.map(children, c => /*#__PURE__*/React.cloneElement(c, {
+    fixed: rest.fixedPosition,
+    closing: subMenu.closing,
+    onMouseMove: subMenu.open,
+    // onMouseEnter não borbulha, então não é barrado pelo stopPropagation dos itens
+    // do submenu (linha onMouseMove do Li). Garante que alcançar o submenu sempre
+    // cancele o fechamento agendado por closeAfter(200), mantendo-o aberto.
+    onMouseEnter: subMenu.open,
+    onClose: onCloseSub,
+    sub: true,
+    slot: c.props.slot || menuSlot
+  }));
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, prefixWith, icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), label, " ", helpText && /*#__PURE__*/React.createElement(ListItemHelpText, null, "(", helpText, ")"), descText && /*#__PURE__*/React.createElement(ListItemDescText, null, descText), children && /*#__PURE__*/React.createElement(SubmenuArrowIcon, {
+    icon: "arrow-right"
+  }));
+  const Tag = linkTo ? Link : 'a';
+  return /*#__PURE__*/React.createElement(ListItem, _extends({
+    ref: nodeRef
+  }, rest, {
+    hover: hover,
+    onClick: onClickHandler,
+    onMouseLeave: onMouseOut,
+    onMouseMove: onMouseMove,
+    hasSubmenu: children
+  }), rest.withButton || rest.noActions ? content : /*#__PURE__*/React.createElement(Tag, {
+    href: href,
+    target: target,
+    to: linkTo,
+    ref: tagRef,
+    onMouseEnter: onMouseMove
+  }, content), subMenu.isOpen && addProps(children));
+});
+Li.isKeyboardNavigable;
+Li.Simple = SimpleLi;
+const [useContextMenuLayers, contextMenuLayersSize] = willUseLayers();
+const contextMenuLayersQuantity = contextMenuLayersSize;
+const [useContextMenuSharedState] = willUseSharedState();
+const ContextMenuComponent = /*#__PURE__*/forwardRef((_ref2, unesuredRef) => {
+  let {
+      children,
+      sub,
+      hoverIndex,
+      autoHover,
+      menuSlot,
+      withoutIcons,
+      onClose,
+      onHover = () => 0,
+      fill,
+      onClick
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  const ref = useEnsureRef(unesuredRef);
+  const [hoverCursor, setHoverCursor] = useState(autoHover || sub ? 0 : -1);
+  // Hover vindo do mouse não deve rolar a lista: o Chrome dispara mousemove sintético
+  // ao fim do scroll, e o item cortado sob o cursor puxaria a lista de volta.
+  const hoverFromMouse = useRef(false);
+  const [layerCursor, setLayerCursor] = useContextMenuSharedState(0);
+  const [layerIndex, {
+    getSize
+  }] = useContextMenuLayers();
+  const itemsEmitter = useMemo(() => mitt(), []);
+  useEffect(() => {
+    window.addEventListener('keydown', keydown);
+    return () => {
+      callIfFunction(onClose);
+      window.removeEventListener('keydown', keydown);
+    };
+  }, [layerIndex, layerCursor, hoverCursor]);
+  useEffect(() => {
+    if (hoverIndex !== undefined) {
+      if (hoverIndex !== hoverCursor) hoverFromMouse.current = false;
+      setHoverCursor(Math.min(Math.max(hoverIndex, -1), getTotalKeyboardItems(children) + 1));
+    }
+  }, [hoverIndex !== hoverCursor]);
+  const keydown = e => {
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      if (!e.defaultPrevented) {
+        const layers = getSize();
+        const direction = e.keyCode - 38;
+        setLayerCursor((layerCursor + direction + layers) % layers);
+      }
+      e.preventDefault();
+    }
+    if (layerIndex !== layerCursor) return;
+    if (e.keyCode === 27 && ref.current) {
+      ref.current.click();
+    }
+    if (e.keyCode === 13 || e.keyCode === 32 && hoverCursor >= 0) {
+      // enter
+      e.preventDefault();
+      itemsEmitter.emit('confirm');
+    }
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      // up down
+      e.preventDefault();
+      const direction = e.keyCode - 39;
+      const max = getTotalKeyboardItems(children);
+      const newIndex = (hoverCursor + direction + max) % max;
+      hoverFromMouse.current = false;
+      setHoverCursor(newIndex);
+      onHover(newIndex);
+    }
+  };
+  const getTotalKeyboardItems = children => {
+    let sum = 0;
+    React.Children.forEach(children, child => {
+      if (child && !child.props.disabled && !child.props.readOnly) {
+        if (child.type === Li || child.type.isKeyboardNavigable) {
+          sum += 1;
+        }
+        if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
+          sum += getTotalKeyboardItems(child.props.children);
+        }
+      }
+    });
+    return sum;
+  };
+  const setCursorOnHover = index => {
+    hoverFromMouse.current = true;
+    setLayerCursor(layerIndex);
+    setHoverCursor(index);
+    onHover(index);
+  };
+  const formatChildren = function (children) {
+    let indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      current: 0
+    };
+    return React.Children.map(children, (child, j) => child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/React.cloneElement(child, child.props, formatChildren(child.props.children, indexRef)) : !isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? /*#__PURE__*/React.cloneElement(child, {
+      fixedPosition: props.fixed,
+      hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
+      hoverCursor: hoverCursor,
+      scrollOnHover: !hoverFromMouse.current,
+      index: indexRef.current++,
+      setCursorOnHover,
+      emitter: itemsEmitter,
+      layerIndex: layerIndex,
+      menuSlot
+    }) : areComponentsEqual(child.type, StickyContainer) ? /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      children: formatChildren(child.props.children, indexRef)
+    })) : child : child);
+  };
+  const touchStart = createPressAndMoveEvent((e, prevPos) => {
+    // e.preventDefault()
+    e.stopPropagation();
+    e.target.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true
+    }));
+    return (e, nextPos) => {
+      const delta = prevPos.clientY - nextPos.clientY;
+      if (Math.abs(delta) > 10) {
+        setCursorOnHover(-1);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(ContextListMenu, _extends({
+    "data-drag": false,
+    ref: ref,
+    sub: sub,
+    onWheel: e => e.stopPropagation(),
+    onTouchStart: touchStart,
+    withoutIcons: withoutIcons,
+    onMouseDown: stopPropagation()
+  }, props), formatChildren(children));
+});
+const ContextMenu = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      slot = 'Popup',
+      sub,
+      withoutIcons,
+      children
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded4);
+  const contextMenuRef = useEnsureRef(ref);
+  const [positionInfo, placeholder, arrow] = usePositioning(contextMenuRef, rest);
+  const {
+    atRight,
+    atBottom
+  } = _objectSpread({}, positionInfo);
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : slot + '-' + (getDialogLayersSize() - 1), []);
+  const enterAnimation = useMemo(() => [fadeIn, sub ? atRight ? slideRight : slideLeftOnLeft : atBottom ? slideDown : slideUpOnTop], [atRight, atBottom]);
+  useFlipEnter(contextMenuRef, !!positionInfo && enterAnimation);
+  useFlipLeave(contextMenuRef, !!positionInfo && enterAnimation, sub && {
+    events: {
+      mouseover: rest.onMouseMove
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
+    name: slotName
+  }, /*#__PURE__*/React.createElement(ContextMenuComponent, _extends({}, rest, {
+    menuSlot: slot,
+    sub: sub
+  }, positionInfo, {
+    ref: contextMenuRef,
+    withoutIcons: withoutIcons
+  }), arrow, children)));
+});
+ContextMenu.ListItem = ListItem;
+
+export { ContextListMenu, ContextMenu, ContextMenuComponent, Li, ListHeading, ListItem, ListMenu, ListSeparator, SimpleLi, StickyContainer, contextMenuLayersQuantity };
+//# sourceMappingURL=ContextMenu.mjs.map