feat: Arbitrary content for select + multiselect

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

@@ -0,0 +1,81 @@
+// 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 Box from '~components/box';
+import CheckboxIcon from '~components/internal/components/checkbox-icon';
+import { SelectProps } from '~components/select';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { i18nStrings } from './constants';
+const lotsOfOptions: SelectProps.Options = [...Array(100)].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: true,
+    disabledReason: 'disabled reason',
+    tags: ['Cool', 'Intelligent', 'Cat'],
+  },
+  {
+    label: 'Option group',
+    options: [
+      { value: 'forth', label: 'Nested option' },
+      { value: 'forth0', label: 'Nested option' },
+    ],
+    disabledReason: 'disabled reason',
+  },
+  {
+    label: 'Option group',
+    options: [{ value: 'forth2', label: 'Nested option' }],
+    disabledReason: 'disabled reason',
+  },
+  { label: 'Last option', disabled: true, disabledReason: 'disabled reason' },
+  ...lotsOfOptions,
+];
+
+export default function SelectPage() {
+  const [selectedOptions, setSelectedOptions] = React.useState<MultiselectProps.Options>([]);
+  const renderOptionItem: MultiselectProps.MultiselectOptionItemRenderer = ({ item }) => {
+    if (item.type === 'child') {
+      return <div>{item.option.label}</div>;
+    } else {
+      return (
+        <div>
+          <CheckboxIcon checked={item.selected} indeterminate={item.indeterminate}></CheckboxIcon>
+          {item.option.label}
+        </div>
+      );
+    }
+  };
+
+  return (
+    <ScreenshotArea>
+      <Box variant="h1">Select with custom item renderer</Box>
+      <Box padding="l">
+        <div style={{ width: '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>
+      </Box>
+    </ScreenshotArea>
+  );
+}

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

@@ -0,0 +1,71 @@
+// 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 Box from '~components/box';
+import Select, { SelectProps } from '~components/select';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const extraOptions = [...Array(10).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',
+  },
+  {
+    label: 'Option group',
+    options: [{ value: 'forth2', label: 'Nested option' }],
+    disabledReason: 'disabled reason',
+  },
+  ...extraOptions,
+  { label: 'Last option', disabled: true, disabledReason: 'disabled reason' },
+];
+
+export default function SelectPage() {
+  const [selectedOption, setSelectedOption] = useState<SelectProps.Option | null>(null);
+  const renderOptionItem: SelectProps.SelectOptionItemRenderer = ({ item, filterText }) => {
+    return (
+      <div>
+        {item.option.label} + {filterText}
+      </div>
+    );
+  };
+
+  return (
+    <ScreenshotArea>
+      <Box variant="h1">Select with custom item renderer</Box>
+      <Box padding="l">
+        <div style={{ width: '400px' }}>
+          <Select
+            renderOption={renderOptionItem}
+            placeholder="Choose option"
+            selectedOption={selectedOption}
+            onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+            options={options}
+          />
+        </div>
+      </Box>
+    </ScreenshotArea>
+  );
+}

pages/selectable-item/common.tsx

@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Option from '~components/internal/components/option';
+import { SelectableItemProps } from '~components/internal/components/selectable-item';
+
+import { ComponentPermutations } from '../utils/permutations';
+
+const simpleOption = <Option option={{ value: 'option 1', label: 'Label 1' }} />;
+const iconOption = <Option option={{ value: 'option 1', label: 'Label 1', iconName: 'lock-private' }} />;
+const bigOption = (
+  <Option option={{ value: 'option 2', label: 'Label 2', iconName: 'share', tags: ['tag 1', 'tag 2', 'tag 3'] }} />
+);
+const optionHasBackground = <Option option={{ value: 'has background' }} />;
+const optionGroupHeader = 'group header';
+const childOption = 'child option';
+
+export const permutationsConfigs: ComponentPermutations<SelectableItemProps>[] = [
+  {
+    selected: [false],
+    highlighted: [false, true],
+    disabled: [false, true],
+    children: [simpleOption],
+  },
+  {
+    selected: [false, true],
+    highlighted: [false],
+    disabled: [false, true],
+    children: [iconOption],
+  },
+  {
+    selected: [false, true],
+    highlighted: [false],
+    disabled: [false, true],
+    children: [bigOption],
+  },
+  {
+    selected: [false, true],
+    highlighted: [true],
+    highlightType: ['keyboard'],
+    disabled: [false],
+    children: [bigOption],
+  },
+  {
+    selected: [false],
+    highlighted: [false, true],
+    disabled: [false],
+    hasBackground: [true],
+    children: [optionHasBackground],
+  },
+  {
+    selected: [false],
+    highlighted: [false],
+    disabled: [true, false],
+    isParent: [true],
+    children: [optionGroupHeader],
+  },
+  {
+    selected: [false, true],
+    highlighted: [false, true],
+    isChild: [true],
+    children: [childOption],
+  },
+];

pages/selectable-item/disable-content-styling.permutations.page.tsx

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import SelectableItem, { SelectableItemProps } from '~components/internal/components/selectable-item';
+import SpaceBetween from '~components/space-between';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import { permutationsConfigs } from './common';
+
+// Copy permutations and add selectable-items with no-content-styling.
+const permutations = createPermutations<SelectableItemProps>(permutationsConfigs);
+
+export default function InputPermutations() {
+  return (
+    <>
+      <h1>Selectable item permutations</h1>
+      <ScreenshotArea>
+        <SpaceBetween size="xs">
+          <ul role="listbox" aria-label="list">
+            <PermutationsView
+              permutations={permutations}
+              render={permutation => <SelectableItem {...permutation} disableContentStyling={true} />}
+            />
+          </ul>
+        </SpaceBetween>
+      </ScreenshotArea>
+    </>
+  );
+}

pages/selectable-item/permutations.page.tsx

@@ -2,71 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import Option from '~components/internal/components/option';
 import SelectableItem, { SelectableItemProps } from '~components/internal/components/selectable-item';
 import SpaceBetween from '~components/space-between';
 
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
+import { permutationsConfigs } from './common';
 
-const simpleOption = <Option option={{ value: 'option 1', label: 'Label 1' }} />;
-const iconOption = <Option option={{ value: 'option 1', label: 'Label 1', iconName: 'lock-private' }} />;
-const bigOption = (
-  <Option option={{ value: 'option 2', label: 'Label 2', iconName: 'share', tags: ['tag 1', 'tag 2', 'tag 3'] }} />
-);
-
-const optionHasBackground = <Option option={{ value: 'has background' }} />;
-const optionGroupHeader = 'group header';
-const childOption = 'child option';
-
-const permutations = createPermutations<SelectableItemProps>([
-  {
-    selected: [false],
-    highlighted: [false, true],
-    disabled: [false, true],
-    children: [simpleOption],
-  },
-  {
-    selected: [false, true],
-    highlighted: [false],
-    disabled: [false, true],
-    children: [iconOption],
-  },
-  {
-    selected: [false, true],
-    highlighted: [false],
-    disabled: [false, true],
-    children: [bigOption],
-  },
-  {
-    selected: [false, true],
-    highlighted: [true],
-    highlightType: ['keyboard'],
-    disabled: [false],
-    children: [bigOption],
-  },
-  {
-    selected: [false],
-    highlighted: [false, true],
-    disabled: [false],
-    hasBackground: [true],
-    children: [optionHasBackground],
-  },
-  {
-    selected: [false],
-    highlighted: [false],
-    disabled: [true, false],
-    isParent: [true],
-    children: [optionGroupHeader],
-  },
-  {
-    selected: [false, true],
-    highlighted: [false, true],
-    isChild: [true],
-    children: [childOption],
-  },
-]);
+const permutations = createPermutations<SelectableItemProps>(permutationsConfigs);
 
 export default function InputPermutations() {
   return (