@zendeskgarden/react-dropdowns 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/elements/combobox/Field.js

@@ -0,0 +1,74 @@
+/**
+* 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, useState, useMemo } from 'react';
+import { FieldContext } from '../../context/useFieldContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import { StyledField } from '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+import { Hint } from './Hint.js';
+import { Label } from './Label.js';
+import { Message } from './Message.js';
+
+const FieldComponent = forwardRef((props, ref) => {
+  const [labelProps, setLabelProps] = useState(undefined);
+  const [hintProps, setHintProps] = useState(undefined);
+  const [messageProps, setMessageProps] = useState(undefined);
+  const [hasHint, setHasHint] = useState(false);
+  const [hasMessage, setHasMessage] = useState(false);
+  const contextValue = useMemo(() => ({
+    labelProps,
+    setLabelProps,
+    hasHint,
+    setHasHint,
+    hintProps,
+    setHintProps,
+    hasMessage,
+    setHasMessage,
+    messageProps,
+    setMessageProps
+  }), [labelProps, setLabelProps, hasHint, setHasHint, hintProps, setHintProps, hasMessage, setHasMessage, messageProps, setMessageProps]);
+  return React__default.createElement(FieldContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledField, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Hint = Hint;
+Field.Label = Label;
+Field.Message = Message;
+
+export { Field };

package/dist/esm/elements/combobox/Hint.js

@@ -0,0 +1,56 @@
+/**
+* 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, useEffect } from 'react';
+import useFieldContext from '../../context/useFieldContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import { StyledHint } from '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+
+const Hint = forwardRef((props, ref) => {
+  const {
+    hintProps,
+    setHasHint
+  } = useFieldContext();
+  useEffect(() => {
+    setHasHint(true);
+    return () => setHasHint(false);
+  }, [setHasHint]);
+  return React__default.createElement(StyledHint, Object.assign({}, hintProps, props, {
+    ref: ref
+  }));
+});
+Hint.displayName = 'Field.Hint';
+
+export { Hint };

package/dist/esm/elements/combobox/Label.js

@@ -0,0 +1,67 @@
+/**
+* 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 } from 'react';
+import PropTypes from 'prop-types';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import useFieldContext from '../../context/useFieldContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import { StyledLabel } from '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+
+const Label = forwardRef((_ref, ref) => {
+  let {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...props
+  } = _ref;
+  const {
+    labelProps
+  } = useFieldContext();
+  return React__default.createElement(StyledLabel, Object.assign({}, labelProps, {
+    onClick: composeEventHandlers(onClick, labelProps?.onClick),
+    onMouseEnter: composeEventHandlers(onMouseEnter, labelProps?.onMouseEnter),
+    onMouseLeave: composeEventHandlers(onMouseLeave, labelProps?.onMouseLeave)
+  }, props, {
+    ref: ref
+  }));
+});
+Label.displayName = 'Field.Label';
+Label.propTypes = {
+  hidden: PropTypes.bool,
+  isRegular: PropTypes.bool
+};
+
+export { Label };

package/dist/esm/elements/combobox/Listbox.js

@@ -0,0 +1,154 @@
+/**
+* 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, useState, useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { useFloating, offset, flip, size, autoUpdate } from '@floating-ui/react-dom';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import { StyledFloatingListbox } from '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import { StyledListbox } from '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+import { ThemeContext } from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+
+const Listbox = forwardRef((_ref, ref) => {
+  let {
+    appendToNode,
+    children,
+    isCompact,
+    isExpanded,
+    maxHeight,
+    minHeight,
+    onMouseDown,
+    triggerRef,
+    zIndex,
+    ...props
+  } = _ref;
+  const floatingRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [height, setHeight] = useState();
+  const [width, setWidth] = useState();
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: 'bottom-start',
+    middleware: [offset(theme.space.base), flip(), size({
+      apply: _ref2 => {
+        let {
+          rects,
+          availableHeight
+        } = _ref2;
+        if (rects.reference.width > 0) {
+          setWidth(rects.reference.width);
+          if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) {
+            setHeight(availableHeight);
+          }
+        }
+      }
+    })]
+  });
+  const handleMouseDown = event => event.preventDefault();
+  useEffect(() => {
+    let cleanup;
+    if (isExpanded && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [isExpanded, refs.reference, refs.floating, update]);
+  useEffect(() => {
+    let timeout;
+    if (isExpanded) {
+      setIsVisible(true);
+    } else {
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+        setHeight(undefined);
+      }, 200 );
+    }
+    return () => clearTimeout(timeout);
+  }, [isExpanded]);
+  useEffect(() => {
+    if (height) {
+      setHeight(undefined);
+      update();
+    }
+  }, [
+  children, update]);
+  const Node = React__default.createElement(StyledFloatingListbox, {
+    "data-garden-animate": isVisible ? 'true' : 'false',
+    isHidden: !isExpanded,
+    position: placement === 'bottom-start' ? 'bottom' : 'top',
+    style: {
+      transform,
+      width
+    },
+    zIndex: zIndex,
+    ref: floatingRef
+  }, React__default.createElement(StyledListbox, Object.assign({
+    isCompact: isCompact,
+    maxHeight: maxHeight,
+    minHeight: minHeight,
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
+    style: {
+      height
+    }
+  }, props, {
+    ref: ref
+  }), isVisible && children));
+  return appendToNode ? createPortal(Node, appendToNode) : Node;
+});
+Listbox.displayName = 'Listbox';
+Listbox.propTypes = {
+  appendToNode: PropTypes.any,
+  isCompact: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  triggerRef: PropTypes.any.isRequired,
+  zIndex: PropTypes.number
+};
+
+export { Listbox };

package/dist/esm/elements/combobox/Message.js

@@ -0,0 +1,62 @@
+/**
+* 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, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { VALIDATION } from '@zendeskgarden/react-forms';
+import useFieldContext from '../../context/useFieldContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import { StyledMessage } from '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+
+const Message = forwardRef((props, ref) => {
+  const {
+    messageProps,
+    setHasMessage
+  } = useFieldContext();
+  useEffect(() => {
+    setHasMessage(true);
+    return () => setHasMessage(false);
+  }, [setHasMessage]);
+  return React__default.createElement(StyledMessage, Object.assign({}, messageProps, props, {
+    ref: ref
+  }));
+});
+Message.displayName = 'Field.Message';
+Message.propTypes = {
+  validation: PropTypes.oneOf(VALIDATION),
+  validationLabel: PropTypes.string
+};
+
+export { Message };

package/dist/esm/elements/combobox/OptGroup.js

@@ -0,0 +1,92 @@
+/**
+* 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 } from 'react';
+import PropTypes from 'prop-types';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { useText } from '@zendeskgarden/react-theming';
+import useComboboxContext from '../../context/useComboboxContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import { StyledListboxSeparator } from '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import { StyledOptGroup } from '../../views/combobox/StyledOptGroup.js';
+import { StyledOption } from '../../views/combobox/StyledOption.js';
+import { StyledOptionContent } from '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import { StyledOptionTypeIcon } from '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+
+const OptGroup = forwardRef((_ref, ref) => {
+  let {
+    children,
+    content,
+    icon,
+    legend,
+    'aria-label': ariaLabel,
+    onMouseDown,
+    ...props
+  } = _ref;
+  const {
+    getOptGroupProps,
+    isCompact
+  } = useComboboxContext();
+  const handleMouseDown = event => event.preventDefault();
+  const groupAriaLabel = useText(OptGroup, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Group', !legend );
+  const optGroupProps = getOptGroupProps({
+    'aria-label': groupAriaLabel || legend
+  });
+  return React__default.createElement(StyledOption, Object.assign({
+    isCompact: isCompact,
+    $type: "group",
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
+    role: "none"
+  }, props, {
+    ref: ref
+  }), React__default.createElement(StyledOptionContent, null, (content || legend) && React__default.createElement(StyledOption, {
+    as: "div",
+    isCompact: isCompact,
+    $type: "header"
+  }, icon && React__default.createElement(StyledOptionTypeIcon, {
+    $isCompact: isCompact,
+    $type: "header"
+  }, icon), content || legend), React__default.createElement(StyledOptGroup, Object.assign({
+    isCompact: isCompact
+  }, optGroupProps), React__default.createElement(StyledListboxSeparator, {
+    role: "none"
+  }), children)));
+});
+OptGroup.displayName = 'OptGroup';
+OptGroup.propTypes = {
+  content: PropTypes.any,
+  icon: PropTypes.any,
+  legend: PropTypes.string
+};
+
+export { OptGroup };

package/dist/esm/elements/combobox/Option.js

@@ -0,0 +1,136 @@
+/**
+* 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, useMemo, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import SvgPlusStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js';
+import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
+import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
+import SvgCheckLgStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js';
+import { OPTION_TYPE } from '../../types/index.js';
+import useComboboxContext from '../../context/useComboboxContext.js';
+import { OptionContext } from '../../context/useOptionContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import { StyledOption } from '../../views/combobox/StyledOption.js';
+import { StyledOptionContent } from '../../views/combobox/StyledOptionContent.js';
+import { StyledOptionIcon } from '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import { StyledOptionTypeIcon } from '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledSeparator.js';
+import { OptionMeta } from './OptionMeta.js';
+import { toOption } from './utils.js';
+
+const OptionComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    icon,
+    isDisabled,
+    isHidden,
+    isSelected,
+    label,
+    type,
+    value,
+    ...props
+  } = _ref;
+  const contextValue = useMemo(() => ({
+    isDisabled,
+    type
+  }), [isDisabled, type]);
+  const {
+    activeValue,
+    getOptionProps,
+    isCompact
+  } = useComboboxContext();
+  const isActive = value === activeValue;
+  const optionRef = useRef(null);
+  useEffect(() => {
+    if (isActive) {
+      setTimeout(() => {
+        if (optionRef.current && optionRef.current.scrollIntoView) {
+          optionRef.current.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    }
+  }, [isActive]);
+  const renderActionIcon = iconType => {
+    switch (iconType) {
+      case 'add':
+        return React__default.createElement(SvgPlusStroke, null);
+      case 'next':
+        return React__default.createElement(SvgChevronRightStroke, null);
+      case 'previous':
+        return React__default.createElement(SvgChevronLeftStroke, null);
+      default:
+        return React__default.createElement(SvgCheckLgStroke, null);
+    }
+  };
+  const option = toOption({
+    value,
+    label,
+    isDisabled,
+    isHidden,
+    isSelected
+  });
+  const optionProps = getOptionProps({
+    option,
+    ref: mergeRefs([optionRef, ref])
+  });
+  return React__default.createElement(OptionContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledOption, Object.assign({
+    isActive: isActive,
+    isCompact: isCompact,
+    $type: type
+  }, props, optionProps), React__default.createElement(StyledOptionTypeIcon, {
+    $isCompact: isCompact,
+    $type: type
+  }, renderActionIcon(type)), icon && React__default.createElement(StyledOptionIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__default.createElement(StyledOptionContent, null, children || label || value)));
+});
+OptionComponent.displayName = 'Option';
+OptionComponent.propTypes = {
+  icon: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  isHidden: PropTypes.bool,
+  label: PropTypes.string,
+  tagProps: PropTypes.object,
+  type: PropTypes.oneOf(OPTION_TYPE),
+  value: PropTypes.string.isRequired
+};
+const Option = OptionComponent;
+Option.Meta = OptionMeta;
+
+export { Option };