feat: Arbitrary content for select + multiselect

pages/dropdown/list-with-sticky-item.page.tsx

@@ -90,7 +90,7 @@ export default function MultiselectPage() {
             >
               <ListComponent
                 menuProps={{ statusType: 'finished', ref, open }}
-                getOptionProps={(option, index) => ({ option: { ...option }, key: index, open })}
+                getOptionProps={(option, index) => ({ option: { ...option }, key: index, index: index, open })}
                 filteredOptions={options}
                 filteringValue={''}
                 firstOptionSticky={true}

pages/multiselect/custom-render-option.page.tsx

@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+
+import { Multiselect, MultiselectProps } from '~components';
+import { SelectProps } from '~components/select';
+
+import { SimplePage } from '../app/templates';
+import { i18nStrings } from './constants';
+const lotsOfOptions: SelectProps.Options = [...Array(50)].map((_, index) => ({
+  value: `Option ${index}`,
+  label: `Option ${index}`,
+}));
+const options: SelectProps.Options = [
+  { value: 'first', label: 'Simple' },
+  { value: 'second', label: 'With small icon', iconName: 'folder' },
+  {
+    value: 'third',
+    label: 'With big icon icon',
+    description: 'Very big option',
+    iconName: 'heart',
+    disabled: false,
+    disabledReason: 'disabled reason',
+    tags: ['Cool', 'Intelligent', 'Cat'],
+  },
+  {
+    label: 'Option group',
+    options: [{ value: 'forth', label: 'Nested option' }],
+    disabledReason: 'disabled reason',
+  },
+  ...lotsOfOptions,
+  { label: 'Last option', disabled: false, disabledReason: 'disabled reason' },
+];
+
+export default function SelectPage() {
+  const [selectedOptions, setSelectedOptions] = React.useState<MultiselectProps.Options>([]);
+  const renderOptionItem: MultiselectProps.MultiselectOptionItemRenderer = ({ item }) => {
+    if (item.type === 'select-all') {
+      return <div>Select all? {item.selected ? 'Yes' : 'No'}</div>;
+    } else if (item.type === 'group') {
+      return <div>Group: {item.option.label}</div>;
+    } else if (item.type === 'item') {
+      return <div>Item: {item.option.label}</div>;
+    }
+
+    return null;
+  };
+
+  return (
+    <SimplePage title="Multiselect with custom item renderer" screenshotArea={{}}>
+      <div style={{ inlineSize: '400px' }}>
+        <Multiselect
+          enableSelectAll={true}
+          i18nStrings={{ ...i18nStrings, selectAllText: 'Select all' }}
+          filteringType={'auto'}
+          renderOption={renderOptionItem}
+          placeholder="Choose option"
+          selectedOptions={selectedOptions}
+          onChange={event => {
+            setSelectedOptions(event.detail.selectedOptions);
+          }}
+          options={options}
+        />
+      </div>
+    </SimplePage>
+  );
+}

pages/select/custom-render-option.page.tsx

@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { useState } from 'react';
+
+import Select, { SelectProps } from '~components/select';
+
+import { SimplePage } from '../app/templates';
+
+const lotsOfOptions = [...Array(50).keys()].map(n => {
+  const numberToDisplay = (n + 5).toString();
+  return {
+    value: numberToDisplay,
+    label: `Option ${n + 5}`,
+  };
+});
+
+const options: SelectProps.Options = [
+  { value: 'first', label: 'Simple' },
+  { value: 'second', label: 'With small icon', iconName: 'folder' },
+  {
+    value: 'third',
+    label: 'With big icon icon',
+    description: 'Very big option',
+    iconName: 'heart',
+    disabled: true,
+    disabledReason: 'disabled reason',
+    tags: ['Cool', 'Intelligent', 'Cat'],
+  },
+  {
+    label: 'Option group',
+    options: [{ value: 'forth', label: 'Nested option' }],
+    disabledReason: 'disabled reason',
+  },
+  ...lotsOfOptions,
+  { label: 'Last option', disabled: true, disabledReason: 'disabled reason' },
+];
+
+export default function SelectPage() {
+  const [selectedOption, setSelectedOption] = useState<SelectProps.Option | null>(null);
+  const renderOption: SelectProps.SelectOptionItemRenderer = ({ item }) => {
+    if (item.type === 'trigger') {
+      return <div>Trigger: {item.option.label}</div>;
+    } else if (item.type === 'group') {
+      return <div>Group: {item.option.label}</div>;
+    } else if (item.type === 'item') {
+      return <div>Item: {item.option.label}</div>;
+    }
+    return null;
+  };
+
+  return (
+    <SimplePage title="Select with custom item renderer" screenshotArea={{}}>
+      <div style={{ inlineSize: '400px' }}>
+        <Select
+          filteringType="auto"
+          renderOption={renderOption}
+          placeholder="Choose option"
+          selectedOption={selectedOption}
+          onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+          options={options}
+          triggerVariant="option"
+        />
+      </div>
+    </SimplePage>
+  );
+}

pages/select/item.permutations.page.tsx

@@ -89,7 +89,7 @@ const options: Record<string, DropdownOption> = {
   },
 };
 
