Add delimiter example to ComboBox

Author: joshwooding

site/docs/components/combo-box/examples.mdx

@@ -191,3 +191,9 @@ This functionality allows users to input information that might not be covered b
 Use `OverlayProps` to pass props to the overlay that is rendered when the combo box is open. For example, you can set a maximum height for the overlay.
 
 <LivePreview componentName="combo-box" exampleName="OverlayProps" />
+
+## Delimiter character
+
+In some cases, you may want to enable users to select multiple options by typing a delimiter character. This can be by using a controlled `ComboBox` and the `onPaste` event handler.
+
+<LivePreview componentName="combo-box" exampleName="Delimiter" />

site/src/examples/combo-box/Delimiter.tsx

@@ -0,0 +1,84 @@
+import { Card, ComboBox, Option, StackLayout } from "@salt-ds/core";
+import {
+  type ChangeEvent,
+  type ReactElement,
+  type SyntheticEvent,
+  useState,
+} from "react";
+
+const people = Array.from({ length: 50 }, (_, i) => ({
+  name: `Person ${i + 1}`,
+  email: `person${i + 1}@example.com`,
+}));
+
+export const Delimiter = (): ReactElement => {
+  const [value, setValue] = useState("");
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+
+    if (value.includes(";")) {
+      const newItems = value.split(";").filter(Boolean);
+      setSelectedValues((old) => old.concat(newItems));
+      setValue("");
+      return;
+    }
+
+    setValue(value);
+  };
+
+  const handleSelectionChange = (
+    event: SyntheticEvent,
+    newSelected: string[],
+  ) => {
+    const removed = selectedValues.filter((v) => !newSelected.includes(v));
+    setSelectedValues(newSelected);
+
+    if ("key" in event && event.key === "Backspace") {
+      setValue(removed[0]);
+    } else {
+      setValue("");
+    }
+  };
+
+  return (
+    <StackLayout>
+      <Card>
+        Example text to copy:
+        <br />
+        <br />
+        [email protected];[email protected];[email protected]
+      </Card>
+      <ComboBox
+        multiselect
+        onChange={handleChange}
+        onSelectionChange={handleSelectionChange}
+        selected={selectedValues}
+        value={value}
+        style={{ width: "266px" }}
+        onPaste={(event) => {
+          event?.preventDefault();
+          // This can be changed to support different delimiters
+          const newItems = event.clipboardData
+            .getData("Text")
+            .trim()
+            .split(";");
+          setSelectedValues((old) => old.concat(newItems));
+        }}
+      >
+        {people
+          .filter(
+            (person) =>
+              person.name.toLowerCase().includes(value.trim().toLowerCase()) ||
+              person.email.toLowerCase().includes(value.trim().toLowerCase()),
+          )
+          .map((person) => (
+            <Option value={person.email} key={person.email}>
+              {person.name} ({person.email})
+            </Option>
+          ))}
+      </ComboBox>
+    </StackLayout>
+  );
+};

site/src/examples/combo-box/index.ts

@@ -3,6 +3,7 @@ export * from "./ClearSelection";
 export * from "./ComplexOptions";
 export * from "./CustomFiltering";
 export * from "./Default";
+export * from "./Delimiter";
 export * from "./Disabled";
 export * from "./DisabledOption";
 export * from "./EmptyMessage";