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

package/dist/esm/elements/Select/Select.js

@@ -0,0 +1,195 @@
+/**
+* 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, { useState, useRef, useEffect, useCallback } from 'react';
+import { KEY_CODES, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import { VALIDATION } from '@zendeskgarden/react-forms';
+import PropTypes from 'prop-types';
+import { Reference } from 'react-popper';
+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 '../../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 { StyledFauxInput } from '../../styled/select/StyledFauxInput.js';
+import { StyledInput } from '../../styled/select/StyledInput.js';
+import { StyledSelect } from '../../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 useFieldContext from '../../utils/useFieldContext.js';
+
+const Select = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    itemSearchRegistry,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      isOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      selectItemAtIndex,
+      closeMenu
+    }
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const hiddenInputRef = useRef();
+  const triggerRef = useRef();
+  const previousIsOpenRef = useRef(undefined);
+  const [searchString, setSearchString] = useState('');
+  const searchTimeoutRef = useRef();
+  const currentSearchIndexRef = useRef(0);
+  useEffect(() => {
+    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
+      hiddenInputRef.current.focus();
+    }
+    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
+      triggerRef.current.focus();
+    }
+    previousIsOpenRef.current = isOpen;
+  }, [isOpen, triggerRef]);
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    searchTimeoutRef.current = window.setTimeout(() => {
+      setSearchString('');
+    }, 500);
+    return () => {
+      clearTimeout(searchTimeoutRef.current);
+    };
+  }, [searchString]);
+  const searchItems = useCallback((searchValue, startIndex, endIndex) => {
+    for (let index = startIndex; index < endIndex; index++) {
+      const itemTextValue = itemSearchRegistry.current[index];
+      if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
+        return index;
+      }
+    }
+    return undefined;
+  }, [itemSearchRegistry]);
+  const onInputKeyDown = useCallback(e => {
+    if (e.keyCode === KEY_CODES.SPACE) {
+      if (searchString) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (highlightedIndex !== null && highlightedIndex !== undefined) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectItemAtIndex(highlightedIndex);
+        closeMenu();
+      }
+    }
+    if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== KEY_CODES.SPACE) {
+      return;
+    }
+    const character = String.fromCharCode(e.which || e.keyCode);
+    if (!character || character.length === 0) {
+      return;
+    }
+    if (!searchString) {
+      if (highlightedIndex === null || highlightedIndex === undefined) {
+        currentSearchIndexRef.current = -1;
+      } else {
+        currentSearchIndexRef.current = highlightedIndex;
+      }
+    }
+    const newSearchString = searchString + character;
+    setSearchString(newSearchString);
+    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
+    if (matchingIndex === undefined) {
+      matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
+    }
+    if (matchingIndex !== undefined) {
+      setHighlightedIndex(matchingIndex);
+    }
+  }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, closeMenu, setHighlightedIndex]);
+  const {
+    type,
+    ...selectProps
+  } = getToggleButtonProps({
+    tabIndex: props.disabled ? undefined : 0,
+    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
+    onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+    onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false)),
+    ...props
+  });
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isFocused || isOpen;
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default.createElement(StyledFauxInput, Object.assign({
+      isHovered: isContainerHovered,
+      isFocused: isContainerFocused
+    }, selectProps, {
+      role: "none",
+      ref: selectRef => {
+        popperReference(selectRef);
+        mergeRefs([triggerRef, ref, popperReferenceElementRef])(selectRef);
+      }
+    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled
+    }, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
+      readOnly: true,
+      isHidden: true,
+      tabIndex: -1,
+      ref: hiddenInputRef,
+      value: '',
+      onClick: e => {
+        if (isOpen) {
+          e.nativeEvent.preventDownshiftDefault = true;
+        }
+      },
+      onKeyDown: onInputKeyDown
+    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled,
+      isRotated: isOpen
+    }, React__default.createElement(SvgChevronDownStroke, null)));
+  });
+});
+Select.displayName = 'Select';
+Select.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION),
+  start: PropTypes.any
+};
+
+export { Select };

package/dist/esm/elements/Trigger/Trigger.js

@@ -0,0 +1,185 @@
+/**
+* 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, useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Reference } from 'react-popper';
+import { KEY_CODES } from '@zendeskgarden/container-utilities';
+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 '../../styled/items/media/StyledMediaItem.js';
+import '../../styled/select/StyledFauxInput.js';
+import { StyledInput } from '../../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';
+
+const Trigger = _ref => {
+  let {
+    children,
+    refKey,
+    ...triggerProps
+  } = _ref;
+  const {
+    hasMenuRef,
+    itemSearchRegistry,
+    downshift: {
+      getRootProps,
+      getToggleButtonProps,
+      getInputProps,
+      isOpen,
+      highlightedIndex,
+      selectItemAtIndex,
+      setHighlightedIndex
+    }
+  } = useDropdownContext();
+  const hiddenInputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const previousIsOpenRef = useRef(undefined);
+  const [searchString, setSearchString] = useState('');
+  const searchTimeoutRef = useRef();
+  const currentSearchIndexRef = useRef(0);
+  useEffect(() => {
+    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
+      hiddenInputRef.current.focus();
+    }
+    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
+      triggerRef.current.focus();
+    }
+    previousIsOpenRef.current = isOpen;
+  }, [isOpen, hasMenuRef]);
+  useEffect(() => {
+    if (hasMenuRef.current === false) {
+      hasMenuRef.current = true;
+    }
+  }, [hasMenuRef]);
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    searchTimeoutRef.current = window.setTimeout(() => {
+      setSearchString('');
+    }, 500);
+    return () => {
+      clearTimeout(searchTimeoutRef.current);
+    };
+  }, [searchString]);
+  const searchItems = useCallback((searchValue, startIndex, endIndex) => {
+    for (let index = startIndex; index < endIndex; index++) {
+      const itemTextValue = itemSearchRegistry.current[index];
+      if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
+        return index;
+      }
+    }
+    return undefined;
+  }, [itemSearchRegistry]);
+  const onInputKeyDown = useCallback(e => {
+    if (e.keyCode === KEY_CODES.SPACE) {
+      if (searchString) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (highlightedIndex !== null && highlightedIndex !== undefined) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectItemAtIndex(highlightedIndex);
+      }
+    }
+    if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== KEY_CODES.SPACE) {
+      return;
+    }
+    const character = String.fromCharCode(e.which || e.keyCode);
+    if (!character || character.length === 0) {
+      return;
+    }
+    if (!searchString) {
+      if (highlightedIndex === null || highlightedIndex === undefined) {
+        currentSearchIndexRef.current = -1;
+      } else {
+        currentSearchIndexRef.current = highlightedIndex;
+      }
+    }
+    const newSearchString = searchString + character;
+    setSearchString(newSearchString);
+    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
+    if (matchingIndex === undefined) {
+      matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
+    }
+    if (matchingIndex !== undefined) {
+      setHighlightedIndex(matchingIndex);
+    }
+  }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, setHighlightedIndex]);
+  const renderChildren = popperRef => {
+    const {
+      ref: rootPropsRefCallback,
+      ...rootProps
+    } = getRootProps();
+    const listboxToggleProps = getToggleButtonProps({
+      ...rootProps,
+      role: null,
+      'aria-labelledby': undefined,
+      ...triggerProps,
+      ...children.props
+    });
+    const menuToggleProps = {
+      ...listboxToggleProps,
+      'aria-haspopup': 'true',
+      'aria-controls': listboxToggleProps['aria-owns'],
+      'aria-owns': null
+    };
+    const toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
+    return React__default.cloneElement(React__default.Children.only(children), {
+      ...toggleButtonProps,
+      [refKey]: childRef => {
+        popperRef(childRef);
+        triggerRef.current = childRef;
+        rootPropsRefCallback(childRef);
+      }
+    });
+  };
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
+      readOnly: true,
+      isHidden: true,
+      tabIndex: -1,
+      ref: hiddenInputRef,
+      value: '',
+      onClick: e => {
+        if (isOpen) {
+          e.nativeEvent.preventDownshiftDefault = true;
+        }
+      },
+      onKeyDown: onInputKeyDown
+    })));
+  });
+};
+Trigger.propTypes = {
+  children: PropTypes.any,
+  refKey: PropTypes.string
+};
+Trigger.defaultProps = {
+  refKey: 'ref'
+};
+
+export { Trigger };

package/dist/esm/index.js

@@ -0,0 +1,29 @@
+/**
+* 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.
+*/
+export { Dropdown } from './elements/Dropdown/Dropdown.js';
+export { Trigger } from './elements/Trigger/Trigger.js';
+export { Autocomplete } from './elements/Autocomplete/Autocomplete.js';
+export { Combobox } from './elements/Combobox/Combobox.js';
+export { Multiselect } from './elements/Multiselect/Multiselect.js';
+export { Select } from './elements/Select/Select.js';
+export { Field } from './elements/Fields/Field.js';
+export { Hint } from './elements/Fields/Hint.js';
+export { Label } from './elements/Fields/Label.js';
+export { Message } from './elements/Fields/Message.js';
+export { Menu } from './elements/Menu/Menu.js';
+export { Separator } from './elements/Menu/Separator.js';
+export { AddItem } from './elements/Menu/Items/AddItem.js';
+export { HeaderIcon } from './elements/Menu/Items/HeaderIcon.js';
+export { HeaderItem } from './elements/Menu/Items/HeaderItem.js';
+export { Item } from './elements/Menu/Items/Item.js';
+export { ItemMeta } from './elements/Menu/Items/ItemMeta.js';
+export { MediaBody } from './elements/Menu/Items/MediaBody.js';
+export { MediaFigure } from './elements/Menu/Items/MediaFigure.js';
+export { MediaItem } from './elements/Menu/Items/MediaItem.js';
+export { NextItem } from './elements/Menu/Items/NextItem.js';
+export { PreviousItem } from './elements/Menu/Items/PreviousItem.js';
+export { resetIdCounter } from 'downshift';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js

