From 2a4d693dabf3bf532e49604fdb22abba32d07f31 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Tue, 11 Feb 2025 16:27:40 +0900
Subject: [PATCH 1/2] chore(docs): add note itemHeight for virtualization

---
 .../content/docs/components/autocomplete.mdx  |   2 +
 apps/docs/content/docs/components/listbox.mdx |   2 +-
 apps/docs/content/docs/components/select.mdx  | 137 +++++++++---------
 3 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index d98fd71bcd..039ea50dc1 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -337,6 +337,8 @@ The `maxListboxHeight` prop is used to set the maximum height of the listbox. Th
 
 The `itemHeight` prop is used to set the height of each item in the listbox. This is required when using virtualization. By default, it's set to `32`.
 
+> **Note**: If the height of the list items differs from the default due to `startContent` or other custom content, be sure to pass the correct value to `itemHeight` to prevent layout issues.
+
 <CodeDemo title="Custom Item Height" files={autocompleteContent.virtualizationCustomItemHeight} />
 
 ### With Sections
diff --git a/apps/docs/content/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx
index 8a60fe80da..61e7b58a65 100644
--- a/apps/docs/content/docs/components/listbox.mdx
+++ b/apps/docs/content/docs/components/listbox.mdx
@@ -153,7 +153,7 @@ function App() {
 
 ### Virtualization
 
-Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
+Listbox supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
 
 <CodeDemo
   title="Virtualization"
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index b8f9d5c50b..28abf31625 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -13,7 +13,7 @@ A select displays a collapsible list of options and allows a user to select one
 
 ---
 
-<CarbonAd/>
+<CarbonAd />
 
 ## Installation
 
@@ -24,7 +24,7 @@ A select displays a collapsible list of options and allows a user to select one
     npm: "npm install @heroui/select",
     yarn: "yarn add @heroui/select",
     pnpm: "pnpm add @heroui/select",
-    bun: "bun add @heroui/select"
+    bun: "bun add @heroui/select",
   }}
 />
 
@@ -213,15 +213,11 @@ import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
   iframeSrc="/examples/select/async-items-loading"
 />
 
-
 ### Virtualization
 
 Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
 
-<CodeDemo
-  title="Virtualization"
-  files={selectContent.virtualization}
-/>
+<CodeDemo title="Virtualization" files={selectContent.virtualization} />
 
 > **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
 
@@ -241,8 +237,9 @@ The `maxListboxHeight` prop is used to set the maximum height of the listbox. Th
 
 The `itemHeight` prop is used to set the height of each item in the listbox. This is required when using virtualization. By default, it's set to `32`.
 
-<CodeDemo title="Custom Item Height" files={selectContent.virtualizationCustomItemHeight} />
+> **Note**: If the height of the list items differs from the default due to `startContent` or other custom content, be sure to pass the correct value to `itemHeight` to prevent layout issues.
 
+<CodeDemo title="Custom Item Height" files={selectContent.virtualizationCustomItemHeight} />
 
 ### With Sections
 
