feat(combobox)!: prefer strings as option values (#637)

BREAKING CHANGE:
- Removes `object` from `string | object` option value type on `useCombobox`.

Author: geotrev

package-lock.json

@@ -19,8 +19,7 @@ import {
 } from '@zendeskgarden/container-combobox';
 import { useGrid } from '@zendeskgarden/container-grid';
 
-const toString = (option: IOption) =>
-  option.label || (typeof option.value === 'string' ? option.value : JSON.stringify(option.value));
+const getLabel = (option: IOption) => option.label || option.value;
 
 interface IOptionProps extends LiHTMLAttributes<HTMLLIElement> {
   option: IOption;
@@ -45,7 +44,7 @@ const Option = ({ option, isGrouped, activeValue, selection, getOptionProps }: I
     {(Array.isArray(selection)
       ? selection.find(value => value.value === option.value) !== undefined
       : selection && selection.value === option.value) && '✓ '}
-    {toString(option)}
+    {getLabel(option)}
   </li>
 );
 
@@ -71,7 +70,7 @@ const Tags = ({ selection, getTagProps }: ITagsProps) => {
                 option,
                 'aria-label': option.disabled
                   ? ''
-                  : `Press delete or backspace to remove ${toString(option)}`
+                  : `Press delete or backspace to remove ${getLabel(option)}`
               });
               const previousDisabledOptions = selection.filter(
                 (_option, _index) => _option.disabled && _index < index
@@ -87,7 +86,7 @@ const Tags = ({ selection, getTagProps }: ITagsProps) => {
               return (
                 <td key={index} role={role} className="inline">
                   <button className="mr-1 px-1" disabled={option.disabled} {...props} type="button">
-                    {toString(option)}
+                    {getLabel(option)}
                   </button>
                 </td>
               );
@@ -286,7 +285,7 @@ export const ComboboxStory: Story<IArgs> = ({ as, ...props }) => {
 
         const regex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/giu, '\\$&'), 'gui');
 
-        setOptions(_options.filter(option => toString(option).match(regex)));
+        setOptions(_options.filter(option => getLabel(option).match(regex)));
       }
     }
   };

packages/combobox/demo/stories/ComboboxStory.tsx

@@ -91,7 +91,7 @@ describe('ComboboxContainer', () => {
                 {Array.isArray(selection) &&
                   selection.map(option => (
                     <button
-                      key={option.value as string}
+                      key={option.value}
                       data-test-id={tagTestId}
                       disabled={option.disabled}
                       {...getTagProps({ 'aria-label': 'tag', option })}
@@ -110,7 +110,7 @@ describe('ComboboxContainer', () => {
                 {Array.isArray(selection) &&
                   selection.map(option => (
                     <button
-                      key={option.value as string}
+                      key={option.value}
                       data-test-id={tagTestId}
                       disabled={option.disabled}
                       {...getTagProps({ 'aria-label': 'tag', option })}
@@ -140,7 +140,7 @@ describe('ComboboxContainer', () => {
                     >
                       {option.options.map((groupOption, groupIndex) => (
                         <li
-                          key={(groupOption.value as string) || groupIndex}
+                          key={groupOption.value || groupIndex}
                           data-test-id={`${optionTestIdPrefix}-${index + 1}.${groupIndex + 1}`}
                           {...getOptionProps({ option: groupOption })}
                         >
@@ -151,7 +151,7 @@ describe('ComboboxContainer', () => {
                   </li>
                 ) : (
                   <li
-                    key={(option.value as string) || index}
+                    key={option.value || index}
                     data-test-id={`${optionTestIdPrefix}-${index + 1}`}
                     {...getOptionProps({ option })}
                   >

packages/combobox/src/ComboboxContainer.spec.tsx

@@ -31,7 +31,7 @@ ComboboxContainer.propTypes = {
   hasMessage: PropTypes.bool,
   options: PropTypes.arrayOf(PropTypes.any).isRequired,
   inputValue: PropTypes.string,
-  selectionValue: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  selectionValue: PropTypes.any,
   isExpanded: PropTypes.bool,
   defaultExpanded: PropTypes.bool,
   initialExpanded: PropTypes.bool,

packages/combobox/src/ComboboxContainer.tsx

@@ -8,7 +8,7 @@
 import { IUseFieldReturnValue } from '@zendeskgarden/container-field';
 import { HTMLProps, ReactNode, RefObject } from 'react';
 
-export type OptionValue = string | object;
+export type OptionValue = string;
 
 interface ISelectedOption {
   value: OptionValue;