@splunk/react-ui 4.23.0 → 4.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Breadcrumbs.js +99 -124
- package/CHANGELOG.md +11 -0
- package/ComboBox.js +49 -37
- package/JSONTree.js +210 -177
- package/Menu.js +643 -472
- package/Modal.js +261 -222
- package/Multiselect.js +634 -620
- package/ResultsMenu.js +863 -148
- package/Search.js +3 -1
- package/Select.js +427 -416
- package/TabBar.js +2 -2
- package/Table.js +2 -2
- package/Tree.js +617 -0
- package/package.json +1 -1
- package/types/src/Breadcrumbs/Breadcrumbs.d.ts +7 -1
- package/types/src/Breadcrumbs/Item.d.ts +8 -2
- package/types/src/ComboBox/ComboBox.d.ts +6 -0
- package/types/src/JSONTree/JSONTree.d.ts +2 -1
- package/types/src/Menu/Menu.d.ts +14 -1
- package/types/src/Modal/Modal.d.ts +6 -0
- package/types/src/Multiselect/Compact.d.ts +6 -0
- package/types/src/Multiselect/Multiselect.d.ts +7 -0
- package/types/src/ResultsMenu/ResultsMenu.d.ts +53 -1
- package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedItem.d.ts +9 -0
- package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedResultsMenu.d.ts +33 -0
- package/types/src/ResultsMenu/VirtualizedResultsMenu/groupChildren.d.ts +16 -0
- package/types/src/ResultsMenu/VirtualizedResultsMenu/index.d.ts +3 -0
- package/types/src/ResultsMenu/VirtualizedResultsMenu/injectVirtualizedItem.d.ts +21 -0
- package/types/src/ResultsMenu/index.d.ts +2 -1
- package/types/src/Select/Select.d.ts +2 -0
- package/types/src/Select/SelectBase.d.ts +6 -0
- package/types/src/Tree/Tree.d.ts +24 -0
- package/types/src/Tree/TreeContext.d.ts +13 -0
- package/types/src/Tree/TreeItem.d.ts +31 -0
- package/types/src/Tree/index.d.ts +3 -0
- package/types/src/Tree/treeUtils.d.ts +29 -0
|
@@ -6,12 +6,16 @@ interface ItemPropsBase {
|
|
|
6
6
|
* A React ref which is set to the DOM element when the component mounts and null when it unmounts.
|
|
7
7
|
*/
|
|
8
8
|
elementRef?: React.Ref<HTMLAnchorElement>;
|
|
9
|
+
/**
|
|
10
|
+
* @private. Passed by Breadcrumbs.
|
|
11
|
+
*/
|
|
12
|
+
enableCurrentPage?: boolean;
|
|
9
13
|
/**
|
|
10
14
|
* Adornment at the end of the label.
|
|
11
15
|
*/
|
|
12
16
|
endAdornment?: React.ReactNode;
|
|
13
17
|
/**
|
|
14
|
-
* @private
|
|
18
|
+
* @private. Passed by Breadcrumbs.
|
|
15
19
|
*/
|
|
16
20
|
isCurrent?: boolean;
|
|
17
21
|
/**
|
|
@@ -28,15 +32,17 @@ interface ItemPropsBase {
|
|
|
28
32
|
to: string;
|
|
29
33
|
}
|
|
30
34
|
declare type ItemProps = ComponentProps<ItemPropsBase, 'a'>;
|
|
31
|
-
declare function Item({ endAdornment, isCurrent, label, startAdornment, to, ...otherProps }: ItemProps): JSX.Element;
|
|
35
|
+
declare function Item({ enableCurrentPage, endAdornment, isCurrent, label, startAdornment, to, ...otherProps }: ItemProps): JSX.Element;
|
|
32
36
|
declare namespace Item {
|
|
33
37
|
var propTypes: {
|
|
34
38
|
elementRef: PropTypes.Requireable<object>;
|
|
39
|
+
enableCurrentPage: PropTypes.Requireable<boolean>;
|
|
35
40
|
endAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
36
41
|
isCurrent: PropTypes.Requireable<boolean>;
|
|
37
42
|
label: PropTypes.Validator<string>;
|
|
38
43
|
startAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
39
44
|
to: PropTypes.Validator<string>;
|
|
40
45
|
};
|
|
46
|
+
var defaultProps: Required<Pick<ItemPropsBase, "enableCurrentPage" | "isCurrent">>;
|
|
41
47
|
}
|
|
42
48
|
export default Item;
|
|
@@ -111,6 +111,12 @@ interface ComboBoxPropsBase {
|
|
|
111
111
|
size?: 'small' | 'medium' | 'large';
|
|
112
112
|
/** The value of the input. Only applicable in controlled mode. */
|
|
113
113
|
value?: string;
|
|
114
|
+
/**
|
|
115
|
+
* @private Experimental. Use a virtualized `ResultsMenu` variant which will only render at most
|
|
116
|
+
* `virtualization * 3` options in the DOM at any given time, and will have a type of infinite scroll behavior.
|
|
117
|
+
* @throws if `virtualization` is defined but less than 2
|
|
118
|
+
*/
|
|
119
|
+
virtualization?: number;
|
|
114
120
|
}
|
|
115
121
|
declare const defaultProps: Required<Pick<ComboBoxPropsBase, 'animateLoading' | 'controlledFilter' | 'defaultPlacement' | 'disabled' | 'error' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'placeholder' | 'size'>>;
|
|
116
122
|
interface ComboBoxPropsBaseControlled extends ComboBoxPropsBase {
|
|
@@ -59,7 +59,8 @@ interface JSONTreePropsBase {
|
|
|
59
59
|
overflow?: 'wrap' | 'scroll';
|
|
60
60
|
/**
|
|
61
61
|
* If set to `true`, using `shift + click` or `shift + enter` will expand or collapse all descendant nodes
|
|
62
|
-
* of the tree at once.
|
|
62
|
+
* of the tree at once. A tooltip is added to the expand all / collapse all button to indicate that this feature
|
|
63
|
+
* is enabled.
|
|
63
64
|
*/
|
|
64
65
|
expandChildrenOnShiftKey?: boolean;
|
|
65
66
|
}
|
package/types/src/Menu/Menu.d.ts
CHANGED
|
@@ -4,6 +4,11 @@ import Divider from './Divider';
|
|
|
4
4
|
import Heading from './Heading';
|
|
5
5
|
import Item, { ItemWithoutTheme } from './Item';
|
|
6
6
|
import { ClassComponentProps } from '../utils/types';
|
|
7
|
+
declare type HandlerData = {
|
|
8
|
+
itemRefs: React.RefObject<React.ReactNode>[];
|
|
9
|
+
focusedItemKey: number;
|
|
10
|
+
};
|
|
11
|
+
declare type NavigationKeyPressHandler = (e: React.KeyboardEvent<HTMLDivElement>, data: HandlerData) => [React.RefObject<React.ReactNode> | number, boolean];
|
|
7
12
|
interface MenuPropsBase {
|
|
8
13
|
/**
|
|
9
14
|
* Must be `Menu.Item`, `Menu.Heading`, or `Menu.Divider`.
|
|
@@ -18,6 +23,14 @@ interface MenuPropsBase {
|
|
|
18
23
|
* A React ref which is set to the DOM element when the component mounts and null when it unmounts.
|
|
19
24
|
*/
|
|
20
25
|
elementRef?: React.Ref<HTMLDivElement>;
|
|
26
|
+
/** @private callback to override the default behavior when pressing the Down arrow/cursor key */
|
|
27
|
+
onDownKeyPress?: NavigationKeyPressHandler;
|
|
28
|
+
/** @private callback to override the default behavior when pressing the End key */
|
|
29
|
+
onEndKeyPress?: NavigationKeyPressHandler;
|
|
30
|
+
/** @private callback to override the default behavior when pressing the Home key */
|
|
31
|
+
onHomeKeyPress?: NavigationKeyPressHandler;
|
|
32
|
+
/** @private callback to override the default behavior when pressing the Home key */
|
|
33
|
+
onUpKeyPress?: NavigationKeyPressHandler;
|
|
21
34
|
/**
|
|
22
35
|
* Keeps focus within the `Menu` while navigating by keyboard. Tabbing from the last item
|
|
23
36
|
* returns the user to the first item. If not set, this defaults to `true` unless it's inside a
|
|
@@ -32,7 +45,7 @@ interface MenuPropsBase {
|
|
|
32
45
|
}
|
|
33
46
|
declare const defaultProps: Required<Pick<MenuPropsBase, 'stopScrollPropagation'>>;
|
|
34
47
|
declare type MenuProps = ClassComponentProps<MenuPropsBase, typeof defaultProps, 'div'>;
|
|
35
|
-
declare function Menu({ children, controlledExternally, elementRef, retainFocus: retainFocusProp, stopScrollPropagation, ...otherProps }: MenuProps): JSX.Element;
|
|
48
|
+
declare function Menu({ children, controlledExternally, elementRef, onDownKeyPress, onEndKeyPress, onHomeKeyPress, onUpKeyPress, retainFocus: retainFocusProp, stopScrollPropagation, ...otherProps }: MenuProps): JSX.Element;
|
|
36
49
|
declare namespace Menu {
|
|
37
50
|
var propTypes: React.WeakValidationMap<ClassComponentProps<MenuPropsBase, Required<Pick<MenuPropsBase, "stopScrollPropagation">>, "div", never>>;
|
|
38
51
|
var defaultProps: Required<Pick<MenuPropsBase, "stopScrollPropagation">>;
|
|
@@ -23,6 +23,10 @@ interface ModalPropsBase {
|
|
|
23
23
|
* Show dividers between header, body and footer.
|
|
24
24
|
*/
|
|
25
25
|
divider?: 'header' | 'footer' | 'both' | 'none';
|
|
26
|
+
/**
|
|
27
|
+
* A React ref which is set to the DOM element when the component mounts and null when it unmounts.
|
|
28
|
+
*/
|
|
29
|
+
elementRef?: React.Ref<HTMLDivElement>;
|
|
26
30
|
/**
|
|
27
31
|
* Allows focus to be set to a component other than the default.
|
|
28
32
|
* Supports `first` (first focusable element in the modal), `container` (focus the modal itself), or a ref.
|
|
@@ -63,6 +67,8 @@ declare class Modal extends Component<ModalProps> {
|
|
|
63
67
|
private handleModalMount;
|
|
64
68
|
private handleModalKeyDown;
|
|
65
69
|
private handleRequestClose;
|
|
70
|
+
private getProviderValue;
|
|
71
|
+
private getModalStyles;
|
|
66
72
|
private renderModal;
|
|
67
73
|
render(): JSX.Element;
|
|
68
74
|
}
|
|
@@ -139,6 +139,12 @@ interface CompactPropsBase {
|
|
|
139
139
|
* toggle.
|
|
140
140
|
*/
|
|
141
141
|
values?: (string | number | boolean)[];
|
|
142
|
+
/**
|
|
143
|
+
* @private Experimental. Use a virtualized `ResultsMenu` variant which will only render at most
|
|
144
|
+
* `virtualization * 3` options in the DOM at any given time, and will have a type of infinite scroll behavior.
|
|
145
|
+
* @throws if `virtualization` is defined but less than 2
|
|
146
|
+
*/
|
|
147
|
+
virtualization?: number;
|
|
142
148
|
/** @private */
|
|
143
149
|
toggle?: SelectBaseProps['toggle'];
|
|
144
150
|
}
|
|
@@ -164,6 +164,13 @@ interface MultiselectPropsBase {
|
|
|
164
164
|
* toggle.
|
|
165
165
|
*/
|
|
166
166
|
values?: (string | number | boolean)[];
|
|
167
|
+
/**
|
|
168
|
+
* @private Experimental. Use a virtualized `ResultsMenu` variant which will only render at most
|
|
169
|
+
* `virtualization * 3` options in the DOM at any given time, and will have a type of infinite scroll behavior.
|
|
170
|
+
* This feature is only available in the `compact` variant
|
|
171
|
+
* @throws if `virtualization` is defined but less than 2
|
|
172
|
+
*/
|
|
173
|
+
virtualization?: number;
|
|
167
174
|
}
|
|
168
175
|
declare const defaultProps: Required<Pick<MultiselectPropsBase, 'allowNewValues' | 'animateLoading' | 'compact' | 'defaultPlacement' | 'disabled' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'noOptionsMessage' | 'placeholder' | 'repositionMode' | 'tabConfirmsNewValue' | 'useClickawayOverlay'>>;
|
|
169
176
|
interface MultiselectPropsBaseControlled extends MultiselectPropsBase {
|
|
@@ -1,21 +1,47 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
2
3
|
import { ClassComponentProps } from '../utils/types';
|
|
3
4
|
declare type ResultsMenuScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | null) => void;
|
|
5
|
+
declare type HandlerData = {
|
|
6
|
+
itemRefs: React.RefObject<React.ReactNode>[];
|
|
7
|
+
focusedItemKey: number;
|
|
8
|
+
};
|
|
9
|
+
declare type NavigationKeyPressHandler = (e: React.KeyboardEvent<HTMLDivElement>, data: HandlerData) => [React.RefObject<React.ReactNode> | number, boolean];
|
|
4
10
|
interface ResultsMenuPropsBase {
|
|
11
|
+
/**
|
|
12
|
+
* Whether or not to show the wait spinner when loading. It's recommended to set this to
|
|
13
|
+
* `true` when loading may take more than one second.
|
|
14
|
+
*/
|
|
5
15
|
animateLoading?: boolean;
|
|
6
16
|
children?: React.ReactNode;
|
|
7
17
|
/**
|
|
8
18
|
* @private If set, the menu will never take focus and the active menu item will not have a focus-like appearance.
|
|
9
19
|
*/
|
|
10
20
|
controlledExternally?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* `childrenStart` are nearest the toggle, so they are not necessarily on top.
|
|
23
|
+
* This is extendable to add `childrenTop`, `childrenEnd`, and `childrenBottom` in the
|
|
24
|
+
* future.
|
|
25
|
+
*/
|
|
11
26
|
childrenStart?: React.ReactNode;
|
|
12
27
|
/**
|
|
13
28
|
* A React ref which is set to the DOM element when the component mounts and null when it unmounts.
|
|
14
29
|
*/
|
|
15
30
|
elementRef?: React.Ref<HTMLDivElement>;
|
|
31
|
+
/**
|
|
32
|
+
* Whether or not to show the loading message and/or wait spinner. It's not recommended to
|
|
33
|
+
* pass old children when loading new children. The loading animation will show below any
|
|
34
|
+
* children, so therefore it may be necessary to scroll to see the animation.
|
|
35
|
+
*/
|
|
16
36
|
isLoading?: boolean;
|
|
17
37
|
loadingMessage?: React.ReactNode;
|
|
18
38
|
noOptionsMessage?: React.ReactNode;
|
|
39
|
+
/** @private callback to override the default behavior when pressing the Down arrow/cursor key */
|
|
40
|
+
onDownKeyPress?: NavigationKeyPressHandler;
|
|
41
|
+
/** @private callback to override the default behavior when pressing the End key */
|
|
42
|
+
onEndKeyPress?: NavigationKeyPressHandler;
|
|
43
|
+
/** @private callback to override the default behavior when pressing the Home key */
|
|
44
|
+
onHomeKeyPress?: NavigationKeyPressHandler;
|
|
19
45
|
onScroll?: React.UIEventHandler<Element>;
|
|
20
46
|
/**
|
|
21
47
|
* A callback function for loading additional list items.
|
|
@@ -25,9 +51,34 @@ interface ResultsMenuPropsBase {
|
|
|
25
51
|
* This should be set this to `null` when all items are loaded.
|
|
26
52
|
*/
|
|
27
53
|
onScrollBottom?: ResultsMenuScrollBottomHandler;
|
|
54
|
+
/** @private callback to override the default behavior when pressing the Home key */
|
|
55
|
+
onUpKeyPress?: NavigationKeyPressHandler;
|
|
28
56
|
placement?: string;
|
|
29
57
|
footerMessage?: React.ReactNode;
|
|
30
58
|
}
|
|
59
|
+
declare const propTypes: {
|
|
60
|
+
animateLoading: PropTypes.Requireable<boolean>;
|
|
61
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
62
|
+
/** @private */
|
|
63
|
+
controlledExternally: PropTypes.Requireable<boolean>;
|
|
64
|
+
childrenStart: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
65
|
+
elementRef: PropTypes.Requireable<object>;
|
|
66
|
+
footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
67
|
+
isLoading: PropTypes.Requireable<boolean>;
|
|
68
|
+
loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
69
|
+
noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
70
|
+
/** @private */
|
|
71
|
+
onDownKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
|
+
/** @private */
|
|
73
|
+
onEndKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
|
|
74
|
+
/** @private */
|
|
75
|
+
onHomeKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
|
|
76
|
+
onScroll: PropTypes.Requireable<(...args: any[]) => any>;
|
|
77
|
+
onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
|
|
78
|
+
/** @private */
|
|
79
|
+
onUpKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
|
|
80
|
+
placement: PropTypes.Requireable<string>;
|
|
81
|
+
};
|
|
31
82
|
declare const defaultProps: Required<Pick<ResultsMenuPropsBase, 'animateLoading' | 'isLoading' | 'loadingMessage' | 'noOptionsMessage'>>;
|
|
32
83
|
declare type ResultsMenuProps = ClassComponentProps<ResultsMenuPropsBase, typeof defaultProps, 'div'>;
|
|
33
84
|
interface ResultsMenuState {
|
|
@@ -58,4 +109,5 @@ declare class ResultsMenu extends Component<ResultsMenuProps, ResultsMenuState>
|
|
|
58
109
|
render(): JSX.Element;
|
|
59
110
|
}
|
|
60
111
|
export default ResultsMenu;
|
|
61
|
-
export {
|
|
112
|
+
export { propTypes };
|
|
113
|
+
export type { NavigationKeyPressHandler, ResultsMenuScrollBottomHandler, ResultsMenuPropsBase };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface VirtualizedItemPropsBase {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
onMount: (element: HTMLElement) => void;
|
|
5
|
+
onUnmount: (element: HTMLElement) => void;
|
|
6
|
+
}
|
|
7
|
+
/** @private Used by `VirtualizedResultsMenu` */
|
|
8
|
+
declare const VirtualizedItem: React.ForwardRefExoticComponent<VirtualizedItemPropsBase & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "slot" | "style" | "title" | "onChange" | "onPause" | "className" | "color" | "id" | "lang" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<unknown>>;
|
|
9
|
+
export { VirtualizedItem };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ResultsMenuPropsBase } from '../ResultsMenu';
|
|
3
|
+
import type { ClassComponentProps } from '../../utils/types';
|
|
4
|
+
interface VirtualizedResultsMenuPropsBase extends Omit<ResultsMenuPropsBase, 'onDownKeyPress' | 'onEndKeyPress' | 'onHomeKeyPress' | 'onUpKeyPress'> {
|
|
5
|
+
virtualization: number;
|
|
6
|
+
}
|
|
7
|
+
declare const defaultProps: Required<Pick<VirtualizedResultsMenuPropsBase, 'virtualization'>>;
|
|
8
|
+
declare type VirtualizedResultsMenuProps = ClassComponentProps<VirtualizedResultsMenuPropsBase, typeof defaultProps, 'div'>;
|
|
9
|
+
/**
|
|
10
|
+
* A wrapper for `ResultsMenu` which virtualizes the `children`. The received `children` array will be split into **"panes"** each with `virtualization` entries
|
|
11
|
+
* and, at any given time, 3 or fewer of these panes will be rendered in the DOM.
|
|
12
|
+
*
|
|
13
|
+
* Given the children `[1, 2, 3, 4, 5, 6, 7, 8, 9]` and `virtualization=4`, then at first only elements `[1, 2, 3, 4, 5, 6, 7, 8]` will be added to the DOM.
|
|
14
|
+
* Once either child `6` or `8` intersect the `Menu` rendered by `ResultsMenu` the next pane of children will also be included and, if needed, the oldest pane
|
|
15
|
+
* will be removed.
|
|
16
|
+
*
|
|
17
|
+
* In effect this means the menu will show the "central" content at pane index _`n`_, a previous-content-buffer comprised of pane index _`n - 1`_,
|
|
18
|
+
* and an upcoming-content-buffer comprised of pane index _`n + 1`_.
|
|
19
|
+
*
|
|
20
|
+
* An `IntersectionObserver` will observe the first node in the _`n - 1`_ pane, the last node in the _`n + 1`_ pane, and the central node in both _`n ± 1`_ panes
|
|
21
|
+
* for intersections with the rendered `Menu` and trigger a *pane change* upon that intersection. As such, in SSR or other environments which don't support `IntersectionObserver`
|
|
22
|
+
* this component should not be used and will be replaced by the barrel file with a vanilla `ResultsMenu`.
|
|
23
|
+
*
|
|
24
|
+
* @throws in `__DEV__` when `virtualization` is too small as compared to the menu height (`virtualization` must be greater than the number of visible items in the rendered menu)
|
|
25
|
+
* @throws in `__DEV__` when `virtualization` is less than or equal to 1 (`virtualization` must be ≥ 2)
|
|
26
|
+
* @throws in `__DEV__` when `virtualization` is changed during the lifecycle of the `VirtualizedResultsMenu` component
|
|
27
|
+
*/
|
|
28
|
+
declare function VirtualizedResultsMenu({ virtualization: virtualizationProp, elementRef: elementRefProp, children, ...props }: VirtualizedResultsMenuProps): JSX.Element;
|
|
29
|
+
declare namespace VirtualizedResultsMenu {
|
|
30
|
+
var propTypes: React.WeakValidationMap<VirtualizedResultsMenuPropsBase>;
|
|
31
|
+
var defaultProps: Required<Pick<VirtualizedResultsMenuPropsBase, "virtualization">>;
|
|
32
|
+
}
|
|
33
|
+
export { VirtualizedResultsMenu };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Given component children, restructure them into an array of arrays, each of length `groupSize`.
|
|
3
|
+
*
|
|
4
|
+
* The last array is not guaranteed to be full, it will have a length in the range `[1, groupSize]`
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```js
|
|
8
|
+
* groupChildren([1, 2, 3, 4, 5, 6, 7], 2);
|
|
9
|
+
* // > [[1, 2], [3, 4], [5, 6], [7]]
|
|
10
|
+
* ```
|
|
11
|
+
* @param {Array} children One node, or an array of nodes, to be divided into groups
|
|
12
|
+
* @param {number} groupSize The size of each group to be created
|
|
13
|
+
* @returns A 2d array where each inner-array is a group of size `groupSize` of children
|
|
14
|
+
* and the order of the `children` received equals the order of the flattened result
|
|
15
|
+
*/
|
|
16
|
+
export declare const groupChildren: (children: React.ReactNode | React.ReactNode[], groupSize: number) => React.ReactNode[][];
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type AdditionalTracking = {
|
|
3
|
+
trackFirstElement?: boolean;
|
|
4
|
+
trackLastElement?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare type ObserveLifecycleFn = (element: HTMLElement | null) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Find the index of an array element which is nearest to targetIndex and is a Menu.Item component
|
|
9
|
+
* @param {Array} elements An array to search
|
|
10
|
+
* @param {Number} targetIndex The target index. This is the ideal value to return.
|
|
11
|
+
* @returns The index in the array of the nearest `Menu.Item` component to `targetIndex`, or -1 if no element is a `Menu.Item` component
|
|
12
|
+
*/
|
|
13
|
+
export declare const findClosestMenuItem: (elements: React.ReactNode[], targetIndex: number) => number;
|
|
14
|
+
/**
|
|
15
|
+
* @private Keep the injection of `VirtualizedItem` DRY. Will always replace the middle-most non-divider/heading
|
|
16
|
+
* with a VirtualizedItem instance.
|
|
17
|
+
* - If `trackFirstElement` the **FIRST** non-divider/heading item will also be replaced.
|
|
18
|
+
* - If `trackLastElement` the **LAST** non-divider/heading item will also be replaced.
|
|
19
|
+
*/
|
|
20
|
+
export declare const injectVirtualizedItem: (elements: React.ReactNode[] | undefined, onMount: ObserveLifecycleFn, onUnmount: ObserveLifecycleFn, { trackFirstElement, trackLastElement }?: AdditionalTracking) => React.ReactNode[];
|
|
21
|
+
export {};
|
|
@@ -175,6 +175,12 @@ interface SelectBasePropsBase {
|
|
|
175
175
|
* toggle.
|
|
176
176
|
*/
|
|
177
177
|
values?: (string | number | boolean)[];
|
|
178
|
+
/**
|
|
179
|
+
* @private Experimental. Use a virtualized `ResultsMenu` variant which will only render at most
|
|
180
|
+
* `virtualization * 3` options in the DOM at any given time, and will have a type of infinite scroll behavior.
|
|
181
|
+
* @throws if `virtualization` is defined but less than 2
|
|
182
|
+
*/
|
|
183
|
+
virtualization?: number;
|
|
178
184
|
/**
|
|
179
185
|
* @private
|
|
180
186
|
*
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { ComponentProps } from '../utils/types';
|
|
4
|
+
import TreeItem from './TreeItem';
|
|
5
|
+
declare type RemoveNodeHandler = (id: string) => void;
|
|
6
|
+
declare type SetNodeHandler = (id: string, path?: string) => void;
|
|
7
|
+
interface TreePropsBase {
|
|
8
|
+
/** Should contain TreeItems, can also include other elements to display in between tree items. */
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
/** Removes default indent from list styles if set to false. */
|
|
11
|
+
defaultIndent?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare type TreeProps = ComponentProps<TreePropsBase, 'ul'>;
|
|
14
|
+
declare function Tree({ children, defaultIndent, ...otherProps }: TreeProps): JSX.Element;
|
|
15
|
+
declare namespace Tree {
|
|
16
|
+
var propTypes: {
|
|
17
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
18
|
+
defaultIndent: PropTypes.Requireable<boolean>;
|
|
19
|
+
};
|
|
20
|
+
var TreeItem: typeof import("./TreeItem").default;
|
|
21
|
+
}
|
|
22
|
+
export default Tree;
|
|
23
|
+
export { TreeItem };
|
|
24
|
+
export { RemoveNodeHandler, SetNodeHandler };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { RemoveNodeHandler, SetNodeHandler } from './Tree';
|
|
3
|
+
import { TreeItemKeyDownHandler } from './TreeItem';
|
|
4
|
+
export interface TreeContext {
|
|
5
|
+
defaultIndent?: boolean;
|
|
6
|
+
onItemKeyDown?: TreeItemKeyDownHandler;
|
|
7
|
+
removeNode?: RemoveNodeHandler;
|
|
8
|
+
setNode?: SetNodeHandler;
|
|
9
|
+
focusedItemId?: string;
|
|
10
|
+
itemPaths?: Map<string, string | undefined>;
|
|
11
|
+
}
|
|
12
|
+
export declare const TreeContext: import("react").Context<TreeContext>;
|
|
13
|
+
export default TreeContext;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { ComponentProps } from '../utils/types';
|
|
4
|
+
declare type OpenCloseHandler = (isOpen: boolean) => void;
|
|
5
|
+
interface TreeItemPropsBase {
|
|
6
|
+
/** A unique `id` for this item and used by `Tree` to keep track of the focused item. */
|
|
7
|
+
id: string;
|
|
8
|
+
/** Should contain `TreeItems`, can also include other elements to display in between tree items. */
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
/** Content to show on the TreeItem. */
|
|
11
|
+
content?: React.ReactNode;
|
|
12
|
+
labelledBy?: string;
|
|
13
|
+
onFocus?: React.FocusEventHandler<HTMLLIElement>;
|
|
14
|
+
/** Default open state of the ndoe. */
|
|
15
|
+
open?: boolean;
|
|
16
|
+
}
|
|
17
|
+
declare type TreeItemProps = ComponentProps<TreeItemPropsBase, 'li'>;
|
|
18
|
+
declare type TreeItemKeyDownHandler = (event: React.KeyboardEvent<HTMLLIElement>, id: string, showChildren: boolean | undefined, childrenCleaned: React.ReactElement[] | undefined | null, handleToggle: OpenCloseHandler) => void;
|
|
19
|
+
declare function TreeItem({ id, children, content, labelledBy, onFocus, ...otherProps }: TreeItemProps): JSX.Element;
|
|
20
|
+
declare namespace TreeItem {
|
|
21
|
+
var propTypes: {
|
|
22
|
+
id: PropTypes.Requireable<string>;
|
|
23
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
24
|
+
content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
25
|
+
labelledBy: PropTypes.Requireable<string>;
|
|
26
|
+
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
27
|
+
open: PropTypes.Requireable<boolean>;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
export default TreeItem;
|
|
31
|
+
export { TreeItemKeyDownHandler };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A helper function to get first key in Map that matches given value
|
|
3
|
+
*/
|
|
4
|
+
export declare function getKeyByValue(map: Map<string, string | undefined>, searchValue: string): string | undefined;
|
|
5
|
+
/**
|
|
6
|
+
* A helper function to get parent path of current item path
|
|
7
|
+
*/
|
|
8
|
+
export declare function getParentPath(currentPath: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* A helper function to get next path of current item path in same level
|
|
11
|
+
*/
|
|
12
|
+
export declare function getNextPathSameLevel(currentPath: string, currentPathEnd: number): string;
|
|
13
|
+
/**
|
|
14
|
+
* A helper function to get the last index number of an item path string
|
|
15
|
+
*/
|
|
16
|
+
export declare function getLastPathIndex(path: string): number;
|
|
17
|
+
export declare function getParentTreeItem(itemPathMap: Map<string, string | undefined>, currentId: string): string;
|
|
18
|
+
/**
|
|
19
|
+
* A helper function for getNextTreeItem
|
|
20
|
+
*/
|
|
21
|
+
export declare function getNextNodeHigherLevel(itemPathMap: Map<string, string | undefined>, currentPath: string): string | undefined;
|
|
22
|
+
export declare function getNextTreeItem(itemPathMap: Map<string, string | undefined>, currentId: string): string;
|
|
23
|
+
/**
|
|
24
|
+
* A helper function for getPrevTreeItem
|
|
25
|
+
*/
|
|
26
|
+
export declare function getLastInNode(itemPathMap: Map<string, string | undefined>, currItemPath: string): string | undefined;
|
|
27
|
+
export declare function getPrevTreeItem(itemPathMap: Map<string, string | undefined>, currentId: string): string;
|
|
28
|
+
export declare function getFirstTreeItem(itemPathMap: Map<string, string | undefined>): string | undefined;
|
|
29
|
+
export declare function getLastTreeItem(itemPathMap: Map<string, string | undefined>, currItemPath?: string): string | undefined;
|