@zendeskgarden/react-dropdowns.legacy 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/elements/Menu/Items/HeaderItem.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 { StyledHeaderItem } from '../../../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 useMenuContext from '../../../utils/useMenuContext.js';
+
+const HeaderItem = React__default.forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledHeaderItem, Object.assign({
+    ref: ref,
+    isCompact: isCompact
+  }, props));
+});
+HeaderItem.displayName = 'HeaderItem';
+
+export { HeaderItem };

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

@@ -0,0 +1,140 @@
+/**
+* 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, { useRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import SvgCheckLgStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js';
+import { mergeRefs } from 'react-merge-refs';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import { StyledItem } from '../../../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 { 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';
+import { ItemContext } from '../../../utils/useItemContext.js';
+
+const Item = React__default.forwardRef((_ref, forwardRef) => {
+  let {
+    value,
+    disabled,
+    isDanger,
+    component = StyledItem,
+    hasIcon,
+    children,
+    ...props
+  } = _ref;
+  const {
+    selectedItems,
+    hasMenuRef,
+    itemSearchRegistry,
+    downshift: {
+      isOpen,
+      selectedItem,
+      highlightedIndex,
+      getItemProps,
+      setHighlightedIndex,
+      itemToString
+    }
+  } = useDropdownContext();
+  const {
+    itemIndexRef,
+    isCompact
+  } = useMenuContext();
+  const itemRef = useRef();
+  const Component = component;
+  if ((value === undefined || value === null) && !disabled) {
+    throw new Error('All Item components require a `value` prop');
+  }
+  const currentIndex = itemIndexRef.current;
+  const isFocused = highlightedIndex === currentIndex;
+  let isSelected;
+  useEffect(() => {
+    if (!disabled && itemRef.current) {
+      const itemTextValue = itemRef.current.innerText;
+      if (itemTextValue) {
+        itemSearchRegistry.current[currentIndex] = itemTextValue;
+      }
+    }
+  });
+  if (value) {
+    if (selectedItems) {
+      isSelected = selectedItems.some(item => {
+        return itemToString(item) === itemToString(value);
+      });
+    } else {
+      isSelected = itemToString(selectedItem) === itemToString(value);
+    }
+  } else {
+    isSelected = false;
+  }
+  useEffect(() => {
+    if (isOpen && !disabled && !selectedItems && isSelected) {
+      setHighlightedIndex(currentIndex);
+    }
+  }, [currentIndex, disabled, isOpen, isSelected, selectedItems, setHighlightedIndex]);
+  const contextValue = useMemo(() => ({
+    isDisabled: disabled
+  }), [disabled]);
+  const ref = mergeRefs([itemRef, forwardRef]);
+  if (disabled) {
+    return React__default.createElement(ItemContext.Provider, {
+      value: contextValue
+    }, React__default.createElement(Component, Object.assign({
+      ref: ref,
+      disabled: disabled,
+      isDanger: isDanger,
+      isCompact: isCompact
+    }, props), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
+      isCompact: isCompact,
+      isVisible: isSelected,
+      isDisabled: disabled
+    }, React__default.createElement(SvgCheckLgStroke, null)), children));
+  }
+  itemIndexRef.current++;
+  return React__default.createElement(ItemContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(Component, getItemProps({
+    item: value,
+    isFocused,
+    ref,
+    isCompact,
+    isDanger,
+    ...(hasMenuRef.current && {
+      role: 'menuitem',
+      'aria-selected': null
+    }),
+    ...props
+  }), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
+    isCompact: isCompact,
+    isVisible: isSelected
+  }, React__default.createElement(SvgCheckLgStroke, null)), children));
+});
+Item.displayName = 'Item';
+Item.propTypes = {
+  value: PropTypes.any,
+  disabled: PropTypes.bool
+};
+
+export { Item };

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

@@ -0,0 +1,49 @@
+/**
+* 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 { StyledItemMeta } from '../../../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 useMenuContext from '../../../utils/useMenuContext.js';
+import useItemContext from '../../../utils/useItemContext.js';
+
+const ItemMeta = React__default.forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
+  const {
+    isDisabled
+  } = useItemContext();
+  return React__default.createElement(StyledItemMeta, Object.assign({
+    ref: ref,
+    isCompact: isCompact,
+    isDisabled: isDisabled
+  }, props));
+});
+ItemMeta.displayName = 'ItemMeta';
+
+export { ItemMeta };

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 };