fannypack-v5/es/DropdownMenu/DropdownMenuPopover.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2 } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import { Box, useMenu } from 'reakit';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Menu/styles-2476c114.js';
import { a as DropdownMenuPopover$1 } from './styles-059d90ce.js';
import '../Modal/styles-70c71d7d.js';
import { P as Popover } from '../Popover/styles-77580ca3.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var baseId = props.baseId,
      currentId = props.currentId,
      first = props.first,
      hide = props.hide,
      hideOnClickOutside = props.hideOnClickOutside,
      groups = props.groups,
      last = props.last,
      modal = props.modal,
      move = props.move,
      next = props.next,
      orientation = props.orientation,
      placement = props.placement,
      preventBodyScroll = props.preventBodyScroll,
      previous = props.previous,
      items = props.items,
      setCurrentId = props.setCurrentId,
      wrap = props.wrap,
      unstable_initialFocusRef = props.unstable_initialFocusRef,
      unstable_finalFocusRef = props.unstable_finalFocusRef,
      unstable_popoverRef = props.unstable_popoverRef,
      unstable_popoverStyles = props.unstable_popoverStyles,
      unstable_moves = props.unstable_moves,
      unstable_orphan = props.unstable_orphan,
      unstable_autoFocusOnShow = props.unstable_autoFocusOnShow,
      unstable_autoFocusOnHide = props.unstable_autoFocusOnHide,
      animating = props.animating,
      animated = props.animated,
      stopAnimation = props.stopAnimation,
      unstable_virtual = props.unstable_virtual,
      visible = props.visible,
      restProps = _objectWithoutPropertiesLoose(props, ["baseId", "currentId", "first", "hide", "hideOnClickOutside", "groups", "last", "modal", "move", "next", "orientation", "placement", "preventBodyScroll", "previous", "items", "setCurrentId", "wrap", "unstable_initialFocusRef", "unstable_finalFocusRef", "unstable_popoverRef", "unstable_popoverStyles", "unstable_moves", "unstable_orphan", "unstable_autoFocusOnShow", "unstable_autoFocusOnHide", "animating", "animated", "stopAnimation", "unstable_virtual", "visible"]);

  var dropdownMenuPopoverProps = useMenu({
    baseId: baseId,
    currentId: currentId,
    first: first,
    hide: hide,
    hideOnClickOutside: hideOnClickOutside,
    groups: groups,
    last: last,
    modal: modal,
    move: move,
    next: next,
    orientation: orientation,
    placement: placement,
    preventBodyScroll: preventBodyScroll,
    previous: previous,
    items: items,
    setCurrentId: setCurrentId,
    wrap: wrap,
    unstable_initialFocusRef: unstable_initialFocusRef,
    unstable_finalFocusRef: unstable_finalFocusRef,
    unstable_popoverRef: unstable_popoverRef,
    unstable_popoverStyles: unstable_popoverStyles,
    unstable_moves: unstable_moves,
    unstable_orphan: unstable_orphan,
    unstable_autoFocusOnShow: unstable_autoFocusOnShow,
    unstable_autoFocusOnHide: unstable_autoFocusOnHide,
    animating: animating,
    animated: animated,
    stopAnimation: stopAnimation,
    unstable_virtual: unstable_virtual,
    visible: visible
  }, restProps);
  var boxProps = Box$1.useProps(_objectSpread2(_objectSpread2({}, restProps), dropdownMenuPopoverProps));
  var className = useClassName({
    style: [DropdownMenuPopover$1, Popover],
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    tabIndex: props.isTabbable ? boxProps.tabIndex : undefined
  });
}, {
  defaultProps: {
    altitude: '200',
    isTabbable: true
  },
  themeKey: 'DropdownMenu.Popover'
});
var DropdownMenuPopover = createComponent(function (props) {
  var dropdownMenuPopoverProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: dropdownMenuPopoverProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'DropdownMenu.Popover'
  },
  themeKey: 'DropdownMenu.Popover'
});

export { DropdownMenuPopover };