@zendeskgarden/react-dropdowns 9.0.0-next.3 → 9.0.0-next.4

package/dist/index.cjs.js

@@ -99,7 +99,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$v = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -111,7 +111,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$u = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Hint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -123,7 +123,7 @@ StyledHint.defaultProps = {
 const COMPONENT_ID$t = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Message).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -140,7 +140,7 @@ const sizeStyles$a = props => {
 };
 const StyledCombobox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -152,7 +152,7 @@ StyledCombobox.defaultProps = {
 const COMPONENT_ID$r = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -164,7 +164,7 @@ StyledContainer.defaultProps = {
 const COMPONENT_ID$q = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -176,7 +176,7 @@ StyledField.defaultProps = {
 const COMPONENT_ID$p = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -211,7 +211,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -227,7 +227,7 @@ const sizeStyles$8 = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -307,7 +307,7 @@ const sizeStyles$7 = props => {
 };
 const StyledTrigger = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -349,7 +349,7 @@ const StyledInputIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
@@ -386,7 +386,7 @@ const sizeStyles$5 = props => {
 };
 const StyledOption = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -398,7 +398,7 @@ StyledOption.defaultProps = {
 const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -410,7 +410,7 @@ StyledOptionContent.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -431,7 +431,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -448,7 +448,7 @@ const sizeStyles$3 = props => {
 };
 const StyledListbox = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -473,7 +473,7 @@ const StyledOptionIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -494,7 +494,7 @@ const sizeStyles$1 = props => {
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -539,7 +539,7 @@ const StyledOptionTypeIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -551,7 +551,7 @@ StyledOptionTypeIcon.defaultProps = {
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -567,7 +567,7 @@ const colorStyles$1 = props => {
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -589,7 +589,7 @@ const colorStyles = props => {
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -601,7 +601,7 @@ StyledTagsButton.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -617,7 +617,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -629,7 +629,7 @@ StyledFloatingMenu.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -641,7 +641,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -653,7 +653,7 @@ StyledItemContent.defaultProps = {
 const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -665,7 +665,7 @@ StyledItemGroup.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -677,7 +677,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -689,7 +689,7 @@ StyledItemMeta.defaultProps = {
 const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -701,7 +701,7 @@ StyledItemTypeIcon.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.menu.button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"
@@ -713,7 +713,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -850,7 +850,7 @@ const toOptions = (children, optionTagProps) => React.Children.toArray(children)
       const props = option.props;
       const groupOptions = toOptions(props.children, optionTagProps);
       retVal.push({
-        label: props.label,
+        label: props.legend,
         options: groupOptions
       });
     }
@@ -1482,7 +1482,7 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     children,
     content,
     icon,
-    label,
+    legend,
     'aria-label': ariaLabel,
     onMouseDown,
     ...props
@@ -1494,9 +1494,9 @@ const OptGroup = React.forwardRef((_ref, ref) => {
   const handleMouseDown = event => event.preventDefault();
   const groupAriaLabel = reactTheming.useText(OptGroup, {
     'aria-label': ariaLabel
-  }, 'aria-label', 'Group', !label );
+  }, 'aria-label', 'Group', !legend );
   const optGroupProps = getOptGroupProps({
-    'aria-label': groupAriaLabel || label
+    'aria-label': groupAriaLabel || legend
   });
   return React__namespace.default.createElement(StyledOption, _extends$5({
     isCompact: isCompact,
@@ -1505,14 +1505,14 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     role: "none"
   }, props, {
     ref: ref
-  }), React__namespace.default.createElement(StyledOptionContent, null, (content || label) && React__namespace.default.createElement(StyledOption, {
+  }), React__namespace.default.createElement(StyledOptionContent, null, (content || legend) && React__namespace.default.createElement(StyledOption, {
     as: "div",
     isCompact: isCompact,
     $type: "header"
   }, icon && React__namespace.default.createElement(StyledOptionTypeIcon, {
     isCompact: isCompact,
     type: "header"
-  }, icon), content || label), React__namespace.default.createElement(StyledOptGroup, _extends$5({
+  }, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, _extends$5({
     isCompact: isCompact
   }, optGroupProps), React__namespace.default.createElement(StyledListboxSeparator, {
     role: "none"
@@ -1522,7 +1522,7 @@ OptGroup.displayName = 'OptGroup';
 OptGroup.propTypes = {
   content: PropTypes__default.default.any,
   icon: PropTypes__default.default.any,
-  label: PropTypes__default.default.string
+  legend: PropTypes__default.default.string
 };
 
 const MenuContext = React.createContext(undefined);
@@ -1609,6 +1609,10 @@ const MenuList = React.forwardRef((_ref, ref) => {
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current

package/dist/index.esm.js

@@ -17,7 +17,7 @@ import { hideVisually, math } from 'polished';
 import { Tag as Tag$1 } from '@zendeskgarden/react-tags';
 import { Button } from '@zendeskgarden/react-buttons';
 import { createPortal } from 'react-dom';
-import { useFloating, offset, flip, size, autoUpdate, autoPlacement } from '@floating-ui/react-dom';
+import { useFloating, offset, flip, size, autoUpdate, platform, autoPlacement } from '@floating-ui/react-dom';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
 import { mergeRefs } from 'react-merge-refs';
@@ -75,7 +75,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$v = 'dropdowns.combobox.label';
 const StyledLabel = styled(Label$1).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -87,7 +87,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$u = 'dropdowns.combobox.hint';
 const StyledHint = styled(Hint$1).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -99,7 +99,7 @@ StyledHint.defaultProps = {
 const COMPONENT_ID$t = 'dropdowns.combobox.message';
 const StyledMessage = styled(Message$1).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -116,7 +116,7 @@ const sizeStyles$a = props => {
 };
 const StyledCombobox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -128,7 +128,7 @@ StyledCombobox.defaultProps = {
 const COMPONENT_ID$r = 'dropdowns.combobox.container';
 const StyledContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -140,7 +140,7 @@ StyledContainer.defaultProps = {
 const COMPONENT_ID$q = 'dropdowns.combobox.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -152,7 +152,7 @@ StyledField.defaultProps = {
 const COMPONENT_ID$p = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -187,7 +187,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -203,7 +203,7 @@ const sizeStyles$8 = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -283,7 +283,7 @@ const sizeStyles$7 = props => {
 };
 const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -325,7 +325,7 @@ const StyledInputIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
@@ -362,7 +362,7 @@ const sizeStyles$5 = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -374,7 +374,7 @@ StyledOption.defaultProps = {
 const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -386,7 +386,7 @@ StyledOptionContent.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -407,7 +407,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -424,7 +424,7 @@ const sizeStyles$3 = props => {
 };
 const StyledListbox = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -449,7 +449,7 @@ const StyledOptionIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -470,7 +470,7 @@ const sizeStyles$1 = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -515,7 +515,7 @@ const StyledOptionTypeIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -527,7 +527,7 @@ StyledOptionTypeIcon.defaultProps = {
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -543,7 +543,7 @@ const colorStyles$1 = props => {
 };
 const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -565,7 +565,7 @@ const colorStyles = props => {
 const StyledTagsButton = styled(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -577,7 +577,7 @@ StyledTagsButton.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -593,7 +593,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -605,7 +605,7 @@ StyledFloatingMenu.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -617,7 +617,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -629,7 +629,7 @@ StyledItemContent.defaultProps = {
 const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -641,7 +641,7 @@ StyledItemGroup.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -653,7 +653,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -665,7 +665,7 @@ StyledItemMeta.defaultProps = {
 const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -677,7 +677,7 @@ StyledItemTypeIcon.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.menu.button';
 const StyledButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"
@@ -689,7 +689,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -826,7 +826,7 @@ const toOptions = (children, optionTagProps) => Children.toArray(children).reduc
       const props = option.props;
       const groupOptions = toOptions(props.children, optionTagProps);
       retVal.push({
-        label: props.label,
+        label: props.legend,
         options: groupOptions
       });
     }
@@ -1458,7 +1458,7 @@ const OptGroup = forwardRef((_ref, ref) => {
     children,
     content,
     icon,
-    label,
+    legend,
     'aria-label': ariaLabel,
     onMouseDown,
     ...props
@@ -1470,9 +1470,9 @@ const OptGroup = forwardRef((_ref, ref) => {
   const handleMouseDown = event => event.preventDefault();
   const groupAriaLabel = useText(OptGroup, {
     'aria-label': ariaLabel
-  }, 'aria-label', 'Group', !label );
+  }, 'aria-label', 'Group', !legend );
   const optGroupProps = getOptGroupProps({
-    'aria-label': groupAriaLabel || label
+    'aria-label': groupAriaLabel || legend
   });
   return React__default.createElement(StyledOption, _extends$5({
     isCompact: isCompact,
@@ -1481,14 +1481,14 @@ const OptGroup = forwardRef((_ref, ref) => {
     role: "none"
   }, props, {
     ref: ref
-  }), React__default.createElement(StyledOptionContent, null, (content || label) && React__default.createElement(StyledOption, {
+  }), 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 || label), React__default.createElement(StyledOptGroup, _extends$5({
+  }, icon), content || legend), React__default.createElement(StyledOptGroup, _extends$5({
     isCompact: isCompact
   }, optGroupProps), React__default.createElement(StyledListboxSeparator, {
     role: "none"
@@ -1498,7 +1498,7 @@ OptGroup.displayName = 'OptGroup';
 OptGroup.propTypes = {
   content: PropTypes.any,
   icon: PropTypes.any,
-  label: PropTypes.string
+  legend: PropTypes.string
 };
 
 const MenuContext = createContext(undefined);
@@ -1585,6 +1585,10 @@ const MenuList = forwardRef((_ref, ref) => {
       transform
     }
   } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current

package/dist/typings/types/index.d.ts

@@ -154,7 +154,7 @@ export interface IOptGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'c
     /** Accepts an icon to display */
     icon?: ReactElement;
     /** Sets the text label of the option group */
-    label?: string;
+    legend?: string;
 }
 export interface ITagProps extends Omit<IBaseTagProps, 'isRound' | 'size'> {
     /** @ignore Associates this tag with the given option (internal only) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Components related to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,13 +22,13 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-combobox": "^1.1.3",
+    "@zendeskgarden/container-combobox": "^1.1.4",
     "@zendeskgarden/container-menu": "^0.3.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.3",
-    "@zendeskgarden/react-forms": "^9.0.0-next.3",
-    "@zendeskgarden/react-tags": "^9.0.0-next.3",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.3",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.4",
+    "@zendeskgarden/react-forms": "^9.0.0-next.4",
+    "@zendeskgarden/react-tags": "^9.0.0-next.4",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.4",
     "polished": "^4.0.0",
     "prop-types": "^15.7.2",
     "react-merge-refs": "^2.0.0"
@@ -40,7 +40,7 @@
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.3",
+    "@zendeskgarden/react-theming": "^9.0.0-next.4",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -54,5 +54,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
 }