From ed6966c4e6e1259d12ee503727492d5928da9f3c Mon Sep 17 00:00:00 2001
From: Florent Mathieu <florent.mathieu@zendesk.com>
Date: Wed, 23 Oct 2024 13:28:12 -1000
Subject: [PATCH] refactor(dropdowns): use transient props where appropriate

---
 .../src/elements/combobox/Combobox.tsx        | 52 ++++++++-------
 .../src/elements/combobox/Listbox.tsx         | 12 ++--
 .../src/elements/combobox/OptGroup.tsx        |  6 +-
 .../src/elements/combobox/Option.tsx          |  4 +-
 .../src/elements/combobox/OptionMeta.tsx      |  2 +-
 packages/dropdowns/src/elements/menu/Item.tsx |  4 +-
 .../dropdowns/src/elements/menu/ItemGroup.tsx |  6 +-
 .../dropdowns/src/elements/menu/ItemMeta.tsx  |  2 +-
 .../dropdowns/src/elements/menu/MenuList.tsx  | 14 ++--
 .../src/views/combobox/StyledCombobox.ts      |  6 +-
 .../views/combobox/StyledFloatingListbox.ts   | 12 ++--
 .../src/views/combobox/StyledInput.ts         | 14 ++--
 .../src/views/combobox/StyledListbox.ts       | 16 ++---
 .../src/views/combobox/StyledOptGroup.ts      |  2 +-
 .../src/views/combobox/StyledOption.ts        | 10 +--
 .../src/views/combobox/StyledOptionMeta.ts    |  6 +-
 .../src/views/combobox/StyledTagsButton.ts    |  2 +-
 .../src/views/combobox/StyledTrigger.ts       | 64 +++++++++----------
 .../src/views/combobox/StyledValue.ts         | 22 +++----
 .../dropdowns/src/views/menu/StyledMenu.ts    |  6 +-
 20 files changed, 133 insertions(+), 129 deletions(-)

