@splunk/react-ui 4.41.0 → 4.42.0

package/ButtonGroup.js

@@ -118,9 +118,7 @@
     }
     var v = {
         children: l().node,
-        elementRef: l().oneOfType([ l().func, l().object ]),
-        /** @private */
-        flex: l().bool
+        elementRef: l().oneOfType([ l().func, l().object ])
     };
     function m(e) {
         var r = e.children, o = d(e, [ "children" ]);

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 Change Log
 ============
 
+4.42.0 - February 5, 2025
+----------
+New Features:
+* `SelectBase`'s `aria-label` attribute is omitted when the `labelledBy` prop is provided, since `aria-labelledby` takes precedence over `aria-label` in screen reader announcements (A11Y-3350).
+* `Tooltip` has a new `renderAnchor` prop for rendering a `Tooltip` without a wrapper element (A11Y-3260).
+
+Bug Fixes:
+* `Text` and `TextArea`'s border has been updated to improve contrast in Enterprise dark themes (SUI-6984).
+* `Table`'s dropdown cells in header are now accessible with keyboard (A11Y-3007).
+* `Table`'s expandable row controls are now accessible with VoiceOver (SUI-6188).
+* `Multiselect` with `compact` no longer shows an extra divider when used with `Multiselect.Heading` (SUI-7031).
+* `Menu.Item` will now display a correct cursor ('not-allowed') when hovering over checkbox in disabled option in `Multiselect` with `compact` (A11Y-3397).
+* `Popover` is now correctly positioned when the anchor is inside a container with `transform: scale()` (SUI-3423).
+* `Layer` will now render its child components when the browser is in fullscreen mode (SUI-2741).
+    * This also fixes the issue for components that use `Layer`: eg.`Dropdown`, `Popover`, etc.
+* `Table`'s cells content are now vertically centered when there's an action column in Enterprise themes (SUI-7093).
+* `Dropdown`, `Select`, and `SelectBase` with filter will now set an additional id in `aria-labelledby` on popover, providing an additional screen reader announcement with the text `Type to filter` to indicate the presence of a filtering option (A11Y-3336).
+
+Typescript:
+* `Dropdown` does not show a TS error when passed native HTML attributes as props (A11Y-3336).
+* `Link` will no longer fail to build in TypeScript projects due to an invalid `LinkStyles` export (SUI-7195).
+
 4.41.0 - January 7, 2025
 ----------
 New Features:

package/Dropdown.js

@@ -72,10 +72,10 @@
     var i =  e.n(r);
     // CONCATENATED MODULE: external "lodash/has"
     const l = require("lodash/has");
-    var s =  e.n(l);
+    var a =  e.n(l);
     // CONCATENATED MODULE: external "lodash/includes"
-    const a = require("lodash/includes");
-    var c =  e.n(a);
+    const s = require("lodash/includes");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "lodash/isEmpty"
     const p = require("lodash/isEmpty");
     // CONCATENATED MODULE: external "lodash/isFunction"
@@ -83,10 +83,10 @@
     var f =  e.n(u);
     // CONCATENATED MODULE: external "lodash/keys"
     const d = require("lodash/keys");
-    var g =  e.n(d);
+    var v =  e.n(d);
     // CONCATENATED MODULE: external "lodash/omit"
-    const v = require("lodash/omit");
-    var y =  e.n(v);
+    const g = require("lodash/omit");
+    var y =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const h = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
@@ -339,16 +339,16 @@
             }));
             _(I(t), "handleRequestClose", (function(e) {
                 var o = e.event, n = e.reason;
-                var r = t.props, i = r.closeReasons, l = r.focusToggleReasons, s = r.onRequestClose;
+                var r = t.props, i = r.closeReasons, l = r.focusToggleReasons, a = r.onRequestClose;
                 if (o && n === "clickAway") {
-                    var a = o.target;
+                    var s = o.target;
                     var p = t.props.inputId || t.props.toggle.props.id || t.toggleId;
-                    while (a) {
+                    while (s) {
                         // Ignore clicks on toggle.
-                        if (a.id === p) {
+                        if (s.id === p) {
                             return;
                         }
-                        a = a.parentNode;
+                        s = s.parentNode;
                     }
                 }
                 if (t.isOpen() && c()(i, n)) {
@@ -360,7 +360,7 @@
                             open: false
                         });
                     }
-                    s === null || s === void 0 ? void 0 : s(e);
+                    a === null || a === void 0 ? void 0 : a(e);
                 }
             }));
             _(I(t), "handleContentClick", (function(e) {
@@ -373,7 +373,7 @@
                 anchor: null,
                 open: false
             };
-            t.controlledExternally = s()(e, "open");
+            t.controlledExternally = a()(e, "open");
             t.popoverId = (0, h.createDOMID)("popover");
             t.toggleId = (0, h.createDOMID)("toggle");
             return t;
@@ -382,7 +382,7 @@
             key: "componentDidUpdate",
             value: function e() {
                 if (false) {}
-                var o = R({}, y()(this.props, g()(r.propTypes), "value", "id"));
+                var o = R({}, y()(this.props, v()(r.propTypes), "value", "id"));
                 if (false) {}
             }
         }, {
@@ -420,38 +420,39 @@
         }, {
             key: "render",
             value: function e() {
-                var o = this.props, t = o.align, r = o.canCoverAnchor, i = o.children, l = o.closeReasons, s = o.defaultPlacement, a = o.elementRef, p = o.repositionMode, u = o.retainFocus, d = o.takeFocus;
+                var o;
+                var t = this.props, r = t.align, i = t.canCoverAnchor, l = t.children, a = t.closeReasons, s = t.defaultPlacement, p = t.elementRef, u = t.repositionMode, d = t.retainFocus, v = t.takeFocus;
                 var g = this.state.anchor;
-                var v = this.handleRequestClose, y = this.handleContentClick;
-                var h = this.renderToggle();
+                var y = this.handleRequestClose, h = this.handleContentClick;
+                var b = this.renderToggle();
                 
-                return n().createElement(n().Fragment, null, h,  n().createElement(m(), {
-                    align: t,
+                return n().createElement(n().Fragment, null, b,  n().createElement(m(), {
+                    align: r,
                     open: !!g && this.isOpen(),
-                    autoCloseWhenOffScreen: c()(l, "offScreen"),
+                    autoCloseWhenOffScreen: c()(a, "offScreen"),
                     anchor: g,
-                    canCoverAnchor: r,
-                    elementRef: a,
-                    retainFocus: u,
+                    canCoverAnchor: i,
+                    elementRef: p,
+                    retainFocus: d,
                     defaultPlacement: s,
-                    onRequestClose: v,
-                    repositionMode: p,
+                    onRequestClose: y,
+                    repositionMode: u,
                     id: this.popoverId,
-                    "aria-labelledby": this.props.inputId || this.props.toggle.props.id || this.toggleId,
-                    takeFocus: d
-                }, f()(i) ? 
+                    "aria-labelledby": "".concat((o = this.props["aria-labelledby"]) !== null && o !== void 0 ? o : "", " ").concat(this.props.inputId || this.props.toggle.props.id || this.toggleId).trim(),
+                    takeFocus: v
+                }, f()(l) ? 
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                 function() {
                     
                     return n().createElement("div", {
-                        onClick: y
-                    }, i.apply(void 0, arguments));
+                        onClick: h
+                    }, l.apply(void 0, arguments));
                 } : 
                 
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                 n().createElement("div", {
-                    onClick: y
-                }, i)));
+                    onClick: h
+                }, l)));
             }
         } ]);
         return r;

