feat(dropdowns)!: removes object type from Option value prop (#1773)

Author: geotrev

package-lock.json

@@ -22,9 +22,8 @@ import {
   Tag
 } from '@zendeskgarden/react-dropdowns';
 import { IOption, Options } from './types';
-import { toString } from '../../src/elements/combobox/utils';
 
-const toLabel = (option: IOption) => option.label || toString(option);
+const toLabel = (option: IOption) => option.label || option.value;
 
 const ComboboxOption = ({ icon, meta, ...props }: IOption) => {
   const Svg = props.tagProps?.isPill ? Avatar : Icon;
@@ -157,7 +156,7 @@ export const ComboboxStory: Story<IArgs> = ({
                     <OptGroup key={index} icon={icon ? <Icon /> : undefined} {...option}>
                       {option.options.map(({ icon: groupIcon, ...groupOption }) => (
                         <ComboboxOption
-                          key={toString(groupOption)}
+                          key={groupOption.value}
                           icon={groupIcon}
                           {...groupOption}
                           tagProps={getTagProps({ icon: groupIcon, ...groupOption })}
@@ -166,7 +165,7 @@ export const ComboboxStory: Story<IArgs> = ({
                     </OptGroup>
                   ) : (
                     <ComboboxOption
-                      key={toString(option)}
+                      key={option.value}
                       icon={icon}
                       {...option}
                       tagProps={getTagProps({ icon, ...option })}

packages/dropdowns/demo/stories/ComboboxStory.tsx

@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-combobox": "^1.1.4",
+    "@zendeskgarden/container-combobox": "^2.0.0",
     "@zendeskgarden/container-menu": "^0.3.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/react-buttons": "^9.0.0-next.6",

packages/dropdowns/package.json

@@ -22,7 +22,7 @@ import {
   StyledOptionTypeIcon
 } from '../../views';
 import { OptionMeta } from './OptionMeta';
-import { toOption, toString } from './utils';
+import { toOption } from './utils';
 
 const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
   ({ children, icon, isDisabled, isHidden, isSelected, label, type, value, ...props }, ref) => {
@@ -77,7 +77,7 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
             {renderActionIcon(type)}
           </StyledOptionTypeIcon>
           {icon && <StyledOptionIcon>{icon}</StyledOptionIcon>}
-          <StyledOptionContent>{children || label || toString({ value })}</StyledOptionContent>
+          <StyledOptionContent>{children || label || value}</StyledOptionContent>
         </StyledOption>
       </OptionContext.Provider>
     );
@@ -94,7 +94,7 @@ OptionComponent.propTypes = {
   label: PropTypes.string,
   tagProps: PropTypes.object,
   type: PropTypes.oneOf(OPTION_TYPE),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
+  value: PropTypes.string.isRequired
 };
 
 /**

packages/dropdowns/src/elements/combobox/Option.tsx

@@ -13,13 +13,12 @@ import { Tooltip } from '@zendeskgarden/react-tooltips';
 import { ITagProps } from '../../types';
 import useComboboxContext from '../../context/useComboboxContext';
 import { StyledTag } from '../../views';
-import { toString } from './utils';
 import { TagAvatar } from './TagAvatar';
 
 const TagComponent = forwardRef<HTMLDivElement, ITagProps>(
   ({ children, option, removeLabel, tooltipZIndex, ...props }, ref) => {
     const { getTagProps, isCompact, removeSelection } = useComboboxContext();
-    const text = option.label || toString(option);
+    const text = option.label || option.value;
     const ariaLabel = useText(
       /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
       Tag,

packages/dropdowns/src/elements/combobox/Tag.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { toString } from './utils';
 import { Tag } from './Tag';
 import { ITagGroupProps } from '../../types';
 
@@ -21,16 +20,15 @@ export const TagGroup = ({
 }: PropsWithChildren<ITagGroupProps>) => (
   <>
     {selection.map((option, index) => {
-      const key = toString(option);
       const disabled = isDisabled || option.disabled;
 
       return (
         <Tag
-          key={key}
+          key={option.value}
           hidden={!isExpanded && index >= maxTags}
           option={{ ...option, disabled }}
           tooltipZIndex={listboxZIndex ? listboxZIndex + 1 : undefined}
-          {...optionTagProps[key]}
+          {...optionTagProps[option.value]}
         />
       );
     })}

packages/dropdowns/src/elements/combobox/TagGroup.tsx

@@ -9,16 +9,6 @@ import { Children, ReactNode, isValidElement } from 'react';
 import { IOption, IUseComboboxProps } from '@zendeskgarden/container-combobox';
 import { IOptGroupProps, IOptionProps } from '../../types';
 
-/**
- * Convert an option object to a string.
- *
- * @param option An option of type `IOption`.
- *
- * @returns A string based on `option.value`.
- */
-export const toString = (option: IOption) =>
-  typeof option.value === 'string' ? option.value : JSON.stringify(option.value);
-
 /**
  * Convert `Option` props to a valid object for `useCombobox`.
  *
@@ -55,7 +45,7 @@ export const toOptions = (
     if (isValidElement(option)) {
       if ('value' in option.props) {
         retVal.push(toOption(option.props));
-        optionTagProps[toString(option.props)] = option.props.tagProps;
+        optionTagProps[option.props.value] = option.props.tagProps;
       } else {
         const props: IOptGroupProps = option.props;
         const groupOptions = toOptions(props.children, optionTagProps) as IOption[];

packages/dropdowns/src/elements/combobox/utils.ts

@@ -176,7 +176,7 @@ export interface IOptionProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'val
   /** Determines the option type */
   type?: OptionType;
   /** Sets the unique value that is returned upon selection */
-  value: string | object;
+  value: string;
 }
 
 export interface IOptGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'content'> {