"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _chunkB6Y7HCBMcjs = require('./chunk-B6Y7HCBM.cjs');


var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');


var _chunkX7XHV4ICcjs = require('./chunk-X7XHV4IC.cjs');


var _chunkVLYEKZJ6cjs = require('./chunk-VLYEKZJ6.cjs');


var _chunkKKOBB4X5cjs = require('./chunk-KKOBB4X5.cjs');


var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');


var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');


var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');




var _chunkRSHN4K6Ncjs = require('./chunk-RSHN4K6N.cjs');


var _chunkGH54P25Bcjs = require('./chunk-GH54P25B.cjs');


var _chunkOBHJBBPCcjs = require('./chunk-OBHJBBPC.cjs');


var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');



var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');

// src/components/Dropdown.tsx
var _react = require('@emotion/react');
var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);






var _react3 = require('react');
var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
var _jsxruntime = require('@emotion/react/jsx-runtime');
function Dropdown({
  button,
  dropdownItems,
  horizontalScrollRef,
  onClickDropdownItems,
  getCSS,
  getDropdownItemsCSS,
  isOpen: isOpenProp,
  onOpen,
  onClose,
  closeOnScroll = false,
  openOnHover = false,
  minDropdownItemsWidth = 200,
  maxDropdownItemsWidth = 300,
  align = "center",
  verticalPlacement = "bottom",
  footer = null,
  dropdownContent = null,
  borderRadius = 8
}) {
  const theme = _react.useTheme.call(void 0, );
  const [isOpen, setIsOpen] = _react3.useState.call(void 0, isOpenProp || false);
  const [dropdownButtonHeight, setDropdownButtonHeight] = _react3.useState.call(void 0, 0);
  const [dropdownButtonWidth, setDropdownButtonWidth] = _react3.useState.call(void 0, 0);
  const [dropdownCoords, setDropdownCoords] = _react3.useState.call(void 0, {
    top: 0,
    left: 0,
    right: 0
  });
  const dropdownRef = _react3.useRef.call(void 0, null);
  const [dropdownButtonRef, dropdownButtonRefCb] = _chunkKL5ZQSVOcjs.useLiveRef.call(void 0, );
  const dropdownItemsRef = _react3.useRef.call(void 0, null);
  const [dropdownItemsWidth, setDropdownItemsWidth] = _react3.useState.call(void 0, 0);
  const [dropdownItemsHeight, setDropdownItemsHeight] = _react3.useState.call(void 0, 0);
  const nodeRef = _react3.useRef.call(void 0, null);
  const [nodeReady, setNodeReady] = _react3.useState.call(void 0, false);
  _react3.useEffect.call(void 0, () => {
    if (isOpenProp !== void 0) {
      setIsOpen(isOpenProp);
    }
  }, [isOpenProp]);
  _react3.useEffect.call(void 0, () => {
    if (!nodeRef.current) {
      nodeRef.current = document.createElement("div");
      document.body.appendChild(nodeRef.current);
    }
    setNodeReady(true);
    return () => {
      if (nodeRef.current) {
        document.body.removeChild(nodeRef.current);
        nodeRef.current = null;
      }
    };
  }, []);
  const setOpen = _react3.useCallback.call(void 0, 
    (newValue) => {
      setIsOpen(newValue);
      if (newValue && onOpen) {
        onOpen();
      } else if (!newValue && onClose) {
        onClose();
      }
    },
    [onOpen, onClose]
  );
  function handleKeyDown(event) {
    if (event.key === "Escape") {
      event.preventDefault();
      setOpen(false);
    } else if (["Enter", "Return"].includes(event.key)) {
      event.preventDefault();
      setOpen(!isOpen);
    }
  }
  function handleBlur(event) {
    const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.relatedTarget) && event.relatedTarget !== null;
    if (targetOutsideDropdownItems) {
      setOpen(false);
    }
  }
  _react3.useEffect.call(void 0, () => {
    function handleClickOutside(event) {
      const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.target);
      const targetOutsideDropdownButton = dropdownButtonRef.current && !dropdownButtonRef.current.contains(event.target);
      if (isOpen && event.target && targetOutsideDropdownItems && targetOutsideDropdownButton) {
        setOpen(false);
      }
    }
    window.document.addEventListener("mousedown", handleClickOutside);
    return () => {
      window.document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOpen, setOpen, dropdownButtonRef]);
  const reposition = _react3.useCallback.call(void 0, () => {
    if (dropdownButtonRef.current && dropdownItemsRef.current) {
      const dropdownButtonRect = dropdownButtonRef.current.getBoundingClientRect();
      setDropdownCoords({
        top: dropdownButtonRect.top,
        left: dropdownButtonRect.left,
        right: dropdownButtonRect.right
      });
      setDropdownButtonHeight(dropdownButtonRect.height);
      setDropdownButtonWidth(dropdownButtonRect.width);
      const dropdownItemsRect = dropdownItemsRef.current.getBoundingClientRect();
      setDropdownItemsWidth(dropdownItemsRect.width);
      setDropdownItemsHeight(dropdownItemsRect.height);
    }
  }, [dropdownButtonRef]);
  _react3.useLayoutEffect.call(void 0, () => {
    function onWindowResize() {
      setOpen(false);
      reposition();
    }
    function handleScroll() {
      if (closeOnScroll) {
        setOpen(false);
      }
      reposition();
    }
    reposition();
    let dropdownButtonResizeObserver = null;
    if (dropdownButtonRef.current) {
      dropdownButtonResizeObserver = new ResizeObserver(reposition);
      dropdownButtonResizeObserver.observe(dropdownButtonRef.current);
    }
    let dropdownResizeObserver = null;
    if (dropdownButtonRef.current) {
      dropdownResizeObserver = new ResizeObserver(reposition);
      dropdownResizeObserver.observe(dropdownButtonRef.current);
    }
    window.addEventListener("resize", onWindowResize);
    let navItemsResizeObserver = null;
    window.addEventListener("scroll", handleScroll);
    if (horizontalScrollRef == null ? void 0 : horizontalScrollRef.current) {
      horizontalScrollRef.current.addEventListener("scroll", handleScroll);
      navItemsResizeObserver = new ResizeObserver(reposition);
      navItemsResizeObserver.observe(horizontalScrollRef.current);
    }
    return () => {
      window.removeEventListener("resize", onWindowResize);
      window.removeEventListener("scroll", handleScroll);
      dropdownButtonResizeObserver == null ? void 0 : dropdownButtonResizeObserver.disconnect();
      navItemsResizeObserver == null ? void 0 : navItemsResizeObserver.disconnect();
      dropdownResizeObserver == null ? void 0 : dropdownResizeObserver.disconnect();
    };
  }, [
    setOpen,
    horizontalScrollRef,
    closeOnScroll,
    reposition,
    dropdownButtonRef
  ]);
  const handleClickDropdownItems = _react3.useCallback.call(void 0, () => {
    setOpen(false);
    onClickDropdownItems && onClickDropdownItems();
  }, [onClickDropdownItems, setOpen]);
  const dropdownTopMargin = 8;
  let dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
  let dropdownItemOffsetLeft = 0;
  if (align === "center") {
    dropdownItemOffsetLeft = dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
  } else if (align === "right") {
    dropdownItemOffsetLeft = dropdownCoords.right - dropdownItemsWidth;
  }
  if (verticalPlacement === "top") {
    dropdownItemOffsetTop = dropdownCoords.top - dropdownItemsHeight - dropdownTopMargin;
  }
  const commonButtonProps = {
    id: button.id,
    type: "button",
    onMouseEnter: () => {
      if (openOnHover) {
        reposition();
        setOpen(true);
      }
    },
    onMouseLeave: () => {
      if (openOnHover) {
        setOpen(false);
      }
    },
    onMouseDown: () => {
      reposition();
      setOpen(!isOpen);
    },
    onKeyDown: handleKeyDown,
    onFocus: () => {
      reposition();
      setOpen(true);
    },
    onBlur: handleBlur,
    ref: dropdownButtonRefCb
  };
  const commonUnstyledButtonProps = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), {
    css: "getCSS" in button && button.getCSS ? button.getCSS({ isOpen, theme }) : void 0
  });
  let buttonNode = null;
  if ("label" in button) {
    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnstyledDropdownButton, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonUnstyledButtonProps), { children: button.label }));
  } else if ("getContent" in button) {
    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnstyledDropdownButton, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonUnstyledButtonProps), { children: button.getContent({ isOpen, theme }) }));
  } else {
    buttonNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKKOBB4X5cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), commonButtonProps));
  }
  const containerCSS = getCSS && getCSS({ isOpen, theme });
  const dropdownItemsCSS = getDropdownItemsCSS && getDropdownItemsCSS({ isOpen, theme });
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
    "div",
    {
      css: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { position: "relative", display: "inline-flex" }, containerCSS),
      ref: dropdownRef,
      children: [
        buttonNode,
        nodeReady && nodeRef.current ? _reactdom2.default.createPortal(
          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
            DropdownItems,
            {
              isOpen,
              left: dropdownItemOffsetLeft,
              top: dropdownItemOffsetTop,
              ref: dropdownItemsRef,
              minWidth: minDropdownItemsWidth,
              maxWidth: maxDropdownItemsWidth,
              hasItems: dropdownItems ? dropdownItems.length > 0 : false,
              borderRadius,
              css: dropdownItemsCSS,
              children: [
                dropdownItems == null ? void 0 : dropdownItems.map((dropdownItem, i) => {
                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { onBlur: handleBlur, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                    DropdownItem,
                    {
                      dropdownItem,
                      onClick: handleClickDropdownItems
                    }
                  ) }, dropdownItem.label);
                }),
                dropdownContent,
                footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownFooter, { children: footer })
              ]
            }
          ),
          nodeRef.current
        ) : null
      ]
    }
  );
}
var DropdownFooter = _styled2.default.div`
  padding: 24px 16px 0;
  border-top: 1px solid ${({ theme }) => theme.c2Neutral};
  margin-top: 16px;
`;
var DropdownItems = _styled2.default.ul`
  ${_chunkRSHN4K6Ncjs.overlaySurface}
  color: ${({ theme }) => _chunkOBHJBBPCcjs.themeOr.call(void 0, theme.c6Neutral, theme.c8Neutral)};
  ${({ borderRadius }) => _chunkRSHN4K6Ncjs.standardBorderRadius.call(void 0, borderRadius)}
  ${({ hasItems }) => hasItems ? "padding: 12px 0;" : "padding: 0;"}
  visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
  position: fixed;
  ${({ minWidth }) => minWidth ? `min-width: ${minWidth}px;` : ""}
  ${({ maxWidth }) => maxWidth ? `max-width: ${maxWidth}px;` : ""}
  left: ${({ left }) => left}px;
  top: ${({ top }) => top}px;
  z-index: ${_chunkZU72XWNEcjs.z.dropdown};
  list-style: none;
  margin: 0;
`;
function DropdownItem({ dropdownItem, onClick }) {
  const theme = _react.useTheme.call(void 0, );
  const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
  const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
    _chunkWF7Z2VITcjs.Icon,
    {
      name: dropdownItemIcon.name,
      width: dropdownItemIcon.width || 12,
      mr: 10
    }
  ) : null;
  const cssProp2 = dropdownItem.getCSS && dropdownItem.getCSS({ theme, dropdownItem });
  const onClickDropdownItem = _react3.useCallback.call(void 0, () => {
    dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
    onClick && onClick();
  }, [dropdownItem, onClick]);
  if (dropdownItem.to !== void 0 || dropdownItem.externalLink) {
    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
      DropdownItemLink,
      {
        selected: Boolean(dropdownItem.selected),
        to: dropdownItem.to,
        externalLink: dropdownItem.externalLink,
        params: dropdownItem.params,
        onClick: onClickDropdownItem,
        css: cssProp2,
        hash: dropdownItem.hash,
        children: [
          dropdownItemIconNode,
          dropdownItem.label
        ]
      }
    );
  }
  if (dropdownItem.toggle) {
    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownItemDiv, { selected: false, css: cssProp2, withHoverColor: false, children: [
      dropdownItemIconNode,
      dropdownItem.label,
      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginLeft: "auto" }, children: "options" in dropdownItem.toggle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkX7XHV4ICcjs.MultiToggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVLYEKZJ6cjs.Toggle, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, dropdownItem.toggle)) })
    ] });
  }
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
    DropdownItemDiv,
    {
      selected: false,
      css: cssProp2,
      onClick: onClickDropdownItem,
      children: [
        dropdownItemIconNode,
        dropdownItem.label
      ]
    }
  );
}
var UnstyledDropdownButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
`;
var dropdownItemStyle = ({
  theme,
  selected,
  withHoverColor = true
}) => `
  background-color: ${selected ? theme.primary : "transparent"};
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  outline-color: ${selected ? theme.onPrimaryText : theme.hcNeutral} !important;
  white-space: nowrap;

  padding: 8px 16px;
  ${_chunkKW3JYLRIcjs.bp.sm(`padding-left: ${_chunkB6Y7HCBMcjs.smHeaderLogoMarginLeft};`)}

  ${withHoverColor ? `
      &:hover {
        color: ${theme.hcNeutral} !important;
      }
      ` : ""}
`;
var cssProp = ({
  theme,
  selected
}) => _react.css`
  ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
  ${_chunkRSHN4K6Ncjs.standardFocusOutline.call(void 0, { theme })}
`;
function DropdownItemLink(props) {
  const theme = _react.useTheme.call(void 0, );
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
    _chunkGH54P25Bcjs.Link,
    _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), {
      css: cssProp({ theme, selected: Boolean(props.selected) })
    })
  );
}
var DropdownItemDiv = _styled2.default.div`
  ${dropdownItemStyle}
  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
`;



exports.Dropdown = Dropdown;