package/Layer.js

@@ -73,10 +73,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        LayerContext: () => /* reexport */ b,
-        LayerStackContext: () => /* reexport */ h,
-        LayerStackGlobalProvider: () => /* reexport */ w,
-        default: () => /* reexport */ U
+        LayerContext: () => /* reexport */ h,
+        LayerStackContext: () => /* reexport */ v,
+        LayerStackGlobalProvider: () => /* reexport */ b,
+        default: () => /* reexport */ I
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -87,27 +87,25 @@
     const i = require("prop-types");
     var a =  e.n(i);
     // CONCATENATED MODULE: external "lodash/includes"
-    const c = require("lodash/includes");
-    var u =  e.n(c);
+    const l = require("lodash/includes");
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "lodash/last"
-    const l = require("lodash/last");
-    var s =  e.n(l);
+    const u = require("lodash/last");
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "lodash/pull"
     const p = require("lodash/pull");
     var f =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const y = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const d = require("@splunk/react-ui/EventListener");
-    var v =  e.n(d);
+    const y = require("@splunk/react-ui/EventListener");
+    var d =  e.n(y);
     // CONCATENATED MODULE: ./src/Layer/LayerStack.tsx
     /**
  * `LayerStackContext` is used to manage the array that `Layer` (and components that
  * depend on it, such as `Modal`) uses to determine the order of open layers.
  * @public
  */
