feat(docs): add TS examples for single & multiple selection (#3682)

Author: wingkwong

apps/docs/content/components/dropdown/multiple-selection.ts

@@ -37,8 +37,49 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+import type { Selection } from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
+    [selectedKeys]
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button 
+          variant="bordered" 
+          className="capitalize"
+        >
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu 
+        aria-label="Multiple selection example"
+        variant="flat"
+        closeOnSelect={false}
+        disallowEmptySelection
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {

apps/docs/content/components/dropdown/single-selection.ts

@@ -36,8 +36,48 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+import type { Selection } from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
+    [selectedKeys]
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button 
+          variant="bordered" 
+          className="capitalize"
+        >
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu 
+        aria-label="Single selection example"
+        variant="flat"
+        disallowEmptySelection
+        selectionMode="single"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {

apps/docs/content/docs/components/dropdown.mdx

@@ -97,7 +97,6 @@ You can set the `selectionMode` property as `single` to allow the user to select
 
 <CodeDemo
   title="Single Selection"
-  highlightedLines="26-28"
   files={dropdownContent.singleSelection}
 />
 
@@ -107,7 +106,6 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele
 
 <CodeDemo
   title="Multiple Selection"
-  highlightedLines="26-28"
   files={dropdownContent.multipleSelection}
 />