Add "creatable" demos

Author: bendera

packages/demo/src/main.tsx

@@ -5,6 +5,7 @@ import "./index.css";
 import Root from "./routes/Root.tsx";
 import BadgePage from "./routes/BadgePage.tsx";
 import CheckboxPage from "./routes/CheckboxPage.tsx";
+import MultiSelectPage from "./routes/MultiSelectPage.tsx";
 import RadioPage from "./routes/RadioPage.tsx";
 import SingleSelectPage from "./routes/SingleSelectPage.tsx";
 import SplitLayoutPage from "./routes/SplitLayout.tsx";
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
         path: "/checkbox",
         element: <CheckboxPage />,
       },
+      {
+        path: "/multi-select",
+        element: <MultiSelectPage />,
+      },
       {
         path: "/radio",
         element: <RadioPage />,

packages/demo/src/routes/MultiSelectPage.tsx

@@ -0,0 +1,59 @@
+import {
+  VscodeOption,
+  VscodeMultiSelect,
+} from "@vscode-elements/react-elements";
+
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
+export default function MultiSelectPage() {
+  return (
+    <div>
+      <h1>Multi Select</h1>
+      <h2>Listen "change" and "click" events</h2>
+      <p>
+        <VscodeMultiSelect
+          onChange={logEvents}
+          onClick={logEvents}
+        >
+          <VscodeOption>Lorem</VscodeOption>
+          <VscodeOption>Ipsum</VscodeOption>
+          <VscodeOption>Dolor</VscodeOption>
+        </VscodeMultiSelect>
+      </p>
+      <h2>Listen "invalid" event</h2>
+      <form action="#">
+        <p>
+          <VscodeMultiSelect
+            onInvalid={logEvents}
+            required
+            name="select-2"
+          >
+            <VscodeOption></VscodeOption>
+            <VscodeOption>Lorem</VscodeOption>
+            <VscodeOption>Ipsum</VscodeOption>
+            <VscodeOption>Dolor</VscodeOption>
+          </VscodeMultiSelect>
+        </p>
+        <button>Submit</button>
+      </form>
+      <h2>Creatable</h2>
+      <form action="#">
+        <p>
+          <VscodeMultiSelect
+            onVscMultiSelectCreateOption={logEvents}
+            name="select-3"
+            combobox
+            creatable
+          >
+            <VscodeOption>Lorem</VscodeOption>
+            <VscodeOption>Ipsum</VscodeOption>
+            <VscodeOption>Dolor</VscodeOption>
+          </VscodeMultiSelect>
+        </p>
+        <button>Submit</button>
+      </form>
+    </div>
+  );
+}

packages/demo/src/routes/Root.tsx

@@ -8,6 +8,7 @@ export default function Root() {
         <ul>
           <li><a href="/badge">Badge</a></li>
           <li><a href="/checkbox">Checkbox</a></li>
+          <li><a href="/multi-select">Multi Select</a></li>
           <li><a href="/radio">Radio</a></li>
           <li><a href="/single-select">Single Select</a></li>
           <li><a href="/split-layout">Split Layout</a></li>

packages/demo/src/routes/SingleSelectPage.tsx

@@ -38,6 +38,22 @@ export default function SingleSelectPage() {
         </p>
         <button>Submit</button>
       </form>
+      <h2>Creatable</h2>
+      <form action="#">
+        <p>
+          <VscodeSingleSelect
+            onVscSingleSelectCreateOption={logEvents}
+            name="select-3"
+            combobox
+            creatable
+          >
+            <VscodeOption>Lorem</VscodeOption>
+            <VscodeOption>Ipsum</VscodeOption>
+            <VscodeOption>Dolor</VscodeOption>
+          </VscodeSingleSelect>
+        </p>
+        <button>Submit</button>
+      </form>
     </div>
   );
 }