@splunk/react-ui 4.37.0 → 4.39.0

package/Typography.js

@@ -61,15 +61,15 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Typography: () => /* reexport */ v,
-        default: () => /* reexport */ g
+        Typography: () => /* reexport */ g,
+        default: () => /* reexport */ m
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/themes/mixins"
     const i = require("@splunk/themes/mixins");
     var l =  e.n(i);
@@ -77,58 +77,54 @@
     const s = require("styled-components");
     var p =  e.n(s);
     // CONCATENATED MODULE: ./src/Typography/Typography.tsx
-    function y() {
-        y = Object.assign || function(e) {
+    function u() {
+        return u = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, n)) {
-                        e[n] = t[n];
-                    }
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        };
-        return y.apply(this, arguments);
+        }, u.apply(null, arguments);
     }
-    function f(e, r) {
-        if (e == null) return {};
-        var t = u(e, r);
-        var n, o;
+    function y(e, r) {
+        if (null == e) return {};
+        var t, n, a = f(e, r);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < a.length; o++) {
-                n = a[o];
-                if (r.indexOf(n) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                t[n] = e[n];
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
-        return t;
+        return a;
     }
-    function u(e, r) {
-        if (e == null) return {};
+    function f(e, r) {
+        if (null == e) return {};
         var t = {};
-        var n = Object.keys(e);
-        var o, a;
-        for (a = 0; a < n.length; a++) {
-            o = n[a];
-            if (r.indexOf(o) >= 0) continue;
-            t[o] = e[o];
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
         }
         return t;
     }
-    var c = {
-        children: a().node.isRequired,
-        as: a().string.isRequired,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        family: a().oneOf([ "sansSerif", "monospace" ]),
-        variant: a().oneOf(i.typographyVariants),
-        size: a().number,
-        lineHeight: a().number,
-        color: a().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
-        weight: a().oneOf([ 300, 400, 500, 600, 700, 800, 900, "light", "normal", "semiBold", "bold", "extraBold", "heavy" ]),
-        withReset: a().bool
+    // TODO: Remove in next major version (SUI-5350)
+    // TODO: TypographyPropsBase should extend from TypographyParams (SUI-5343)
+    // Weight is omitted because the types conflict since weight no longer supports number values in the mixin
+    // but they are supported in the component to avoid a breaking change
+        var c = {
+        children: o().node.isRequired,
+        as: o().string.isRequired,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        family: o().oneOf([ "sansSerif", "monospace" ]),
+        variant: o().oneOf(i.typographyVariants),
+        size: o().number,
+        lineHeight: o().number,
+        color: o().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
+        weight: o().oneOf([ 300, 400, 500, 600, 700, 800, 900, "light", "normal", "semiBold", "bold", "extraBold", "heavy" ]),
+        withReset: o().bool
     };
     var d = p().p.withConfig({
         displayName: "Typography__StyledTypography",
@@ -148,30 +144,30 @@
     };
     /**
  * Typography renders text content with styling based on the Splunk Design System.
- */    function v(e) {
-        var r = e.children, t = e.as, o = e.elementRef, a = e.variant, i = e.family, l = e.size, s = e.lineHeight, p = e.color, u = e.weight, c = e.withReset, v = f(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight", "withReset" ]);
+ */    function g(e) {
+        var r = e.children, t = e.as, a = e.elementRef, o = e.variant, i = e.family, l = e.size, s = e.lineHeight, p = e.color, f = e.weight, c = e.withReset, g = y(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight", "withReset" ]);
         // @docs-props-type TypographyPropsBase
         // TODO: Remove in next major version (SUI-5350)
                 if (false) {}
-        var g = {
+        var m = {
             family: i,
             size: l,
             lineHeight: s,
             color: p,
             withReset: c,
-            weight: typeof u === "number" ? h[u] : u
+            weight: typeof f === "number" ? h[f] : f
         };
         
-        return n().createElement(d, y({
+        return n().createElement(d, u({
             as: t,
-            ref: o,
+            ref: a,
             "data-test": "typography",
-            $variant: a,
-            $typographyParams: g
-        }, v), r);
+            $variant: o,
+            $typographyParams: m
+        }, g), r);
     }
-    v.propTypes = c;
-    /* harmony default export */    const g = v;
+    g.propTypes = c;
+    /* harmony default export */    const m = g;
     // CONCATENATED MODULE: ./src/Typography/index.ts
     module.exports = r;
     /******/})();

package/WaitSpinner.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var i in r) {
-                /******/ if (e.o(r, i) && !e.o(t, i)) {
-                    /******/ Object.defineProperty(t, i, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var i in t) {
+                /******/ if (e.o(t, i) && !e.o(r, i)) {
+                    /******/ Object.defineProperty(r, i, {
                         enumerable: true,
-                        get: r[i]
+                        get: t[i]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,16 +56,16 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
+        e.d(r, {
         default: () => /* reexport */ _
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var i =  e.n(r);
+    const t = require("react");
+    var i =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const n = require("prop-types");
     var a =  e.n(n);
@@ -77,16 +77,16 @@
     const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
     const c = require("styled-components");
-    var f =  e.n(c);
+    var m =  e.n(c);
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinnerStyles.ts
-    var m = f().div.withConfig({
+    var f = m().div.withConfig({
         displayName: "WaitSpinnerStyles__Styled",
         componentId: "sc-1nu971z-0"
     })([ "", ";align-items:center;" ], o.mixins.reset("inline-flex"));
     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 = f().svg.withConfig({
+    var y = m().svg.withConfig({
         displayName: "WaitSpinnerStyles__StyledSvg",
         componentId: "sc-1nu971z-1"
     })([ "", " ", "" ], (0, o.pickVariant)("$size", {
@@ -103,22 +103,22 @@
             prisma: (0, c.css)([ "width:40px;height:40px;" ])
         }
     }), (function(e) {
-        var t = e.$animated;
-        return t && (0, o.pick)({
+        var r = e.$animated;
+        return r && (0, o.pick)({
             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 = f().circle.withConfig({
+    var g = m().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 r = e.$animated;
+        return r && (0, c.css)([ "animation:", " ", " infinite;animation-fill-mode:backwards;" ], h, u);
     }));
-    var k = f().circle.withConfig({
+    var k = m().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledPrismaFillPath",
         componentId: "sc-1nu971z-3"
     })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], (0, 
@@ -127,10 +127,10 @@
         medium: o.variables.contentColorDefault,
         large: o.variables.interactiveColorPrimary
     }), (function(e) {
-        var t = e.$animated;
-        return t && (0, c.css)([ "animation:", " ", " infinite;" ], v, u);
+        var r = e.$animated;
+        return r && (0, c.css)([ "animation:", " ", " infinite;" ], v, u);
     }));
-    var b = f().circle.withConfig({
+    var b = m().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledEnterpriseCircle",
         componentId: "sc-1nu971z-4"
     })([ "fill:transparent;stroke:", ";stroke-width:2px;", "" ], (0, o.pick)({
@@ -144,66 +144,58 @@
     }));
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinner.tsx
     function w() {
-        w = Object.assign || function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var i in r) {
-                    if (Object.prototype.hasOwnProperty.call(r, i)) {
-                        e[i] = r[i];
-                    }
+        return w = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var i in t) {
+                    ({}).hasOwnProperty.call(t, i) && (e[i] = t[i]);
                 }
             }
             return e;
-        };
-        return w.apply(this, arguments);
+        }, w.apply(null, arguments);
     }
-    function x(e, t) {
-        if (e == null) return {};
-        var r = S(e, t);
-        var i, n;
+    function x(e, r) {
+        if (null == e) return {};
+        var t, i, n = S(e, r);
         if (Object.getOwnPropertySymbols) {
             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];
+            for (i = 0; i < a.length; i++) {
+                t = a[i], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
             }
         }
-        return r;
+        return n;
     }
-    function S(e, t) {
-        if (e == null) return {};
-        var r = {};
-        var i = Object.keys(e);
-        var n, a;
-        for (a = 0; a < i.length; a++) {
-            n = i[a];
-            if (t.indexOf(n) >= 0) continue;
-            r[n] = e[n];
+    function S(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var i in e) {
+            if ({}.hasOwnProperty.call(e, i)) {
+                if (r.includes(i)) continue;
+                t[i] = e[i];
+            }
         }
-        return r;
+        return t;
     }
-    var O = {
+    var z = {
         elementRef: a().oneOfType([ a().func, a().object ]),
         screenReaderText: a().oneOfType([ a().string, a().oneOf([ "null" ]) ]),
         size: a().oneOf([ "small", "medium", "large" ])
     };
-    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" ]);
+    function O(e) {
+        var r = e.elementRef, t = e.screenReaderText, n = t === void 0 ? (0, l._)("Waiting") : t, a = e.size, c = a === void 0 ? "small" : a, m = x(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
                 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(m, w({
+        return i().createElement(f, w({
             "data-test": "wait-spinner"
-        }, f),  i().createElement(y, {
+        }, m),  i().createElement(y, {
             viewBox: h,
             version: "1.1",
             xmlns: "http://www.w3.org/2000/svg",
-            ref: t,
+            ref: r,
             $animated: p,
             $size: c
         }, n &&  i().createElement("title", null, n),  i().createElement("g", null, u ?  i().createElement(i().Fragment, null,  i().createElement(g, {
@@ -224,8 +216,8 @@
             r: "8.5"
         }))));
     }
-    z.propTypes = O;
-    /* harmony default export */    const _ = z;
+    O.propTypes = z;
+    /* harmony default export */    const _ = O;
     // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();

package/cypress/support/commands.ts

@@ -1,2 +1,11 @@
 import '@testing-library/cypress/add-commands';
 import 'cypress-real-events';
+
+// https://docs.cypress.io/api/commands/hover
+Cypress.Commands.add('hover', (selector: string) => {
+    if (Cypress.browser.name !== 'firefox') {
+        cy.get(selector).realHover();
+    } else {
+        cy.get(selector).trigger('mouseover', { force: true });
+    }
+});

package/cypress/support/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+declare namespace Cypress {
+    interface Chainable {
+        hover(selector: string): void; // to support hover custom command
+    }
+}

package/cypress/tsconfig.cypress.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": true,
     "types": [
+      "./support",
       "../../../node_modules/@testing-library/cypress",
       "../../../node_modules/cypress",
       "../../../node_modules/cypress-real-events"

package/docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3.9"
 services:
   prisma-storybook:
     build: 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.37.0",
+  "version": "4.39.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,8 +44,8 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "^4.7.0",
-    "@splunk/themes": "^0.21.0",
+    "@splunk/react-icons": "^4.8.0",
+    "@splunk/themes": "^0.22.0",
     "@splunk/ui-utils": "^1.7.1",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",
@@ -63,8 +63,8 @@
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/docs-gen": "1.0.0-beta.13",
-    "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.18",
+    "@splunk/eslint-config": "^5.0.0",
+    "@splunk/react-docs": "1.0.0-beta.19",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -106,19 +106,19 @@
     "cross-env": "^6.0.3",
     "cypress": "^12.17.1",
     "cypress-real-events": "^1.9.1",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-webpack": "^0.13.4",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "27.9.0",
-    "eslint-plugin-jest-dom": "^5.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-perf": "^3.3.1",
-    "eslint-plugin-testing-library": "6.2.0",
+    "eslint-plugin-cypress": "^3.5.0",
+    "eslint-plugin-import": "^2.30.1",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-perf": "^3.3.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "fs-extra": "^10.1.0",
     "fs-readdir-recursive": "^1.0.0",
     "glob": "^7.1.6",

package/types/src/Button/Button.d.ts

@@ -34,7 +34,6 @@ interface ButtonPropsBase {
      * Turns the button red. If you use this prop, apply other error
      * indicators, such as an error message, to meet accessibility
      * requirements.
-     *
      * */
     error?: boolean;
     /** Applies the text that displays on the button. */
@@ -47,17 +46,32 @@ interface ButtonPropsBase {
      * remove the right margin and stretch the button to the full width of
      * its container.  */
     inline?: boolean;
-    /** Displays the chevron-down icon to indicate that the button behaves
-     * as a menu. */
+    /**
+     * Displays the chevron-down icon to indicate that the button behaves as a menu.
+     *
+     * To meet accessibility requirements, this prop should be used together with the `Dropdown` component.
+     *
+     * If `Dropdown` is not used, this prop should be used together with `aria-controls` and `aria-expanded`.
+     */
     isMenu?: boolean;
     /** Prevents callback when the button is disabled. */
     onClick?: ButtonClickHandler;
-    /** Opens the 'to' link in a new browser tab.  */
-    openInNewContext?: boolean;
+    /**
+     * Open the "to" link in a new context, which is usually a new tab or window based on browser settings.
+     *
+     * An icon and a screen reader message is added to indicate this behavior to users.
+     * The default message is "(Opens new window)"; this can be customized by passing
+     * a string instead of boolean to `openInNewContext`.
+     */
+    openInNewContext?: boolean | string;
     /** Removes the left border and border-radius of the button so you can
      * prepend elements to it. */
     prepend?: boolean;
-    /** Adds the style to make the button appear selected. */
+    /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
+     *
+     * Adds the style to make the button appear selected.
+     */
     selected?: boolean;
     /** Identifies the URL for a link. If set, Splunk UI applies an <a> tag
      * instead of a <button> tag. */