@@ -389,249 +386,256 @@ the popover and listbox components.
     {
       attribute: "children*",
       type: "ReactNode[]",
-      description: "The children to render. Usually a list of SelectItem and SelectSection elements.",
-      default: "-"
+      description:
+        "The children to render. Usually a list of SelectItem and SelectSection elements.",
+      default: "-",
     },
     {
       attribute: "items",
       type: "Iterable<T>",
       description: "Item objects in the select. (dynamic)",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "selectionMode",
       type: "single | multiple",
       description: "The type of selection that is allowed in the collection.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "selectedKeys",
       type: "all | Iterable<React.Key>",
       description: "The currently selected keys in the collection (controlled).",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "disabledKeys",
       type: "Iterable<React.Key>",
-      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
-      default: "-"
+      description:
+        "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-",
     },
     {
       attribute: "defaultSelectedKeys",
       type: "all | Iterable<React.Key>",
       description: "The initial selected keys in the collection (uncontrolled).",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "variant",
       type: "flat | bordered | faded | underlined",
       description: "The variant of the select.",
-      default: "flat"
+      default: "flat",
     },
     {
       attribute: "color",
       type: "default | primary | secondary | success | warning | danger",
       description: "The color of the select.",
-      default: "default"
+      default: "default",
     },
     {
       attribute: "size",
       type: "sm | md | lg",
       description: "The size of the select.",
-      default: "md"
+      default: "md",
     },
     {
       attribute: "radius",
       type: "none | sm | md | lg | full",
       description: "The radius of the select.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "placeholder",
       type: "string",
       description: "The placeholder of the select.",
-      default: "Select an option"
+      default: "Select an option",
     },
     {
       attribute: "labelPlacement",
       type: "inside | outside | outside-left",
       description: "The position of the label.",
-      default: "inside"
+      default: "inside",
     },
     {
       attribute: "label",
       type: "ReactNode",
       description: "The content to display as the label.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "description",
       type: "ReactNode",
-      description: "A description for the select. Provides a hint such as specific requirements for what to choose.",
-      default: "-"
+      description:
+        "A description for the select. Provides a hint such as specific requirements for what to choose.",
+      default: "-",
     },
     {
       attribute: "errorMessage",
       type: "ReactNode | ((v: ValidationResult) => ReactNode)",
       description: "An error message for the select.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "startContent",
       type: "ReactNode",
       description: "Element to be rendered in the left side of the select.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "endContent",
       type: "ReactNode",
       description: "Element to be rendered in the right side of the select.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "selectorIcon",
       type: "ReactNode",
       description: "Element to be rendered as the selector icon.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "scrollRef",
       type: "React.RefObject<HTMLElement>",
       description: "A ref to the scrollable element.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "spinnerRef",
       type: "React.RefObject<HTMLElement>",
       description: "A ref to the spinner element.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "maxListboxHeight",
       type: "number",
-      description: "The maximum height of the listbox in pixels. Required when using virtualization.",
-      default: "256"
+      description:
+        "The maximum height of the listbox in pixels. Required when using virtualization.",
+      default: "256",
     },
     {
       attribute: "itemHeight",
       type: "number",
       description: "The fixed height of each item in pixels. Required when using virtualization.",
-      default: "32"
+      default: "32",
     },
     {
       attribute: "isVirtualized",
       type: "boolean",
-      description: "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
-      default: "undefined"
+      description:
+        "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
+      default: "undefined",
     },
     {
       attribute: "fullWidth",
       type: "boolean",
       description: "Whether the select should take up the width of its parent.",
-      default: "true"
+      default: "true",
     },
     {
       attribute: "isOpen",
       type: "boolean",
       description: "Whether the select is open by default (controlled).",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "defaultOpen",
       type: "boolean",
       description: "Whether the select is open by default (uncontrolled).",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "isRequired",
       type: "boolean",
       description: "Whether user select is required on the select before form submission.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "isDisabled",
       type: "boolean",
       description: "Whether the select is disabled.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "isMultiline",
       type: "boolean",
       description: "Whether the select should allow multiple lines of text.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "isInvalid",
       type: "boolean",
       description: "Whether the select is invalid.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "validationState",
       type: "valid | invalid",
-      description: "Whether the select should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
-      default: "-"
+      description:
+        'Whether the select should display its "valid" or "invalid" visual styling. (Deprecated) use isInvalid instead.',
+      default: "-",
     },
     {
       attribute: "showScrollIndicators",
       type: "boolean",
-      description: "Whether the select should show scroll indicators when the listbox is scrollable.",
-      default: "true"
+      description:
+        "Whether the select should show scroll indicators when the listbox is scrollable.",
+      default: "true",
     },
     {
       attribute: "autoFocus",
       type: "boolean",
       description: "Whether the select should be focused on the first mount.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "disallowEmptySelection",
       type: "boolean",
       description: "Whether the collection allows empty selection.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "disableAnimation",
       type: "boolean",
       description: "Whether the select should be animated.",
-      default: "true"
+      default: "true",
     },
     {
       attribute: "disableSelectorIconRotation",
       type: "boolean",
       description: "Whether the select should disable the rotation of the selector icon.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "hideEmptyContent",
       type: "boolean",
       description: "Whether the listbox will be prevented from opening when there are no items.",
-      default: "false"
+      default: "false",
     },
     {
       attribute: "popoverProps",
       type: "PopoverProps",
       description: "Props to be passed to the popover component.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "listboxProps",
       type: "ListboxProps",
       description: "Props to be passed to the listbox component.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "scrollShadowProps",
       type: "ScrollShadowProps",
       description: "Props to be passed to the scroll shadow component.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "classNames",
-      type: "Partial<Record<\"base\"｜ \"label\"｜ \"trigger\"｜ \"mainWrapper\" ｜ \"innerWrapper\"｜ \"selectorIcon\" ｜ \"value\" ｜ \"listboxWrapper\"｜ \"listbox\" ｜ \"popoverContent\" ｜ \"helperWrapper\" ｜ \"description\" ｜ \"errorMessage\", string>>",
+      type: 'Partial<Record<"base"｜ "label"｜ "trigger"｜ "mainWrapper" ｜ "innerWrapper"｜ "selectorIcon" ｜ "value" ｜ "listboxWrapper"｜ "listbox" ｜ "popoverContent" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>>',
       description: "Allows to set custom class names for the Select slots.",
-      default: "-"
-    }
+      default: "-",
+    },
   ]}
 />
 
