@splunk/react-ui 5.0.0-rc.1 → 5.0.0

package/TransitionOpen.js

@@ -369,8 +369,11 @@
                 U(true);
             }
         }), [ w, H ]);
-        // equivalent to componentWillUnmount
+        // equivalent to componentDidMount and componentWillUnmount
                 (0, r.useEffect)((function() {
+            // we need to set this to true on every mount because React.StrictMode will call the effect twice
+            // and we need to ensure that allowAnimationUpdates is true while the component is mounted
+            L.current = true;
             return function() {
                 L.current = false;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -26,7 +26,6 @@
     "storybook:build": "yarn sb build",
     "stylelint": "stylelint \"src/**/*.{ts,tsx,js,jsx}\" --config stylelint.config.js",
     "test": "jest",
-    "test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
     "test:watch": "jest --watch",
     "test:cypress": "yarn cypress open --component",
     "test:cypress:ci": "yarn cypress run --component",
@@ -45,9 +44,9 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "5.0.0-rc.1",
-    "@splunk/themes": "1.0.0-rc.1",
-    "@splunk/ui-utils": "^1.8.0",
+    "@splunk/react-icons": "^5.0.0",
+    "@splunk/themes": "^1.0.0",
+    "@splunk/ui-utils": "^1.9.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
@@ -61,9 +60,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-rc.1",
+    "@splunk/docs-gen": "^1.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-rc.1",
+    "@splunk/react-docs": "^1.0.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -75,11 +74,12 @@
     "@storybook/react-webpack5": "^7.6.17",
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^26.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.156",
     "@types/node": "^10.17.26",
     "@types/prismjs": "^1.26.3",
@@ -101,7 +101,7 @@
     "babel-plugin-transform-require-context": "^0.1.1",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
-    "cypress": "^12.17.1",
+    "cypress": "^13.17.0",
     "cypress-real-events": "^1.9.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
@@ -120,7 +120,8 @@
     "fs-readdir-recursive": "^1.0.0",
     "glob": "^7.1.6",
     "http-server": "^14.1.1",
-    "jest": "^26.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-image-snapshot": "^5.1.0",
     "jest-junit": "^10.0.0",
     "jest-stare": "^2.4.1",

package/types/src/Code/Code.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-type CodeSupportedLanguages = 'bash' | 'clike' | 'css' | 'html' | 'json' | 'javascript' | 'js' | 'jsx' | 'typescript' | 'ts' | 'tsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'splunk-spl' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
+type CodeSupportedLanguages = 'bash' | 'clike' | 'css' | 'html' | 'json' | 'javascript' | 'js' | 'jsx' | 'typescript' | 'ts' | 'tsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'splunk-spl' | 'sql' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
 interface CodePropsBase {
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.

package/types/src/ControlGroup/ControlGroup.d.ts

@@ -15,8 +15,7 @@ interface ControlGroupPropsBase {
     /**
      * Highlight the control group as having an error and optionally provide error text.
      * If error text is provided, displays it below the control.
-     * The label will turn red, and the help text will turn red if error text was not provided.
-     * Child components will not turn red.
+     * In addition to passing this prop, set the error prop on child components.
      */
     error?: boolean | string;
     help?: React.ReactNode;

package/types/src/Dropdown/Dropdown.d.ts

@@ -8,12 +8,15 @@ type DropdownChildrenRenderer = (data: {
     maxHeight: number | null;
     maxWidth: number | null;
     placement: DropdownPlacementStatus | null;
+    toggleId?: string;
 }) => React.ReactNode;
 /** @public */
 type DropdownPlacement = 'above' | 'below' | 'left' | 'right' | 'vertical' | 'horizontal';
 /** @public */
 type DropdownPlacementStatus = 'above' | 'below' | 'left' | 'right' | 'misaligned';
 /** @public */
+type DropdownPossibleOpenReason = 'toggleClick' | 'toggleKeydown';
+/** @public */
 type DropdownPossibleCloseReason = 'clickAway' | 'contentClick' | 'escapeKey' | 'offScreen' | 'tabKey' | 'toggleClick';
 /** @public */
 type DropdownRequestCloseHandler = (data: {
@@ -22,7 +25,7 @@ type DropdownRequestCloseHandler = (data: {
 }) => void;
 /** @public */
 type DropdownRequestOpenHandler = (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, data: {
-    reason: 'toggleClick' | 'toggleKeydown';
+    reason: DropdownPossibleOpenReason;
 }) => void;
 /** @public */
 type DropdownToggleElement = React.ReactElement<React.HTMLAttributes<HTMLElement> & {
@@ -147,7 +150,8 @@ declare namespace Dropdown {
         takeFocus: PropTypes.Requireable<boolean>;
         toggle: PropTypes.Validator<PropTypes.ReactElementLike>;
     };
+    var possibleOpenReasons: DropdownPossibleOpenReason[];
     var possibleCloseReasons: DropdownPossibleCloseReason[];
 }
 export default Dropdown;
-export type { DropdownChildrenRenderer, DropdownPlacement, DropdownPlacementStatus, DropdownPossibleCloseReason, DropdownRequestCloseHandler, DropdownRequestOpenHandler, DropdownToggleElement, };
+export type { DropdownChildrenRenderer, DropdownPlacement, DropdownPlacementStatus, DropdownPossibleOpenReason, DropdownPossibleCloseReason, DropdownRequestCloseHandler, DropdownRequestOpenHandler, DropdownToggleElement, };

package/types/src/Number/Number.d.ts

@@ -37,7 +37,7 @@ interface NumberPropsBase {
      */
     elementRef?: React.Ref<HTMLDivElement>;
     /**
-     * Highlight the field as having an error. The border and text will turn red.
+     * Highlight the field as having an error.
      */
     error?: boolean;
     /**

package/types/src/Popover/Popover.d.ts

@@ -9,6 +9,7 @@ type PopoverChildrenRenderer = (data: {
     maxHeight: number | null;
     maxWidth: number | null;
     placement: PopoverPlacementStatus | null;
+    toggleId?: string;
 }) => React.ReactNode;
 /** @public */
 type PopoverPlacement = 'above' | 'below' | 'left' | 'right' | 'vertical' | 'horizontal';
@@ -143,6 +144,11 @@ interface PopoverPropsBase {
      * Disable this for a `Popover` that has shows on hover, such as a tooltip.
      */
     takeFocus?: boolean;
+    /**
+     * Id of the toggle is added to aria-labelledby attribute of inner results menu
+     * @private
+     */
+    toggleId?: string;
 }
 type PopoverProps = ComponentProps<PopoverPropsBase, 'div'>;
 /**
@@ -150,7 +156,7 @@ type PopoverProps = ComponentProps<PopoverPropsBase, 'div'>;
  * this only when the other components don't provide sufficient functionality or control. A controlled
  * `Dropdown` covers use cases where you might consider using `Popover` directly.
  */
-declare function Popover({ align, anchor, animation, animationConfig, appearance, autoCloseWhenOffScreen, canCoverAnchor, children, closeReasons, defaultPlacement, elementRef, hideArrow, hitAreaRef, id, onRequestClose, open, outerRef, pointTo, repositionMode, retainFocus, takeFocus, ...otherProps }: PopoverProps): React.JSX.Element;
+declare function Popover({ align, anchor, animation, animationConfig, appearance, autoCloseWhenOffScreen, canCoverAnchor, children, closeReasons, defaultPlacement, elementRef, hideArrow, hitAreaRef, id, onRequestClose, open, outerRef, pointTo, repositionMode, retainFocus, takeFocus, toggleId, ...otherProps }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -179,6 +185,7 @@ declare namespace Popover {
         takeFocus: PropTypes.Requireable<boolean>;
         splunkTheme: PropTypes.Requireable<object>;
     };
+    var possibleCloseReasons: PopoverPossibleCloseReason[];
 }
 export default Popover;
 export type { PopoverChildrenRenderer, PopoverPlacement, PopoverPlacementStatus, PopoverPossibleCloseReason, PopoverRequestCloseHandler, };

package/types/src/ResultsMenu/ResultsMenu.d.ts

@@ -36,6 +36,7 @@ interface ResultsMenuPropsBase {
      * children, so therefore it may be necessary to scroll to see the animation.
      */
     isLoading?: boolean;
+    labelledBy?: string;
     loadingMessage?: React.ReactNode;
     menuId?: string;
     noOptionsMessage?: React.ReactNode;
@@ -66,7 +67,7 @@ declare const propTypes: {
     placement: PropTypes.Requireable<string>;
 };
 type ResultsMenuProps = ComponentProps<ResultsMenuPropsBase, 'div'>;
-declare function ResultsMenu({ animateLoading, 'aria-multiselectable': ariaMultiselectable, children, childrenStart, elementRef, focusMode, footerMessage, isLoading, loadingMessage, menuId, noOptionsMessage, onScroll, onScrollBottom, placement, style, tabIndex, ...otherProps }: ResultsMenuProps): React.JSX.Element;
+declare function ResultsMenu({ animateLoading, 'aria-multiselectable': ariaMultiselectable, children, childrenStart, elementRef, focusMode, footerMessage, isLoading, labelledBy, loadingMessage, menuId, noOptionsMessage, onScroll, onScrollBottom, placement, style, tabIndex, ...otherProps }: ResultsMenuProps): React.JSX.Element;
 declare namespace ResultsMenu {
     var propTypes: {
         animateLoading: PropTypes.Requireable<boolean>;

package/types/src/Table/HeadCell.d.ts

@@ -75,6 +75,10 @@ interface HeadCellPropsBase {
      * The `sortKey` is passed in the data object to the `onSort` callback, if provided.
      */
     sortKey?: string;
+    /**
+     * Content to show in a tooltip.
+     */
+    tooltip?: React.ReactNode;
     /**
      * Truncate the text in the label. `truncate=false` is not compatible with `Table`'s
      * `onRequestResize`.
@@ -94,7 +98,7 @@ interface HeadCellPropsBase {
     variant?: 'toggleAll' | 'info' | 'actions';
 }
 type HeadCellProps = ComponentProps<HeadCellPropsBase, 'th'>;
-declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
+declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, tooltip, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
 declare namespace HeadCell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -124,6 +128,7 @@ declare namespace HeadCell {
         resizable: PropTypes.Requireable<boolean>;
         sortDir: PropTypes.Requireable<string>;
         sortKey: PropTypes.Requireable<string>;
+        tooltip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         truncate: PropTypes.Requireable<boolean>;
         /** @private. */
         variant: PropTypes.Requireable<string>;

package/types/src/Table/HeadInner.d.ts

@@ -10,6 +10,7 @@ interface HeadInnerPropsBase {
     columnId?: string;
     elementRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     focusWithin?: boolean;
+    hasTooltip?: boolean;
     id?: string;
     index?: number;
     isMenu?: boolean;
@@ -23,7 +24,7 @@ interface HeadInnerPropsBase {
     variant?: 'toggleAll' | 'info' | 'actions';
 }
 type HeadInnerProps = ComponentProps<HeadInnerPropsBase, 'div'>;
-declare function HeadInner({ align, clickable, columnId, elementRef, focusWithin, id, index, isMenu, label, onAutosizeColumn, onRequestResize, resizable, sortDir, truncate, variant, width: widthProp, ...otherProps }: HeadInnerProps): React.JSX.Element;
+declare function HeadInner({ align, clickable, columnId, elementRef, focusWithin, hasTooltip, id, index, isMenu, label, onAutosizeColumn, onRequestResize, resizable, sortDir, truncate, variant, width: widthProp, ...otherProps }: HeadInnerProps): React.JSX.Element;
 declare namespace HeadInner {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -31,6 +32,7 @@ declare namespace HeadInner {
         columnId: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         focusWithin: PropTypes.Requireable<boolean>;
+        hasTooltip: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
         index: PropTypes.Requireable<number>;
         isMenu: PropTypes.Requireable<boolean>;

package/types/src/Tooltip/Tooltip.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PopoverPossibleCloseReason } from '@splunk/react-ui/Popover';
 import { ComponentProps } from '../utils/types';
 /** @public */
-type openReasons = 'focusToggle' | 'mouseEnterPopover' | 'mouseEnterToggle' | 'mouseEnterHitArea';
+type TooltipPossibleOpenReason = 'focusToggle' | 'mouseEnterPopover' | 'mouseEnterToggle' | 'mouseEnterHitArea';
 /** @public */
-type closeReasons = 'blurToggle' | 'clickAway' | 'escapeKey' | 'mouseLeaveHitArea' | 'mouseLeavePopover' | 'mouseLeaveToggle' | 'mouseStopHitArea' | 'offScreen' | 'tabKey' | 'toggleClick';
+type TooltipPossibleCloseReason = 'blurToggle' | 'clickAway' | 'escapeKey' | 'mouseLeaveHitArea' | 'mouseLeavePopover' | 'mouseLeaveToggle' | 'mouseStopHitArea' | 'offScreen' | 'tabKey' | 'toggleClick';
 /** @public */
 type TooltipRequestCloseHandler = (event: React.FocusEvent<HTMLSpanElement> | React.MouseEvent | MouseEvent | null, data: {
-    reason: closeReasons;
+    reason: TooltipPossibleCloseReason;
 }) => void;
 /** @public */
 type TooltipRequestOpenHandler = (event: React.FocusEvent<HTMLSpanElement> | MouseEvent, data: {
-    reason: openReasons;
+    reason: TooltipPossibleOpenReason;
 }) => void;
 interface AnchorProps {
     onFocus: React.FocusEventHandler<HTMLElement>;
@@ -117,7 +116,6 @@ interface TooltipPropsBase {
      */
     renderAnchor?: (props: AnchorProps) => React.ReactNode;
 }
-declare const closeReasons: PopoverPossibleCloseReason[];
 type TooltipProps = ComponentProps<TooltipPropsBase, 'span'>;
 /**
  * The Tooltip component wraps arbitrary content to be displayed when the target element is hovered
@@ -143,7 +141,9 @@ declare namespace Tooltip {
         openDelay: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         renderAnchor: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    var possibleOpenReasons: TooltipPossibleOpenReason[];
+    var possibleCloseReasons: TooltipPossibleCloseReason[];
 }
 export default Tooltip;
 export { TooltipRequestCloseHandler, TooltipRequestOpenHandler };
-export type { TooltipPropsBase };
+export type { AnchorProps, TooltipPropsBase, TooltipPossibleOpenReason, TooltipPossibleCloseReason, };

package/types/src/fixtures/useFetchOptions.d.ts

@@ -0,0 +1,33 @@
+import 'core-js/es/promise';
+type Movie = {
+    id: number;
+    title: string;
+};
+type MovieOption = Movie & {
+    matchRanges?: {
+        start: number;
+        end: number;
+    }[];
+};
+declare function isMovieOption(movie: Movie | MovieOption): movie is MovieOption;
+interface FetchOptionsParams {
+    fetchTimeout?: number;
+    fetchMoreTimeout?: number;
+    numberOfResults?: number;
+}
+/**
+ * @param fetchTimeout: number - The number of milliseconds to defer fetching of options.
+ * @param fetchMoreTimeout: number - The number of milliseconds to defer fetching additional options.
+ * @param numberOfResults: number - Then number of options to retrieve per fetch.
+ */
+export default function useFetchOptions({ fetchTimeout, fetchMoreTimeout, numberOfResults, }?: FetchOptionsParams): {
+    fetch: (filter?: string, timeout?: number) => Promise<MovieOption[]>;
+    fetchMore: (opts?: MovieOption[]) => Promise<MovieOption[]>;
+    reset: () => void;
+    stop: () => void;
+    getOption: (value: number) => Movie | undefined;
+    getSelectedOptions: (values: number[]) => Movie[];
+    getCurrentCount: () => number;
+    getFullCount: () => number;
+};
+export { isMovieOption, Movie, MovieOption };