-const permutations = createPermutations<ItemProps>([
+const permutations = createPermutations<Omit<ItemProps, 'index'>>([
   {
     option: [options.simpleOption],
     highlighted: [false, true],
@@ -150,7 +150,10 @@ export default function InputPermutations() {
       <h1>Select item permutations</h1>
       <ScreenshotArea>
         <ul role="listbox" aria-label="list">
-          <PermutationsView permutations={permutations} render={permutation => <Item {...permutation} />} />
+          <PermutationsView
+            permutations={permutations}
+            render={(permutation, index) => <Item index={index ?? -1} {...permutation} />}
+          />
         </ul>
       </ScreenshotArea>
     </>

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Components definition for alert matches the snapshot: alert 1`] = `
 {
@@ -17791,6 +17791,26 @@ For more information, see the
       "optional": true,
       "type": "SelectProps.ContainingOptionAndGroupString",
     },
+    {
+      "description": "Specifies a render function to render custom options in the dropdown menu.",
+      "inlineType": {
+        "name": "MultiselectProps.MultiselectOptionItemRenderer",
+        "parameters": [
+          {
+            "name": "props",
+            "type": "{ item: MultiselectProps.MultiselectItem; filterText?: string | undefined; }",
+          },
+        ],
+        "returnType": "React.ReactNode",
+        "type": "function",
+      },
+      "name": "renderOption",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "MultiselectProps.MultiselectOptionItemRenderer",
+    },
     {
       "description": "Specifies the localized string that describes an option as being selected.
 This is required to provide a good screen reader experience. For more information, see the
@@ -23336,6 +23356,26 @@ For more information, see the
       "optional": true,
       "type": "SelectProps.ContainingOptionAndGroupString",
     },
+    {
+      "description": "Specifies a render function to render custom options in the dropdown menu or trigger.",
+      "inlineType": {
+        "name": "SelectProps.SelectOptionItemRenderer",
+        "parameters": [
+          {
+            "name": "props",
+            "type": "{ item: SelectProps.SelectItem; filterText?: string | undefined; }",
+          },
+        ],
+        "returnType": "React.ReactNode",
+        "type": "function",
+      },
+      "name": "renderOption",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "SelectProps.SelectOptionItemRenderer",
+    },
     {
       "description": "Specifies the localized string that describes an option as being selected.
 This is required to provide a good screen reader experience. For more information, see the
@@ -32389,6 +32429,7 @@ Options get highlighted when they match the value of the input field.",
           },
         },
         {
+          "description": "Finds the label wrapper of this option.",
           "name": "findLabel",
           "parameters": [],
           "returnType": {
@@ -43409,6 +43450,7 @@ Options get highlighted when they match the value of the input field.",
           },
         },
         {
+          "description": "Finds the label wrapper of this option.",
           "name": "findLabel",
           "parameters": [],
           "returnType": {

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -366,6 +366,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_chart-filter_1px7g",
     "awsui_content_x6dl3",
     "awsui_control_1wepg",
+    "awsui_custom-content_1p2cx",
     "awsui_description_1p2cx",
     "awsui_description_1wepg",
     "awsui_direction-button-block-end_8k1rt",

src/internal/components/button-trigger/index.tsx

@@ -37,6 +37,7 @@ export interface ButtonTriggerProps extends BaseComponentProps {
   onClick?: CancelableEventHandler;
   onFocus?: CancelableEventHandler;
   onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;
+  hasCustomContent?: boolean;
   autoFocus?: boolean;
 }
 
@@ -62,6 +63,7 @@ const ButtonTrigger = (
     onClick,
     onFocus,
     onBlur,
+    hasCustomContent = false,
     autoFocus,
     ...restProps
   }: ButtonTriggerProps,
@@ -83,7 +85,8 @@ const ButtonTrigger = (
       readOnly && styles.readonly,
       inFilteringToken && styles['in-filtering-token'],
       inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],
-      inlineTokens && styles['inline-tokens']
+      inlineTokens && styles['inline-tokens'],
+      !!hasCustomContent && styles['custom-option']
     ),
     disabled: disabled,
     'aria-expanded': pressed,

src/internal/components/button-trigger/styles.scss

@@ -133,6 +133,13 @@ $padding-block-inner-filtering-token: 0px;
     }
   }
 
+  &.custom-option {
+    // Remove default paddings for custom options
+    padding-block: 0;
+    padding-inline-start: 0;
+    overflow: clip;
+  }
+
   &.inline-tokens {
     // Remove default paddings and just rely on center alignment of the content
     padding-block: 0;

src/internal/components/option/__tests__/option.test.tsx

@@ -43,6 +43,17 @@ describe('Option component', () => {
     value: 'optionABC',
     label: 'ABC',
   };
+  test('displays custom content', () => {
+    const optionWrapper = renderOption({
+      customContent: <div>My Custom Content</div>,
+      option: {
+        ...baseOption,
+      },
+    });
+    expect(optionWrapper.findLabel()!.getElement()).toHaveTextContent('My Custom Content');
+    expect(optionWrapper!.getElement()).toHaveTextContent('My Custom Content');
+  });
+
   test('displays label', () => {
     const optionWrapper = renderOption({
       option: baseOption,

src/internal/components/option/index.tsx

@@ -35,11 +35,20 @@ const Option = ({
   labelContainerRef,
   labelRef,
   labelId,
+  customContent,
   ...restProps
 }: OptionProps) => {
   if (!option) {
     return null;
   }
+  if (customContent) {
+    return (
+      <div data-value={option.value} className={clsx(styles.option)}>
+        <div className={clsx(styles['custom-content'])}>{customContent}</div>
+      </div>
+    );
+  }
+
   const { disabled } = option;
   const baseProps = getBaseProps(restProps);
   const SpanOrDivTag = option.labelContent ? 'div' : 'span';
@@ -55,7 +64,6 @@ const Option = ({
       validateStringValue(tag, `filteringTags[${index}]`);
     });
   }
-
   const className = clsx(
     styles.option,
     disabled && styles.disabled,

src/internal/components/option/interfaces.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { IconProps } from '../../../icon/interfaces';
 import { BaseComponentProps } from '../../base-component';
@@ -54,4 +54,5 @@ export interface OptionProps extends BaseComponentProps {
   labelContainerRef?: React.RefObject<HTMLSpanElement>;
   labelRef?: React.RefObject<HTMLSpanElement>;
   labelId?: string;
+  customContent?: ReactNode;
 }

src/internal/components/option/styles.scss

@@ -120,3 +120,7 @@
 .trigger-variant {
   @include styles.text-overflow-ellipsis;
 }
+
+.custom-content {
+  inline-size: 100%;
+}

src/internal/components/selectable-item/styles.scss

@@ -92,6 +92,7 @@
       }
     }
   }
+
   &.highlighted {
     z-index: 3;
     background-color: awsui.$color-background-dropdown-item-hover;