#343 Extend the Picker options interface and logic to enable passing the own component as item

packages/react-components/src/components/Picker/Picker.spec.tsx

@@ -3,7 +3,7 @@ import { render, vi } from 'test-utils';
 import userEvent from '@testing-library/user-event';
 import noop from '../../utils/noop';
 import { IPickerProps, Picker, PickerType } from './Picker';
-import { defaultOptions, SELECT_ALL_OPTION_KEY } from './constants';
+import { defaultOptions } from './constants';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 window.HTMLElement.prototype.scrollIntoView = () => {};

packages/react-components/src/components/Picker/Picker.stories.css

@@ -0,0 +1,31 @@
+.custom-picker-option {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}
+
+.image {
+  margin-right: 15px;
+  border-radius: 50%;
+  width: 45px;
+  height: auto;
+}
+
+.image.selected {
+  width: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.title.selected {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.description {
+  color: var(--content-subtle);
+  font-size: 14px;
+}

packages/react-components/src/components/Picker/Picker.stories.tsx

@@ -5,6 +5,8 @@ import { IPickerProps, Picker as PickerComponent } from './Picker';
 import { defaultExtendedOptions, defaultOptions } from './constants';
 import { IPickerListItem } from './PickerList';
 
+import './Picker.stories.css';
+
 export default {
   title: 'Components/Picker',
   component: PickerComponent,
@@ -91,3 +93,129 @@ PickerInMultiselectModeWithSelectedOptions.args = {
   options: defaultExtendedOptions,
   selectAllOptionText: 'Select all',
 };
+
+const CustomPickerOption: React.FC = ({ children }) => (
+  <div className="custom-picker-option">{children}</div>
+);
+
+export const PickerWithOptionsAsCustomElements = StoryTemplate.bind({});
+PickerWithOptionsAsCustomElements.args = {
+  options: [
+    {
+      key: 'one',
+      name: 'Example custom element one',
+      customElement: {
+        listItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div>
+              <div className="title">Example custom element one</div>
+              <div className="description">Example custom element</div>
+            </div>
+          </CustomPickerOption>
+        ),
+        selectedItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image selected"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div className="title selected">Example custom element one</div>
+          </CustomPickerOption>
+        ),
+      },
+    },
+    {
+      key: 'two',
+      name: 'Example custom element two',
+      customElement: {
+        listItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div>
+              <div className="title">Example custom element two</div>
+              <div className="description">Example custom element</div>
+            </div>
+          </CustomPickerOption>
+        ),
+        selectedItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image selected"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div className="title selected">Example custom element two</div>
+          </CustomPickerOption>
+        ),
+      },
+    },
+  ],
+};
+
+export const PickerInMultiselectModeWithOptionsAsCustomElements =
+  StoryTemplate.bind({});
+PickerInMultiselectModeWithOptionsAsCustomElements.args = {
+  type: 'multi',
+  options: [
+    {
+      key: 'one',
+      name: 'Example custom element one',
+      customElement: {
+        listItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div>
+              <div className="title">Example custom element one</div>
+              <div className="description">Example custom element</div>
+            </div>
+          </CustomPickerOption>
+        ),
+        selectedItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image selected"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div className="title selected">Example custom element one</div>
+          </CustomPickerOption>
+        ),
+      },
+    },
+    {
+      key: 'two',
+      name: 'Example custom element two',
+      customElement: {
+        listItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div>
+              <div className="title">Example custom element two</div>
+              <div className="description">Example custom element</div>
+            </div>
+          </CustomPickerOption>
+        ),
+        selectedItemBody: (
+          <CustomPickerOption>
+            <img
+              className="image selected"
+              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+            />
+            <div className="title selected">Example custom element two</div>
+          </CustomPickerOption>
+        ),
+      },
+    },
+  ],
+};

packages/react-components/src/components/Picker/PickerList.module.scss

@@ -27,13 +27,15 @@ $base-class: 'picker-list';
   }
 
   &__item {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border: 1px solid transparent;
     cursor: pointer;
     padding: 6px 11px;
     height: 36px;
+    overflow: hidden;
 
     &:hover {
       background-color: var(--surface-basic-hover);
@@ -68,5 +70,10 @@ $base-class: 'picker-list';
       font-size: 12px;
       font-weight: 600;
     }
+
+    &__custom {
+      width: 100%;
+      height: auto;
+    }
   }
 }

packages/react-components/src/components/Picker/PickerList.spec.tsx

@@ -103,4 +103,32 @@ describe('<PickerList> component', () => {
 
     expect(getByText('Select all')).toBeVisible();
   });
+
+  it('should display custom components as options', () => {
+    const { getByText } = renderComponent({
+      ...defaultProps,
+      isOpen: true,
+      items: [
+        {
+          key: 'custom-one',
+          name: 'Custom one',
+          customElement: {
+            listItemBody: <div>List custom one</div>,
+            selectedItemBody: <div>Selected custom one</div>,
+          },
+        },
+        {
+          key: 'custom-two',
+          name: 'Custom two',
+          customElement: {
+            listItemBody: <div>List custom two</div>,
+            selectedItemBody: <div>Selected custom two</div>,
+          },
+        },
+      ],
+    });
+
+    expect(getByText('List custom one')).toBeVisible();
+    expect(getByText('List custom two')).toBeVisible();
+  });
 });

