@splunk/react-ui 4.30.0 → 4.31.0

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 Change Log
 ============
 
+4.31.0 - May 16, 2024
+----------
+New Features:
+* `Divider` has a new `decorative` prop for disabling the default semantics of `role="separator"`.
+
+Bug Fixes: 
+* `SidePanel` incorrectly rendered the overlay mask when `useLayerForClickAway={false}`. This has been fixed (SUI-6260).
+
 4.30.0 - May 6, 2024
 ----------
 New Features:

package/Divider.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // define getter functions for harmony exports
         /******/ e.d = (r, t) => {
-            /******/ for (var o in t) {
-                /******/ if (e.o(t, o) && !e.o(r, o)) {
-                    /******/ Object.defineProperty(r, o, {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: t[o]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -61,89 +61,140 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ v
+        default: () => /* reexport */ j
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
-    var o =  e.n(t);
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var i =  e.n(n);
+    const o = require("prop-types");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const a = require("styled-components");
     var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
+    const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Divider/DividerStyles.ts
-    var c = l().hr.withConfig({
+    var u = l().hr.withConfig({
         displayName: "DividerStyles__StyledRule",
         componentId: "gl6kyz-0"
-    })([ "", ";", ";border-color:", ";" ], s.mixins.reset("block"), (0, s.pickVariant)("$orientation", {
+    })([ "", ";", ";border-color:", ";" ], c.mixins.reset("block"), (0, c.pickVariant)("$orientation", {
         horizontal: (0, a.css)([ "border-top-style:solid;border-width:1px;" ]),
         vertical: (0, a.css)([ "display:inline;border-left-style:solid;border-width:1px;" ])
-    }), (0, s.pick)({
-        enterprise: s.variables.borderColor,
-        prisma: s.variables.neutral200
+    }), (0, c.pick)({
+        enterprise: c.variables.borderColor,
+        prisma: c.variables.neutral200
     }));
     // CONCATENATED MODULE: ./src/Divider/Divider.tsx
-    function u() {
-        u = Object.assign || function(e) {
+    function s() {
+        s = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
-                for (var o in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, o)) {
-                        e[o] = t[o];
+                for (var n in t) {
+                    if (Object.prototype.hasOwnProperty.call(t, n)) {
+                        e[n] = t[n];
                     }
                 }
             }
             return e;
         };
-        return u.apply(this, arguments);
+        return s.apply(this, arguments);
     }
-    function p(e, r) {
+    function f(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            if (r) n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }));
+            t.push.apply(t, n);
+        }
+        return t;
+    }
+    function p(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = arguments[r] != null ? arguments[r] : {};
+            if (r % 2) {
+                f(Object(t), true).forEach((function(r) {
+                    b(e, r, t[r]);
+                }));
+            } else if (Object.getOwnPropertyDescriptors) {
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
+            } else {
+                f(Object(t)).forEach((function(r) {
+                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+                }));
+            }
+        }
+        return e;
+    }
+    function b(e, r, t) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: t,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[r] = t;
+        }
+        return e;
+    }
+    function d(e, r) {
         if (e == null) return {};
-        var t = f(e, r);
-        var o, n;
+        var t = y(e, r);
+        var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                o = i[n];
-                if (r.indexOf(o) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, o)) continue;
-                t[o] = e[o];
+            for (o = 0; o < i.length; o++) {
+                n = i[o];
+                if (r.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                t[n] = e[n];
             }
         }
         return t;
     }
-    function f(e, r) {
+    function y(e, r) {
         if (e == null) return {};
         var t = {};
-        var o = Object.keys(e);
-        var n, i;
-        for (i = 0; i < o.length; i++) {
-            n = o[i];
-            if (r.indexOf(n) >= 0) continue;
-            t[n] = e[n];
+        var n = Object.keys(e);
+        var o, i;
+        for (i = 0; i < n.length; i++) {
+            o = n[i];
+            if (r.indexOf(o) >= 0) continue;
+            t[o] = e[o];
         }
         return t;
     }
-    var d = {
+    var v = {
         elementRef: i().oneOfType([ i().func, i().object ]),
+        decorative: i().bool,
         orientation: i().oneOf([ "horizontal", "vertical" ])
     };
-    function y(e) {
-        var r = e.elementRef, t = e.orientation, n = t === void 0 ? "horizontal" : t, i = p(e, [ "elementRef", "orientation" ]);
+    function O(e) {
+        var r = e.elementRef, t = e.decorative, o = t === void 0 ? false : t, i = e.orientation, a = i === void 0 ? "horizontal" : i, l = d(e, [ "elementRef", "decorative", "orientation" ]);
         // @docs-props-type DividerPropsBase
-                
-        return o().createElement(c, u({
+                var c = p({
             "data-test": "divider",
             ref: r,
-            "aria-orientation": n,
-            $orientation: n
-        }, i));
+            $orientation: a
+        }, l);
+ // aria-orientation is not needed when decorative and div is used to have no semantics
+                if (o) {
+            
+            return n().createElement(u, s({
+                as: "div"
+            }, c));
+        }
+        
+        return n().createElement(u, s({
+            "aria-orientation": a
+        }, c));
     }
-    y.propTypes = d;
-    /* harmony default export */    const v = y;
+    O.propTypes = v;
+    /* harmony default export */    const j = O;
     // CONCATENATED MODULE: ./src/Divider/index.ts
     module.exports = r;
     /******/})();

package/Link.js

@@ -111,7 +111,7 @@
     var k = f()(S()).withConfig({
         displayName: "LinkStyles__StyledClickable",
         componentId: "sc-1hhltcf-0"
-    })([ "", ";color:", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;border-radius:", ";&:not([disabled],[aria-disabled='true']){cursor:pointer;", ";&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), (0, 
+    })([ "", ";color:", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;border-radius:", ";&:not([disabled],[aria-disabled='true']){cursor:pointer;", ";&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}" ], v.mixins.reset("inline"), (0, 
     v.pick)({
         enterprise: v.variables.linkColor,
         prisma: v.variables.interactiveColorPrimary
@@ -217,11 +217,11 @@
         return I(e, t);
     }
     function N(e) {
-        var t = z();
+        var t = A();
         return function n() {
-            var r = A(e), o;
+            var r = L(e), o;
             if (t) {
-                var i = A(this).constructor;
+                var i = L(this).constructor;
                 o = Reflect.construct(r, arguments, i);
             } else {
                 o = r.apply(this, arguments);
@@ -241,7 +241,7 @@
         }
         return e;
     }
-    function z() {
+    function A() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -252,13 +252,13 @@
             return false;
         }
     }
-    function A(e) {
-        A = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function L(e) {
+        L = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return A(e);
+        return L(e);
     }
-    function L(e, t, n) {
+    function z(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -298,8 +298,8 @@
                 o[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            L(D(e), "component", null);
-            L(D(e), "handleMount", (function(t) {
+            z(D(e), "component", null);
+            z(D(e), "handleMount", (function(t) {
                 e.component = t;
             }));
             return e;
@@ -333,9 +333,9 @@
         } ]);
         return n;
     }(n.Component);
-    L(H, "propTypes", B);
-    L(H, "defaultProps", F);
-    L(H, u.legacyRefMode, true);
+    z(H, "propTypes", B);
+    z(H, "defaultProps", F);
+    z(H, u.legacyRefMode, true);
     /* harmony default export */    const J = H;
     // CONCATENATED MODULE: ./src/Link/index.ts
     module.exports = t;

package/ModalLayer.js

@@ -262,6 +262,7 @@
             R(k(o), "renderLayer", (function() {
                 var e = o.props, t = e.getDefaultMotionStyle, n = e.getMotionStyle, i = e.renderModal, c = e.scrim;
                 var l = o.props.open || o.state.animating;
+                var u = l && c !== "hidden";
                 
                 return r().createElement(a.Spring, {
                     from: m(m({}, t === null || t === void 0 ? void 0 : t()), {}, {
@@ -277,7 +278,7 @@
                     
                     return r().createElement("div", null, 
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    i(e), l && (c === "visible" || "interactive") &&  r().createElement(d, {
+                    i(e), u &&  r().createElement(d, {
                         "data-test": "modal-overlay",
                         onMouseDown: c === "interactive" ? o.handleClickAway : undefined,
                         key: "clickAway",

package/SidePanel.js

@@ -364,7 +364,7 @@
             value: function e() {
                 var t = this.props, r = t.open, o = t.onRequestClose, i = t.useLayerForClickAway;
                 var a = this.state.panelAnimating;
-                var l = i ? "interactive" : "visible";
+                var l = i ? "interactive" : "hidden";
                 
                 return n().createElement(f(), {
                     childrenInAnimation: a,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.30.0",
+  "version": "4.31.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -61,9 +61,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-beta.9",
+    "@splunk/docs-gen": "1.0.0-beta.10",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.13",
+    "@splunk/react-docs": "1.0.0-beta.14",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",

package/types/src/Divider/Divider.d.ts

@@ -8,12 +8,17 @@ interface DividerPropsBase {
     elementRef?: React.Ref<HTMLHRElement>;
     /** Sets the orientation of this `Divider`. */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Remove semantics of the divider.
+     */
+    decorative?: boolean;
 }
-type DividerProps = ComponentProps<DividerPropsBase, 'hr'>;
-declare function Divider({ elementRef, orientation, ...otherProps }: DividerProps): JSX.Element;
+type DividerProps = ComponentProps<DividerPropsBase, 'hr' | 'div'>;
+declare function Divider({ elementRef, decorative, orientation, ...otherProps }: DividerProps): JSX.Element;
 declare namespace Divider {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;
+        decorative: PropTypes.Requireable<boolean>;
         orientation: PropTypes.Requireable<string>;
     };
 }

package/types/src/Divider/docs/examples/Decorative.d.ts

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

package/types/src/Divider/docs/examples/AriaHidden.d.ts

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