@@ -643,32 +647,33 @@ the popover and listbox components.
       attribute: "onClose",
       type: "() => void",
       description: "Callback fired when the select popover is closed.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "onOpenChange",
       type: "(isOpen: boolean) => void",
       description: "Callback fired when the select popover is opened or closed.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "onSelectionChange",
-      type: "(keys: \"all\" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void",
+      type: '(keys: "all" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void',
       description: "Callback fired when the selected keys change.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "onChange",
       type: "React.ChangeEvent<HTMLSelectElement>",
       description: "Native select change event, fired when the selected value changes.",
-      default: "-"
+      default: "-",
     },
     {
       attribute: "renderValue",
       type: "RenderValueFunction",
-      description: "Function to render the value of the select. It renders the selected item by default.",
-      default: "-"
-    }
+      description:
+        "Function to render the value of the select. It renders the selected item by default.",
+      default: "-",
+    },
   ]}
 />
 

From b595d324d40a3c3b1a25b442ecec055f43d10d35 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Tue, 11 Feb 2025 16:34:27 +0900
Subject: [PATCH 2/2] fix: format

---
 apps/docs/content/docs/components/select.mdx | 134 +++++++++----------
 1 file changed, 65 insertions(+), 69 deletions(-)

diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 28abf31625..ce1670b00b 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -13,7 +13,7 @@ A select displays a collapsible list of options and allows a user to select one
 
 ---
 
-<CarbonAd />
+<CarbonAd/>
 
 ## Installation
 
@@ -24,7 +24,7 @@ A select displays a collapsible list of options and allows a user to select one
     npm: "npm install @heroui/select",
     yarn: "yarn add @heroui/select",
     pnpm: "pnpm add @heroui/select",
-    bun: "bun add @heroui/select",
+    bun: "bun add @heroui/select"
   }}
 />
 
@@ -213,11 +213,15 @@ import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
   iframeSrc="/examples/select/async-items-loading"
 />
 
+
 ### Virtualization
 
 Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
 
-<CodeDemo title="Virtualization" files={selectContent.virtualization} />
+<CodeDemo
+  title="Virtualization"
+  files={selectContent.virtualization}
+/>
 
 > **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
 
