Skip to content

Commit

Permalink
fix: onSelectionChange type incorrect (#3336)
Browse files Browse the repository at this point in the history 
* fix: onSelectionChange type incorrect

* feat: export shardSelection

* fix: typo

* fix: review

---------

Co-authored-by: WK Wong <[email protected]>
  • Loading branch information
@winchesHe @wingkwong
winchesHe and wingkwong authored Jul 6, 2024
1 parent 5652e7b commit 0cdfdb4
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 12 deletions.
8 changes: 8 additions & 0 deletions .changeset/chilled-worms-develop.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@nextui-org/dropdown": patch
"@nextui-org/menu": patch
"@nextui-org/select": patch
"@nextui-org/system-rsc": patch
---

Fix onSelectionChange type incorrect (#2512)
8 changes: 4 additions & 4 deletions apps/docs/content/docs/components/dropdown.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,9 +322,9 @@ you to customize each item individually.
| variant | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` | The dropdown items appearance style. | `solid` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The dropdown items color theme. | `default` |
| selectionMode | `none` \| `single` \| `multiple` | The type of selection that is allowed in the collection. | - |
| selectedKeys | `React.Key[]` | The currently selected keys in the collection (controlled). | - |
| disabledKeys | `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
| defaultSelectedKeys | `all` \| `React.Key[]` | The initial selected keys in the collection (uncontrolled). | - |
| selectedKeys | `all` \| `Iterable<React.Key>` | The currently selected keys in the collection (controlled). | - |
| disabledKeys | `Iterable<React.Key>` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
| defaultSelectedKeys | `all` \| `Iterable<React.Key>` | The initial selected keys in the collection (uncontrolled). | - |
| disallowEmptySelection | `boolean` | Whether the collection allows empty selection. | `false` |
| autoFocus | `boolean` \| `first` \| `last` | Where the focus should be set. | `false` |
| topContent | `ReactNode` | The content to display above the listbox items. | - |
Expand All @@ -343,7 +343,7 @@ you to customize each item individually.
| Attribute | Type | Description |
| ----------------- | ----------------------------- | -------------------------------------------------------------------------- |
| onAction | `(key: React.Key) => void` | Handler that is called when an item is selected. |
| onSelectionChange | `(keys: React.Key[]) => void` | Handler that is called when the selection changes. |
| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void` | Handler that is called when the selection changes. |
| onClose | `() => void` | Handler that is called when the menu should close after selecting an item. |

---
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/content/docs/components/select.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,9 +359,9 @@ the popover and listbox components.
| children\* | `ReactNode[]` | The children to render. Usually a list of `SelectItem` and `SelectSection` elements. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the select. (dynamic) | - |
| selectionMode | `single` \| `multiple` | The type of selection that is allowed in the collection. | - |
| selectedKeys | `all` \| `React.Key[]` | The currently selected keys in the collection (controlled). | - |
| disabledKeys | `all` \| `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
| defaultSelectedKeys | `all` \| `React.Key[]` | The initial selected keys in the collection (uncontrolled). | - |
| selectedKeys | `all` \| `Iterable<React.Key>` | The currently selected keys in the collection (controlled). | - |
| disabledKeys | `Iterable<React.Key>` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
| defaultSelectedKeys | `all` \| `Iterable<React.Key>` | The initial selected keys in the collection (uncontrolled). | - |
| variant | `flat` \| `bordered` \| `faded` \| `underlined` | The variant of the select. | `flat` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the select. | `default` |
| size | `sm` \| `md` \| `lg` | The size of the select. | `md` |
Expand Down Expand Up @@ -400,7 +400,7 @@ the popover and listbox components.
| ----------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| onClose | `() => void` | Callback fired when the select popover is closed. |
| onOpenChange | `(isOpen: boolean) => void` | Callback fired when the select popover is opened or closed. |
| onSelectionChange | `(keys: React.Key[]) => void` | Callback fired when the selected keys change. |
| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void` | Callback fired when the selected keys change. |
| onChange | `React.ChangeEvent<HTMLSelectElement>` | Native select change event, fired when the selected value changes. |
| renderValue | [RenderValueFunction](#render-value-function) | Function to render the value of the select. It renders the selected item by default. |

Expand Down
8 changes: 6 additions & 2 deletions packages/components/menu/src/use-menu.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
import type {HTMLNextUIProps, PropGetter, SharedSelection} from "@nextui-org/system";

import {useProviderContext} from "@nextui-org/system";
import {AriaMenuProps} from "@react-types/menu";
Expand Down Expand Up @@ -83,11 +83,15 @@ interface Props<T> {
* The menu items classNames.
*/
itemClasses?: MenuItemProps["classNames"];
/**
* Handler that is called when the selection changes.
*/
onSelectionChange?: (keys: SharedSelection) => void;
}

export type UseMenuProps<T = object> = Props<T> &
Omit<HTMLNextUIProps<"ul">, keyof AriaMenuProps<T>> &
AriaMenuProps<T> &
Omit<AriaMenuProps<T>, "onSelectionChange"> &
MenuVariantProps;

export function useMenu<T extends object>(props: UseMenuProps<T>) {
Expand Down
12 changes: 10 additions & 2 deletions packages/components/select/src/use-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
HTMLNextUIProps,
mapPropsVariants,
PropGetter,
SharedSelection,
useProviderContext,
} from "@nextui-org/system";
import {select} from "@nextui-org/theme";
Expand Down Expand Up @@ -128,6 +129,10 @@ interface Props<T> extends Omit<HTMLNextUIProps<"select">, keyof SelectVariantPr
* Classes object to style the select and its children.
*/
classNames?: SlotsToClasses<SelectSlots>;
/**
* Handler that is called when the selection changes.
*/
onSelectionChange?: (keys: SharedSelection) => void;
}

interface SelectData {
Expand All @@ -139,8 +144,11 @@ interface SelectData {

export const selectData = new WeakMap<MultiSelectState<any>, SelectData>();

export type UseSelectProps<T> = Omit<Props<T>, keyof MultiSelectProps<T>> &
MultiSelectProps<T> &
export type UseSelectProps<T> = Omit<
Props<T>,
keyof Omit<MultiSelectProps<T>, "onSelectionChange">
> &
Omit<MultiSelectProps<T>, "onSelectionChange"> &
SelectVariantProps;

export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
Expand Down
1 change: 1 addition & 0 deletions packages/core/system-rsc/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export type {
Merge,
HTMLNextUIProps,
PropGetter,
SharedSelection,
} from "./types";

export {
Expand Down
7 changes: 7 additions & 0 deletions packages/core/system-rsc/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* Part of this code is taken from @chakra-ui/system ❤️
*/

import {Selection as AriaSharedSelection} from "@react-types/shared";

export type As<Props = any> = React.ElementType<Props>;
export type DOMElements = keyof JSX.IntrinsicElements;
export type CapitalizedDOMElements = Capitalize<DOMElements>;
Expand Down Expand Up @@ -79,3 +81,8 @@ export type PropGetter<P = Record<string, unknown>, R = DOMAttributes> = (
props?: Merge<DOMAttributes, P>,
ref?: React.Ref<any>,
) => R & React.RefAttributes<any>;

export type SharedSelection = AriaSharedSelection & {
anchorKey?: string;
currentKey?: string;
};
1 change: 1 addition & 0 deletions packages/core/system/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type {
ExtendVariantProps,
ExtendVariantWithSlotsProps,
ExtendVariants,
SharedSelection,
} from "@nextui-org/system-rsc";

export {
Expand Down

0 comments on commit 0cdfdb4

Please sign in to comment.