-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(react-combobox): rollback export of internal hooks (#30648)
- Loading branch information
1 parent
6bd8fa7
commit c7342e3
Showing
14 changed files
with
1,103 additions
and
45 deletions.
There are no files selected for viewing
7 changes: 0 additions & 7 deletions
7
change/@fluentui-react-combobox-4683dd24-621c-4ae8-a961-cedec640fa96.json
This file was deleted.
Oops, something went wrong.
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-combobox-6aa21ddd-0e42-47f0-a0a7-b624bfc21798.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "none", | ||
| "comment": "chore: rollback export of internal hooks", | ||
| "packageName": "@fluentui/react-combobox", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "none" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
147 changes: 147 additions & 0 deletions
147
packages/react-components/react-tag-picker-preview/src/utils/ComboboxBase.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import * as React from 'react'; | ||
| import type { ActiveDescendantContextValue } from '@fluentui/react-aria'; | ||
| import type { PositioningShorthand } from '@fluentui/react-positioning'; | ||
| import type { ComboboxContextValue, ListboxContextValue } from '@fluentui/react-combobox'; | ||
| import type { OptionValue, OptionCollectionState } from './OptionCollection.types'; | ||
| import { SelectionProps, SelectionState } from './Selection.types'; | ||
| import { PortalProps } from '@fluentui/react-portal'; | ||
|
|
||
| /** | ||
| * ComboboxBase Props | ||
| * Shared types between Combobox and Dropdown components | ||
| */ | ||
| export type ComboboxBaseProps = SelectionProps & | ||
| Pick<PortalProps, 'mountNode'> & { | ||
| /** | ||
| * Controls the colors and borders of the combobox trigger. | ||
| * @default 'outline' | ||
| */ | ||
| appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline'; | ||
|
|
||
| /** | ||
| * If set, the combobox will show an icon to clear the current value. | ||
| */ | ||
| clearable?: boolean; | ||
|
|
||
| /** | ||
| * The default open state when open is uncontrolled | ||
| */ | ||
| defaultOpen?: boolean; | ||
|
|
||
| /** | ||
| * The default value displayed in the trigger input or button when the combobox's value is uncontrolled | ||
| */ | ||
| defaultValue?: string; | ||
|
|
||
| /** | ||
| * Render the combobox's popup inline in the DOM. | ||
| * This has accessibility benefits, particularly for touch screen readers. | ||
| */ | ||
| inlinePopup?: boolean; | ||
|
|
||
| /** | ||
| * Callback when the open/closed state of the dropdown changes | ||
| */ | ||
| // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback | ||
| onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void; | ||
|
|
||
| /** | ||
| * Sets the open/closed state of the dropdown. | ||
| * Use together with onOpenChange to fully control the dropdown's visibility | ||
| */ | ||
| open?: boolean; | ||
|
|
||
| /** | ||
| * If set, the placeholder will show when no value is selected | ||
| */ | ||
| placeholder?: string; | ||
|
|
||
| /** | ||
| * Configure the positioning of the combobox dropdown | ||
| * | ||
| * @defaultvalue below | ||
| */ | ||
| positioning?: PositioningShorthand; | ||
|
|
||
| /** | ||
| * Controls the size of the combobox faceplate | ||
| * @default 'medium' | ||
| */ | ||
| size?: 'small' | 'medium' | 'large'; | ||
|
|
||
| /** | ||
| * The value displayed by the Combobox. | ||
| * Use this with `onOptionSelect` to directly control the displayed value string | ||
| */ | ||
| value?: string; | ||
| }; | ||
|
|
||
| /** | ||
| * State used in rendering Combobox | ||
| */ | ||
| export type ComboboxBaseState = Required< | ||
| Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'> | ||
| > & | ||
| Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & | ||
| OptionCollectionState & | ||
| SelectionState & { | ||
| /** | ||
| * @deprecated - no longer used internally | ||
| */ | ||
| activeOption?: OptionValue; | ||
|
|
||
| /** | ||
| * @deprecated - no longer used internally and handled automatically be activedescendant utilities | ||
| * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible | ||
| */ | ||
| focusVisible: boolean; | ||
|
|
||
| /** | ||
| * @deprecated - no longer used internally | ||
| * Whether the next blur event should be ignored, and the combobox/dropdown will not close. | ||
| */ | ||
| ignoreNextBlur: React.MutableRefObject<boolean>; | ||
|
|
||
| /** | ||
| * @deprecated - no longer used internally | ||
| */ | ||
| setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>; | ||
|
|
||
| /** | ||
| * @deprecated - no longer used internally and handled automatically be activedescendant utilities | ||
| * @see useSetKeyboardNavigation for imperatively setting focus visible state | ||
| */ | ||
| setFocusVisible(focusVisible: boolean): void; | ||
|
|
||
| /** | ||
| * whether the combobox/dropdown currently has focus | ||
| */ | ||
| hasFocus: boolean; | ||
|
|
||
| setHasFocus(hasFocus: boolean): void; | ||
|
|
||
| setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void; | ||
|
|
||
| setValue(newValue: string | undefined): void; | ||
|
|
||
| onOptionClick: (e: React.MouseEvent<HTMLElement>) => void; | ||
| }; | ||
|
|
||
| /** | ||
| * Data for the Combobox onOpenChange event. | ||
| */ | ||
| export type ComboboxBaseOpenChangeData = { | ||
| open: boolean; | ||
| }; | ||
|
|
||
| /* Possible event types for onOpen */ | ||
| export type ComboboxBaseOpenEvents = | ||
| | React.MouseEvent<HTMLElement> | ||
| | React.KeyboardEvent<HTMLElement> | ||
| | React.FocusEvent<HTMLElement>; | ||
|
|
||
| export type ComboboxBaseContextValues = { | ||
| combobox: ComboboxContextValue; | ||
| activeDescendant: ActiveDescendantContextValue; | ||
| listbox: ListboxContextValue; | ||
| }; |
45 changes: 45 additions & 0 deletions
45
packages/react-components/react-tag-picker-preview/src/utils/OptionCollection.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| export type OptionValue = { | ||
| /** The disabled state of the option. */ | ||
| disabled?: boolean; | ||
|
|
||
| /** The `id` attribute of the option. */ | ||
| id: string; | ||
|
|
||
| /** The `text` string for the option. */ | ||
| text: string; | ||
|
|
||
| /** The value string of the option. */ | ||
| value: string; | ||
| }; | ||
|
|
||
| export type OptionCollectionState = { | ||
| /** | ||
| * @deprecated - no longer used internally | ||
| */ | ||
| getIndexOfId(id: string): number; | ||
|
|
||
| /** | ||
| * @deprecated - no longer used internally | ||
| */ | ||
| getOptionAtIndex(index: number): OptionValue | undefined; | ||
|
|
||
| /** | ||
| * @deprecated - no longer used internally | ||
| */ | ||
| getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[]; | ||
|
|
||
| /** The total number of options in the collection. */ | ||
| getCount: () => number; | ||
|
|
||
| /** Returns the option data by key. */ | ||
| getOptionById(id: string): OptionValue | undefined; | ||
|
|
||
| /** Returns an array of options filtered by a value matching function against the option's value string. */ | ||
| getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[]; | ||
|
|
||
| /** The unordered option data. */ | ||
| options: OptionValue[]; | ||
|
|
||
| /* A function that child options call to register their values. Returns a function to unregister the option. */ | ||
| registerOption: (option: OptionValue, element: HTMLElement) => () => void; | ||
| }; |
52 changes: 52 additions & 0 deletions
52
packages/react-components/react-tag-picker-preview/src/utils/Selection.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import * as React from 'react'; | ||
| import { OptionValue } from './OptionCollection.types'; | ||
|
|
||
| export type SelectionProps = { | ||
| /** | ||
| * For an uncontrolled component, sets the initial selection. | ||
| * If this is set, the `defaultValue` prop MUST also be set. | ||
| */ | ||
| defaultSelectedOptions?: string[]; | ||
|
|
||
| /** | ||
| * Sets the selection type to multiselect. | ||
| * Set this to true for multiselect, even if fully controlling selection state. | ||
| * This enables styles and accessibility properties to be set. | ||
| * @default false | ||
| */ | ||
| multiselect?: boolean; | ||
|
|
||
| /* Callback when an option is selected */ | ||
| // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback | ||
| onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void; | ||
|
|
||
| /** | ||
| * An array of selected option keys. | ||
| * Use this with `onOptionSelect` to directly control the selected option(s) | ||
| * If this is set, the `value` prop MUST also be controlled. | ||
| */ | ||
| selectedOptions?: string[]; | ||
| }; | ||
|
|
||
| /* Values returned by the useSelection hook */ | ||
| export type SelectionState = { | ||
| clearSelection: (event: SelectionEvents) => void; | ||
| selectedOptions: string[]; | ||
| selectOption: (event: SelectionEvents, option: OptionValue) => void; | ||
| }; | ||
|
|
||
| /* | ||
| * Data for the onOptionSelect callback. | ||
| * `optionValue` and `optionText` will be undefined if multiple options are modified at once. | ||
| */ | ||
| export type OptionOnSelectData = { | ||
| optionValue: string | undefined; | ||
| optionText: string | undefined; | ||
| selectedOptions: string[]; | ||
| }; | ||
|
|
||
| /* Possible event types for onOptionSelect */ | ||
| export type SelectionEvents = | ||
| | React.ChangeEvent<HTMLElement> | ||
| | React.KeyboardEvent<HTMLElement> | ||
| | React.MouseEvent<HTMLElement>; |
Oops, something went wrong.