@@ -386,256 +390,249 @@ the popover and listbox components.
     {
       attribute: "children*",
       type: "ReactNode[]",
-      description:
-        "The children to render. Usually a list of SelectItem and SelectSection elements.",
-      default: "-",
+      description: "The children to render. Usually a list of SelectItem and SelectSection elements.",
+      default: "-"
     },
     {
       attribute: "items",
       type: "Iterable<T>",
       description: "Item objects in the select. (dynamic)",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "selectionMode",
       type: "single | multiple",
       description: "The type of selection that is allowed in the collection.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "selectedKeys",
       type: "all | Iterable<React.Key>",
       description: "The currently selected keys in the collection (controlled).",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "disabledKeys",
       type: "Iterable<React.Key>",
-      description:
-        "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
-      default: "-",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
     },
     {
       attribute: "defaultSelectedKeys",
       type: "all | Iterable<React.Key>",
       description: "The initial selected keys in the collection (uncontrolled).",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "variant",
       type: "flat | bordered | faded | underlined",
       description: "The variant of the select.",
-      default: "flat",
+      default: "flat"
     },
     {
       attribute: "color",
       type: "default | primary | secondary | success | warning | danger",
       description: "The color of the select.",
-      default: "default",
+      default: "default"
     },
     {
       attribute: "size",
       type: "sm | md | lg",
       description: "The size of the select.",
-      default: "md",
+      default: "md"
     },
     {
       attribute: "radius",
       type: "none | sm | md | lg | full",
       description: "The radius of the select.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "placeholder",
       type: "string",
       description: "The placeholder of the select.",
-      default: "Select an option",
+      default: "Select an option"
     },
     {
       attribute: "labelPlacement",
       type: "inside | outside | outside-left",
       description: "The position of the label.",
-      default: "inside",
+      default: "inside"
     },
     {
       attribute: "label",
       type: "ReactNode",
       description: "The content to display as the label.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "description",
       type: "ReactNode",
-      description:
-        "A description for the select. Provides a hint such as specific requirements for what to choose.",
-      default: "-",
+      description: "A description for the select. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
     },
     {
       attribute: "errorMessage",
       type: "ReactNode | ((v: ValidationResult) => ReactNode)",
       description: "An error message for the select.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "startContent",
       type: "ReactNode",
       description: "Element to be rendered in the left side of the select.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "endContent",
       type: "ReactNode",
       description: "Element to be rendered in the right side of the select.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "selectorIcon",
       type: "ReactNode",
       description: "Element to be rendered as the selector icon.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "scrollRef",
       type: "React.RefObject<HTMLElement>",
       description: "A ref to the scrollable element.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "spinnerRef",
       type: "React.RefObject<HTMLElement>",
       description: "A ref to the spinner element.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "maxListboxHeight",
       type: "number",
-      description:
-        "The maximum height of the listbox in pixels. Required when using virtualization.",
-      default: "256",
+      description: "The maximum height of the listbox in pixels. Required when using virtualization.",
+      default: "256"
     },
     {
       attribute: "itemHeight",
       type: "number",
       description: "The fixed height of each item in pixels. Required when using virtualization.",
-      default: "32",
+      default: "32"
     },
     {
       attribute: "isVirtualized",
       type: "boolean",
-      description:
-        "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
-      default: "undefined",
+      description: "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
+      default: "undefined"
     },
     {
       attribute: "fullWidth",
       type: "boolean",
       description: "Whether the select should take up the width of its parent.",
-      default: "true",
+      default: "true"
     },
     {
       attribute: "isOpen",
       type: "boolean",
       description: "Whether the select is open by default (controlled).",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "defaultOpen",
       type: "boolean",
       description: "Whether the select is open by default (uncontrolled).",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "isRequired",
       type: "boolean",
       description: "Whether user select is required on the select before form submission.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "isDisabled",
       type: "boolean",
       description: "Whether the select is disabled.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "isMultiline",
       type: "boolean",
       description: "Whether the select should allow multiple lines of text.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "isInvalid",
       type: "boolean",
       description: "Whether the select is invalid.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "validationState",
       type: "valid | invalid",
-      description:
-        'Whether the select should display its "valid" or "invalid" visual styling. (Deprecated) use isInvalid instead.',
-      default: "-",
+      description: "Whether the select should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
     },
     {
       attribute: "showScrollIndicators",
       type: "boolean",
-      description:
-        "Whether the select should show scroll indicators when the listbox is scrollable.",
-      default: "true",
+      description: "Whether the select should show scroll indicators when the listbox is scrollable.",
+      default: "true"
     },
     {
       attribute: "autoFocus",
       type: "boolean",
       description: "Whether the select should be focused on the first mount.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "disallowEmptySelection",
       type: "boolean",
       description: "Whether the collection allows empty selection.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "disableAnimation",
       type: "boolean",
       description: "Whether the select should be animated.",
-      default: "true",
+      default: "true"
     },
     {
       attribute: "disableSelectorIconRotation",
       type: "boolean",
       description: "Whether the select should disable the rotation of the selector icon.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "hideEmptyContent",
       type: "boolean",
       description: "Whether the listbox will be prevented from opening when there are no items.",
-      default: "false",
+      default: "false"
     },
     {
       attribute: "popoverProps",
       type: "PopoverProps",
       description: "Props to be passed to the popover component.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "listboxProps",
       type: "ListboxProps",
       description: "Props to be passed to the listbox component.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "scrollShadowProps",
       type: "ScrollShadowProps",
       description: "Props to be passed to the scroll shadow component.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "classNames",
-      type: 'Partial<Record<"base"｜ "label"｜ "trigger"｜ "mainWrapper" ｜ "innerWrapper"｜ "selectorIcon" ｜ "value" ｜ "listboxWrapper"｜ "listbox" ｜ "popoverContent" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>>',
+      type: "Partial<Record<\"base\"｜ \"label\"｜ \"trigger\"｜ \"mainWrapper\" ｜ \"innerWrapper\"｜ \"selectorIcon\" ｜ \"value\" ｜ \"listboxWrapper\"｜ \"listbox\" ｜ \"popoverContent\" ｜ \"helperWrapper\" ｜ \"description\" ｜ \"errorMessage\", string>>",
       description: "Allows to set custom class names for the Select slots.",
-      default: "-",
-    },
+      default: "-"
+    }
   ]}
 />
 
@@ -647,33 +644,32 @@ the popover and listbox components.
       attribute: "onClose",
       type: "() => void",
       description: "Callback fired when the select popover is closed.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "onOpenChange",
       type: "(isOpen: boolean) => void",
       description: "Callback fired when the select popover is opened or closed.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "onSelectionChange",
-      type: '(keys: "all" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void',
+      type: "(keys: \"all\" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void",
       description: "Callback fired when the selected keys change.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "onChange",
       type: "React.ChangeEvent<HTMLSelectElement>",
       description: "Native select change event, fired when the selected value changes.",
-      default: "-",
+      default: "-"
     },
     {
       attribute: "renderValue",
       type: "RenderValueFunction",
-      description:
-        "Function to render the value of the select. It renders the selected item by default.",
-      default: "-",
-    },
+      description: "Function to render the value of the select. It renders the selected item by default.",
+      default: "-"
+    }
   ]}
 />