@zendeskgarden/react-dropdowns.legacy 9.0.0-next.10

package/dist/esm/elements/Menu/Items/MediaBody.js

@@ -0,0 +1,44 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import '../../../styled/items/StyledNextItem.js';
+import '../../../styled/items/StyledNextIcon.js';
+import '../../../styled/items/StyledPreviousItem.js';
+import '../../../styled/items/StyledPreviousIcon.js';
+import '../../../styled/items/StyledItemIcon.js';
+import '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import { StyledMediaBody } from '../../../styled/items/media/StyledMediaBody.js';
+import '../../../styled/items/media/StyledMediaFigure.js';
+import '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useMenuContext from '../../../utils/useMenuContext.js';
+
+const MediaBody = React__default.forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledMediaBody, Object.assign({
+    ref: ref,
+    isCompact: isCompact
+  }, props));
+});
+MediaBody.displayName = 'MediaBody';
+
+export { MediaBody };

package/dist/esm/elements/Menu/Items/MediaFigure.js

@@ -0,0 +1,42 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import '../../../styled/items/StyledNextItem.js';
+import '../../../styled/items/StyledNextIcon.js';
+import '../../../styled/items/StyledPreviousItem.js';
+import '../../../styled/items/StyledPreviousIcon.js';
+import '../../../styled/items/StyledItemIcon.js';
+import '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import '../../../styled/items/media/StyledMediaBody.js';
+import { StyledMediaFigure } from '../../../styled/items/media/StyledMediaFigure.js';
+import '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useMenuContext from '../../../utils/useMenuContext.js';
+
+const MediaFigure = props => {
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledMediaFigure, Object.assign({
+    isCompact: isCompact
+  }, props));
+};
+
+export { MediaFigure };

package/dist/esm/elements/Menu/Items/MediaItem.js

@@ -0,0 +1,44 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Item } from './Item.js';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import '../../../styled/items/StyledNextItem.js';
+import '../../../styled/items/StyledNextIcon.js';
+import '../../../styled/items/StyledPreviousItem.js';
+import '../../../styled/items/StyledPreviousIcon.js';
+import '../../../styled/items/StyledItemIcon.js';
+import '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import '../../../styled/items/media/StyledMediaBody.js';
+import '../../../styled/items/media/StyledMediaFigure.js';
+import { StyledMediaItem } from '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+
+const MediaItem = React__default.forwardRef((props, ref) => React__default.createElement(Item, Object.assign({
+  component: StyledMediaItem,
+  ref: ref
+}, props)));
+MediaItem.displayName = 'MediaItem';
+MediaItem.propTypes = {
+  value: PropTypes.any,
+  disabled: PropTypes.bool
+};
+
+export { MediaItem };

package/dist/esm/elements/Menu/Items/NextItem.js

@@ -0,0 +1,90 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Item } from './Item.js';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import { StyledNextItem } from '../../../styled/items/StyledNextItem.js';
+import { StyledNextIcon } from '../../../styled/items/StyledNextIcon.js';
+import '../../../styled/items/StyledPreviousItem.js';
+import '../../../styled/items/StyledPreviousIcon.js';
+import { StyledItemIcon } from '../../../styled/items/StyledItemIcon.js';
+import '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import '../../../styled/items/media/StyledMediaBody.js';
+import '../../../styled/items/media/StyledMediaFigure.js';
+import '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../../utils/useDropdownContext.js';
+import useMenuContext from '../../../utils/useMenuContext.js';
+
+const NextItemComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledNextItem, Object.assign({
+    ref: ref,
+    disabled: disabled
+  }, props), React__default.createElement(StyledItemIcon, {
+    isCompact: isCompact,
+    isDisabled: disabled,
+    isVisible: true
+  }, React__default.createElement(StyledNextIcon, {
+    isDisabled: disabled
+  })), children);
+});
+const NextItem = React__default.forwardRef((_ref2, ref) => {
+  let {
+    value,
+    disabled,
+    ...props
+  } = _ref2;
+  const {
+    nextItemsHashRef,
+    downshift: {
+      itemToString
+    }
+  } = useDropdownContext();
+  const {
+    itemIndexRef
+  } = useMenuContext();
+  if (!disabled) {
+    nextItemsHashRef.current[itemToString(value)] = itemIndexRef.current;
+  }
+  return React__default.createElement(Item, Object.assign({
+    component: NextItemComponent,
+    "aria-expanded": true,
+    disabled: disabled,
+    value: value,
+    ref: ref
+  }, props, {
+    hasIcon: true
+  }));
+});
+NextItem.displayName = 'NextItem';
+NextItem.propTypes = {
+  value: PropTypes.any,
+  disabled: PropTypes.bool
+};
+
+export { NextItem };

