refactor(dropdowns): use transient props where appropriate (#1961)

ze-flo · web-flow · commit 0c856e8aa348 · 2024-10-24T09:04:05.000-07:00
diff --git a/packages/dropdowns/src/elements/combobox/Combobox.tsx b/packages/dropdowns/src/elements/combobox/Combobox.tsx
@@ -176,48 +176,34 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       'listboxAriaLabel',
       'Options'
     );
-    const triggerProps = {
-      isAutocomplete,
-      isBare,
-      isCompact,
-      isEditable,
-      isLabelHovered,
-      isMultiselectable,
-      maxHeight,
-      focusInset,
-      validation,
-      ...(getTriggerProps({
-        onFocus: () => {
-          if (!isDisabled) {
-            if (isEditable) {
-              setIsInputHidden(false);
-            }
+    const triggerProps = getTriggerProps({
+      onFocus: () => {
+        if (!isDisabled) {
+          if (isEditable) {
+            setIsInputHidden(false);
+          }
 
-            if (isMultiselectable) {
-              setIsTagGroupExpanded(true);
-            }
+          if (isMultiselectable) {
+            setIsTagGroupExpanded(true);
+          }
+        }
+      },
+      onBlur: event => {
+        if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
+          if (isEditable) {
+            setIsInputHidden(true);
           }
-        },
-        onBlur: event => {
-          if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
-            if (isEditable) {
-              setIsInputHidden(true);
-            }
 
-            if (isMultiselectable) {
-              setIsTagGroupExpanded(false);
-            }
+          if (isMultiselectable) {
+            setIsTagGroupExpanded(false);
           }
         }
-      }) as HTMLAttributes<HTMLDivElement>)
-    };
+      }
+    }) as HTMLAttributes<HTMLDivElement>;
+
     const inputProps = {
       'aria-invalid': validation === 'error' || validation === 'warning',
       hidden: isInputHidden,
-      isBare,
-      isCompact,
-      isEditable,
-      isMultiselectable,
       placeholder,
       ...(getInputProps({
         ...(_inputProps as IUseComboboxReturnValue['getInputProps'])
@@ -266,12 +252,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 +288,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
                       <StyledTagsButton
                         disabled={isDisabled}
                         hidden={isTagGroupExpanded}
-                        isCompact={isCompact}
+                        $isCompact={isCompact}
                         tabIndex={-1}
                         type="button"
                       >
@@ -308,17 +305,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
diff --git a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
diff --git a/packages/dropdowns/src/views/combobox/StyledTrigger.ts b/packages/dropdowns/src/views/combobox/StyledTrigger.ts
diff --git a/packages/dropdowns/src/views/combobox/StyledValue.ts b/packages/dropdowns/src/views/combobox/StyledValue.ts
diff --git a/packages/dropdowns/src/views/menu/StyledMenu.ts b/packages/dropdowns/src/views/menu/StyledMenu.ts

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ const OptionMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle`
`13`	`13`	`(props, ref) => {`
`14`	`14`	`const { isDisabled } = useOptionContext();`
`15`	`15`
`16`		`- return <StyledOptionMeta isDisabled={isDisabled} {...props} ref={ref} />;`
	`16`	`+ return <StyledOptionMeta $isDisabled={isDisabled} {...props} ref={ref} />;`
`17`	`17`	`}`
`18`	`18`	`);`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ const ItemMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme`
`13`	`13`	`(props, ref) => {`
`14`	`14`	`const { isDisabled } = useItemContext();`
`15`	`15`
`16`		`- return <StyledItemMeta isDisabled={isDisabled} {...props} ref={ref} />;`
	`16`	`+ return <StyledItemMeta $isDisabled={isDisabled} {...props} ref={ref} />;`
`17`	`17`	`}`
`18`	`18`	`);`
`19`	`19`