diff --git a/packages/dropdowns/src/elements/combobox/Combobox.tsx b/packages/dropdowns/src/elements/combobox/Combobox.tsx
index 14f0dc2cc1f..83963e02d57 100644
--- a/packages/dropdowns/src/elements/combobox/Combobox.tsx
+++ b/packages/dropdowns/src/elements/combobox/Combobox.tsx
@@ -177,15 +177,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       'Options'
     );
     const triggerProps = {
-      isAutocomplete,
-      isBare,
-      isCompact,
-      isEditable,
-      isLabelHovered,
-      isMultiselectable,
-      maxHeight,
-      focusInset,
-      validation,
       ...(getTriggerProps({
         onFocus: () => {
           if (!isDisabled) {
@@ -214,10 +205,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
     const inputProps = {
       'aria-invalid': validation === 'error' || validation === 'warning',
       hidden: isInputHidden,
-      isBare,
-      isCompact,
-      isEditable,
-      isMultiselectable,
       placeholder,
       ...(getInputProps({
         ...(_inputProps as IUseComboboxReturnValue['getInputProps'])
@@ -266,12 +253,23 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
     return (
       <ComboboxContext.Provider value={contextValue}>
         <StyledCombobox
-          isCompact={isCompact}
+          $isCompact={isCompact}
           tabIndex={-1} // HACK: otherwise screenreaders can't read the label
           {...props}
           ref={ref}
         >
-          <StyledTrigger {...triggerProps}>
+          <StyledTrigger
+            $isAutocomplete={isAutocomplete}
+            $isBare={isBare}
+            $isCompact={isCompact}
+            $isEditable={isEditable}
+            $isLabelHovered={isLabelHovered}
+            $isMultiselectable={isMultiselectable}
+            $maxHeight={maxHeight}
+            $focusInset={focusInset}
+            $validation={validation}
+            {...triggerProps}
+          >
             <StyledContainer>
               {!!startIcon && (
                 <StyledInputIcon $isLabelHovered={isLabelHovered} $isCompact={isCompact}>
@@ -291,7 +289,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
                       <StyledTagsButton
                         disabled={isDisabled}
                         hidden={isTagGroupExpanded}
-                        isCompact={isCompact}
+                        $isCompact={isCompact}
                         tabIndex={-1}
                         type="button"
                       >
@@ -308,17 +306,23 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
                 )}
                 <StyledValue
                   hidden={!isInputHidden}
-                  isAutocomplete={isAutocomplete}
-                  isBare={isBare}
-                  isCompact={isCompact}
-                  isDisabled={isDisabled}
-                  isEditable={isEditable}
-                  isMultiselectable={isMultiselectable}
-                  isPlaceholder={!(inputValue || renderValue)}
+                  $isAutocomplete={isAutocomplete}
+                  $isBare={isBare}
+                  $isCompact={isCompact}
+                  $isDisabled={isDisabled}
+                  $isEditable={isEditable}
+                  $isMultiselectable={isMultiselectable}
+                  $isPlaceholder={!(inputValue || renderValue)}
                 >
                   {renderValue ? renderValue({ selection, inputValue }) : inputValue || placeholder}
                 </StyledValue>
-                <StyledInput {...inputProps} />
+                <StyledInput
+                  $isBare={isBare}
+                  $isCompact={isCompact}
+                  $isEditable={isEditable}
+                  $isMultiselectable={isMultiselectable}
+                  {...inputProps}
+                />
               </StyledInputGroup>
               {!!(hasChevron || endIcon) && (
                 <StyledInputIcon
diff --git a/packages/dropdowns/src/elements/combobox/Listbox.tsx b/packages/dropdowns/src/elements/combobox/Listbox.tsx
index ff68b859fd8..b3bae575249 100644
--- a/packages/dropdowns/src/elements/combobox/Listbox.tsx
+++ b/packages/dropdowns/src/elements/combobox/Listbox.tsx
@@ -123,16 +123,16 @@ export const Listbox = forwardRef<HTMLUListElement, IListboxProps>(
     const Node = (
       <StyledFloatingListbox
         data-garden-animate={isVisible ? 'true' : 'false'}
-        isHidden={!isExpanded}
-        position={placement === 'bottom-start' ? 'bottom' : 'top'}
+        $isHidden={!isExpanded}
+        $position={placement === 'bottom-start' ? 'bottom' : 'top'}
         style={{ transform, width }}
-        zIndex={zIndex}
+        $zIndex={zIndex}
         ref={floatingRef}
       >
         <StyledListbox
-          isCompact={isCompact}
-          maxHeight={maxHeight}
-          minHeight={minHeight}
+          $isCompact={isCompact}
+          $maxHeight={maxHeight}
+          $minHeight={minHeight}
           onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
           style={{ height }}
           {...props}
diff --git a/packages/dropdowns/src/elements/combobox/OptGroup.tsx b/packages/dropdowns/src/elements/combobox/OptGroup.tsx
index 0cc87cfbcc7..b0cf2580758 100644
--- a/packages/dropdowns/src/elements/combobox/OptGroup.tsx
+++ b/packages/dropdowns/src/elements/combobox/OptGroup.tsx
@@ -42,7 +42,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
 
     return (
       <StyledOption
-        isCompact={isCompact}
+        $isCompact={isCompact}
         $type="group"
         onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
         role="none"
@@ -51,7 +51,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
       >
         <StyledOptionContent>
           {!!(content || legend) && (
-            <StyledOption as="div" isCompact={isCompact} $type="header">
+            <StyledOption as="div" $isCompact={isCompact} $type="header">
               {!!icon && (
                 <StyledOptionTypeIcon $isCompact={isCompact} $type="header">
                   {icon}
@@ -60,7 +60,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
               {content || legend}
             </StyledOption>
           )}
-          <StyledOptGroup isCompact={isCompact} {...optGroupProps}>
+          <StyledOptGroup $isCompact={isCompact} {...optGroupProps}>
             <StyledListboxSeparator role="none" />
             {children}
           </StyledOptGroup>
diff --git a/packages/dropdowns/src/elements/combobox/Option.tsx b/packages/dropdowns/src/elements/combobox/Option.tsx
index 3ddf4345a07..3a7703ffeef 100644
--- a/packages/dropdowns/src/elements/combobox/Option.tsx
+++ b/packages/dropdowns/src/elements/combobox/Option.tsx
@@ -67,8 +67,8 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
     return (
       <OptionContext.Provider value={contextValue}>
         <StyledOption
-          isActive={isActive}
-          isCompact={isCompact}
+          $isActive={isActive}
+          $isCompact={isCompact}
           $type={type}
           {...props}
           {...optionProps}
diff --git a/packages/dropdowns/src/elements/combobox/OptionMeta.tsx b/packages/dropdowns/src/elements/combobox/OptionMeta.tsx
index 5ac3e3456d5..541e3c9f0ef 100644
--- a/packages/dropdowns/src/elements/combobox/OptionMeta.tsx
+++ b/packages/dropdowns/src/elements/combobox/OptionMeta.tsx
@@ -13,7 +13,7 @@ const OptionMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
   (props, ref) => {
     const { isDisabled } = useOptionContext();
 
-    return <StyledOptionMeta isDisabled={isDisabled} {...props} ref={ref} />;
+    return <StyledOptionMeta $isDisabled={isDisabled} {...props} ref={ref} />;
   }
 );
 
diff --git a/packages/dropdowns/src/elements/menu/Item.tsx b/packages/dropdowns/src/elements/menu/Item.tsx
index 467288c0d1f..5b97e97e028 100644
--- a/packages/dropdowns/src/elements/menu/Item.tsx
+++ b/packages/dropdowns/src/elements/menu/Item.tsx
@@ -83,8 +83,8 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
       <ItemContext.Provider value={contextValue}>
         <StyledItem
           $type={type}
-          isCompact={isCompact}
-          isActive={isActive}
+          $isCompact={isCompact}
+          $isActive={isActive}
           {...props}
           {...itemProps}
           ref={mergeRefs([_itemRef, ref])}
diff --git a/packages/dropdowns/src/elements/menu/ItemGroup.tsx b/packages/dropdowns/src/elements/menu/ItemGroup.tsx
index 70b5b63baf6..4fb0387ea05 100644
--- a/packages/dropdowns/src/elements/menu/ItemGroup.tsx
+++ b/packages/dropdowns/src/elements/menu/ItemGroup.tsx
@@ -44,10 +44,10 @@ export const ItemGroup = forwardRef<HTMLLIElement, IItemGroupProps>(
 
     return (
       <ItemGroupContext.Provider value={contextValue}>
-        <StyledItem isCompact={isCompact} $type="group" {...props} role="none" ref={ref}>
+        <StyledItem $isCompact={isCompact} $type="group" {...props} role="none" ref={ref}>
           <StyledItemContent>
             {!!(content || legend) && (
-              <StyledItem as="div" isCompact={isCompact} $type="header">
+              <StyledItem as="div" $isCompact={isCompact} $type="header">
                 {!!icon && (
                   <StyledItemTypeIcon $isCompact={isCompact} $type="header">
                     {icon}
@@ -56,7 +56,7 @@ export const ItemGroup = forwardRef<HTMLLIElement, IItemGroupProps>(
                 {content || legend}
               </StyledItem>
             )}
-            <StyledItemGroup isCompact={isCompact} {...groupProps}>
+            <StyledItemGroup $isCompact={isCompact} {...groupProps}>
               <StyledSeparator role="none" />
               {children}
             </StyledItemGroup>
diff --git a/packages/dropdowns/src/elements/menu/ItemMeta.tsx b/packages/dropdowns/src/elements/menu/ItemMeta.tsx
index d5ef1ebd1c5..2fe18a560b0 100644
--- a/packages/dropdowns/src/elements/menu/ItemMeta.tsx
+++ b/packages/dropdowns/src/elements/menu/ItemMeta.tsx
@@ -13,7 +13,7 @@ const ItemMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
   (props, ref) => {
     const { isDisabled } = useItemContext();
 
-    return <StyledItemMeta isDisabled={isDisabled} {...props} ref={ref} />;
+    return <StyledItemMeta $isDisabled={isDisabled} {...props} ref={ref} />;
   }
 );
 
diff --git a/packages/dropdowns/src/elements/menu/MenuList.tsx b/packages/dropdowns/src/elements/menu/MenuList.tsx
index 43593010ee2..27151c93311 100644
--- a/packages/dropdowns/src/elements/menu/MenuList.tsx
+++ b/packages/dropdowns/src/elements/menu/MenuList.tsx
@@ -144,18 +144,18 @@ export const MenuList = forwardRef<HTMLUListElement, IMenuListProps>(
     const Node = (
       <StyledFloatingMenu
         data-garden-animate={isVisible}
-        isHidden={!isExpanded || !isVisible} /* [1] */
-        position={getMenuPosition(placement)}
-        zIndex={zIndex}
+        $isHidden={!isExpanded || !isVisible} /* [1] */
+        $position={getMenuPosition(placement)}
+        $zIndex={zIndex}
         style={{ transform }}
         ref={floatingRef}
       >
         <StyledMenu
           data-garden-animate-arrow={isVisible}
-          arrowPosition={hasArrow ? getArrowPosition(theme, placement) : undefined}
-          isCompact={isCompact}
-          minHeight={minHeight}
-          maxHeight={maxHeight}
+          $arrowPosition={hasArrow ? getArrowPosition(theme, placement) : undefined}
+          $isCompact={isCompact}
+          $minHeight={minHeight}
+          $maxHeight={maxHeight}
           style={{ height }}
           {...props}
           ref={ref}
diff --git a/packages/dropdowns/src/views/combobox/StyledCombobox.ts b/packages/dropdowns/src/views/combobox/StyledCombobox.ts
index 800b78eb277..a7ec68a4c62 100644
--- a/packages/dropdowns/src/views/combobox/StyledCombobox.ts
+++ b/packages/dropdowns/src/views/combobox/StyledCombobox.ts
@@ -14,12 +14,12 @@ import { StyledMessage } from './StyledMessage';
 const COMPONENT_ID = 'dropdowns.combobox';
 
 interface IStyledComboboxProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 const sizeStyles = (props: IStyledComboboxProps) => {
-  const minWidth = `${props.isCompact ? 100 : 144}px`;
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  const minWidth = `${props.$isCompact ? 100 : 144}px`;
+  const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
 
   return css`
     min-width: ${minWidth};
diff --git a/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts b/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts
index 0ee532706bf..32003103a39 100644
--- a/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts
+++ b/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts
@@ -12,9 +12,9 @@ import { IListboxProps } from '../../types';
 const COMPONENT_ID = 'dropdowns.combobox.floating';
 
 export interface IStyledFloatingListboxProps extends ThemeProps<DefaultTheme> {
-  isHidden?: boolean;
-  position: MenuPosition;
-  zIndex?: IListboxProps['zIndex'];
+  $isHidden?: boolean;
+  $position: MenuPosition;
+  $zIndex?: IListboxProps['zIndex'];
 }
 
 /*
@@ -28,11 +28,11 @@ export const StyledFloatingListbox = styled.div.attrs({
   left: 0; /* [1] */
 
   ${props =>
-    menuStyles(props.position, {
+    menuStyles(props.$position, {
       theme: props.theme,
-      hidden: props.isHidden,
+      hidden: props.$isHidden,
       animationModifier: '[data-garden-animate="true"]',
-      zIndex: props.zIndex
+      zIndex: props.$zIndex
     })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/dropdowns/src/views/combobox/StyledInput.ts b/packages/dropdowns/src/views/combobox/StyledInput.ts
index 0602f555440..4eeacff38fd 100644
--- a/packages/dropdowns/src/views/combobox/StyledInput.ts
+++ b/packages/dropdowns/src/views/combobox/StyledInput.ts
@@ -12,10 +12,10 @@ import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden
 const COMPONENT_ID = 'dropdowns.combobox.input';
 
 interface IStyledInputProps extends ThemeProps<DefaultTheme> {
-  isBare?: boolean;
-  isCompact?: boolean;
-  isEditable?: boolean;
-  isMultiselectable?: boolean;
+  $isBare?: boolean;
+  $isCompact?: boolean;
+  $isEditable?: boolean;
+  $isMultiselectable?: boolean;
 }
 
 const colorStyles = ({ theme }: IStyledInputProps) => {
@@ -33,11 +33,11 @@ const colorStyles = ({ theme }: IStyledInputProps) => {
 };
 
 export const getHeight = (props: IStyledInputProps) => {
-  if (props.isBare && !props.isMultiselectable) {
+  if (props.$isBare && !props.$isMultiselectable) {
     return props.theme.space.base * 5;
   }
 
-  return props.theme.space.base * (props.isCompact ? 5 : 8);
+  return props.theme.space.base * (props.$isCompact ? 5 : 8);
 };
 
 export const sizeStyles = (props: IStyledInputProps) => {
@@ -80,7 +80,7 @@ export const StyledInput = styled.input.attrs({
 
   &[hidden] {
     display: revert;
-    ${props => props.isEditable && hideVisually()}
+    ${props => props.$isEditable && hideVisually()}
   }
 
   &[aria-hidden='true'] {
diff --git a/packages/dropdowns/src/views/combobox/StyledListbox.ts b/packages/dropdowns/src/views/combobox/StyledListbox.ts
index 1267316e268..6d7af4a99b0 100644
--- a/packages/dropdowns/src/views/combobox/StyledListbox.ts
+++ b/packages/dropdowns/src/views/combobox/StyledListbox.ts
@@ -15,21 +15,21 @@ import { StyledListboxSeparator } from './StyledListboxSeparator';
 const COMPONENT_ID = 'dropdowns.combobox.listbox';
 
 export interface IStyledListboxProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
-  maxHeight?: IListboxProps['maxHeight'];
-  minHeight?: IListboxProps['minHeight'];
+  $isCompact?: boolean;
+  $maxHeight?: IListboxProps['maxHeight'];
+  $minHeight?: IListboxProps['minHeight'];
 }
 
 const sizeStyles = (props: IStyledListboxProps) => {
   const padding = props.theme.space.base;
-  const minHeight =
-    props.minHeight === undefined
+  const $minHeight =
+    props.$minHeight === undefined
       ? `${getOptionMinHeight(props) + padding * 2}px`
-      : props.minHeight;
+      : props.$minHeight;
 
   return css`
-    min-height: ${minHeight};
-    max-height: ${props.maxHeight};
+    min-height: ${$minHeight};
+    max-height: ${props.$maxHeight};
 
     &&& {
       padding-top: ${padding}px;
diff --git a/packages/dropdowns/src/views/combobox/StyledOptGroup.ts b/packages/dropdowns/src/views/combobox/StyledOptGroup.ts
index 27ac6c2e213..d6c6feef2b1 100644
--- a/packages/dropdowns/src/views/combobox/StyledOptGroup.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOptGroup.ts
@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.combobox.optgroup';
 
 export interface IStyledOptGroupProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 export const StyledOptGroup = styled.ul.attrs({
diff --git a/packages/dropdowns/src/views/combobox/StyledOption.ts b/packages/dropdowns/src/views/combobox/StyledOption.ts
index a3ed042238d..9ec8e598c3e 100644
--- a/packages/dropdowns/src/views/combobox/StyledOption.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOption.ts
@@ -13,16 +13,16 @@ import { OptionType } from '../../types';
 const COMPONENT_ID = 'dropdowns.combobox.option';
 
 export interface IStyledOptionProps extends ThemeProps<DefaultTheme> {
-  isActive?: boolean;
-  isCompact?: boolean;
+  $isActive?: boolean;
+  $isCompact?: boolean;
   $type?: OptionType | 'header' | 'group';
 }
 
-const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
+const colorStyles = ({ theme, $isActive, $type }: IStyledOptionProps) => {
   let backgroundColor;
   let boxShadow;
 
-  if (isActive && $type !== 'group' && $type !== 'header') {
+  if ($isActive && $type !== 'group' && $type !== 'header') {
     const variable = 'background.primaryEmphasis';
 
     backgroundColor = getColor({ theme, variable, transparency: theme.opacity[100] });
@@ -57,7 +57,7 @@ const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
 };
 
 export const getMinHeight = (props: IStyledOptionProps) =>
-  props.theme.space.base * (props.isCompact ? 7 : 9);
+  props.theme.space.base * (props.$isCompact ? 7 : 9);
 
 /*
  * 1. Use px vs. unitless to prevent browser sizing shifts.
diff --git a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
index 725c56cfe1a..c95ee3ab16a 100644
--- a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
@@ -11,11 +11,11 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.combobox.option.meta';
 
 export interface IStyledOptionMetaProps extends ThemeProps<DefaultTheme> {
-  isDisabled?: boolean;
+  $isDisabled?: boolean;
 }
 
-const colorStyles = ({ theme, isDisabled }: IStyledOptionMetaProps) => {
-  const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+const colorStyles = ({ theme, $isDisabled }: IStyledOptionMetaProps) => {
+  const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
   const color = getColor({ theme, variable });
 
   return css`
diff --git a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
index 999fe9a9307..a55bd081bf3 100644
--- a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
+++ b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
@@ -12,7 +12,7 @@ import { StyledValue } from './StyledValue';
 const COMPONENT_ID = 'dropdowns.combobox.tags_button';
 
 interface IStyledTagsButtonProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 const colorStyles = ({ theme }: IStyledTagsButtonProps) => {
diff --git a/packages/dropdowns/src/views/combobox/StyledTrigger.ts b/packages/dropdowns/src/views/combobox/StyledTrigger.ts
index a63dac6fcee..373bb6454e6 100644
--- a/packages/dropdowns/src/views/combobox/StyledTrigger.ts
+++ b/packages/dropdowns/src/views/combobox/StyledTrigger.ts
@@ -14,26 +14,26 @@ import { getHeight as getInputHeight } from './StyledInput';
 const COMPONENT_ID = 'dropdowns.combobox.trigger';
 
 interface IStyledTriggerProps extends ThemeProps<DefaultTheme> {
-  isAutocomplete?: boolean;
-  isBare?: boolean;
-  isCompact?: boolean;
-  isEditable?: boolean;
-  isLabelHovered?: boolean;
-  isMultiselectable?: boolean;
-  maxHeight?: string;
-  focusInset?: boolean;
-  validation?: Validation;
+  $isAutocomplete?: boolean;
+  $isBare?: boolean;
+  $isCompact?: boolean;
+  $isEditable?: boolean;
+  $isLabelHovered?: boolean;
+  $isMultiselectable?: boolean;
+  $maxHeight?: string;
+  $focusInset?: boolean;
+  $validation?: Validation;
 }
 
 const colorStyles = ({
   theme,
-  validation,
-  isBare,
-  isLabelHovered,
-  focusInset
+  $validation,
+  $isBare,
+  $isLabelHovered,
+  $focusInset
 }: IStyledTriggerProps) => {
   const foregroundColor = getColor({ theme, variable: 'foreground.default' });
-  const backgroundColor = isBare
+  const backgroundColor = $isBare
     ? 'transparent'
     : getColor({ theme, variable: 'background.default' });
   let borderColor: string | undefined;
@@ -41,12 +41,12 @@ const colorStyles = ({
   let hoverBorderColor: string | undefined;
   let focusBorderColor: string | undefined;
 
-  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';
     }
 
@@ -65,7 +65,7 @@ const colorStyles = ({
     focusBorderColor = hoverBorderColor;
   }
 
-  const disabledBackgroundColor = isBare
+  const disabledBackgroundColor = $isBare
     ? undefined
     : getColor({ theme, variable: 'background.disabled' });
   const disabledBorderColor = getColor({ theme, variable: 'border.disabled' });
@@ -77,7 +77,7 @@ const colorStyles = ({
 
   return css`
     color-scheme: only ${theme.colors.base};
-    border-color: ${isLabelHovered ? hoverBorderColor : borderColor};
+    border-color: ${$isLabelHovered ? hoverBorderColor : borderColor};
     background-color: ${backgroundColor};
     color: ${foregroundColor};
 
@@ -87,11 +87,11 @@ const colorStyles = ({
 
     ${focusStyles({
       theme,
-      inset: focusInset,
+      inset: $focusInset,
       color: { variable: borderVariable },
       selector: focusSelector,
       styles: { borderColor: focusBorderColor },
-      condition: !isBare
+      condition: !$isBare
     })}
 
     &[aria-disabled='true'] {
@@ -107,8 +107,8 @@ const sizeStyles = (props: IStyledTriggerProps) => {
   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 {
@@ -116,19 +116,19 @@ const sizeStyles = (props: IStyledTriggerProps) => {
       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 $maxHeight = props.$maxHeight || minHeight;
   const verticalPadding = math(
-    `(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`
+    `(${minHeight} - ${inputHeight} - (${props.$isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`
   );
 
   return css`
     padding: ${verticalPadding} ${horizontalPadding};
     min-height: ${minHeight};
-    max-height: ${maxHeight};
+    max-height: ${$maxHeight};
     font-size: ${props.theme.fontSizes.md};
   `;
 };
@@ -137,16 +137,16 @@ export const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledTriggerProps>`
-  overflow-y: ${props => (props.isBare && !props.isMultiselectable ? 'visible' : 'auto')};
+  overflow-y: ${props => (props.$isBare && !props.$isMultiselectable ? 'visible' : 'auto')};
   /* prettier-ignore */
   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: ${props => (props.isBare ? 'none' : props.theme.borders.sm)};
-  border-radius: ${props => (props.isBare ? '0' : props.theme.borderRadii.md)};
-  cursor: ${props => (!props.isAutocomplete && props.isEditable ? 'text' : 'pointer')};
+  border: ${props => (props.$isBare ? 'none' : props.theme.borders.sm)};
+  border-radius: ${props => (props.$isBare ? '0' : props.theme.borderRadii.md)};
+  cursor: ${props => (!props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer')};
   box-sizing: border-box;
 
   ${sizeStyles};
diff --git a/packages/dropdowns/src/views/combobox/StyledValue.ts b/packages/dropdowns/src/views/combobox/StyledValue.ts
index 279524766f8..3a7858a0df0 100644
--- a/packages/dropdowns/src/views/combobox/StyledValue.ts
+++ b/packages/dropdowns/src/views/combobox/StyledValue.ts
@@ -12,17 +12,17 @@ import { sizeStyles } from './StyledInput';
 const COMPONENT_ID = 'dropdowns.combobox.value';
 
 interface IStyledValueProps extends ThemeProps<DefaultTheme> {
-  isAutocomplete?: boolean;
-  isBare?: boolean;
-  isCompact?: boolean;
-  isDisabled?: boolean;
-  isEditable?: boolean;
-  isMultiselectable?: boolean;
-  isPlaceholder?: boolean;
+  $isAutocomplete?: boolean;
+  $isBare?: boolean;
+  $isCompact?: boolean;
+  $isDisabled?: boolean;
+  $isEditable?: boolean;
+  $isMultiselectable?: boolean;
+  $isPlaceholder?: boolean;
 }
 
-const colorStyles = ({ theme, isPlaceholder }: IStyledValueProps) => {
-  const foregroundColor = isPlaceholder && getColor({ theme, variable: 'foreground.disabled' });
+const colorStyles = ({ theme, $isPlaceholder }: IStyledValueProps) => {
+  const foregroundColor = $isPlaceholder && getColor({ theme, variable: 'foreground.disabled' });
 
   return css`
     color: ${foregroundColor};
@@ -36,11 +36,11 @@ export const StyledValue = styled.div.attrs({
   flex-basis: 0;
   flex-grow: 1;
   cursor: ${props => {
-    if (props.isDisabled) {
+    if (props.$isDisabled) {
       return 'default';
     }
 
-    return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
+    return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
   }};
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/dropdowns/src/views/menu/StyledMenu.ts b/packages/dropdowns/src/views/menu/StyledMenu.ts
index 15d6b72f9bf..b59e01df8d0 100644
--- a/packages/dropdowns/src/views/menu/StyledMenu.ts
+++ b/packages/dropdowns/src/views/menu/StyledMenu.ts
@@ -12,7 +12,7 @@ import { IStyledListboxProps, StyledListbox } from '../combobox/StyledListbox';
 const COMPONENT_ID = 'dropdowns.menu';
 
 interface IStyledMenuProps extends IStyledListboxProps {
-  arrowPosition?: ArrowPosition;
+  $arrowPosition?: ArrowPosition;
 }
 
 /*
@@ -26,8 +26,8 @@ export const StyledMenu = styled(StyledListbox).attrs({
   position: static !important; /* [1] */
 
   ${props =>
-    props.arrowPosition &&
-    arrowStyles(props.arrowPosition, {
+    props.$arrowPosition &&
+    arrowStyles(props.$arrowPosition, {
       size: `${props.theme.space.base * 1.5}px`,
       inset: '1px',
       animationModifier: '[data-garden-animate-arrow="true"]'