@splunk/react-ui 4.37.0 → 4.38.0

package/Multiselect.js

@@ -311,13 +311,12 @@
                 var t = this.props, n = t.value, o = t.children, a = t.label, i = t.multiple, l = v(t, [ "value", "children", "label", "multiple" ]);
                 
                 return r().createElement(p.Item, d({
-                    "aria-selected": this.props.selected,
                     "data-test-value": n,
                     "data-test": "option",
                     ref: this.handleMount
                 }, l, {
                     selectable: true,
-                    selectableAppearance: i ? "checkbox" : undefined,
+                    selectableAppearance: i ? "checkbox" : "checkmark",
                     onClick: this.handleClick,
                     role: "option",
                     value: n.toString()
@@ -1450,7 +1449,6 @@
             Jt($t(a), "dropdown", null);
             Jt($t(a), "firstSelectedEnabledOption", null);
             Jt($t(a), "firstSelectedOptionIndex", void 0);
-            Jt($t(a), "menuId", void 0);
             Jt($t(a), "menuListboxId", void 0);
             Jt($t(a), "previousActiveIndex", null);
             Jt($t(a), "selectedOptionCount", void 0);
@@ -1744,35 +1742,26 @@
                 k = E;
  // only apply prefix / suffix if the label is not empty
                                 if (k.length > 0) {
+                    // If there's more than one item selected, read out the selected total
+                    // rather than reading out each selected item
+                    I = a.wrapLabel({
+                        prefixLabel: O,
+                        label: k.length > 1 ? [ "".concat(_.length, " items selected") ] : I,
+                        suffixLabel: S
+                    });
                     k = a.wrapLabel({
                         prefixLabel: O,
                         label: k,
                         suffixLabel: S
                     });
                 }
- // single <Select> behaviour is to show the placeholder if all parts of the the label
+ // single <Select> behaviour is to show the placeholder if all parts of the label
                 // are empty strings so we replicate this behaviour here
                                 if (k.length === 0 || !m && k.every((function(e) {
                     return e === "";
                 }))) {
                     k = Qt(g);
- // placeholder has a default value so will not be undefined
-                                        I = Qt(g);
-                }
- // If there's more than one item selected, read out the selected total
-                // rather than reading out each selected item
-                                if (k.length > 1) {
-                    I = a.wrapLabel({
-                        prefixLabel: O,
-                        label: [ "".concat(_.length, " items selected") ],
-                        suffixLabel: S
-                    });
-                } else {
-                    I = a.wrapLabel({
-                        prefixLabel: O,
-                        label: I,
-                        suffixLabel: S
-                    });
+                    I = k;
                 }
                 var M = Gt({
                     "aria-describedby": p,
@@ -1781,6 +1770,7 @@
                     "aria-required": w,
                     "data-select-appearance": l,
                     "data-test": m ? "multiselect" : "select",
+                    role: "combobox",
                     disabled: f,
                     elementRef: d,
                     error: v
@@ -1810,8 +1800,6 @@
                     icon: x,
                     inline: h,
                     isMenu: true,
-                    "aria-haspopup": "listbox",
-                    "aria-owns": a.menuId,
                     onClick: a.props.onClick
                 }, pe()(a.props, o.invalidLinkAppearanceProps)), !!_.length && m &&  r().createElement(bt, {
                     "data-role": "count"
@@ -2066,7 +2054,6 @@
             if (false) {}
             if (false) {}
             o.validateAppearance(e);
-            a.menuId = (0, be.createDOMID)("menu");
             a.menuListboxId = (0, be.createDOMID)("menu-listbox");
             a.activeItemId = (0, be.createDOMID)("active-item");
             return a;
@@ -2197,7 +2184,9 @@
                     role: "combobox",
                     "aria-expanded": "true",
                     "aria-controls": this.menuListboxId,
+                    "aria-owns": n ? this.activeItemId : undefined,
                     "aria-label": (0, u._)("Filter"),
+                    "aria-autocomplete": "list",
                     "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
                     inputRef: s,
                     inputId: l,
@@ -2234,10 +2223,11 @@
                         "aria-multiselectable": c || undefined,
                         childrenStart: o.renderControls({
                             placement: i,
-                            hasChildren: !!b.length
+                            hasChildren: b.some((function(e) {
+                                return tn(e);
+                            }))
                         }),
                         focusMode: o.hasFilter() ? "never" : undefined,
-                        id: o.menuId,
                         isLoading: o.props.isLoadingOptions,
                         menuId: o.menuListboxId,
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
@@ -2269,7 +2259,7 @@
                     canCoverAnchor: xt().innerHeight < 500,
                     ref: this.handleDropdownMount,
                     retainFocus: false,
-                    takeFocus: d.length === 0 || d.length > 0 && !h || !!f
+                    takeFocus: d.length === 0 || d.length > 0 && !h || f
                 }, m);
             }
         } ]);

package/ScreenReaderContent.js