packages/react-components/src/components/Picker/PickerList.tsx

@@ -12,6 +12,10 @@ const itemClassName = `${baseClass}__item`;
 export interface IPickerListItem {
   key: string;
   name: string;
+  customElement?: {
+    listItemBody: React.ReactElement;
+    selectedItemBody: React.ReactElement;
+  };
   groupHeader?: boolean;
   disabled?: boolean;
 }
@@ -182,6 +186,18 @@ export const PickerList: React.FC<IPickerListProps> = ({
     );
   };
 
+  const getOptionContent = (item: IPickerListItem) => {
+    if (item?.customElement) {
+      return (
+        <div className={styles[`${itemClassName}__custom`]}>
+          {item.customElement.listItemBody}
+        </div>
+      );
+    }
+
+    return item.name;
+  };
+
   if (!isOpen) {
     return null;
   }
@@ -219,10 +235,12 @@ export const PickerList: React.FC<IPickerListProps> = ({
             aria-disabled={item.disabled}
             id={item.key}
             key={item.key}
-            className={styles[itemClassName]}
+            className={cx(styles[itemClassName], {
+              [styles[`${itemClassName}__custom`]]: item?.customElement,
+            })}
             onClick={() => !item.disabled && handleOnClick(item)}
           >
-            {item.name}
+            {getOptionContent(item)}
             {isItemSelected(item.key) && <Icon kind="link" source={Check} />}
           </li>
         );

packages/react-components/src/components/Picker/Trigger.tsx

@@ -87,14 +87,7 @@ export const Trigger: React.FC<ITriggerProps> = ({
       onClick={handleTriggerClick}
       tabIndex={0}
     >
-      <div
-        className={cx(
-          styles[`${baseClass}__content`],
-          isMultiSelect && styles[`${baseClass}__content--multi-select`]
-        )}
-      >
-        {children}
-      </div>
+      <div className={styles[`${baseClass}__content`]}>{children}</div>
       <div
         className={cx(
           styles[`${baseClass}__controls`],

packages/react-components/src/components/Picker/TriggerBody.spec.tsx

@@ -102,4 +102,50 @@ describe('<TriggerBody> component', () => {
       name: 'Option three',
     });
   });
+
+  it('should show custom component as selected item in single mode', () => {
+    const { queryByText } = renderComponent({
+      ...defaultProps,
+      items: [
+        {
+          key: 'custom-one',
+          name: 'Custom one',
+          customElement: {
+            listItemBody: <div>List custom one</div>,
+            selectedItemBody: <div>Selected custom one</div>,
+          },
+        },
+      ],
+    });
+
+    expect(queryByText('Selected custom one')).toBeVisible();
+  });
+
+  it('should show custom components as selected items in multiselect mode', () => {
+    const { queryByText } = renderComponent({
+      ...defaultProps,
+      type: 'multi',
+      items: [
+        {
+          key: 'custom-one',
+          name: 'Custom one',
+          customElement: {
+            listItemBody: <div>List custom one</div>,
+            selectedItemBody: <div>Selected custom one</div>,
+          },
+        },
+        {
+          key: 'custom-two',
+          name: 'Custom two',
+          customElement: {
+            listItemBody: <div>List custom two</div>,
+            selectedItemBody: <div>Selected custom two</div>,
+          },
+        },
+      ],
+    });
+
+    expect(queryByText('Selected custom one')).toBeVisible();
+    expect(queryByText('Selected custom two')).toBeVisible();
+  });
 });

packages/react-components/src/components/Picker/TriggerBody.tsx

@@ -29,12 +29,20 @@ export const TriggerBody: React.FC<ITriggerBodyProps> = ({
 }) => {
   const shouldDisplaySearch = isOpen && !isSearchDisabled;
 
-  const getSingleItem = (name: string) => {
-    if (isOpen && !isSearchDisabled) {
+  const getSingleItem = (item: IPickerListItem) => {
+    if (type === 'single' && isOpen && !isSearchDisabled) {
       return null;
     }
 
-    return name;
+    if (item?.customElement) {
+      return (
+        <div className={styles[`${baseClass}__custom`]}>
+          {item.customElement.selectedItemBody}
+        </div>
+      );
+    }
+
+    return item.name;
   };
 
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -57,7 +65,7 @@ export const TriggerBody: React.FC<ITriggerBodyProps> = ({
   return (
     <div className={styles[baseClass]}>
       {type === 'single'
-        ? getSingleItem(items[0].name)
+        ? getSingleItem(items[0])
         : items.map((item) => {
             return (
               <Tag
@@ -66,7 +74,7 @@ export const TriggerBody: React.FC<ITriggerBodyProps> = ({
                 dismissible
                 onRemove={() => onItemRemove(item)}
               >
-                {item.name}
+                {getSingleItem(item)}
               </Tag>
             );
           })}