-    var h =  r().createContext([]);
-    var b =  r().createContext({});
+    var v =  r().createContext([]);
+    var h =  r().createContext({});
     var m = {
         children: a().node,
         name: a().string,
@@ -119,10 +117,10 @@
  * A `LayerStackContext` provider that stores a shared layer stack using a global variable.
  * Applications should only use this provider if there's a known need to support multiple
  * instances of this library on the same page.
- */    function w(t) {
-        var o = t.children, i = t.name, a = i === void 0 ? "__splunkui_layer_instances__" : i, c = t.scope, u = c === void 0 ? typeof window !== "undefined" ? window : e.g : c, l = t.separateStackingContexts, s = l === void 0 ? false : l;
-        if (!u[a]) {
-            u[a] = [];
+ */    function b(t) {
+        var o = t.children, i = t.name, a = i === void 0 ? "__splunkui_layer_instances__" : i, l = t.scope, c = l === void 0 ? typeof window !== "undefined" ? window : e.g : l, u = t.separateStackingContexts, s = u === void 0 ? false : u;
+        if (!c[a]) {
+            c[a] = [];
  // eslint-disable-line no-param-reassign
                 }
         var p = (0, n.useMemo)((function() {
@@ -131,29 +129,29 @@
             };
         }), [ s ]);
         
-        return r().createElement(h.Provider, {
-            value: u[a]
-        },  r().createElement(b.Provider, {
+        return r().createElement(v.Provider, {
+            value: c[a]
+        },  r().createElement(h.Provider, {
             value: p
         }, o));
     }
-    w.propTypes = m;
+    b.propTypes = m;
     // CONCATENATED MODULE: external "styled-components"
-    const k = require("styled-components");
-    var g =  e.n(k);
+    const w = require("styled-components");
+    var g =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/themes"
     const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Layer/LayerStyles.ts
-    var S = g().div.withConfig({
+    var k = g().div.withConfig({
         displayName: "LayerStyles__StyledLayer",
         componentId: "ii6psl-0"
     })([ "", "" ], (function(e) {
         var t = e.$separateStackingContexts;
-        return t && (0, k.css)([ "isolation:isolate;z-index:", ";" ], C.variables.zindexLayer);
+        return t && (0, w.css)([ "isolation:isolate;z-index:", ";" ], C.variables.zindexLayer);
     }));
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var O = {
+    var S = {
         body: {
             appendChild: function e() {
                 return [];
@@ -208,34 +206,34 @@
         }
     };
     function E() {
-        var e = typeof document !== "undefined" ? document : O;
+        var e = typeof document !== "undefined" ? document : S;
         return e;
     }
     // CONCATENATED MODULE: ./src/Layer/Layer.tsx
-    function j(e) {
+    function O(e) {
         "@babel/helpers - typeof";
-        return j = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return O = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, j(e);
+        }, O(e);
     }
-    function L(e, t) {
+    function j(e, t) {
         if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
     }
-    function P(e, t) {
+    function L(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, K(r.key), r);
+            Object.defineProperty(e, A(r.key), r);
         }
     }
-    function _(e, t, n) {
-        return t && P(e.prototype, t), n && P(e, n), Object.defineProperty(e, "prototype", {
+    function P(e, t, n) {
+        return t && L(e.prototype, t), n && L(e, n), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
     }
-    function T(e, t) {
+    function _(e, t) {
         if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
         e.prototype = Object.create(t && t.prototype, {
             constructor: {
@@ -245,103 +243,101 @@
             }
         }), Object.defineProperty(e, "prototype", {
             writable: !1
-        }), t && x(e, t);
+        }), t && T(e, t);
     }
-    function x(e, t) {
-        return x = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
+    function T(e, t) {
+        return T = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
             return e.__proto__ = t, e;
-        }, x(e, t);
+        }, T(e, t);
     }
-    function q(e) {
-        var t = M();
+    function x(e) {
+        var t = D();
         return function() {
-            var n, r = N(e);
+            var n, r = M(e);
             if (t) {
-                var o = N(this).constructor;
+                var o = M(this).constructor;
                 n = Reflect.construct(r, arguments, o);
             } else n = r.apply(this, arguments);
-            return R(this, n);
+            return q(this, n);
         };
     }
-    function R(e, t) {
-        if (t && ("object" == j(t) || "function" == typeof t)) return t;
+    function q(e, t) {
+        if (t && ("object" == O(t) || "function" == typeof t)) return t;
         if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return D(e);
+        return R(e);
     }
-    function D(e) {
+    function R(e) {
         if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         return e;
     }
-    function M() {
+    function D() {
         try {
             var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
         } catch (e) {}
-        return (M = function t() {
+        return (D = function t() {
             return !!e;
         })();
     }
-    function N(e) {
-        return N = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+    function M(e) {
+        return M = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
-        }, N(e);
+        }, M(e);
     }
-    function A(e, t, n) {
-        return (t = K(t)) in e ? Object.defineProperty(e, t, {
+    function N(e, t, n) {
+        return (t = A(t)) in e ? Object.defineProperty(e, t, {
             value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = n, e;
     }
-    function K(e) {
-        var t = W(e, "string");
-        return "symbol" == j(t) ? t : t + "";
+    function A(e) {
+        var t = K(e, "string");
+        return "symbol" == O(t) ? t : t + "";
     }
-    function W(e, t) {
-        if ("object" != j(e) || !e) return e;
+    function K(e, t) {
+        if ("object" != O(e) || !e) return e;
         var n = e[Symbol.toPrimitive];
         if (void 0 !== n) {
             var r = n.call(e, t || "default");
-            if ("object" != j(r)) return r;
+            if ("object" != O(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
     /** @public */
-    /** @public */    var B = [ "clickAway", "escapeKey" ];
-    var z = {
+    /** @public */    var W = [ "clickAway", "escapeKey" ];
+    var F = {
         children: a().node,
-        closeReasons: a().arrayOf(a().oneOf(B)),
+        closeReasons: a().arrayOf(a().oneOf(W)),
         onRequestClose: a().func,
         open: a().bool
     };
-    var F = {
-        closeReasons: B,
+    var B = {
+        closeReasons: W,
         open: false
     };
-    var I =  function(e) {
-        T(n, e);
-        var t = q(n);
+    var z =  function(e) {
+        _(n, e);
+        var t = x(n);
         // @docs-props-type LayerPropsBase
         // eslint-disable-next-line react/sort-comp
         // LayerStackContext (an array) keeps track of the current instances of Layer. This is
         // used by Layer#handleKeyDown to determine if the escapeKey event should be handled by
         // the current instance. Only the topmost Layer instance should honor the escapeKey.
-        // TODO: enable once this is sorted out within the babel/ts ecosystem
-        // declare context: React.ContextType<typeof LayerStackContext>;
                 function n(e) {
             var r;
-            L(this, n);
+            j(this, n);
             r = t.call(this, e);
-            A(D(r), "layerClickEvent", null);
-            A(D(r), "handleClickOnLayer", (function(e) {
+            N(R(r), "layerClickEvent", null);
+            N(R(r), "handleClickOnLayer", (function(e) {
                 var t = e.nativeEvent;
                 r.layerClickEvent = t;
             }));
-            A(D(r), "handleClickOnWindow", (function(e) {
+            N(R(r), "handleClickOnWindow", (function(e) {
                 var t, n;
                 // clicks inside the layer should not be considered clickAways
-                                if (!r.props.open || !u()(r.props.closeReasons, "clickAway") || r.layerClickEvent === e) {
+                                if (!r.props.open || !c()(r.props.closeReasons, "clickAway") || r.layerClickEvent === e) {
                     return;
                 }
                 (t = (n = r.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
@@ -349,8 +345,8 @@
                     reason: "clickAway"
                 });
             }));
-            A(D(r), "handleKeyDownOnWindow", (function(e) {
-                if (r.props.open && (0, y.keycode)(e) === "esc" && s()(r.getLayerStack()) === D(r) && u()(r.props.closeReasons, "escapeKey")) {
+            N(R(r), "handleKeyDownOnWindow", (function(e) {
+                if (r.props.open && e.key === "Escape" && s()(r.getLayerStack()) === R(r) && c()(r.props.closeReasons, "escapeKey")) {
                     var t, n;
                     (t = (n = r.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
                         event: e,
@@ -366,7 +362,7 @@
             }
             return r;
         }
-        _(n, [ {
+        P(n, [ {
             key: "componentDidMount",
             value: function e() {
                 if (this.props.open) {
@@ -392,16 +388,25 @@
             value: function e() {
                 return this.context;
             }
-        }, {
+ // the fullscreen API does not render elements outside the fullscreen element
+            // Layer renders in document.body, which means that anything using Layer will not render in fullscreen
+            // this code moves the layer container into the fullscreen element, ensuring that it will render
+                }, {
             key: "render",
             value: function e() {
                 var t = this;
-                var i = this.props, a = i.children, c = i.open;
-                if (c) {
-                    var u =  (0, o.createPortal)( r().createElement(b.Consumer, null, (function(e) {
+                var i = this.props, a = i.children, l = i.open;
+                var c =  r().createElement(d(), {
+                    target: window,
+                    eventType: "fullscreenchange",
+                    listener: n.handleFullScreenChange,
+                    key: "fullScreenChange"
+                });
+                if (l) {
+                    var u =  (0, o.createPortal)( r().createElement(h.Consumer, null, (function(e) {
                         var n = e.separateStackingContexts, o = n === void 0 ? false : n;
                         
-                        return r().createElement(S, {
+                        return r().createElement(k, {
                             $separateStackingContexts: o,
                             "data-test": "layer",
                             onMouseDown: t.handleClickOnLayer,
@@ -409,17 +414,17 @@
                         }, a);
                     })), n.layerContainer);
                     
-                    return r().createElement(r().Fragment, null,  r().createElement(v(), {
+                    return r().createElement(r().Fragment, null,  r().createElement(d(), {
                         target: window,
                         eventType: "keydown",
                         listener: this.handleKeyDownOnWindow,
                         key: "eventListenerKeydown"
-                    }),  r().createElement(v(), {
+                    }),  r().createElement(d(), {
                         target: window,
                         eventType: "mousedown",
                         listener: this.handleClickOnWindow,
                         key: "eventListenerMouseDown"
-                    }),  r().createElement(v(), {
+                    }),  r().createElement(d(), {
                         target: window,
                         eventType: "touchstart",
                         listener: this.handleClickOnWindow,
@@ -427,19 +432,32 @@
                         options: {
                             passive: true
                         }
-                    }), u);
+                    }), c, u);
                 }
-                return null;
+                // the fragment has to be present to avoid type issues with React 18
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                                
+                return r().createElement(r().Fragment, null, c);
             }
         } ]);
         return n;
     }(n.Component);
-    A(I, "layerContainer", null);
-    A(I, "possibleCloseReasons", B);
-    A(I, "propTypes", z);
-    A(I, "defaultProps", F);
-    A(I, "contextType", h);
-    /* harmony default export */    const U = I;
+    N(z, "layerContainer", null);
+    N(z, "possibleCloseReasons", W);
+    N(z, "propTypes", F);
+    N(z, "defaultProps", B);
+    N(z, "contextType", v);
+    N(z, "handleFullScreenChange", (function() {
+        if (z.layerContainer) {
+            var e = E();
+            if (e.fullscreenElement != null) {
+                e.fullscreenElement.appendChild(z.layerContainer);
+            } else {
+                e.body.appendChild(z.layerContainer);
+            }
+        }
+    }));
+    /* harmony default export */    const I = z;
     // CONCATENATED MODULE: ./src/Layer/index.ts
     module.exports = t;
     /******/})();