WB-1645: Allow custom option item elements (#2139)

## Summary:

1. Allow custom `OptionItem` components by using `DetailCell` internally.

- Removed `ClickableBehavior` from `OptionItem` and replaced it with
  `DetailCell` (which internally uses `Clickable`).
- Added stories and included docs for `OptionItem`.

2. Modified Cell to support a new prop required for the `Optionitem` changes:
- `aria-selected` is used to allow the `OptionItem` to be selectable (via aria attributes).


Issue: WB-1645

## Test plan:

### SingleSelect:

1. Navigate to http://localhost:6061/?path=/docs/dropdown-singleselect--docs#custom-option-items
2. Verify that the custom option items are rendered as expected.
3. Verify that the custom option items are clickable and that clicking on them
   selects them.

https://github.com/Khan/wonder-blocks/assets/843075/6d171969-cc1e-4922-bbcf-16e23cb8e4d4

### MultiSelect:

1. Navigate to http://localhost:6061/?path=/docs/dropdown-multiselect--docs#custom-option-items
2. Verify that the custom option items are rendered as expected.
3. Verify that the custom option items are clickable and that clicking on them
   selects them.

https://github.com/Khan/wonder-blocks/assets/843075/e60716a7-533c-45c4-b239-c282de7dbaf9

### OptionItem docs:

1. Navigate to http://localhost:6061/?path=/docs/dropdown-optionitem--docs
2. Verify that the documentation for `OptionItem` is correct and up to date.
<img width="1014" alt="Screenshot 2023-12-13 at 12 07 11 PM" src="https://github.com/Khan/wonder-blocks/assets/843075/21ae9f3e-08af-4bca-83ff-e687db4859c0">

Author: jandrade

Reviewers: jandrade, jeresig

Required Reviewers:

Approved By: jeresig

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ codecov/project, ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Lint (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ⏭  dependabot, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald

Pull Request URL: #2139

.changeset/fuzzy-roses-crash.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-cell": minor
+---
+
+Add `aria-selected` support to Cell so it can be used in dropdown options

.changeset/smooth-icons-whisper.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": major
+---
+
+Allow custom OptionItem elements (internally using cell components)

__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx

@@ -209,6 +209,19 @@ export default {
             },
         },
     },
+    ariaSelected: {
+        name: "aria-selected",
+        control: {
+            type: "string",
+        },
+        description: " Used to indicate the current element is selected",
+        table: {
+            category: "Accessibility",
+            type: {
+                summary: "string",
+            },
+        },
+    },
     role: {
         description:
             "The role of the Cell component, can be a role of type `ClickableRole`",

__docs__/wonder-blocks-dropdown/multi-select.stories.tsx

@@ -11,12 +11,14 @@ import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import Pill from "@khanacademy/wonder-blocks-pill";
 import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 import multiSelectArgtypes from "./multi-select.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";
+import {allProfilesWithPictures} from "./option-item-examples";
 
 type StoryComponentType = StoryObj<typeof MultiSelect>;
 
@@ -565,3 +567,63 @@ export const CustomLabels: StoryComponentType = {
         );
     },
 };
+
+/**
+ * Custom option items
+ */
+
+/**
+ * This example illustrates how you can use the `OptionItem` component to
+ * display a list with custom option items. Note that in this example, we are
+ * using `leftAccessory` to display a custom icon for each option item,
+ * `subtitle1` to optionally display a pill and `subtitle2` to display the
+ * email.
+ *
+ * **Note:** As these are custom option items, we strongly recommend to pass the
+ * `labelAsText` prop to display a summarized label in the menu.
+ */
+export const CustomOptionItems: StoryComponentType = {
+    render: function Render() {
+        const [opened, setOpened] = React.useState(true);
+        const [selectedValues, setSelectedValues] = React.useState<
+            Array<string>
+        >([]);
+
+        const handleChange = (selectedValues: Array<string>) => {
+            setSelectedValues(selectedValues);
+        };
+
+        const handleToggle = (opened: boolean) => {
+            setOpened(opened);
+        };
+
+        return (
+            <MultiSelect
+                onChange={handleChange}
+                selectedValues={selectedValues}
+                onToggle={handleToggle}
+                opened={opened}
+            >
+                {allProfilesWithPictures.map((user, index) => (
+                    <OptionItem
+                        key={user.id}
+                        value={user.id}
+                        label={user.name}
+                        leftAccessory={user.picture}
+                        subtitle1={
+                            index === 1 ? (
+                                <Pill kind="accent">New</Pill>
+                            ) : undefined
+                        }
+                        subtitle2={user.email}
+                    />
+                ))}
+            </MultiSelect>
+        );
+    },
+    decorators: [
+        (Story): React.ReactElement<React.ComponentProps<typeof View>> => (
+            <View style={styles.wrapper}>{Story()}</View>
+        ),
+    ],
+};