@@ -1,34 +1,75 @@
 /******/ (() => {
     // webpackBootstrap
     /******/ "use strict";
-    /******/ // The require scope
-    /******/    var e = {};
+    /******/    var e = {
+        /***/ 3563: 
+        /***/ e => {
+            e.exports = require("@splunk/themes");
+            /***/        },
+        /***/ 23: 
+        /***/ e => {
+            e.exports = require("prop-types");
+            /***/        },
+        /***/ 9497: 
+        /***/ e => {
+            e.exports = require("react");
+            /***/        },
+        /***/ 232: 
+        /***/ e => {
+            e.exports = require("styled-components");
+            /***/
+            /******/        }
+    };
+    /************************************************************************/
+    /******/ // The module cache
+    /******/    var r = {};
+    /******/
+    /******/ // The require function
+    /******/    function t(n) {
+        /******/ // Check if module is in cache
+        /******/ var o = r[n];
+        /******/        if (o !== undefined) {
+            /******/ return o.exports;
+            /******/        }
+        /******/ // Create a new module (and put it into the cache)
+        /******/        var a = r[n] = {
+            /******/ // no module.id needed
+            /******/ // no module.loaded needed
+            /******/ exports: {}
+            /******/        };
+        /******/
+        /******/ // Execute the module function
+        /******/        e[n](a, a.exports, t);
+        /******/
+        /******/ // Return the exports of the module
+        /******/        return a.exports;
+        /******/    }
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ t.n = e => {
+            /******/ var r = e && e.__esModule ? 
+            /******/ () => e["default"]
+            /******/ : () => e
             /******/;
-            e.d(t, {
-                a: t
+            t.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ t.d = (e, r) => {
+            /******/ for (var n in r) {
+                /******/ if (t.o(r, n) && !t.o(e, n)) {
+                    /******/ Object.defineProperty(e, n, {
                         enumerable: true,
-                        get: t[n]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,14 +78,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ t.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ e.r = e => {
+        /******/ t.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -56,89 +97,92 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
-    // ESM COMPAT FLAG
-        e.r(r);
-    // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ v
-    });
-    // 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);
-    // CONCATENATED MODULE: external "styled-components"
-    const i = require("styled-components");
-    var l =  e.n(i);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const c = require("@splunk/themes");
-    // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
-    var u = l().span.withConfig({
-        displayName: "ScreenReaderContentStyles__Styled",
-        componentId: "sc-1lnohwp-0"
-    })([ "", ";" ], c.mixins.screenReaderContent());
-    // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
-    function f() {
-        f = Object.assign || 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];
+    /************************************************************************/    var n = {};
+    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+        (() => {
+        // ESM COMPAT FLAG
+        t.r(n);
+        // EXPORTS
+                t.d(n, {
+            default: () => /* reexport */ y
+        });
+        // EXTERNAL MODULE: external "react"
+                var e = t(9497);
+        var r =  t.n(e);
+        // EXTERNAL MODULE: external "prop-types"
+                var o = t(23);
+        var a =  t.n(o);
+        // EXTERNAL MODULE: external "styled-components"
+                var i = t(232);
+        var u =  t.n(i);
+        // EXTERNAL MODULE: external "@splunk/themes"
+                var l = t(3563);
+        // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
+        var p = u().span.withConfig({
+            displayName: "ScreenReaderContentStyles__Styled",
+            componentId: "sc-1lnohwp-0"
+        })([ "", ";" ], l.mixins.screenReaderContent());
+        // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
+        function c() {
+            c = Object.assign || 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];
+                        }
                     }
                 }
+                return e;
+            };
+            return c.apply(this, arguments);
+        }
+        function f(e, r) {
+            if (e == null) return {};
+            var t = s(e, r);
+            var n, o;
+            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];
+                }
             }
-            return e;
-        };
-        return f.apply(this, arguments);
-    }
-    function s(e, r) {
-        if (e == null) return {};
-        var t = p(e, r);
-        var n, o;
-        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];
-            }
+            return t;
         }
-        return t;
-    }
-    function p(e, r) {
-        if (e == null) 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];
+        function s(e, r) {
+            if (e == null) 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];
+            }
+            return t;
         }
-        return t;
-    }
-    var d = {
-        children: a().node.isRequired,
-        elementRef: a().oneOfType([ a().func, a().object ])
-    };
-    /**
+        var d = {
+            children: a().node.isRequired,
+            elementRef: a().oneOfType([ a().func, a().object ])
+        };
+        /**
  * The screen reader text is used to wrap content that
  * is only accessible through screen readers.
- */    function y(e) {
-        var r = e.children, t = e.elementRef, o = s(e, [ "children", "elementRef" ]);
-        // @docs-props-type ScreenReaderContentPropsBase
-                
-        return n().createElement(u, f({
-            "data-test": "screen-reader-content",
-            ref: t
-        }, o), r);
-    }
-    y.propTypes = d;
-    /* harmony default export */    const v = y;
-    // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
-    module.exports = r;
+ */        function v(e) {
+            var t = e.children, n = e.elementRef, o = f(e, [ "children", "elementRef" ]);
+            // @docs-props-type ScreenReaderContentPropsBase
+                        
+            return r().createElement(p, c({
+                "data-test": "screen-reader-content",
+                ref: n
+            }, o), t);
+        }
+        v.propTypes = d;
+        /* harmony default export */        const y = v;
+    }) // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
+    ();
+    module.exports = n;
     /******/})();