@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.
Files changed (36) hide show
  1. package/Breadcrumbs.js +99 -124
  2. package/CHANGELOG.md +11 -0
  3. package/ComboBox.js +49 -37
  4. package/JSONTree.js +210 -177
  5. package/Menu.js +643 -472
  6. package/Modal.js +261 -222
  7. package/Multiselect.js +634 -620
  8. package/ResultsMenu.js +863 -148
  9. package/Search.js +3 -1
  10. package/Select.js +427 -416
  11. package/TabBar.js +2 -2
  12. package/Table.js +2 -2
  13. package/Tree.js +617 -0
  14. package/package.json +1 -1
  15. package/types/src/Breadcrumbs/Breadcrumbs.d.ts +7 -1
  16. package/types/src/Breadcrumbs/Item.d.ts +8 -2
  17. package/types/src/ComboBox/ComboBox.d.ts +6 -0
  18. package/types/src/JSONTree/JSONTree.d.ts +2 -1
  19. package/types/src/Menu/Menu.d.ts +14 -1
  20. package/types/src/Modal/Modal.d.ts +6 -0
  21. package/types/src/Multiselect/Compact.d.ts +6 -0
  22. package/types/src/Multiselect/Multiselect.d.ts +7 -0
  23. package/types/src/ResultsMenu/ResultsMenu.d.ts +53 -1
  24. package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedItem.d.ts +9 -0
  25. package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedResultsMenu.d.ts +33 -0
  26. package/types/src/ResultsMenu/VirtualizedResultsMenu/groupChildren.d.ts +16 -0
  27. package/types/src/ResultsMenu/VirtualizedResultsMenu/index.d.ts +3 -0
  28. package/types/src/ResultsMenu/VirtualizedResultsMenu/injectVirtualizedItem.d.ts +21 -0
  29. package/types/src/ResultsMenu/index.d.ts +2 -1
  30. package/types/src/Select/Select.d.ts +2 -0
  31. package/types/src/Select/SelectBase.d.ts +6 -0
  32. package/types/src/Tree/Tree.d.ts +24 -0
  33. package/types/src/Tree/TreeContext.d.ts +13 -0
  34. package/types/src/Tree/TreeItem.d.ts +31 -0
  35. package/types/src/Tree/index.d.ts +3 -0
  36. 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
  }
@@ -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 { ResultsMenuScrollBottomHandler };
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,3 @@
1
+ import { VirtualizedResultsMenu } from './VirtualizedResultsMenu';
2
+ declare const _default: typeof VirtualizedResultsMenu;
3
+ export default _default;
@@ -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 {};
@@ -1,2 +1,3 @@
1
1
  export { default } from './ResultsMenu';
2
- export * from './ResultsMenu';
2
+ export { default as VirtualizedResultsMenu } from './VirtualizedResultsMenu';
3
+ export type { ResultsMenuScrollBottomHandler } from './ResultsMenu';
@@ -161,6 +161,8 @@ interface SelectPropsBase {
161
161
  * toggle.
162
162
  */
163
163
  value?: string | number | boolean;
164
+ /** @private. */
165
+ virtualization?: number;
164
166
  /** @private */
165
167
  toggle?: SelectBaseProps['toggle'];
166
168
  }
@@ -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,3 @@
1
+ export { default } from './Tree';
2
+ export * from './Tree';
3
+ export * from './TreeItem';
@@ -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;