@splunk/react-ui 4.28.0 → 4.28.2

package/WaitSpinner.js

@@ -67,8 +67,8 @@
     const r = require("react");
     var i =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const a = require("prop-types");
-    var n =  e.n(a);
+    const n = require("prop-types");
+    var a =  e.n(n);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const s = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "@splunk/themes"
@@ -160,11 +160,11 @@
     function x(e, t) {
         if (e == null) return {};
         var r = S(e, t);
-        var i, a;
+        var i, n;
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            for (a = 0; a < n.length; a++) {
-                i = n[a];
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                i = a[n];
                 if (t.indexOf(i) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, i)) continue;
                 r[i] = e[i];
@@ -176,21 +176,21 @@
         if (e == null) return {};
         var r = {};
         var i = Object.keys(e);
-        var a, n;
-        for (n = 0; n < i.length; n++) {
-            a = i[n];
-            if (t.indexOf(a) >= 0) continue;
-            r[a] = e[a];
+        var n, a;
+        for (a = 0; a < i.length; a++) {
+            n = i[a];
+            if (t.indexOf(n) >= 0) continue;
+            r[n] = e[n];
         }
         return r;
     }
-    var z = {
-        elementRef: n().oneOfType([ n().func, n().object ]),
-        screenReaderText: n().string,
-        size: n().oneOf([ "small", "medium", "large" ])
+    var O = {
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        screenReaderText: a().oneOfType([ a().string, a().oneOf([ "null" ]) ]),
+        size: a().oneOf([ "small", "medium", "large" ])
     };
-    function O(e) {
-        var t = e.elementRef, r = e.screenReaderText, a = r === void 0 ? (0, l._)("Waiting") : r, n = e.size, c = n === void 0 ? "small" : n, m = x(e, [ "elementRef", "screenReaderText", "size" ]);
+    function z(e) {
+        var t = e.elementRef, r = e.screenReaderText, n = r === void 0 ? (0, l._)("Waiting") : r, a = e.size, c = a === void 0 ? "small" : a, m = x(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
                 var f = (0, s.useAnimationToggle)() === "on";
         var d = (0, o.useSplunkTheme)(), u = d.isPrisma;
@@ -205,7 +205,7 @@
             ref: t,
             $animated: f,
             $size: c
-        }, a &&  i().createElement("title", null, a),  i().createElement("g", null, u ?  i().createElement(i().Fragment, null,  i().createElement(g, {
+        }, n &&  i().createElement("title", null, n),  i().createElement("g", null, u ?  i().createElement(i().Fragment, null,  i().createElement(g, {
             r: "19",
             cx: "20",
             cy: "20",
@@ -223,8 +223,8 @@
             r: "8.5"
         }))));
     }
-    O.propTypes = z;
-    /* harmony default export */    const _ = O;
+    z.propTypes = O;
+    /* harmony default export */    const _ = z;
     // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
     module.exports = t;
     /******/})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.28.0",
+  "version": "4.28.2",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -43,7 +43,7 @@
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
     "@splunk/react-icons": "^4.3.0",
-    "@splunk/themes": "^0.16.4",
+    "@splunk/themes": "^0.17.0",
     "@splunk/ui-utils": "^1.6.0",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",

package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts

@@ -16,6 +16,7 @@ declare type CollapsiblePanelRequestOpenHandler = (data: {
 }) => void;
 /** @public */
 declare type CollapsiblePanelChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+    action: 'open' | 'close';
     panelId?: string | number;
     reason: 'toggleClick';
 }) => void;
@@ -66,9 +67,8 @@ interface CollapsiblePanelPropsBase {
      */
     onRequestOpen?: CollapsiblePanelRequestOpenHandler;
     /**
-     * Invoked on a change of the open panel. Callback is passed data, such as
-     * the `panelId` of the `CollapsiblePanel` that originated the expand request.
-     * `panelId` is `undefined` when the open panel is collapsed.
+     * Invoked on a change of the open panel.
+     * Callback is passed the `panelId` of the `CollapsiblePanel` that originated the expand request and the `action` ("open" or "close")
      */
     onChange?: CollapsiblePanelChangeHandler;
     /**
@@ -102,7 +102,7 @@ interface CollapsiblePanelDeprecatedControlledProps extends CollapsiblePanelProp
     defaultOpen?: never;
     onRequestOpen?: CollapsiblePanelRequestOpenHandler;
     onRequestClose?: CollapsiblePanelRequestCloseHandler;
-    onChange: never;
+    onChange?: never;
     open?: boolean;
 }
 interface CollapsiblePanelControlledProps extends CollapsiblePanelPropsBase {
@@ -133,6 +133,7 @@ declare class CollapsiblePanel extends Component<CollapsiblePanelProps, Collapsi
     constructor(props: Readonly<CollapsiblePanelProps>);
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<CollapsiblePanelProps>): void;
+    private isOpen;
     private handleRequestClose;
     private handleRequestOpen;
     private handleChange;

package/types/src/CollapsiblePanel/SingleOpenPanelGroup.d.ts

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 /** @public */
 declare type SingleOpenPanelGroupChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
-    openPanelId?: string | number | null;
+    action: 'open' | 'close';
+    panelId?: string | number;
     reason: 'toggleClick';
 }) => void;
 interface SingleOpenPanelGroupPropsBase {
@@ -26,9 +27,8 @@ interface SingleOpenPanelGroupPropsBase {
      */
     inset?: boolean;
     /**
-     * Invoked on a change of the open panel. Callback is passed data, such as
-     * the `panelId` of the `CollapsiblePanel` that originated the expand request.
-     * `panelId` is `undefined` when the open panel is collapsed.
+     * Invoked on a change of the open panel.
+     * Callback is passed the `panelId` of the `CollapsiblePanel` that originated the expand request and the `action` ("open" or "close")
      */
     onChange?: SingleOpenPanelGroupChangeHandler;
     /**

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

@@ -19,6 +19,11 @@ interface ModalPropsBase {
      * `Modal.Header`, `Modal.Body`, and `Modal.Footer`.
      */
     children?: React.ReactNode;
+    /**
+     * @private
+     * Set to 'true' to enable closing the Modal by clicking outside of it.
+     */
+    closeOnClickAway?: boolean;
     /**
      * Show dividers between header, body and footer.
      */
@@ -52,7 +57,7 @@ interface ModalPropsBase {
         focus: () => void;
     }) | HTMLElement | null> | (() => void);
 }