@@ -0,0 +1,28 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M1 9l4 4L15 3"
+  })));
+};
+
+export { SvgCheckLgStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
+
+export { SvgChevronDownStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
+
+export { SvgChevronLeftStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
+
+export { SvgChevronRightStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js

@@ -0,0 +1,26 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgPlusStroke = function SvgPlusStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M7.5 2.5v12m6-6h-12"
+  })));
+};
+
+export { SvgPlusStroke as default };

package/dist/esm/styled/items/StyledAddItem.js

@@ -0,0 +1,23 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledItem } from './StyledItem.js';
+
+const COMPONENT_ID = 'dropdowns.add_item';
+const StyledAddItem = styled(StyledItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledAddItem",
+  componentId: "sc-mlto71-0"
+})(["color:", ";", ";"], props => !props.disabled && getColorV8('primaryHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledAddItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAddItem };

package/dist/esm/styled/items/StyledItem.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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { rgba } from 'polished';
+
+const COMPONENT_ID = 'dropdowns.item';
+const getItemPaddingVertical = props => {
+  if (props.isCompact) {
+    return `${props.theme.space.base}px`;
+  }
+  return `${props.theme.space.base * 2}px`;
+};
+const getColorStyles = props => {
+  let foregroundColor;
+  let backgroundColor;
+  if (props.disabled) {
+    foregroundColor = getColorV8('neutralHue', 400, props.theme);
+  } else if (props.isDanger) {
+    foregroundColor = getColorV8('dangerHue', 600, props.theme);
+    backgroundColor = props.isFocused ? rgba(foregroundColor, 0.08) : 'inherit';
+  } else {
+    foregroundColor = getColorV8('foreground', 600 , props.theme);
+    backgroundColor = props.isFocused ? getColorV8('primaryHue', 600, props.theme, 0.08) : 'inherit';
+  }
+  return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
+};
+const StyledItem = styled.li.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9',
+  'aria-disabled': props.disabled
+})).withConfig({
+  displayName: "StyledItem",
+  componentId: "sc-x4h8aw-0"
+})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], props => props.disabled ? 'default' : 'pointer', props => getItemPaddingVertical(props), props => props.theme.space.base * 9, props => props.theme.space.base * 5, props => props.theme.space.base, props => props.theme.space.base, props => getColorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledItem, getItemPaddingVertical };

package/dist/esm/styled/items/StyledItemIcon.js

@@ -0,0 +1,27 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getItemPaddingVertical } from './StyledItem.js';
+
+const COMPONENT_ID = 'dropdowns.item_icon';
+const getSizeStyles = props => {
+  return css(["width:", ";height:calc(", "px + ", ");"], props.theme.iconSizes.md, props.theme.space.base * 5, math(`${getItemPaddingVertical(props)} * 2`));
+};
+const StyledItemIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledItemIcon",
+  componentId: "sc-pspm80-0"
+})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
+StyledItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledItemIcon };

package/dist/esm/styled/items/StyledItemMeta.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.item_meta';
+const StyledItemMeta = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledItemMeta",
+  componentId: "sc-1m3x8m1-0"
+})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledItemMeta.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledItemMeta };