Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: onSelectionChange type incorrect #3336

Merged
merged 6 commits into from
Jul 6, 2024
Merged

fix: onSelectionChange type incorrect #3336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2267b00
fix: onSelectionChange type incorrect
winchesHe Jun 26, 2024
51a03be
Merge branch 'canary' into bugfix-selection-type
winchesHe Jun 26, 2024
1f05ff7
feat: export shardSelection
winchesHe Jun 26, 2024
40f93f0
fix: typo
winchesHe Jun 28, 2024
8f263da
fix: review
winchesHe Jun 28, 2024
92f8703
Merge branch 'canary' into bugfix-selection-type
wingkwong Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/chilled-worms-develop.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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