@zendeskgarden/react-dropdowns 9.0.0 → 9.1.0

package/dist/esm/views/combobox/StyledOption.js

@@ -12,12 +12,12 @@ const COMPONENT_ID = 'dropdowns.combobox.option';
 const colorStyles = _ref => {
   let {
     theme,
-    isActive,
+    $isActive,
     $type
   } = _ref;
   let backgroundColor;
   let boxShadow;
-  if (isActive && $type !== 'group' && $type !== 'header') {
+  if ($isActive && $type !== 'group' && $type !== 'header') {
     const variable = 'background.primaryEmphasis';
     backgroundColor = getColor({
       theme,
@@ -47,7 +47,7 @@ const colorStyles = _ref => {
   });
   return css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
 };
-const getMinHeight = props => props.theme.space.base * (props.isCompact ? 7 : 9);
+const getMinHeight = props => props.theme.space.base * (props.$isCompact ? 7 : 9);
 const sizeStyles = props => {
   const lineHeight = props.theme.lineHeights.md;
   const minHeight = getMinHeight(props);
@@ -57,7 +57,7 @@ const sizeStyles = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"

package/dist/esm/views/combobox/StyledOptionContent.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"

package/dist/esm/views/combobox/StyledOptionIcon.js

@@ -39,7 +39,7 @@ const sizeStyles = props => {
 };
 const StyledOptionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"

package/dist/esm/views/combobox/StyledOptionMeta.js

@@ -11,9 +11,9 @@ const COMPONENT_ID = 'dropdowns.combobox.option.meta';
 const colorStyles = _ref => {
   let {
     theme,
-    isDisabled
+    $isDisabled
   } = _ref;
-  const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+  const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
   const color = getColor({
     theme,
     variable
@@ -27,7 +27,7 @@ const sizeStyles = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"

package/dist/esm/views/combobox/StyledOptionTypeIcon.js

@@ -46,7 +46,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"

package/dist/esm/views/combobox/StyledTag.js

@@ -12,7 +12,7 @@ import { Tag } from '@zendeskgarden/react-tags';
 const COMPONENT_ID = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"

package/dist/esm/views/combobox/StyledTagsButton.js

@@ -22,7 +22,7 @@ const colorStyles = _ref => {
 const StyledTagsButton = styled(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"

package/dist/esm/views/combobox/StyledTrigger.js

@@ -13,16 +13,16 @@ const COMPONENT_ID = 'dropdowns.combobox.trigger';
 const colorStyles = _ref => {
   let {
     theme,
-    validation,
-    isBare,
-    isLabelHovered,
-    focusInset
+    $validation,
+    $isBare,
+    $isLabelHovered,
+    $focusInset
   } = _ref;
   const foregroundColor = getColor({
     theme,
     variable: 'foreground.default'
   });
-  const backgroundColor = isBare ? 'transparent' : getColor({
+  const backgroundColor = $isBare ? 'transparent' : getColor({
     theme,
     variable: 'background.default'
   });
@@ -30,12 +30,12 @@ const colorStyles = _ref => {
   let borderVariable;
   let hoverBorderColor;
   let focusBorderColor;
-  if (validation) {
-    if (validation === 'success') {
+  if ($validation) {
+    if ($validation === 'success') {
       borderVariable = 'border.successEmphasis';
-    } else if (validation === 'warning') {
+    } else if ($validation === 'warning') {
       borderVariable = 'border.warningEmphasis';
-    } else if (validation === 'error') {
+    } else if ($validation === 'error') {
       borderVariable = 'border.dangerEmphasis';
     }
     borderColor = getColor({
@@ -62,7 +62,7 @@ const colorStyles = _ref => {
     });
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = isBare ? undefined : getColor({
+  const disabledBackgroundColor = $isBare ? undefined : getColor({
     theme,
     variable: 'background.disabled'
   });
@@ -78,9 +78,9 @@ const colorStyles = _ref => {
     &:focus-within:not([aria-disabled='true']),
     &:focus-visible
   `;
-  return css(["color-scheme:only ", ";border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], theme.colors.base, isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, hoverBorderColor, focusStyles({
+  return css(["color-scheme:only ", ";border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], theme.colors.base, $isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, hoverBorderColor, focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: borderVariable
     },
@@ -88,15 +88,15 @@ const colorStyles = _ref => {
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !isBare
+    condition: !$isBare
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles = props => {
   const inputHeight = getHeight(props);
   let minHeight;
   let horizontalPadding;
-  if (props.isBare) {
-    if (props.isMultiselectable) {
+  if (props.$isBare) {
+    if (props.$isMultiselectable) {
       minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);
       horizontalPadding = props.theme.shadowWidths.sm;
     } else {
@@ -104,19 +104,19 @@ const sizeStyles = props => {
       horizontalPadding = '0';
     }
   } else {
-    minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;
+    minHeight = `${props.theme.space.base * (props.$isCompact ? 3 : 2) + inputHeight}px`;
     horizontalPadding = `${props.theme.space.base * 3}px`;
   }
-  const maxHeight = props.maxHeight || minHeight;
-  const verticalPadding = math(`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
-  return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, maxHeight, props.theme.fontSizes.md);
+  const $maxHeight = props.$maxHeight || minHeight;
+  const verticalPadding = math(`(${minHeight} - ${inputHeight} - (${props.$isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
+  return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
 };
 const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
-})(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.isBare && !props.isMultiselectable ? 'visible' : 'auto', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.$isBare && !props.$isMultiselectable ? 'visible' : 'auto', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => !props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTrigger };

package/dist/esm/views/combobox/StyledValue.js

@@ -12,9 +12,9 @@ const COMPONENT_ID = 'dropdowns.combobox.value';
 const colorStyles = _ref => {
   let {
     theme,
-    isPlaceholder
+    $isPlaceholder
   } = _ref;
-  const foregroundColor = isPlaceholder && getColor({
+  const foregroundColor = $isPlaceholder && getColor({
     theme,
     variable: 'foreground.disabled'
   });
@@ -22,15 +22,15 @@ const colorStyles = _ref => {
 };
 const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
 })(["flex-basis:0;flex-grow:1;cursor:", ";overflow:hidden;text-overflow:ellipsis;white-space:pre;user-select:none;", ";", ";&[hidden]{display:none;}", ";"], props => {
-  if (props.isDisabled) {
+  if (props.$isDisabled) {
     return 'default';
   }
-  return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
+  return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
 }, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledValue };

package/dist/esm/views/menu/StyledFloatingMenu.js

@@ -11,7 +11,7 @@ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
 const COMPONENT_ID = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"

package/dist/esm/views/menu/StyledItem.js

@@ -11,7 +11,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
 const COMPONENT_ID = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"

package/dist/esm/views/menu/StyledItemContent.js

@@ -11,7 +11,7 @@ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
 const COMPONENT_ID = 'dropdowns.menu.item.content';
 const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"

package/dist/esm/views/menu/StyledItemGroup.js

@@ -11,7 +11,7 @@ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
 const COMPONENT_ID = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"

package/dist/esm/views/menu/StyledItemIcon.js

@@ -11,7 +11,7 @@ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
 const COMPONENT_ID = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"

package/dist/esm/views/menu/StyledItemMeta.js

@@ -11,7 +11,7 @@ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
 const COMPONENT_ID = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"

package/dist/esm/views/menu/StyledItemTypeIcon.js

@@ -12,7 +12,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"

package/dist/esm/views/menu/StyledMenu.js

@@ -11,11 +11,11 @@ import { StyledListbox } from '../combobox/StyledListbox.js';
 const COMPONENT_ID = 'dropdowns.menu';
 const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
-})(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, {
+})(["position:static !important;", ";", ";"], props => props.$arrowPosition && arrowStyles(props.$arrowPosition, {
   size: `${props.theme.space.base * 1.5}px`,
   inset: '1px',
   animationModifier: '[data-garden-animate-arrow="true"]'

package/dist/esm/views/menu/StyledSeparator.js

@@ -11,7 +11,7 @@ import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"