package/dist/esm/elements/Menu/Items/PreviousItem.js

@@ -0,0 +1,87 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Item } from './Item.js';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import '../../../styled/items/StyledNextItem.js';
+import '../../../styled/items/StyledNextIcon.js';
+import { StyledPreviousItem } from '../../../styled/items/StyledPreviousItem.js';
+import { StyledPreviousIcon } from '../../../styled/items/StyledPreviousIcon.js';
+import { StyledItemIcon } from '../../../styled/items/StyledItemIcon.js';
+import '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import '../../../styled/items/media/StyledMediaBody.js';
+import '../../../styled/items/media/StyledMediaFigure.js';
+import '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../../utils/useDropdownContext.js';
+import useMenuContext from '../../../utils/useMenuContext.js';
+
+const PreviousItemComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledPreviousItem, Object.assign({
+    ref: ref,
+    disabled: disabled
+  }, props), React__default.createElement(StyledItemIcon, {
+    isCompact: isCompact,
+    isDisabled: disabled,
+    isVisible: true
+  }, React__default.createElement(StyledPreviousIcon, {
+    isDisabled: disabled
+  })), children);
+});
+const PreviousItem = React__default.forwardRef((_ref2, ref) => {
+  let {
+    value,
+    disabled,
+    ...props
+  } = _ref2;
+  const {
+    previousIndexRef
+  } = useDropdownContext();
+  const {
+    itemIndexRef
+  } = useMenuContext();
+  if (!disabled) {
+    previousIndexRef.current = itemIndexRef.current;
+  }
+  return React__default.createElement(Item, Object.assign({
+    component: PreviousItemComponent,
+    "aria-expanded": true,
+    value: value,
+    disabled: disabled
+  }, props, {
+    ref: ref,
+    hasIcon: true
+  }));
+});
+PreviousItem.displayName = 'PreviousItem';
+PreviousItem.propTypes = {
+  value: PropTypes.any,
+  disabled: PropTypes.bool
+};
+
+export { PreviousItem };

package/dist/esm/elements/Menu/Menu.js

