@splunk/react-ui 5.3.0 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,10 +44,10 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.3.0",
-    "@splunk/themes": "^1.2.1",
-    "@splunk/ui-utils": "^1.10.0",
-    "decimal.js-light": "^2.2.3",
+    "@splunk/react-icons": "^5.4.0",
+    "@splunk/themes": "^1.3.0",
+    "@splunk/ui-utils": "^1.11.0",
+    "decimal.js-light": "^2.5.1",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
@@ -60,9 +60,9 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.1.1",
+    "@splunk/docs-gen": "^1.2.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.3.0",
+    "@splunk/react-docs": "^1.4.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -74,12 +74,12 @@
     "@storybook/react-webpack5": "^7.6.20",
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@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/jest": "^30.0.0",
     "@types/lodash": "^4.14.156",
     "@types/node": "^18.16.0",
     "@types/prismjs": "^1.26.3",
@@ -118,8 +118,8 @@
     "fs-readdir-recursive": "^1.0.0",
     "glob": "^7.1.6",
     "http-server": "^14.1.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.1.3",
+    "jest-environment-jsdom": "^30.1.2",
     "jest-image-snapshot": "^5.1.0",
     "jest-junit": "^10.0.0",
     "jest-stare": "^2.4.1",

package/types/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import BreadcrumbsContext from './BreadcrumbsContext';
 import Item from './Item';
 import { ComponentProps } from '../utils/types';
 /** @public */
@@ -27,11 +28,6 @@ interface BreadcrumbsPropsBase {
     onClick?: BreadcrumbsClickHandler;
 }
 type BreadcrumbsProps = ComponentProps<BreadcrumbsPropsBase, 'nav'>;
-type BreadcrumbsContextValue = {
-    onClick?: BreadcrumbsClickHandler;
-    prefix?: string;
-};
-declare const BreadcrumbsContext: React.Context<BreadcrumbsContextValue>;
 declare function Breadcrumbs({ children, elementRef, enableCurrentPage, onClick, ...otherProps }: BreadcrumbsProps): React.JSX.Element;
 declare namespace Breadcrumbs {
     var propTypes: {

package/types/src/Breadcrumbs/BreadcrumbsContext.d.ts

@@ -0,0 +1,7 @@
+import { BreadcrumbsClickHandler } from '@splunk/react-ui/Breadcrumbs';
+export interface BreadcrumbsContext {
+    onClick?: BreadcrumbsClickHandler;
+    prefix?: string;
+}
+export declare const BreadcrumbsContext: import("react").Context<BreadcrumbsContext>;
+export default BreadcrumbsContext;

package/types/src/Breadcrumbs/Item.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BreadcrumbsClickHandler } from './Breadcrumbs';
+import { BreadcrumbsClickHandler } from '@splunk/react-ui/Breadcrumbs';
 import { ComponentProps } from '../utils/types';
 interface ItemPropsBase {
     /**

package/types/src/ButtonSimple/mixin.d.ts

@@ -1,6 +1,6 @@
 import { AnyTheme, Interpolation, InterpolationResult, ThemedProps } from '@splunk/themes';
 declare const buttonVariants: readonly ["primary", "secondary", "destructive", "destructiveSecondary", "subtle", "standalone"];
-type ButtonVariant = typeof buttonVariants[number];
+type ButtonVariant = (typeof buttonVariants)[number];
 type ButtonStyleProps = ThemedProps & Partial<{
     $append: boolean;
     $prepend: boolean;

package/types/src/JSONTree/JSONTreeItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { JSONElement } from '@splunk/react-ui/JSONTree';
 import { TreeItemPropsBase } from '@splunk/react-ui/Tree';
-import { JSONElement } from './JSONTree';
 import { ComponentProps } from '../utils/types';
 export type ExpandLinkRenderer = (params: {
     onToggleExpansion: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>, data?: {

package/types/src/JSONTree/renderTreeItems.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from './JSONTree';
+import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from '@splunk/react-ui/JSONTree';
 type RenderTreeItemsProps = {
     baseId: string;
     defaultOpen?: boolean;

package/types/src/Modal/ModalContext.d.ts

@@ -1,4 +1,4 @@
-import { ModalRequestCloseHandler } from './Modal';
+import { ModalRequestCloseHandler } from '@splunk/react-ui/Modal';
 export interface ModalContext {
     divider?: 'header' | 'footer' | 'both' | 'none';
     titleId?: string;

package/types/src/Multiselect/Compact.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from './Multiselect';
+import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from '@splunk/react-ui/Multiselect';
 import { SelectBaseProps } from '../Select/SelectBase';
 import { ComponentProps } from '../utils/types';
 interface CompactPropsBase {
@@ -196,7 +196,7 @@ declare namespace Compact {
         /** @private */
         virtualization: PropTypes.Requireable<number>;
     };
-    var Option: typeof import("./Option").default;
+    var Option: typeof import("@splunk/react-ui/Multiselect").Option;
     var Divider: typeof import("@splunk/react-ui/Menu").Divider;
     var Heading: typeof import("@splunk/react-ui/Menu").Heading;
 }

