archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(menu): add hideSelectedIcon prop to menu and listbox (#1915)

Browse Source 
sections
This commit is contained in:
Junior Garcia 2023-11-07 10:16:02 -03:00 committed by GitHub
parent 7f6218b978
commit 135cc21e6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/gold-points-tap.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
---
Fix #1888 `hideSelectedIcon` added to menu and listbox sections.

19
apps/docs/content/docs/components/dropdown.mdx
View File

@ -336,15 +336,16 @@ you to customize each item individually.
### DropdownSection Props
| Attribute | Type | Description | Default |
| ------------ | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the dropdown section. Usually a list of `DropdownItem` components. (static) | - |
| title | `string` | The title of the dropdown section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the dropdown section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the dropdown item slots. | - |
| Attribute | Type | Description | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the dropdown section. Usually a list of `DropdownItem` components. (static) | - |
| title | `string` | The title of the dropdown section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| hideSelectedIcon | `boolean` | Whether to hide the check icon when the items are selected. | `false` |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the dropdown section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the dropdown item slots. | - |
---

19
apps/docs/content/docs/components/listbox.mdx
View File

@ -262,15 +262,16 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and
### ListboxSection Props
| Attribute | Type | Description | Default |
| ------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the listbox section. Usually a list of `ListboxItem` components. (static) | - |
| title | `string` | The title of the listbox section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the listbox section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the listbox item slots. | - |
| Attribute | Type | Description | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the listbox section. Usually a list of `ListboxItem` components. (static) | - |
| title | `string` | The title of the listbox section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| hideSelectedIcon | `boolean` | Whether to hide the check icon when the items are selected. | `false` |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the listbox section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the listbox item slots. | - |
---

5
packages/components/listbox/src/base/listbox-section-base.tsx
View File

@ -14,6 +14,11 @@ export interface ListboxSectionBaseProps<T extends object = {}> extends SectionP
* The listbox items classNames.
*/
itemClasses?: ListboxItemProps["classNames"];
/**
* Whether to hide the check icon when the items are selected.
* @default false
*/
hideSelectedIcon?: boolean;
/**
* Shows a divider between sections
* @default false

2
packages/components/listbox/src/listbox-section.tsx
View File

@ -43,6 +43,7 @@ const ListboxSection = forwardRef<"li", ListboxSectionProps>(
disableAnimation,
className,
classNames,
hideSelectedIcon,
showDivider = false,
dividerProps = {},
itemClasses,
@ -97,6 +98,7 @@ const ListboxSection = forwardRef<"li", ListboxSectionProps>(
classNames={itemClasses}
color={color}
disableAnimation={disableAnimation}
hideSelectedIcon={hideSelectedIcon}
item={node}
state={state}
variant={variant}

5
packages/components/menu/src/base/menu-section-base.tsx
View File

@ -19,6 +19,11 @@ export interface MenuSectionBaseProps<T extends object = {}> extends SectionProp
* @default false
*/
showDivider?: boolean;
/**
* Whether to hide the check icon when the items are selected.
* @default false
*/
hideSelectedIcon?: boolean;
/**
* The divider props
*/

2
packages/components/menu/src/menu-section.tsx
View File

@ -55,6 +55,7 @@ const MenuSection = forwardRef<"li", MenuSectionProps>(
className,
classNames,
showDivider = false,
hideSelectedIcon,
dividerProps = {},
itemClasses,
// removed title from props to avoid browsers showing a tooltip on hover
@ -108,6 +109,7 @@ const MenuSection = forwardRef<"li", MenuSectionProps>(
closeOnSelect={closeOnSelect}
color={color}
disableAnimation={disableAnimation}
hideSelectedIcon={hideSelectedIcon}
item={node}
state={state}
variant={variant}