@@ -0,0 +1,160 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useRef, useEffect, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { Popper } from 'react-popper';
+import { PLACEMENT } from '../../types/index.js';
+import { StyledMenu } from '../../styled/menu/StyledMenu.js';
+import { StyledMenuWrapper } from '../../styled/menu/StyledMenuWrapper.js';
+import '../../styled/menu/StyledSeparator.js';
+import '../../styled/items/StyledAddItem.js';
+import '../../styled/items/StyledItem.js';
+import '../../styled/items/StyledItemMeta.js';
+import '../../styled/items/StyledNextItem.js';
+import '../../styled/items/StyledNextIcon.js';
+import '../../styled/items/StyledPreviousItem.js';
+import '../../styled/items/StyledPreviousIcon.js';
+import '../../styled/items/StyledItemIcon.js';
+import '../../styled/items/header/StyledHeaderIcon.js';
+import '../../styled/items/header/StyledHeaderItem.js';
+import '../../styled/items/media/StyledMediaBody.js';
+import '../../styled/items/media/StyledMediaFigure.js';
+import '../../styled/items/media/StyledMediaItem.js';
+import '../../styled/select/StyledFauxInput.js';
+import '../../styled/select/StyledInput.js';
+import '../../styled/select/StyledSelect.js';
+import '../../styled/multiselect/StyledMultiselectInput.js';
+import '../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+import { getRtlPopperPlacement, getPopperPlacement } from '../../utils/garden-placements.js';
+import { MenuContext } from '../../utils/useMenuContext.js';
+
+const Menu = forwardRef((props, menuRef) => {
+  const {
+    placement,
+    popperModifiers,
+    eventsEnabled,
+    isAnimated,
+    maxHeight,
+    style: menuStyle,
+    zIndex,
+    isCompact,
+    children,
+    appendToNode,
+    ...otherProps
+  } = props;
+  const {
+    hasMenuRef,
+    itemIndexRef,
+    previousIndexRef,
+    nextItemsHashRef,
+    popperReferenceElementRef,
+    itemSearchRegistry,
+    downshift: {
+      isOpen,
+      getMenuProps
+    }
+  } = useDropdownContext();
+  const scheduleUpdateRef = useRef(undefined);
+  useEffect(() => {
+    if (scheduleUpdateRef.current && isOpen) {
+      scheduleUpdateRef.current();
+    }
+  });
+  const [isVisible, setIsVisible] = useState(isOpen);
+  useEffect(() => {
+    let timeout;
+    if (isOpen) {
+      setIsVisible(true);
+    } else if (isAnimated) {
+      timeout = setTimeout(() => setIsVisible(false), 200);
+    } else {
+      setIsVisible(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [isOpen, isAnimated]);
+  const themeContext = useContext(ThemeContext);
+  itemIndexRef.current = 0;
+  nextItemsHashRef.current = {};
+  previousIndexRef.current = undefined;
+  itemSearchRegistry.current = [];
+  const popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  return (
+    React__default.createElement(MenuContext.Provider, {
+      value: {
+        itemIndexRef,
+        isCompact
+      }
+    }, React__default.createElement(Popper, {
+      placement: popperPlacement,
+      modifiers: popperModifiers
+      ,
+      eventsEnabled: isOpen && eventsEnabled
+    }, _ref => {
+      let {
+        ref,
+        style,
+        scheduleUpdate,
+        placement: currentPlacement
+      } = _ref;
+      let computedStyle = menuStyle;
+      scheduleUpdateRef.current = scheduleUpdate;
+      if ((isOpen || isVisible) && popperReferenceElementRef.current && popperReferenceElementRef.current.getBoundingClientRect) {
+        computedStyle = {
+          width: popperReferenceElementRef.current.getBoundingClientRect().width,
+          ...menuStyle
+        };
+      }
+      const menuProps = getMenuProps({
+        role: hasMenuRef.current ? 'menu' : 'listbox',
+        placement: currentPlacement,
+        isAnimated: isAnimated && (isOpen || isVisible),
+        ...otherProps
+      });
+      const menu = React__default.createElement(StyledMenuWrapper, {
+        ref: isOpen ? ref : undefined,
+        hasArrow: menuProps.hasArrow,
+        placement: menuProps.placement,
+        style: style,
+        isHidden: !isOpen,
+        isAnimated: menuProps.isAnimated,
+        zIndex: zIndex
+      }, React__default.createElement(StyledMenu, Object.assign({
+        ref: menuRef,
+        isCompact: isCompact,
+        maxHeight: maxHeight,
+        style: computedStyle
+      }, menuProps), (isOpen || isVisible) && children));
+      return appendToNode ? createPortal(menu, appendToNode) : menu;
+    }))
+  );
+});
+Menu.displayName = 'Menu';
+Menu.propTypes = {
+  popperModifiers: PropTypes.any,
+  eventsEnabled: PropTypes.bool,
+  zIndex: PropTypes.number,
+  style: PropTypes.object,
+  placement: PropTypes.oneOf(PLACEMENT),
+  isAnimated: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  hasArrow: PropTypes.bool,
+  maxHeight: PropTypes.string
+};
+Menu.defaultProps = {
+  placement: 'bottom-start',
+  isAnimated: true,
+  eventsEnabled: true,
+  maxHeight: '400px',
+  zIndex: 1000
+};
+
+export { Menu };

package/dist/esm/elements/Menu/Separator.js

@@ -0,0 +1,37 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../styled/menu/StyledMenu.js';
+import '../../styled/menu/StyledMenuWrapper.js';
+import { StyledSeparator } from '../../styled/menu/StyledSeparator.js';
+import '../../styled/items/StyledAddItem.js';
+import '../../styled/items/StyledItem.js';
+import '../../styled/items/StyledItemMeta.js';
+import '../../styled/items/StyledNextItem.js';
+import '../../styled/items/StyledNextIcon.js';
+import '../../styled/items/StyledPreviousItem.js';
+import '../../styled/items/StyledPreviousIcon.js';
+import '../../styled/items/StyledItemIcon.js';
+import '../../styled/items/header/StyledHeaderIcon.js';
+import '../../styled/items/header/StyledHeaderItem.js';
+import '../../styled/items/media/StyledMediaBody.js';
+import '../../styled/items/media/StyledMediaFigure.js';
+import '../../styled/items/media/StyledMediaItem.js';
+import '../../styled/select/StyledFauxInput.js';
+import '../../styled/select/StyledInput.js';
+import '../../styled/select/StyledSelect.js';
+import '../../styled/multiselect/StyledMultiselectInput.js';
+import '../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+
+const Separator = React__default.forwardRef((props, ref) => React__default.createElement(StyledSeparator, Object.assign({
+  ref: ref
+}, props)));
+Separator.displayName = 'Separator';
+
+export { Separator };