Skip to content

Commit

Permalink
fix: format
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryo-manba
ryo-manba committed Feb 11, 2025
1 parent 2a4d693 commit b595d32
Showing 1 changed file with 65 additions and 69 deletions.
134 changes: 65 additions & 69 deletions apps/docs/content/docs/components/select.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ A select displays a collapsible list of options and allows a user to select one

---

<CarbonAd />
<CarbonAd/>

## Installation

Expand All @@ -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"
}}
/>

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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: "-"
}
]}
/>

Expand All @@ -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: "-"
}
]}
/>

Expand Down

0 comments on commit b595d32

Please sign in to comment.