e8fbfb14c1
Add coexistence checks to all enqueue methods to prevent loading both React and Grid.js assets simultaneously. Changes: - ReactAdmin.php: Only enqueue React assets when ?react=1 - Init.php: Skip Grid.js when React active on admin pages - Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0 - Customer.php, Product.php, License.php: Add coexistence checks Now the toggle between Classic and React versions works correctly. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
708 lines
24 KiB
TypeScript
708 lines
24 KiB
TypeScript
import * as React from 'react'
|
|
|
|
type Callback = () => void
|
|
|
|
export interface DownshiftState<Item> {
|
|
highlightedIndex: number | null
|
|
inputValue: string | null
|
|
isOpen: boolean
|
|
selectedItem: Item | null
|
|
}
|
|
|
|
export enum StateChangeTypes {
|
|
unknown = '__autocomplete_unknown__',
|
|
mouseUp = '__autocomplete_mouseup__',
|
|
itemMouseEnter = '__autocomplete_item_mouseenter__',
|
|
keyDownArrowUp = '__autocomplete_keydown_arrow_up__',
|
|
keyDownArrowDown = '__autocomplete_keydown_arrow_down__',
|
|
keyDownEscape = '__autocomplete_keydown_escape__',
|
|
keyDownEnter = '__autocomplete_keydown_enter__',
|
|
clickItem = '__autocomplete_click_item__',
|
|
blurInput = '__autocomplete_blur_input__',
|
|
changeInput = '__autocomplete_change_input__',
|
|
keyDownSpaceButton = '__autocomplete_keydown_space_button__',
|
|
clickButton = '__autocomplete_click_button__',
|
|
blurButton = '__autocomplete_blur_button__',
|
|
controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__',
|
|
touchEnd = '__autocomplete_touchend__',
|
|
}
|
|
|
|
export interface DownshiftProps<Item> {
|
|
initialSelectedItem?: Item
|
|
initialInputValue?: string
|
|
initialHighlightedIndex?: number | null
|
|
initialIsOpen?: boolean
|
|
defaultHighlightedIndex?: number | null
|
|
defaultIsOpen?: boolean
|
|
itemToString?: (item: Item | null) => string
|
|
selectedItemChanged?: (prevItem: Item, item: Item) => boolean
|
|
getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
|
|
onChange?: (
|
|
selectedItem: Item | null,
|
|
stateAndHelpers: ControllerStateAndHelpers<Item>,
|
|
) => void
|
|
onSelect?: (
|
|
selectedItem: Item | null,
|
|
stateAndHelpers: ControllerStateAndHelpers<Item>,
|
|
) => void
|
|
onStateChange?: (
|
|
options: StateChangeOptions<Item>,
|
|
stateAndHelpers: ControllerStateAndHelpers<Item>,
|
|
) => void
|
|
onInputValueChange?: (
|
|
inputValue: string,
|
|
stateAndHelpers: ControllerStateAndHelpers<Item>,
|
|
) => void
|
|
stateReducer?: (
|
|
state: DownshiftState<Item>,
|
|
changes: StateChangeOptions<Item>,
|
|
) => Partial<StateChangeOptions<Item>>
|
|
itemCount?: number
|
|
highlightedIndex?: number | null
|
|
inputValue?: string | null
|
|
isOpen?: boolean
|
|
selectedItem?: Item | null
|
|
children?: ChildrenFunction<Item>
|
|
id?: string
|
|
inputId?: string
|
|
labelId?: string
|
|
menuId?: string
|
|
getItemId?: (index?: number) => string
|
|
environment?: Environment
|
|
onOuterClick?: (stateAndHelpers: ControllerStateAndHelpers<Item>) => void
|
|
scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
|
|
onUserAction?: (
|
|
options: StateChangeOptions<Item>,
|
|
stateAndHelpers: ControllerStateAndHelpers<Item>,
|
|
) => void
|
|
suppressRefError?: boolean
|
|
}
|
|
|
|
export interface Environment {
|
|
addEventListener: typeof window.addEventListener
|
|
removeEventListener: typeof window.removeEventListener
|
|
document: Document
|
|
}
|
|
|
|
export interface A11yStatusMessageOptions<Item> {
|
|
highlightedIndex: number | null
|
|
inputValue: string
|
|
isOpen: boolean
|
|
itemToString: (item: Item | null) => string
|
|
previousResultCount: number
|
|
resultCount: number
|
|
highlightedItem: Item
|
|
selectedItem: Item | null
|
|
}
|
|
|
|
export interface StateChangeOptions<Item>
|
|
extends Partial<DownshiftState<Item>> {
|
|
type: StateChangeTypes
|
|
}
|
|
|
|
type StateChangeFunction<Item> = (
|
|
state: DownshiftState<Item>,
|
|
) => Partial<StateChangeOptions<Item>>
|
|
|
|
export interface GetRootPropsOptions {
|
|
refKey: string
|
|
}
|
|
|
|
export interface GetInputPropsOptions
|
|
extends React.HTMLProps<HTMLInputElement> {
|
|
disabled?: boolean
|
|
}
|
|
|
|
export interface GetLabelPropsOptions
|
|
extends React.HTMLProps<HTMLLabelElement> {}
|
|
|
|
export interface GetToggleButtonPropsOptions
|
|
extends React.HTMLProps<HTMLButtonElement> {
|
|
disabled?: boolean
|
|
}
|
|
|
|
export interface GetMenuPropsOptions
|
|
extends React.HTMLProps<HTMLElement>,
|
|
GetPropsWithRefKey {
|
|
['aria-label']?: string
|
|
}
|
|
|
|
export interface GetPropsCommonOptions {
|
|
suppressRefError?: boolean
|
|
}
|
|
|
|
export interface GetPropsWithRefKey {
|
|
refKey?: string
|
|
}
|
|
|
|
export interface GetItemPropsOptions<Item>
|
|
extends React.HTMLProps<HTMLElement> {
|
|
index?: number
|
|
item: Item
|
|
isSelected?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
export interface PropGetters<Item> {
|
|
getRootProps: (
|
|
options?: GetRootPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any
|
|
getLabelProps: (options?: GetLabelPropsOptions) => any
|
|
getMenuProps: (
|
|
options?: GetMenuPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getInputProps: <T>(options?: T) => T & GetInputPropsOptions
|
|
getItemProps: (options: GetItemPropsOptions<Item>) => any
|
|
}
|
|
|
|
export interface Actions<Item> {
|
|
reset: (
|
|
otherStateToSet?: Partial<StateChangeOptions<Item>>,
|
|
cb?: Callback,
|
|
) => void
|
|
openMenu: (cb?: Callback) => void
|
|
closeMenu: (cb?: Callback) => void
|
|
toggleMenu: (
|
|
otherStateToSet?: Partial<StateChangeOptions<Item>>,
|
|
cb?: Callback,
|
|
) => void
|
|
selectItem: (
|
|
item: Item,
|
|
otherStateToSet?: Partial<StateChangeOptions<Item>>,
|
|
cb?: Callback,
|
|
) => void
|
|
selectItemAtIndex: (
|
|
index: number,
|
|
otherStateToSet?: Partial<StateChangeOptions<Item>>,
|
|
cb?: Callback,
|
|
) => void
|
|
selectHighlightedItem: (
|
|
otherStateToSet?: Partial<StateChangeOptions<Item>>,
|
|
cb?: Callback,
|
|
) => void
|
|
setHighlightedIndex: (
|
|
index: number,
|
|
otherStateToSet?: Partial<StateChangeOptions<Item>>,
|
|
cb?: Callback,
|
|
) => void
|
|
clearSelection: (cb?: Callback) => void
|
|
clearItems: () => void
|
|
setItemCount: (count: number) => void
|
|
unsetItemCount: () => void
|
|
setState: (
|
|
stateToSet: Partial<StateChangeOptions<Item>> | StateChangeFunction<Item>,
|
|
cb?: Callback,
|
|
) => void
|
|
// props
|
|
itemToString: (item: Item | null) => string
|
|
}
|
|
|
|
export type ControllerStateAndHelpers<Item> = DownshiftState<Item> &
|
|
PropGetters<Item> &
|
|
Actions<Item>
|
|
|
|
export type ChildrenFunction<Item> = (
|
|
options: ControllerStateAndHelpers<Item>,
|
|
) => React.ReactNode
|
|
|
|
export default class Downshift<Item = any> extends React.Component<
|
|
DownshiftProps<Item>
|
|
> {
|
|
static stateChangeTypes: {
|
|
unknown: StateChangeTypes.unknown
|
|
mouseUp: StateChangeTypes.mouseUp
|
|
itemMouseEnter: StateChangeTypes.itemMouseEnter
|
|
keyDownArrowUp: StateChangeTypes.keyDownArrowUp
|
|
keyDownArrowDown: StateChangeTypes.keyDownArrowDown
|
|
keyDownEscape: StateChangeTypes.keyDownEscape
|
|
keyDownEnter: StateChangeTypes.keyDownEnter
|
|
clickItem: StateChangeTypes.clickItem
|
|
blurInput: StateChangeTypes.blurInput
|
|
changeInput: StateChangeTypes.changeInput
|
|
keyDownSpaceButton: StateChangeTypes.keyDownSpaceButton
|
|
clickButton: StateChangeTypes.clickButton
|
|
blurButton: StateChangeTypes.blurButton
|
|
controlledPropUpdatedSelectedItem: StateChangeTypes.controlledPropUpdatedSelectedItem
|
|
touchEnd: StateChangeTypes.touchEnd
|
|
}
|
|
}
|
|
|
|
export function resetIdCounter(): void
|
|
|
|
/* useSelect Types */
|
|
|
|
export interface UseSelectState<Item> {
|
|
highlightedIndex: number
|
|
selectedItem: Item | null
|
|
isOpen: boolean
|
|
inputValue: string
|
|
}
|
|
|
|
export enum UseSelectStateChangeTypes {
|
|
MenuKeyDownArrowDown = '__menu_keydown_arrow_down__',
|
|
MenuKeyDownArrowUp = '__menu_keydown_arrow_up__',
|
|
MenuKeyDownEscape = '__menu_keydown_escape__',
|
|
MenuKeyDownHome = '__menu_keydown_home__',
|
|
MenuKeyDownEnd = '__menu_keydown_end__',
|
|
MenuKeyDownEnter = '__menu_keydown_enter__',
|
|
MenuKeyDownSpaceButton = '__menu_keydown_space_button__',
|
|
MenuKeyDownCharacter = '__menu_keydown_character__',
|
|
MenuBlur = '__menu_blur__',
|
|
MenuMouseLeave = '__menu_mouse_leave__',
|
|
ItemMouseMove = '__item_mouse_move__',
|
|
ItemClick = '__item_click__',
|
|
ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__',
|
|
ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__',
|
|
ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__',
|
|
ToggleButtonClick = '__togglebutton_click__',
|
|
FunctionToggleMenu = '__function_toggle_menu__',
|
|
FunctionOpenMenu = '__function_open_menu__',
|
|
FunctionCloseMenu = '__function_close_menu__',
|
|
FunctionSetHighlightedIndex = '__function_set_highlighted_index__',
|
|
FunctionSelectItem = '__function_select_item__',
|
|
FunctionSetInputValue = '__function_set_input_value__',
|
|
FunctionReset = '__function_reset__',
|
|
}
|
|
|
|
export interface UseSelectProps<Item> {
|
|
items: Item[]
|
|
itemToString?: (item: Item | null) => string
|
|
getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
|
|
getA11ySelectionMessage?: (options: A11yStatusMessageOptions<Item>) => string
|
|
circularNavigation?: boolean
|
|
highlightedIndex?: number
|
|
initialHighlightedIndex?: number
|
|
defaultHighlightedIndex?: number
|
|
isOpen?: boolean
|
|
initialIsOpen?: boolean
|
|
defaultIsOpen?: boolean
|
|
selectedItem?: Item | null
|
|
initialSelectedItem?: Item | null
|
|
defaultSelectedItem?: Item | null
|
|
id?: string
|
|
labelId?: string
|
|
menuId?: string
|
|
toggleButtonId?: string
|
|
getItemId?: (index: number) => string
|
|
scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
|
|
stateReducer?: (
|
|
state: UseSelectState<Item>,
|
|
actionAndChanges: UseSelectStateChangeOptions<Item>,
|
|
) => Partial<UseSelectState<Item>>
|
|
onSelectedItemChange?: (changes: UseSelectStateChange<Item>) => void
|
|
onIsOpenChange?: (changes: UseSelectStateChange<Item>) => void
|
|
onHighlightedIndexChange?: (changes: UseSelectStateChange<Item>) => void
|
|
onStateChange?: (changes: UseSelectStateChange<Item>) => void
|
|
environment?: Environment
|
|
}
|
|
|
|
export interface UseSelectStateChangeOptions<Item>
|
|
extends UseSelectDispatchAction<Item> {
|
|
changes: Partial<UseSelectState<Item>>
|
|
}
|
|
|
|
export interface UseSelectDispatchAction<Item> {
|
|
type: UseSelectStateChangeTypes
|
|
getItemNodeFromIndex?: (index: number) => HTMLElement
|
|
shiftKey?: boolean
|
|
key?: string
|
|
index?: number
|
|
highlightedIndex?: number
|
|
selectedItem?: Item | null
|
|
inputValue?: string
|
|
}
|
|
|
|
export interface UseSelectStateChange<Item>
|
|
extends Partial<UseSelectState<Item>> {
|
|
type: UseSelectStateChangeTypes
|
|
}
|
|
|
|
export interface UseSelectGetMenuPropsOptions
|
|
extends GetPropsWithRefKey,
|
|
GetMenuPropsOptions {}
|
|
|
|
export interface UseSelectGetToggleButtonPropsOptions
|
|
extends GetPropsWithRefKey,
|
|
GetToggleButtonPropsOptions {}
|
|
|
|
export interface UseSelectGetLabelPropsOptions extends GetLabelPropsOptions {}
|
|
|
|
export interface UseSelectGetItemPropsOptions<Item>
|
|
extends GetItemPropsOptions<Item>,
|
|
GetPropsWithRefKey {}
|
|
|
|
export interface UseSelectPropGetters<Item> {
|
|
getToggleButtonProps: (
|
|
options?: UseSelectGetToggleButtonPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getLabelProps: (options?: UseSelectGetLabelPropsOptions) => any
|
|
getMenuProps: (
|
|
options?: UseSelectGetMenuPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getItemProps: (options: UseSelectGetItemPropsOptions<Item>) => any
|
|
}
|
|
|
|
export interface UseSelectActions<Item> {
|
|
reset: () => void
|
|
openMenu: () => void
|
|
closeMenu: () => void
|
|
toggleMenu: () => void
|
|
selectItem: (item: Item) => void
|
|
setHighlightedIndex: (index: number) => void
|
|
}
|
|
|
|
export type UseSelectReturnValue<Item> = UseSelectState<Item> &
|
|
UseSelectPropGetters<Item> &
|
|
UseSelectActions<Item>
|
|
|
|
export interface UseSelectInterface {
|
|
<Item>(props: UseSelectProps<Item>): UseSelectReturnValue<Item>
|
|
stateChangeTypes: {
|
|
MenuKeyDownArrowDown: UseSelectStateChangeTypes.MenuKeyDownArrowDown
|
|
MenuKeyDownArrowUp: UseSelectStateChangeTypes.MenuKeyDownArrowUp
|
|
MenuKeyDownEscape: UseSelectStateChangeTypes.MenuKeyDownEscape
|
|
MenuKeyDownHome: UseSelectStateChangeTypes.MenuKeyDownHome
|
|
MenuKeyDownEnd: UseSelectStateChangeTypes.MenuKeyDownEnd
|
|
MenuKeyDownEnter: UseSelectStateChangeTypes.MenuKeyDownEnter
|
|
MenuKeyDownSpaceButton: UseSelectStateChangeTypes.MenuKeyDownSpaceButton
|
|
MenuKeyDownCharacter: UseSelectStateChangeTypes.MenuKeyDownCharacter
|
|
MenuBlur: UseSelectStateChangeTypes.MenuBlur
|
|
MenuMouseLeave: UseSelectStateChangeTypes.MenuMouseLeave
|
|
ItemMouseMove: UseSelectStateChangeTypes.ItemMouseMove
|
|
ItemClick: UseSelectStateChangeTypes.ItemClick
|
|
ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick
|
|
ToggleButtonKeyDownCharacter: UseSelectStateChangeTypes.ToggleButtonKeyDownCharacter
|
|
ToggleButtonKeyDownArrowDown: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowDown
|
|
ToggleButtonKeyDownArrowUp: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowUp
|
|
FunctionToggleMenu: UseSelectStateChangeTypes.FunctionToggleMenu
|
|
FunctionOpenMenu: UseSelectStateChangeTypes.FunctionOpenMenu
|
|
FunctionCloseMenu: UseSelectStateChangeTypes.FunctionCloseMenu
|
|
FunctionSetHighlightedIndex: UseSelectStateChangeTypes.FunctionSetHighlightedIndex
|
|
FunctionSelectItem: UseSelectStateChangeTypes.FunctionSelectItem
|
|
FunctionSetInputValue: UseSelectStateChangeTypes.FunctionSetInputValue
|
|
FunctionReset: UseSelectStateChangeTypes.FunctionReset
|
|
}
|
|
}
|
|
|
|
export const useSelect: UseSelectInterface
|
|
|
|
/* useCombobox Types */
|
|
|
|
export interface UseComboboxState<Item> {
|
|
highlightedIndex: number
|
|
selectedItem: Item | null
|
|
isOpen: boolean
|
|
inputValue: string
|
|
}
|
|
|
|
export enum UseComboboxStateChangeTypes {
|
|
InputKeyDownArrowDown = '__input_keydown_arrow_down__',
|
|
InputKeyDownArrowUp = '__input_keydown_arrow_up__',
|
|
InputKeyDownEscape = '__input_keydown_escape__',
|
|
InputKeyDownHome = '__input_keydown_home__',
|
|
InputKeyDownEnd = '__input_keydown_end__',
|
|
InputKeyDownEnter = '__input_keydown_enter__',
|
|
InputChange = '__input_change__',
|
|
InputBlur = '__input_blur__',
|
|
MenuMouseLeave = '__menu_mouse_leave__',
|
|
ItemMouseMove = '__item_mouse_move__',
|
|
ItemClick = '__item_click__',
|
|
ToggleButtonClick = '__togglebutton_click__',
|
|
FunctionToggleMenu = '__function_toggle_menu__',
|
|
FunctionOpenMenu = '__function_open_menu__',
|
|
FunctionCloseMenu = '__function_close_menu__',
|
|
FunctionSetHighlightedIndex = '__function_set_highlighted_index__',
|
|
FunctionSelectItem = '__function_select_item__',
|
|
FunctionSetInputValue = '__function_set_input_value__',
|
|
FunctionReset = '__function_reset__',
|
|
ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__',
|
|
}
|
|
|
|
export interface UseComboboxProps<Item> {
|
|
items: Item[]
|
|
itemToString?: (item: Item | null) => string
|
|
getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
|
|
getA11ySelectionMessage?: (options: A11yStatusMessageOptions<Item>) => string
|
|
circularNavigation?: boolean
|
|
highlightedIndex?: number
|
|
initialHighlightedIndex?: number
|
|
defaultHighlightedIndex?: number
|
|
isOpen?: boolean
|
|
initialIsOpen?: boolean
|
|
defaultIsOpen?: boolean
|
|
selectedItem?: Item | null
|
|
initialSelectedItem?: Item | null
|
|
defaultSelectedItem?: Item | null
|
|
inputValue?: string
|
|
initialInputValue?: string
|
|
defaultInputValue?: string
|
|
id?: string
|
|
labelId?: string
|
|
menuId?: string
|
|
toggleButtonId?: string
|
|
inputId?: string
|
|
getItemId?: (index: number) => string
|
|
scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
|
|
stateReducer?: (
|
|
state: UseComboboxState<Item>,
|
|
actionAndChanges: UseComboboxStateChangeOptions<Item>,
|
|
) => Partial<UseComboboxState<Item>>
|
|
onSelectedItemChange?: (changes: UseComboboxStateChange<Item>) => void
|
|
onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void
|
|
onHighlightedIndexChange?: (changes: UseComboboxStateChange<Item>) => void
|
|
onStateChange?: (changes: UseComboboxStateChange<Item>) => void
|
|
onInputValueChange?: (changes: UseComboboxStateChange<Item>) => void
|
|
environment?: Environment
|
|
}
|
|
|
|
export interface UseComboboxStateChangeOptions<Item>
|
|
extends UseComboboxDispatchAction<Item> {
|
|
changes: Partial<UseComboboxState<Item>>
|
|
}
|
|
|
|
export interface UseComboboxDispatchAction<Item> {
|
|
type: UseComboboxStateChangeTypes
|
|
shiftKey?: boolean
|
|
getItemNodeFromIndex?: (index: number) => HTMLElement
|
|
inputValue?: string
|
|
index?: number
|
|
highlightedIndex?: number
|
|
selectedItem?: Item | null
|
|
selectItem?: boolean
|
|
}
|
|
|
|
export interface UseComboboxStateChange<Item>
|
|
extends Partial<UseComboboxState<Item>> {
|
|
type: UseComboboxStateChangeTypes
|
|
}
|
|
|
|
export interface UseComboboxGetMenuPropsOptions
|
|
extends GetPropsWithRefKey,
|
|
GetMenuPropsOptions {}
|
|
|
|
export interface UseComboboxGetToggleButtonPropsOptions
|
|
extends GetPropsWithRefKey,
|
|
GetToggleButtonPropsOptions {}
|
|
|
|
export interface UseComboboxGetLabelPropsOptions extends GetLabelPropsOptions {}
|
|
|
|
export interface UseComboboxGetItemPropsOptions<Item>
|
|
extends GetItemPropsOptions<Item>,
|
|
GetPropsWithRefKey {}
|
|
|
|
export interface UseComboboxGetInputPropsOptions
|
|
extends GetInputPropsOptions,
|
|
GetPropsWithRefKey {}
|
|
|
|
export interface UseComboboxGetComboboxPropsOptions
|
|
extends React.HTMLProps<HTMLDivElement> {}
|
|
|
|
export interface UseComboboxPropGetters<Item> {
|
|
getToggleButtonProps: (
|
|
options?: UseComboboxGetToggleButtonPropsOptions,
|
|
) => any
|
|
getLabelProps: (options?: UseComboboxGetLabelPropsOptions) => any
|
|
getMenuProps: (
|
|
options?: UseComboboxGetMenuPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getItemProps: (options: UseComboboxGetItemPropsOptions<Item>) => any
|
|
getInputProps: (
|
|
options?: UseComboboxGetInputPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getComboboxProps: (
|
|
options?: UseComboboxGetComboboxPropsOptions,
|
|
otherOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
}
|
|
|
|
export interface UseComboboxActions<Item> {
|
|
reset: () => void
|
|
openMenu: () => void
|
|
closeMenu: () => void
|
|
toggleMenu: () => void
|
|
selectItem: (item: Item) => void
|
|
setHighlightedIndex: (index: number) => void
|
|
setInputValue: (inputValue: string) => void
|
|
}
|
|
|
|
export type UseComboboxReturnValue<Item> = UseComboboxState<Item> &
|
|
UseComboboxPropGetters<Item> &
|
|
UseComboboxActions<Item>
|
|
|
|
export interface UseComboboxInterface {
|
|
<Item>(props: UseComboboxProps<Item>): UseComboboxReturnValue<Item>
|
|
stateChangeTypes: {
|
|
InputKeyDownArrowDown: UseComboboxStateChangeTypes.InputKeyDownArrowDown
|
|
InputKeyDownArrowUp: UseComboboxStateChangeTypes.InputKeyDownArrowUp
|
|
InputKeyDownEscape: UseComboboxStateChangeTypes.InputKeyDownEscape
|
|
InputKeyDownHome: UseComboboxStateChangeTypes.InputKeyDownHome
|
|
InputKeyDownEnd: UseComboboxStateChangeTypes.InputKeyDownEnd
|
|
InputKeyDownEnter: UseComboboxStateChangeTypes.InputKeyDownEnter
|
|
InputChange: UseComboboxStateChangeTypes.InputChange
|
|
InputBlur: UseComboboxStateChangeTypes.InputBlur
|
|
MenuMouseLeave: UseComboboxStateChangeTypes.MenuMouseLeave
|
|
ItemMouseMove: UseComboboxStateChangeTypes.ItemMouseMove
|
|
ItemClick: UseComboboxStateChangeTypes.ItemClick
|
|
ToggleButtonClick: UseComboboxStateChangeTypes.ToggleButtonClick
|
|
FunctionToggleMenu: UseComboboxStateChangeTypes.FunctionToggleMenu
|
|
FunctionOpenMenu: UseComboboxStateChangeTypes.FunctionOpenMenu
|
|
FunctionCloseMenu: UseComboboxStateChangeTypes.FunctionCloseMenu
|
|
FunctionSetHighlightedIndex: UseComboboxStateChangeTypes.FunctionSetHighlightedIndex
|
|
FunctionSelectItem: UseComboboxStateChangeTypes.FunctionSelectItem
|
|
FunctionSetInputValue: UseComboboxStateChangeTypes.FunctionSetInputValue
|
|
FunctionReset: UseComboboxStateChangeTypes.FunctionReset
|
|
ControlledPropUpdatedSelectedItem: UseComboboxStateChangeTypes.ControlledPropUpdatedSelectedItem
|
|
}
|
|
}
|
|
|
|
export const useCombobox: UseComboboxInterface
|
|
|
|
// useMultipleSelection types.
|
|
|
|
export interface UseMultipleSelectionState<Item> {
|
|
selectedItems: Item[]
|
|
activeIndex: number
|
|
}
|
|
|
|
export enum UseMultipleSelectionStateChangeTypes {
|
|
SelectedItemClick = '__selected_item_click__',
|
|
SelectedItemKeyDownDelete = '__selected_item_keydown_delete__',
|
|
SelectedItemKeyDownBackspace = '__selected_item_keydown_backspace__',
|
|
SelectedItemKeyDownNavigationNext = '__selected_item_keydown_navigation_next__',
|
|
SelectedItemKeyDownNavigationPrevious = '__selected_item_keydown_navigation_previous__',
|
|
DropdownKeyDownNavigationPrevious = '__dropdown_keydown_navigation_previous__',
|
|
DropdownKeyDownBackspace = '__dropdown_keydown_backspace__',
|
|
DropdownClick = '__dropdown_click__',
|
|
FunctionAddSelectedItem = '__function_add_selected_item__',
|
|
FunctionRemoveSelectedItem = '__function_remove_selected_item__',
|
|
FunctionSetSelectedItems = '__function_set_selected_items__',
|
|
FunctionSetActiveIndex = '__function_set_active_index__',
|
|
FunctionReset = '__function_reset__',
|
|
}
|
|
|
|
export interface UseMultipleSelectionProps<Item> {
|
|
selectedItems?: Item[]
|
|
initialSelectedItems?: Item[]
|
|
defaultSelectedItems?: Item[]
|
|
itemToString?: (item: Item) => string
|
|
getA11yRemovalMessage?: (options: A11yRemovalMessage<Item>) => string
|
|
stateReducer?: (
|
|
state: UseMultipleSelectionState<Item>,
|
|
actionAndChanges: UseMultipleSelectionStateChangeOptions<Item>,
|
|
) => Partial<UseMultipleSelectionState<Item>>
|
|
activeIndex?: number
|
|
initialActiveIndex?: number
|
|
defaultActiveIndex?: number
|
|
onActiveIndexChange?: (changes: UseMultipleSelectionStateChange<Item>) => void
|
|
onSelectedItemsChange?: (
|
|
changes: UseMultipleSelectionStateChange<Item>,
|
|
) => void
|
|
onStateChange?: (changes: UseMultipleSelectionStateChange<Item>) => void
|
|
keyNavigationNext?: string
|
|
keyNavigationPrevious?: string
|
|
environment?: Environment
|
|
}
|
|
|
|
export interface UseMultipleSelectionStateChangeOptions<Item>
|
|
extends UseMultipleSelectionDispatchAction<Item> {
|
|
changes: Partial<UseMultipleSelectionState<Item>>
|
|
}
|
|
|
|
export interface UseMultipleSelectionDispatchAction<Item> {
|
|
type: UseMultipleSelectionStateChangeTypes
|
|
index?: number
|
|
selectedItem?: Item | null
|
|
selectedItems?: Item[]
|
|
activeIndex?: number
|
|
}
|
|
|
|
export interface UseMultipleSelectionStateChange<Item>
|
|
extends Partial<UseMultipleSelectionState<Item>> {
|
|
type: UseMultipleSelectionStateChangeTypes
|
|
}
|
|
|
|
export interface A11yRemovalMessage<Item> {
|
|
itemToString: (item: Item) => string
|
|
resultCount: number
|
|
activeSelectedItem: Item
|
|
removedSelectedItem: Item
|
|
activeIndex: number
|
|
}
|
|
|
|
export interface UseMultipleSelectionGetSelectedItemPropsOptions<Item>
|
|
extends React.HTMLProps<HTMLElement>,
|
|
GetPropsWithRefKey {
|
|
index?: number
|
|
selectedItem: Item
|
|
}
|
|
|
|
export interface UseMultipleSelectionComboboxGetDropdownProps
|
|
extends GetInputPropsOptions,
|
|
GetPropsWithRefKey {
|
|
preventKeyAction?: boolean
|
|
}
|
|
|
|
export interface UseMultipleSelectionSelectGetDropdownProps
|
|
extends GetToggleButtonPropsOptions,
|
|
GetPropsWithRefKey {
|
|
preventKeyAction?: boolean
|
|
}
|
|
|
|
export type UseMultipleSelectionGetDropdownProps =
|
|
| UseMultipleSelectionSelectGetDropdownProps
|
|
| UseMultipleSelectionComboboxGetDropdownProps
|
|
|
|
export interface UseMultipleSelectionPropGetters<Item> {
|
|
getDropdownProps: (
|
|
options?: UseMultipleSelectionGetDropdownProps,
|
|
extraOptions?: GetPropsCommonOptions,
|
|
) => any
|
|
getSelectedItemProps: (
|
|
options: UseMultipleSelectionGetSelectedItemPropsOptions<Item>,
|
|
) => any
|
|
}
|
|
|
|
export interface UseMultipleSelectionActions<Item> {
|
|
reset: () => void
|
|
addSelectedItem: (item: Item) => void
|
|
removeSelectedItem: (item: Item) => void
|
|
setSelectedItems: (items: Item[]) => void
|
|
setActiveIndex: (index: number) => void
|
|
}
|
|
|
|
export type UseMultipleSelectionReturnValue<Item> = UseMultipleSelectionState<
|
|
Item
|
|
> &
|
|
UseMultipleSelectionPropGetters<Item> &
|
|
UseMultipleSelectionActions<Item>
|
|
|
|
export interface UseMultipleSelectionInterface {
|
|
<Item>(
|
|
props?: UseMultipleSelectionProps<Item>,
|
|
): UseMultipleSelectionReturnValue<Item>
|
|
stateChangeTypes: {
|
|
SelectedItemClick: UseMultipleSelectionStateChangeTypes.SelectedItemClick
|
|
SelectedItemKeyDownDelete: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownDelete
|
|
SelectedItemKeyDownBackspace: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownBackspace
|
|
SelectedItemKeyDownNavigationNext: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownNavigationNext
|
|
SelectedItemKeyDownNavigationPrevious: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownNavigationPrevious
|
|
DropdownKeyDownNavigationPrevious: UseMultipleSelectionStateChangeTypes.DropdownKeyDownNavigationPrevious
|
|
DropdownKeyDownBackspace: UseMultipleSelectionStateChangeTypes.DropdownKeyDownBackspace
|
|
DropdownClick: UseMultipleSelectionStateChangeTypes.DropdownClick
|
|
FunctionAddSelectedItem: UseMultipleSelectionStateChangeTypes.FunctionAddSelectedItem
|
|
FunctionRemoveSelectedItem: UseMultipleSelectionStateChangeTypes.FunctionRemoveSelectedItem
|
|
FunctionSetSelectedItems: UseMultipleSelectionStateChangeTypes.FunctionSetSelectedItems
|
|
FunctionSetActiveIndex: UseMultipleSelectionStateChangeTypes.FunctionSetActiveIndex
|
|
FunctionReset: UseMultipleSelectionStateChangeTypes.FunctionReset
|
|
}
|
|
}
|
|
|
|
export const useMultipleSelection: UseMultipleSelectionInterface
|