package/types/src/Multiselect/Normal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from './Multiselect';
+import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from '@splunk/react-ui/Multiselect';
 import { ComponentProps } from '../utils/types';
 interface NormalPropsBase {
     /**
@@ -165,7 +165,7 @@ declare namespace Normal {
         tabConfirmsNewValue: PropTypes.Requireable<boolean>;
         values: PropTypes.Requireable<any[]>;
     };
-    var Option: typeof import("./Option").default;
+    var Option: typeof import("@splunk/react-ui/Multiselect").Option;
     var Divider: typeof import("@splunk/react-ui/Menu").Divider;
     var Heading: typeof import("@splunk/react-ui/Menu").Heading;
 }

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

@@ -1,4 +1,4 @@
-declare const getDecimalSeparatorByLocale: (locale: string) => "." | ",";
+declare const getDecimalSeparatorByLocale: (locale: string) => "," | ".";
 type LimitValueArgs = {
     val: number;
     min?: number;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopoverPlacement, PopoverPlacementStatus } from './Popover';
+import { PopoverPlacement, PopoverPlacementStatus } from '@splunk/react-ui/Popover';
 interface ExtendedDOMRect extends DOMRect {
     middle: number;
     center: number;

package/types/src/RadioList/Option.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RadioListChangeHandler, RadioListValueTypes } from './RadioList';
+import { RadioListChangeHandler, RadioListValueTypes } from '@splunk/react-ui/RadioList';
 import { ComponentProps } from '../utils/types';
 interface OptionPropsBase {
     children?: React.ReactNode;

package/types/src/RadioList/RadioListContext.d.ts

@@ -1,4 +1,4 @@
-import { RadioListChangeHandler, RadioListValueTypes } from './RadioList';
+import { RadioListChangeHandler, RadioListValueTypes } from '@splunk/react-ui/RadioList';
 export interface RadioListContext {
     disabled?: boolean;
     error?: boolean;

package/types/src/StepBar/StepBar.d.ts

@@ -17,15 +17,18 @@ interface StepBarPropsBase {
      * Setting inline to true makes the Step Bar an inline element. It assumes its minimum width.
      */
     inline?: boolean;
+    /** The flow direction of steps. */
+    orientation?: 'horizontal' | 'vertical';
 }
 type StepBarProps = ComponentProps<StepBarPropsBase, 'ul'>;
-declare function StepBar({ activeStepId, children, elementRef, inline, ...otherProps }: StepBarProps): React.JSX.Element;
+declare function StepBar({ activeStepId, children, elementRef, inline, orientation, ...otherProps }: StepBarProps): React.JSX.Element;
 declare namespace StepBar {
     var propTypes: {
         activeStepId: PropTypes.Validator<any>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
         inline: PropTypes.Requireable<boolean>;
+        orientation: PropTypes.Requireable<string>;
     };
     var Step: typeof import("./Step").default;
 }

package/types/src/StepBar/StepBarContext.d.ts

@@ -2,6 +2,7 @@ export interface StepBarContext {
     activeStepId: number;
     idCounter?: string;
     lastChildIndex?: number;
+    orientation: 'horizontal' | 'vertical';
 }
 export declare const StepBarContext: import("react").Context<StepBarContext>;
 export default StepBarContext;

package/types/src/StepBar/docs/examples/Vertical.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Vertical
+ */
+declare function Vertical(): React.JSX.Element;
+export default Vertical;

package/types/src/Switch/Switch.d.ts

