@splunk/react-ui 4.26.0 → 4.27.0

package/Accordion.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var n = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = n => {
+            /******/ var t = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            e.d(n, {
-                a: n
+            e.d(t, {
+                a: t
             });
-            /******/            return n;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, n) => {
-            /******/ for (var r in n) {
-                /******/ if (e.o(n, r) && !e.o(t, r)) {
-                    /******/ Object.defineProperty(t, r, {
+        /******/ e.d = (n, t) => {
+            /******/ for (var r in t) {
+                /******/ if (e.o(t, r) && !e.o(n, r)) {
+                    /******/ Object.defineProperty(n, r, {
                         enumerable: true,
-                        get: n[r]
+                        get: t[r]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
         /******/;
     })();
     /******/
@@ -56,46 +56,46 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(n);
     // EXPORTS
-        e.d(t, {
-        Panel: () => /* reexport */ S,
-        default: () => /* reexport */ L
+        e.d(n, {
+        Panel: () => /* reexport */ x,
+        default: () => /* reexport */ K
     });
     // CONCATENATED MODULE: external "react"
-    const n = require("react");
-    var r =  e.n(n);
+    const t = require("react");
+    var r =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var i =  e.n(o);
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/has"
-    const a = require("lodash/has");
-    var l =  e.n(a);
+    const i = require("lodash/has");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/keys"
     const u = require("lodash/keys");
     var c =  e.n(u);
     // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var f =  e.n(s);
+    const f = require("lodash/omit");
+    var s =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/CollapsiblePanel"
     const p = require("@splunk/react-ui/CollapsiblePanel");
     var d =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
     const y = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Accordion/AccordionContext.tsx
-    var b =  (0, n.createContext)({});
-    b.displayName = "Accordion";
-    /* harmony default export */    const v = b;
+    var v =  (0, t.createContext)({});
+    v.displayName = "Accordion";
+    /* harmony default export */    const b = v;
     // CONCATENATED MODULE: ./src/Accordion/Panel.tsx
     function h() {
         h = Object.assign || function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    if (Object.prototype.hasOwnProperty.call(n, r)) {
-                        e[r] = n[r];
+            for (var n = 1; n < arguments.length; n++) {
+                var t = arguments[n];
+                for (var r in t) {
+                    if (Object.prototype.hasOwnProperty.call(t, r)) {
+                        e[r] = t[r];
                     }
                 }
             }
@@ -103,41 +103,41 @@
         };
         return h.apply(this, arguments);
     }
-    function O(e, t) {
+    function m(e, n) {
         if (e == null) return {};
-        var n = m(e, t);
+        var t = g(e, n);
         var r, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                r = i[o];
-                if (t.indexOf(r) >= 0) continue;
+            var a = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < a.length; o++) {
+                r = a[o];
+                if (n.indexOf(r) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
-                n[r] = e[r];
+                t[r] = e[r];
             }
         }
-        return n;
+        return t;
     }
-    function m(e, t) {
+    function g(e, n) {
         if (e == null) return {};
-        var n = {};
+        var t = {};
         var r = Object.keys(e);
-        var o, i;
-        for (i = 0; i < r.length; i++) {
-            o = r[i];
-            if (t.indexOf(o) >= 0) continue;
-            n[o] = e[o];
+        var o, a;
+        for (a = 0; a < r.length; a++) {
+            o = r[a];
+            if (n.indexOf(o) >= 0) continue;
+            t[o] = e[o];
         }
-        return n;
+        return t;
     }
-    var P = {
-        description: i().string,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        inset: i().bool,
-        panelId: i().any.isRequired,
-        title: i().node.isRequired
+    var O = {
+        description: a().string,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        inset: a().bool,
+        panelId: a().any.isRequired,
+        title: a().node.isRequired
     };
-    var g = function e(t, n) {
+    var P = function e(n, t) {
         var r = {
             enterprise: {
                 compact: "8px",
@@ -148,171 +148,155 @@
                 comfortable: "20px"
             }
         };
-        return r[t][n];
+        return r[n][t];
+    };
+    var C = {
+        flexShrink: 1
     };
     /**
  * `Accordion.Panel` operates as a container component for content in an `Accordion`.
  */    function j(e) {
-        var t = e.panelId, o = e.inset, i = O(e, [ "panelId", "inset" ]);
+        var n = e.panelId, o = e.inset, a = m(e, [ "panelId", "inset" ]);
         // @docs-props-type AccordionPanelPropsBase
-                var a = (0, y.useSplunkTheme)(), l = a.family, u = a.density;
-        var c = (0, n.useContext)(b), s = c.onRequestClose, f = c.onRequestOpen, p = c.openPanelId, v = c.inset;
-        var m = p === t;
-        var P = o !== undefined ? o : v;
+                var i = (0, y.useSplunkTheme)(), l = i.family, u = i.density;
+        var c = (0, t.useContext)(v), f = c.onChange, s = c.openPanelId, p = c.inset;
+        var b = s === n;
+        var g = o !== undefined ? o : p;
+ // Props are different based on controlled/uncontrolled
+        // For controlled, onChange required prop for controlled cases and must be defined.
+                var O = f ? {
+            onChange: f,
+            open: b
+        } : {
+            onChange: undefined
+        };
+        var j = function e() {
+            if (g) {
+                var n = P(l, u);
+                return {
+                    padding: n
+                };
+            }
+            return undefined;
+        };
         
         return r().createElement(d(), h({
-            panelId: t,
+            panelId: n,
             "data-test": "panel",
-            innerBodyStyles: P ? {
-                padding: g(l, u)
-            } : undefined,
-            "data-test-panel-id": t,
-            style: {
-                flexShrink: 1
-            }
-        }, i, {
-            onRequestClose: s,
-            onRequestOpen: f,
-            open: m
-        }));
+            innerBodyStyles: j(),
+            "data-test-panel-id": n,
+            style: C
+        }, a, O));
     }
-    j.propTypes = P;
-    /* harmony default export */    const S = j;
+    j.propTypes = O;
+    /* harmony default export */    const x = j;
     // CONCATENATED MODULE: external "styled-components"
-    const R = require("styled-components");
-    var q =  e.n(R);
+    const I = require("styled-components");
+    var S =  e.n(I);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const w = require("@splunk/react-ui/Box");
-    var x =  e.n(w);
+    var k =  e.n(w);
     // CONCATENATED MODULE: ./src/Accordion/AccordionStyles.ts
-    var C = q()(x()).withConfig({
+    var _ = S()(k()).withConfig({
         displayName: "AccordionStyles__StyledBox",
         componentId: "m39hyh-0"
     })([ "", ";flex-direction:column;margin-bottom:0;", "" ], y.mixins.reset("flex"), (0, 
     y.pick)({
-        enterprise: (0, R.css)([ "background:", ";" ], y.variables.backgroundColor)
+        enterprise: (0, I.css)([ "background:", ";" ], y.variables.backgroundColor)
     }));
     // CONCATENATED MODULE: ./src/Accordion/Accordion.tsx
-    function I(e) {
+    function R(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            I = function e(t) {
-                return typeof t;
+            R = function e(n) {
+                return typeof n;
             };
         } else {
-            I = function e(t) {
-                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            R = function e(n) {
+                return n && typeof Symbol === "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
             };
         }
-        return I(e);
+        return R(e);
     }
-    function k() {
-        k = Object.assign || function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    if (Object.prototype.hasOwnProperty.call(n, r)) {
-                        e[r] = n[r];
+    function q() {
+        q = Object.assign || function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var t = arguments[n];
+                for (var r in t) {
+                    if (Object.prototype.hasOwnProperty.call(t, r)) {
+                        e[r] = t[r];
                     }
                 }
             }
             return e;
         };
-        return k.apply(this, arguments);
-    }
-    function _(e, t) {
-        var n = Object.keys(e);
-        if (Object.getOwnPropertySymbols) {
-            var r = Object.getOwnPropertySymbols(e);
-            if (t) r = r.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }));
-            n.push.apply(n, r);
-        }
-        return n;
-    }
-    function E(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var n = arguments[t] != null ? arguments[t] : {};
-            if (t % 2) {
-                _(Object(n), true).forEach((function(t) {
-                    G(e, t, n[t]);
-                }));
-            } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
-            } else {
-                _(Object(n)).forEach((function(t) {
-                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
-                }));
-            }
-        }
-        return e;
+        return q.apply(this, arguments);
     }
-    function T(e, t) {
-        if (!(e instanceof t)) {
+    function E(e, n) {
+        if (!(e instanceof n)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function D(e, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
+    function T(e, n) {
+        for (var t = 0; t < n.length; t++) {
+            var r = n[t];
             r.enumerable = r.enumerable || false;
             r.configurable = true;
             if ("value" in r) r.writable = true;
             Object.defineProperty(e, r.key, r);
         }
     }
-    function A(e, t, n) {
-        if (t) D(e.prototype, t);
-        if (n) D(e, n);
+    function A(e, n, t) {
+        if (n) T(e.prototype, n);
+        if (t) T(e, t);
         return e;
     }
-    function B(e, t) {
-        if (typeof t !== "function" && t !== null) {
+    function B(e, n) {
+        if (typeof n !== "function" && n !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
-        e.prototype = Object.create(t && t.prototype, {
+        e.prototype = Object.create(n && n.prototype, {
             constructor: {
                 value: e,
                 writable: true,
                 configurable: true
             }
         });
-        if (t) M(e, t);
+        if (n) D(e, n);
     }
-    function M(e, t) {
-        M = Object.setPrototypeOf || function e(t, n) {
-            t.__proto__ = n;
-            return t;
+    function D(e, n) {
+        D = Object.setPrototypeOf || function e(n, t) {
+            n.__proto__ = t;
+            return n;
         };
-        return M(e, t);
+        return D(e, n);
     }
-    function N(e) {
-        var t = z();
-        return function n() {
-            var r = F(e), o;
-            if (t) {
-                var i = F(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+    function M(e) {
+        var n = V();
+        return function t() {
+            var r = z(e), o;
+            if (n) {
+                var a = z(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
-            return U(this, o);
+            return N(this, o);
         };
     }
-    function U(e, t) {
-        if (t && (I(t) === "object" || typeof t === "function")) {
-            return t;
+    function N(e, n) {
+        if (n && (R(n) === "object" || typeof n === "function")) {
+            return n;
         }
-        return V(e);
+        return U(e);
     }
-    function V(e) {
+    function U(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function z() {
+    function V() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -323,76 +307,76 @@
             return false;
         }
     }
-    function F(e) {
-        F = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
-            return t.__proto__ || Object.getPrototypeOf(t);
+    function z(e) {
+        z = Object.setPrototypeOf ? Object.getPrototypeOf : function e(n) {
+            return n.__proto__ || Object.getPrototypeOf(n);
         };
-        return F(e);
+        return z(e);
     }
-    function G(e, t, n) {
-        if (t in e) {
-            Object.defineProperty(e, t, {
-                value: n,
+    function F(e, n, t) {
+        if (n in e) {
+            Object.defineProperty(e, n, {
+                value: t,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[t] = n;
+            e[n] = t;
         }
         return e;
     }
-    /** @public */    var H = {
-        children: i().node,
-        defaultOpenPanelId: i().any,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        onChange: i().func,
-        openPanelId: i().any
+    /** @public */    var G = {
+        children: a().node,
+        defaultOpenPanelId: a().any,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        onChange: a().func,
+        openPanelId: a().any
     };
-    var J = {
+    var H = {
         inset: false
     };
-    var K =  function(e) {
+    var J =  function(e) {
         B(o, e);
-        var t = N(o);
+        var n = M(o);
         // @docs-props-type AccordionPropsBase
                 function o(e) {
-            var n;
-            T(this, o);
-            n = t.call(this, e);
-            G(V(n), "controlledExternally", void 0);
-            G(V(n), "handleRequestOpen", (function(e) {
-                var t, r;
-                if (!n.isControlled()) {
-                    n.setState({
-                        openPanelId: e.panelId
-                    });
-                }
-                (t = (r = n.props).onChange) === null || t === void 0 ? void 0 : t.call(r, e.event, e);
+            var t;
+            E(this, o);
+            t = n.call(this, e);
+            F(U(t), "controlledExternally", void 0);
+            F(U(t), "getCurrentOpenPanel", (function() {
+                var e = t.isControlled() ? t.props.openPanelId : t.state.openPanelId;
+                return e;
             }));
-            G(V(n), "handleRequestClose", (function(e) {
-                var t, r;
-                if (!n.isControlled()) {
-                    n.setState({
-                        openPanelId: undefined
+            F(U(t), "handleChange", (function(e, n) {
+                var r, o;
+                var a = n.panelId, i = n.reason;
+                var l = t.getCurrentOpenPanel();
+                var u = l === a ? undefined : a;
+                if (!t.isControlled()) {
+                    t.setState({
+                        openPanelId: u
                     });
                 }
-                (t = (r = n.props).onChange) === null || t === void 0 ? void 0 : t.call(r, e.event, E(E({}, e), {}, {
-                    panelId: undefined
-                }));
+                (r = (o = t.props).onChange) === null || r === void 0 ? void 0 : r.call(o, e, {
+                    event: e,
+                    panelId: u,
+                    reason: i
+                });
             }));
-            n.controlledExternally = l()(e, "openPanelId");
-            if (!n.isControlled()) {
-                n.state = {
+            t.controlledExternally = l()(e, "openPanelId");
+            if (!t.isControlled()) {
+                t.state = {
                     openPanelId: e.defaultOpenPanelId
                 };
             }
             if (false) {}
-            return n;
+            return t;
         }
         A(o, [ {
             key: "componentDidUpdate",
-            value: function e(t) {
+            value: function e(n) {
                 if (false) {}
                 if (false) {}
             }
@@ -404,31 +388,30 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, i = t.children, a = t.elementRef, l = t.inset;
+                var n = this.props, a = n.children, i = n.elementRef, l = n.inset;
                 var u = this.isControlled() ? this.props.openPanelId : this.state.openPanelId;
-                var s = n.Children.toArray(i).filter(n.isValidElement);
+                var f = t.Children.toArray(a).filter(t.isValidElement);
  // remove false, null, 0, etc
                                 
-                return r().createElement(C, k({
+                return r().createElement(_, q({
                     "data-test": "accordion",
                     "data-test-open-panel-id": u,
-                    elementRef: a
-                }, f()(this.props, c()(o.propTypes))),  r().createElement(v.Provider, {
+                    elementRef: i
+                }, s()(this.props, c()(o.propTypes))),  r().createElement(b.Provider, {
                     value: {
-                        onRequestOpen: this.handleRequestOpen,
-                        onRequestClose: this.handleRequestClose,
+                        onChange: this.handleChange,
                         openPanelId: u,
                         inset: l
                     }
-                }, s));
+                }, f));
             }
         } ]);
         return o;
-    }(n.Component);
-    G(K, "propTypes", H);
-    G(K, "defaultProps", J);
-    G(K, "Panel", S);
-    /* harmony default export */    const L = K;
+    }(t.Component);
+    F(J, "propTypes", G);
+    F(J, "defaultProps", H);
+    F(J, "Panel", x);
+    /* harmony default export */    const K = J;
     // CONCATENATED MODULE: ./src/Accordion/index.ts
-    module.exports = t;
+    module.exports = n;
     /******/})();

package/CHANGELOG.md

@@ -1,9 +1,32 @@
 Change Log
 ============
 
+4.27.0 - TBD
+----------
+New Features:
+* `CollapsiblePanel` now supports functionalities of `Accordion` (SUI-5719):
+    * The new `SingleOpenPanelGroup` component can be used wrap multiple `CollapsiblePanel` to replicate the   expand/collapse behavior of `Accordion`.
+    * `CollapsiblePanel` supports a new `inset` prop with similar functionality as the same prop in `Accordion`.
+    * A new `onChange` prop consolidates the callback behavior of the `onRequestClose` and `onRequestOpen` props.
+    * The separate `onRequestClose` and `onRequestOpen` props have been deprecated and will be removed in the next major version.
+* `ControlGroup` now supports `data-test-required` test hook. (SUI-6067).
+
+Bug Fixes:
+* `Text`'s focus style has been replaced with `@splunk/theme`'s `focusShadow` in Prisma themes to have a visible focus indicator (WCAG SC 2.4.7) (SUI-5321).
+  * Error state is now visible when inputs are focused.
+  * This change also affects the following components: `Combobox`, `Date`, `TextArea`, `Number`, `Select`'s and `Mutltiselect`'s filters, and `Search`.
+* `Table`'s column resize handle is now correctly announced by screen readers (SUI-5967).
+    * The element has been changed from a `button` to an `hr` to have the correct role of `separator`.
+* `Table`'s selectable row checkboxes are now accessible with VoiceOver keys (SUI-5958).
+* `Table`'s selectable row checkboxes will no longer receive focus when the row is `disabled` (SUI-5824).
+* `CollapsiblePanel`'s toggle has consistent spacing and improved focus styling when `titleWithActions` is enabled(SUI-5433).
+
+Typescript:
+* The `event` type for `TableRequestResizeColumnHandler` in the `Table` has been changed from a `button` event type to an `hr` event type: `event: React.MouseEvent<HTMLHRElement> | React.KeyboardEvent<HTMLHRElement> | MouseEvent`.
+
 4.26.0 - Feb 21, 2024
 ----------
-New Features: 
+New Features:
 * `Modal` automatically returns focus to the invoking element after close when a ref is provided to the new prop `returnFocus` (SUI-2834).
 * `Breadcrumbs` and `Breadcrumbs.Item` now support `onClick` prop (SUI-5911).
 
@@ -13,14 +36,14 @@ Bug Fixes:
 * `TextArea` renders at the correct size when `minRows={1}` (SUI-6010).
 * `TextArea` has consistent height when rendering rows regardless if value is present.
 * Fixed spurious deprecation warnings for `canClear` and `placeholder` props in `TextArea`.
-* Fixed regression in `TextArea` where placeholder text could be cut off. 
+* Fixed regression in `TextArea` where placeholder text could be cut off.
 
 API Changes:
 * Corrected the type of `Modal`'s `initialFocus` prop to include `React.Component & { focus: () => void }` instead of  `React.Component & { focus: () => {} }`.
 
 4.25.0 - Feb 6, 2024
 ----------
-New Features: 
+New Features:
 * `Modal` supports `subtitle` and `icon` props in Enterprise themes (SUI-5924).
 * `Button` now supports a new `"dimmed"` value for the `disabled` prop (SUI-5819).