@splunk/react-ui 4.28.1 → 4.29.0

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"
@@ -77,16 +77,16 @@
     const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
     const c = require("styled-components");
-    var m =  e.n(c);
+    var f =  e.n(c);
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinnerStyles.ts
-    var p = m().div.withConfig({
+    var m = f().div.withConfig({
         displayName: "WaitSpinnerStyles__Styled",
         componentId: "sc-1nu971z-0"
     })([ "", ";align-items:center;" ], o.mixins.reset("inline-flex"));
-    var f = (0, c.keyframes)([ "100%{transform:rotate(360deg);}" ]);
+    var p = (0, c.keyframes)([ "100%{transform:rotate(360deg);}" ]);
     var d = (0, c.keyframes)([ "0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}" ]);
     var u = "2.07s";
-    var y = m().svg.withConfig({
+    var y = f().svg.withConfig({
         displayName: "WaitSpinnerStyles__StyledSvg",
         componentId: "sc-1nu971z-1"
     })([ "", " ", "" ], (0, o.pickVariant)("$size", {
@@ -105,20 +105,20 @@
     }), (function(e) {
         var t = e.$animated;
         return t && (0, o.pick)({
-            enterprise: (0, c.css)([ "transform-origin:center;animation:", " 1.2s steps(64) infinite;" ], f),
-            prisma: (0, c.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], f, u, d)
+            enterprise: (0, c.css)([ "transform-origin:center;animation:", " 1.2s steps(64) infinite;" ], p),
+            prisma: (0, c.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], p, u, d)
         });
     }));
     var h = (0, c.keyframes)([ "0%{stroke-dasharray:110 10;stroke-dashoffset:-5.5;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:26 94;stroke-dashoffset:-152;}100%{stroke-dasharray:110 10;stroke-dashoffset:-246.5;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
     var v = (0, c.keyframes)([ "0%{stroke-dasharray:7 113;stroke-dashoffset:3;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:90 30;stroke-dashoffset:-60;}100%{stroke-dasharray:7 113;stroke-dashoffset:-238;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
-    var g = m().circle.withConfig({
+    var g = f().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledPrismaBasePath",
         componentId: "sc-1nu971z-2"
     })([ "stroke:", ";stroke-width:2;fill:transparent;", " stroke-dasharray:110 10;stroke-dashoffset:-5.5;" ], o.variables.contentColorDisabled, (function(e) {
         var t = e.$animated;
         return t && (0, c.css)([ "animation:", " ", " infinite;animation-fill-mode:backwards;" ], h, u);
     }));
-    var k = m().circle.withConfig({
+    var k = f().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledPrismaFillPath",
         componentId: "sc-1nu971z-3"
     })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], (0, 
@@ -130,7 +130,7 @@
         var t = e.$animated;
         return t && (0, c.css)([ "animation:", " ", " infinite;" ], v, u);
     }));
-    var b = m().circle.withConfig({
+    var b = f().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledEnterpriseCircle",
         componentId: "sc-1nu971z-4"
     })([ "fill:transparent;stroke:", ";stroke-width:2px;", "" ], (0, o.pick)({
@@ -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,46 +176,47 @@
         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, f = x(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
-                var f = (0, s.useAnimationToggle)() === "on";
+                if (false) {}
+        var p = (0, s.useAnimationToggle)() === "on";
         var d = (0, o.useSplunkTheme)(), u = d.isPrisma;
         var h = u ? "0 0 40 40" : "0 0 19 19";
         
-        return i().createElement(p, w({
+        return i().createElement(m, w({
             "data-test": "wait-spinner"
-        }, m),  i().createElement(y, {
+        }, f),  i().createElement(y, {
             viewBox: h,
             version: "1.1",
             xmlns: "http://www.w3.org/2000/svg",
             ref: t,
-            $animated: f,
+            $animated: p,
             $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",
-            $animated: f,
+            $animated: p,
             $size: c
         }),  i().createElement(k, {
             r: "19",
             cx: "20",
             cy: "20",
-            $animated: f,
+            $animated: p,
             $size: c
         })) :  i().createElement(b, {
             cx: "9.5",
@@ -223,8 +224,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.1",
+  "version": "4.29.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -42,7 +42,7 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@splunk/react-icons": "^4.3.0",
+    "@splunk/react-icons": "^4.4.0",
     "@splunk/themes": "^0.17.0",
     "@splunk/ui-utils": "^1.6.0",
     "commonmark": "^0.30.0",

package/types/src/Chip/docs/examples/RemovableWithNonStringChildren.d.ts

@@ -0,0 +1,2 @@
+declare const RemovableWithNonStringChildren: () => JSX.Element;
+export default RemovableWithNonStringChildren;

package/types/src/Markdown/Markdown.d.ts

@@ -76,7 +76,7 @@ interface MarkdownPropsBase {
     codeRenderer?: CodeRenderer;
     /**
      * A custom code block renderer. The function is passed an object containing `language`,
-     * `literal`, and `nodeKey`.
+     * `literal`, and `nodeKey`. It supports the same languages as used in the `Code` component.
      */
     codeBlockRenderer?: CodeBlockRenderer;
     /**

package/types/src/MessageBar/docs/examples/Basic.d.ts

@@ -0,0 +1,2 @@
+declare function Basic(): JSX.Element;
+export default Basic;

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/Paginator/Button.d.ts

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
-import { ClassComponentProps } from '../utils/types';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
 declare type PaginatorButtonClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
     page?: number;
 }) => void;
@@ -16,13 +17,17 @@ interface PaginatorButtonPropsBase {
     /** @private */
     selected?: boolean;
 }
-declare const defaultProps: Required<Pick<PaginatorButtonPropsBase, 'selected'>>;
-declare type PaginatorButtonProps = ClassComponentProps<PaginatorButtonPropsBase, typeof defaultProps, 'button'>;
-declare class PaginatorButton extends Component<PaginatorButtonProps, {}> {
-    static propTypes: React.WeakValidationMap<ClassComponentProps<PaginatorButtonPropsBase, Required<Pick<PaginatorButtonPropsBase, "selected">>, "button", never>>;
-    static defaultProps: Required<Pick<PaginatorButtonPropsBase, "selected">>;
-    handleClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
+declare type PaginatorButtonProps = ComponentProps<PaginatorButtonPropsBase, 'button'>;
+declare function PaginatorButton({ children, disabled, onClick, page, selected, ...otherProps }: PaginatorButtonProps): JSX.Element;
+declare namespace PaginatorButton {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<string | boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        page: PropTypes.Requireable<number>;
+        /** @private */
+        selected: PropTypes.Requireable<boolean>;
+    };
 }
 export default PaginatorButton;
 export { PaginatorButtonClickHandler };

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 interface WaitSpinnerPropsBase {
+    /** @deprecated This prop is deprecated and will be removed in the next major version. */
     children?: never;
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
@@ -9,7 +10,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`.