@@ -20,6 +20,11 @@ interface SwitchPropsBase {
      */
     appearance?: 'checkbox' | 'toggle';
     children?: React.ReactNode;
+    /**
+     * The id of the description. When placed in a ControlGroup, this is automatically set to the
+     * ControlGroup's help component.
+     */
+    describedBy?: string;
     disabled?: boolean;
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
@@ -88,11 +93,12 @@ type SwitchProps = ComponentProps<SwitchCheckboxWithSomePropsBase | SwitchNoSome
 /**
  * `Switch` is a basic form control with an on/off state.
  */
-declare function Switch({ appearance, children, disabled, elementRef, error, id, inline, labelledBy, onClick, required, selected, selectedLabel, someSelectedLabel, role, tabIndex, toggleRef, unselectedLabel, value, ...otherProps }: SwitchProps): React.JSX.Element;
+declare function Switch({ appearance, children, describedBy, disabled, elementRef, error, id, inline, labelledBy, onClick, required, selected, selectedLabel, someSelectedLabel, role, tabIndex, toggleRef, unselectedLabel, value, ...otherProps }: SwitchProps): React.JSX.Element;
 declare namespace Switch {
     var propTypes: {
         appearance: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        describedBy: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;

package/types/src/TabBar/Tab.d.ts

@@ -41,7 +41,9 @@ interface TabPropsBase {
      * instead of a <button> tag. */
     to?: string;
     /**
-     * Content to show in a tooltip.
+     * Content to show in a tooltip when the user hovers over or focuses on the Tab.
+     *
+     * Note: The tooltip will override the label for the Tab for screen readers.
      */
     tooltip?: React.ReactNode;
     /**

package/types/src/TabBar/docs/examples/Icons.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 /**
  * @name Icons
+ * @description Icons can be used in tabs to provide additional context.
+ * Use icons sparingly and only when they add value that the text alone cannot communicate.
+ *
+ * Icon only tabs are not recommended. If you do use an icon only tab, a tooltip is required to provide an accessible name to the tab.
  */
 declare function IconsLeft(): React.JSX.Element;
 export default IconsLeft;

package/types/src/TabBar/docs/examples/Tooltips.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 /**
  * @name Tooltips
+ * @description Tooltips must be used when the entire tab label is not visible: e.g. due to truncation.
+ * The tooltip will override the accessible name of the tab.
+ * Tooltips should not be used to add a description or additional information.
  */
 declare function Tooltips(): React.JSX.Element;
 export default Tooltips;

package/types/src/TabLayout/Panel.d.ts

@@ -22,6 +22,8 @@ interface PanelPropsBase {
     panelId: string;
     /**
      * Content to show in a tooltip when the user hovers over or focuses on the tab.
+     *
+     * Note: The tooltip will override the label for the Panel for screen readers.
      */
     tooltip?: React.ReactNode;
     /** Prevents user from clicking the tab. */

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TableRequestMoveColumnHandler } from './Table';
+import { TableRequestMoveColumnHandler } from '@splunk/react-ui/Table';
 import { ComponentProps } from '../utils/types';
 type HeadAutosizeColumnHandler = (event: React.MouseEvent<HTMLHRElement>, data: {
     columnId?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TableRequestMoveRowHandler } from './Table';
+import { TableRequestMoveRowHandler } from '@splunk/react-ui/Table';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type RowActionPrimaryClickHandler = (event: React.MouseEvent, data?: any) => void;

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

@@ -119,6 +119,7 @@ interface TablePropsBase {
     /**
      * An event handler for resize of columns for the current column being resized. The function is passed an event and a data
      * object with `columnId`, `id`, `index`, and `width`.
+     * Every Table.HeadCell must have a width prop when using onRequestResizeColumn. Table with resizableFillLayout supports width of "auto".
      */
     onRequestResizeColumn?: TableRequestResizeColumnHandler;
     /**

package/types/src/Tree/TreeContext.d.ts

@@ -1,5 +1,5 @@
+import { RemoveNodeHandler, SetNodeHandler } from '@splunk/react-ui/Tree';
 import { TreeItemClickHandler, TreeItemKeyDownHandler } from './Item';
-import { RemoveNodeHandler, SetNodeHandler } from './Tree';
 export interface TreeContext {
     defaultIndent?: boolean;
     onItemKeyDown?: TreeItemKeyDownHandler;

package/useControlled.js

@@ -1,67 +1,34 @@
 /******/ (() => {
     // webpackBootstrap
     /******/ "use strict";
-    /******/    var e = {
-        /***/ 5919: 
-        /***/ e => {
-            e.exports = require("lodash/has");
-            /***/        },
-        /***/ 9497: 
-        /***/ e => {
-            e.exports = require("react");
-            /***/
-            /******/        }
-    };
-    /************************************************************************/
-    /******/ // The module cache
-    /******/    var r = {};
-    /******/
-    /******/ // The require function
-    /******/    function t(o) {
-        /******/ // Check if module is in cache
-        /******/ var n = r[o];
-        /******/        if (n !== undefined) {
-            /******/ return n.exports;
-            /******/        }
-        /******/ // Create a new module (and put it into the cache)
-        /******/        var u = r[o] = {
-            /******/ // no module.id needed
-            /******/ // no module.loaded needed
-            /******/ exports: {}
-            /******/        };
-        /******/
-        /******/ // Execute the module function
-        /******/        e[o](u, u.exports, t);
-        /******/
-        /******/ // Return the exports of the module
-        /******/        return u.exports;
-        /******/    }
+    /******/ // The require scope
+    /******/    var e = {};
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ t.n = e => {
-            /******/ var r = e && e.__esModule ? 
-            /******/ () => e["default"]
-            /******/ : () => e
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            t.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ t.d = (e, r) => {
-            /******/ for (var o in r) {
-                /******/ if (t.o(r, o) && !t.o(e, o)) {
-                    /******/ Object.defineProperty(e, o, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var o in t) {
+                /******/ if (e.o(t, o) && !e.o(r, o)) {
+                    /******/ Object.defineProperty(r, o, {
                         enumerable: true,
-                        get: r[o]
+                        get: t[o]
                     });
                     /******/                }
                 /******/            }
@@ -70,14 +37,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ t.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ t.r = e => {
+        /******/ e.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -89,38 +56,36 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var o = {};
-    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-        (() => {
-        // ESM COMPAT FLAG
-        t.r(o);
-        // EXPORTS
-                t.d(o, {
-            default: () => /* reexport */ l,
-            isAllowedType: () => /* reexport */ f,
-            isPrimitive: () => /* reexport */ a
-        });
-        // EXTERNAL MODULE: external "react"
-                var e = t(9497);
-        // CONCATENATED MODULE: external "lodash/isEqual"
-        const r = require("lodash/isEqual");
-        // EXTERNAL MODULE: external "lodash/has"
-                var n = t(5919);
-        var u =  t.n(n);
-        // CONCATENATED MODULE: ./src/useControlled/useControlled.tsx
-        function a(e) {
-            return e === null || e === undefined || typeof e === "boolean" || typeof e === "string" || typeof e === "number";
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ l,
+        isAllowedType: () => /* reexport */ f,
+        isPrimitive: () => /* reexport */ a
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    // CONCATENATED MODULE: external "lodash/isEqual"
+    const o = require("lodash/isEqual");
+    // CONCATENATED MODULE: external "lodash/has"
+    const n = require("lodash/has");
+    var u =  e.n(n);
+    // CONCATENATED MODULE: ./src/useControlled/useControlled.tsx
+    function a(e) {
+        return e === null || e === undefined || typeof e === "boolean" || typeof e === "string" || typeof e === "number";
+    }
+    function f(e) {
+        if (a(e)) {
+            return true;
         }
-        function f(e) {
-            if (a(e)) {
-                return true;
-            }
-            if (Array.isArray(e)) {
-                return e.every(a);
-            }
-            return false;
+        if (Array.isArray(e)) {
+            return e.every(a);
         }
-        /**
+        return false;
+    }
+    /**
  * This is a private component not intended for use outside @splunk/react-ui
  *
  * A hook that accepts a default value (as used in an uncontrolled component)
@@ -129,22 +94,21 @@
  * are not happening.
  *
  * Return the controlled state of the component.
- */        function i(r) {
-            var t = r.componentProps, o = r.componentName, n = o === void 0 ? "this component" : o, a = r.defaultValuePropName, f = a === void 0 ? "defaultValue" : a, i = r.valuePropName, l = i === void 0 ? "value" : i;
-            var s = (0, e.useRef)(u()(t, l));
-            var d = (0, e.useRef)(t[f]);
-            (0, e.useEffect)((function() {
-                if (false) {}
-            }), [ n, t, f, l ]);
-            (0, e.useEffect)((function() {
-                if (false) {}
-                if (false) {}
-                if (false) {}
-            }), [ n, t, f, l ]);
-            return s.current;
-        }
-        /* harmony default export */        const l = i;
-    }) // CONCATENATED MODULE: ./src/useControlled/index.ts
-    ();
-    module.exports = o;
+ */    function i(e) {
+        var r = e.componentProps, o = e.componentName, n = o === void 0 ? "this component" : o, a = e.defaultValuePropName, f = a === void 0 ? "defaultValue" : a, i = e.valuePropName, l = i === void 0 ? "value" : i;
+        var s = (0, t.useRef)(u()(r, l));
+        var d = (0, t.useRef)(r[f]);
+        (0, t.useEffect)((function() {
+            if (false) {}
+        }), [ n, r, f, l ]);
+        (0, t.useEffect)((function() {
+            if (false) {}
+            if (false) {}
+            if (false) {}
+        }), [ n, r, f, l ]);
+        return s.current;
+    }
+    /* harmony default export */    const l = i;
+    // CONCATENATED MODULE: ./src/useControlled/index.ts
+    module.exports = r;
     /******/})();