-declare const defaultProps: Required<Pick<ModalPropsBase, 'initialFocus' | 'open' | 'divider'>>;
+declare const defaultProps: Required<Pick<ModalPropsBase, 'closeOnClickAway' | 'divider' | 'initialFocus' | 'open'>>;
 declare type ModalProps = ClassComponentProps<ModalPropsBase, typeof defaultProps, 'div'>;
 declare class Modal extends Component<ModalProps> {
     private el;
@@ -60,8 +65,8 @@ declare class Modal extends Component<ModalProps> {
     private initialFocus;
     private headerTitleId;
     private headerSubtitleId;
-    static propTypes: React.WeakValidationMap<ClassComponentProps<ModalPropsBase, Required<Pick<ModalPropsBase, "open" | "divider" | "initialFocus">>, "div", never>>;
-    static defaultProps: Required<Pick<ModalPropsBase, "open" | "divider" | "initialFocus">>;
+    static propTypes: React.WeakValidationMap<ClassComponentProps<ModalPropsBase, Required<Pick<ModalPropsBase, "open" | "divider" | "closeOnClickAway" | "initialFocus">>, "div", never>>;
+    static defaultProps: Required<Pick<ModalPropsBase, "open" | "divider" | "closeOnClickAway" | "initialFocus">>;
     static Header: typeof Header;
     static Body: typeof Body;
     static Footer: typeof Footer;

package/types/src/ModalLayer/ModalLayer.d.ts

@@ -10,6 +10,11 @@ declare type ModalLayerRequestCloseHandler = (data: {
     reason: 'clickAway' | 'escapeKey';
 }) => void;
 interface ModalLayerPropsBase {
+    /**
+     * Indicate whether the animation of the children is still running.
+     * If true, the ModalLayer should not close.
+     */
+    childrenInAnimation?: boolean;
     /**
      * A function that returns a default style object for react-spring. The values will be
      * used as initial values.
@@ -20,32 +25,27 @@ interface ModalLayerPropsBase {
      * will be passed to `renderModal`.
      */
     getMotionStyle?: () => AdditionalInterpolationProperties;
-    /**
-     * Indicate whether the animation of the children is still running.
-     * If true, the ModalLayer should not close.
-     */
-    childrenInAnimation?: boolean;
     /**
      * A function that will be called when a close event occurs.
      * The callback will be passed a reason (either 'escapeKey', 'clickAway') and the event.
      */
     onRequestClose?: ModalLayerRequestCloseHandler;
+    /**
+     * Indicates whether the modal is currently open.
+     */
+    open?: boolean;
     /**
      * Function that renders the modal. It is passed the current style object as interpolated by react-spring,
      * and is expected to return renderable content.
      */
     renderModal: ModalLayerRenderModalHandler;
     /**
-     * Indicates whether to add an overlay mask on the whole page, blocking other interactions
-     * while the Modal is open.
+     * The non-hidden overlay mask covers the entire page, blocks other interactions while the Modal is open.
+     * If set to `interactive`, clicking on the scrim will close the Modal.
      */
-    useLayerForClickAway?: boolean;
-    /**
-     * Indicates whether the modal is currently open.
-     */
-    open?: boolean;
+    scrim?: 'visible' | 'hidden' | 'interactive';
 }
-declare const defaultProps: Required<Pick<ModalLayerPropsBase, 'childrenInAnimation' | 'open' | 'useLayerForClickAway'>>;
+declare const defaultProps: Required<Pick<ModalLayerPropsBase, 'childrenInAnimation' | 'open' | 'scrim'>>;
 declare type ModalLayerProps = ModalLayerPropsBase & typeof defaultProps;
 interface ModalLayerState {
     animating: boolean;
@@ -53,7 +53,7 @@ interface ModalLayerState {
 }
 declare class ModalLayer extends Component<ModalLayerProps, ModalLayerState> {
     static propTypes: React.WeakValidationMap<ModalLayerProps>;
-    static defaultProps: Required<Pick<ModalLayerPropsBase, "open" | "childrenInAnimation" | "useLayerForClickAway">>;
+    static defaultProps: Required<Pick<ModalLayerPropsBase, "open" | "childrenInAnimation" | "scrim">>;
     static getDerivedStateFromProps: React.GetDerivedStateFromProps<ModalLayerProps, ModalLayerState>;
     private allowAnimationUpdates;
     constructor(props: Readonly<ModalLayerProps>);

package/types/src/SidePanel/SidePanel.d.ts

@@ -66,8 +66,8 @@ interface SidePanelState {
     prevOpen: boolean;
 }
 declare class SidePanel extends Component<SidePanelProps, SidePanelState> {
-    static propTypes: React.WeakValidationMap<ClassComponentProps<SidePanelPropsBase, Required<Pick<SidePanelPropsBase, "open" | "useLayerForClickAway" | "dockPosition">>, "div", never>>;
-    static defaultProps: Required<Pick<SidePanelPropsBase, "open" | "useLayerForClickAway" | "dockPosition">>;
+    static propTypes: React.WeakValidationMap<ClassComponentProps<SidePanelPropsBase, Required<Pick<SidePanelPropsBase, "open" | "dockPosition" | "useLayerForClickAway">>, "div", never>>;
+    static defaultProps: Required<Pick<SidePanelPropsBase, "open" | "dockPosition" | "useLayerForClickAway">>;
     static getDerivedStateFromProps: React.GetDerivedStateFromProps<SidePanelProps, SidePanelState>;
     constructor(props: Readonly<SidePanelProps>);
     private handlePanelAnimationEnd;

package/types/src/WaitSpinner/WaitSpinner.d.ts

@@ -9,7 +9,7 @@ interface WaitSpinnerPropsBase {
     elementRef?: React.Ref<SVGSVGElement>;
     /** A string to display to screen readers. Set the prop to `null` or an empty string to hide the
      * spinner from screen readers, such as when there is already a text label beside it. */
-    screenReaderText?: string;
+    screenReaderText?: string | null;
     /**
      * Size of WaitSpinner.
      * `large` is not supported in enterprise themes; falls back to `medium`.