@splunk/react-ui 5.0.0-rc.2 → 5.0.0

package/Popover.js

@@ -1125,76 +1125,77 @@
  * `Dropdown` covers use cases where you might consider using `Popover` directly.
  */    function tt(e) {
         var t, o;
-        var a = e.align, i = a === void 0 ? "center" : a, l = e.anchor, c = e.animation, f = c === void 0 ? true : c, s = e.animationConfig, p = s === void 0 ? et : s, v = e.appearance, d = v === void 0 ? "normal" : v, m = e.autoCloseWhenOffScreen, b = m === void 0 ? true : m, y = e.canCoverAnchor, w = e.children, O = e.closeReasons, C = O === void 0 ? Ke : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, L = e.onRequestClose, D = e.open, F = e.outerRef, $ = e.pointTo, N = e.repositionMode, V = N === void 0 ? "flip" : N, z = e.retainFocus, K = z === void 0 ? true : z, Y = e.takeFocus, Q = Ve(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus" ]);
+        var a = e.align, i = a === void 0 ? "center" : a, l = e.anchor, c = e.animation, f = c === void 0 ? true : c, s = e.animationConfig, p = s === void 0 ? et : s, v = e.appearance, d = v === void 0 ? "normal" : v, m = e.autoCloseWhenOffScreen, b = m === void 0 ? true : m, y = e.canCoverAnchor, w = e.children, O = e.closeReasons, C = O === void 0 ? Ke : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, L = e.onRequestClose, D = e.open, F = e.outerRef, $ = e.pointTo, N = e.repositionMode, V = N === void 0 ? "flip" : N, z = e.retainFocus, K = z === void 0 ? true : z, Y = e.takeFocus, Q = e.toggleId, Z = Ve(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus", "toggleId" ]);
         // @docs-props-type PopoverPropsBase
                 if (false) {}
-        var Z = (0, r.useState)(D), ee = Le(Z, 2), te = ee[0], re = ee[1];
-        var ne = (0, r.useState)(false), oe = Le(ne, 2), ae = oe[0], ie = oe[1];
-        if (D !== ae) {
+        var ee = (0, r.useState)(D), te = Le(ee, 2), re = te[0], ne = te[1];
+        var oe = (0, r.useState)(false), ae = Le(oe, 2), ie = ae[0], le = ae[1];
+        if (D !== ie) {
             // formerly implemented by componentWillReceiveProps
             // we can't use prevOpen here since that's a ref behind the scenes
             // and won't get updated until the component re-renders successfully
             // whereas setAnimating will interrupt the re-render and we'll end up in an infinite loop
             // so we need to update the value of wasOpen at the same time
-            re(f);
-            ie(D);
+            ne(f);
+            le(D);
         }
         // this is a single state object because all these properties
         // are updated at the same time by setPlacement
-                var le = (0, r.useState)({}), fe = Le(le, 2), se = fe[0], pe = fe[1];
-        var ve = (0, r.useRef)(true);
-        var de = (0, r.useRef)(false);
-        var he = (0, r.useRef)(null);
+                var fe = (0, r.useState)({}), se = Le(fe, 2), pe = se[0], ve = se[1];
+        var de = (0, r.useRef)(true);
+        var he = (0, r.useRef)(false);
         var me = (0, r.useRef)(null);
         var ye = (0, r.useRef)(null);
-        var ge = {
-            anchorHeight: ((t = se.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
-            anchorWidth: ((o = se.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
-            placement: se.placement || null,
-            maxHeight: Ze(se.maxHeight, d),
-            maxWidth: Ze(se.maxWidth, d)
+        var ge = (0, r.useRef)(null);
+        var we = {
+            anchorHeight: ((t = pe.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
+            anchorWidth: ((o = pe.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
+            placement: pe.placement || null,
+            maxHeight: Ze(pe.maxHeight, d),
+            maxWidth: Ze(pe.maxWidth, d),
+            toggleId: Q
         };
-        var we = (0, r.useMemo)((function() {
+        var Se = (0, r.useMemo)((function() {
             return f ? {
                 opacity: D ? 1 : 0
             } : {
                 opacity: 1
             };
         }), [ f, D ]);
-        var Se = be();
-        var Oe = D || te;
-        var Pe = (0, r.useContext)(T()) || Se;
-        var je = Pe !== Se;
-        var Ce = (0, r.useContext)(ue), Ee = Ce.hideArrow;
-        var xe = q !== null && q !== void 0 ? q : Ee;
+        var Oe = be();
+        var Pe = D || re;
+        var je = (0, r.useContext)(T()) || Oe;
+        var Ce = je !== Oe;
+        var Ee = (0, r.useContext)(ue), xe = Ee.hideArrow;
+        var Ae = q !== null && q !== void 0 ? q : xe;
         (0, r.useEffect)((function() {
             if (false) {}
         }), [ l ]);
-        var Ae = (0, r.useCallback)((function(e) {
+        var Te = (0, r.useCallback)((function(e) {
             if (D && (C === null || C === void 0 ? void 0 : C.includes(e.reason))) {
                 L === null || L === void 0 ? void 0 : L(e);
             }
         }), [ C, D, L ]);
-        var Te = (0, r.useCallback)((function(e, t) {
+        var Me = (0, r.useCallback)((function(e, t) {
             var r = Qe(e, t);
             if (r) {
-                Ae({
+                Te({
                     reason: "offScreen"
                 });
             }
             return r;
-        }), [ Ae ]);
-        var Me = M()(), qe = Me.borderRadius, He = Me.spacingXSmall;
-        var Ie = parseInt(qe, 10);
+        }), [ Te ]);
+        var qe = M()(), He = qe.borderRadius, Ie = qe.spacingXSmall;
         var De = parseInt(He, 10);
+        var Fe = parseInt(Ie, 10);
         // this is intentionally smaller when the arrow is hidden to address SUI-5452
-                var Fe = xe ? De : X;
+                var $e = Ae ? Fe : X;
         // do not call this directly - use setPlacement (the throttled version) instead
-                var $e = (0, r.useCallback)((function(e) {
-            pe((function(t) {
+                var _e = (0, r.useCallback)((function(e) {
+            ve((function(t) {
                 var r, n;
                 // If these conditions are not met, we cannot set the popover.
-                                if (!D || !ye.current || !l) {
+                                if (!D || !ge.current || !l) {
                     // if (__DEV__ && !anchor && open) {
                     //     throw new Error(`Invalid anchor ${anchor} provided to Popover.`);
                     // }
@@ -1209,12 +1210,12 @@
                     offsets: true,
                     pointTo: $
                 });
-                var c = Je(Pe) ? Ge({
-                    anchorEl: Pe,
+                var c = Je(je) ? Ge({
+                    anchorEl: je,
                     pointTo: $
                 }) : undefined;
                 if (e && b) {
-                    if (Te(o, c)) {
+                    if (Me(o, c)) {
                         return t;
                     }
                 }
@@ -1225,22 +1226,22 @@
                     canCoverAnchor: y,
                     defaultPlacement: k,
                     repositionMode: V,
-                    outerContainerEl: ye.current,
-                    padding: Fe,
-                    windowWidth: Se.innerWidth,
-                    windowHeight: Se.innerHeight
+                    outerContainerEl: ge.current,
+                    padding: $e,
+                    windowWidth: Oe.innerWidth,
+                    windowHeight: Oe.innerHeight
                 }), f = u.placement, s = u.outerContainerStyle, p = u.maxHeight, v = u.maxWidth;
                 var d = Ye(a, t.anchorPos) && Ye(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
                 var h = true;
                 var m = {};
                 var g;
-                if (he.current) {
+                if (me.current) {
                     var w = Ue({
                         anchorPos: a,
-                        borderRadius: Ie,
+                        borderRadius: De,
                         outerContainerStyle: s,
                         placement: f,
-                        outerContainerEl: ye.current
+                        outerContainerEl: ge.current
                     });
                     var O = Le(w, 2);
                     m = O[0];
@@ -1261,93 +1262,95 @@
                     maxWidth: v
                 };
             }));
-        }), [ i, l, b, Ie, Fe, y, Te, k, D, $, V, Pe, Se.innerHeight, Se.innerWidth ]);
+        }), [ i, l, b, De, $e, y, Me, k, D, $, V, je, Oe.innerHeight, Oe.innerWidth ]);
         // these are useMemo rather than useCallback so that ESLint can correctly analyze the dependencies
         // see https://github.com/facebook/react/issues/19240#issuecomment-652945246
-                var _e = (0, r.useMemo)((function() {
-            return P()($e.bind(null, true), 0);
-        }), [ $e ]);
-        var Ne = (0, r.useMemo)((function() {
-            return P()($e.bind(null, true), 0);
-        }), [ $e ]);
+                var Ne = (0, r.useMemo)((function() {
+            return P()(_e.bind(null, true), 0);
+        }), [ _e ]);
         var ze = (0, r.useMemo)((function() {
-            return P()($e, 0, {
+            return P()(_e.bind(null, true), 0);
+        }), [ _e ]);
+        var Xe = (0, r.useMemo)((function() {
+            return P()(_e, 0, {
                 leading: false
             });
-        }), [ $e ]);
+        }), [ _e ]);
         // this needs to run on every render - equivalent to componentDidUpdate
                 (0, r.useEffect)((function() {
-            if (!me.current) {
+            if (!ye.current) {
                 return;
             }
-            if (D || te) {
-                ze();
+            if (D || re) {
+                Xe();
             }
         }));
         (0, r.useEffect)((function() {
-            if (Y && D && me.current && se.placement != null && !de.current) {
-                de.current = true;
-                (0, W.takeFocus)(me.current);
+            if (Y && D && ye.current && pe.placement != null && !he.current) {
+                he.current = true;
+                (0, W.takeFocus)(ye.current);
             }
-        }), [ D, se.placement, Y ]);
-        // it is not part of the previous useEffect because it needs to be equivalent to componentWillUnmount
-                (0, r.useEffect)((function() {
+        }), [ D, pe.placement, Y ]);
+        (0, r.useEffect)((function() {
+            // we need to set this to true on every mount because React.StrictMode will call the effect twice
+            // and we need to ensure that allowAnimationUpdates is true while the component is mounted
+            de.current = true;
             return function() {
-                ze.cancel();
-                _e.cancel();
+                Xe.cancel();
                 Ne.cancel();
-                ve.current = false;
+                ze.cancel();
+                de.current = false;
             };
-            // no dependencies here since this needs to set up a cleanup function exactly once
+            // no dependencies here since this is equivalent to componentDidMount and componentWillUnmount
             // eslint-disable-next-line react-hooks/exhaustive-deps
                 }), []);
         // EventListeners only need to be rendered when open,
         // otherwise leads to negative performance impacts
-                var Xe = Oe ?  n().createElement(n().Fragment, null, je &&  n().createElement(E(), {
-            target: Pe,
+                var tt = Pe ?  n().createElement(n().Fragment, null, Ce &&  n().createElement(E(), {
+            target: je,
             eventType: "scroll",
-            listener: _e,
+            listener: Ne,
             options: Be,
             key: "eventListener"
         }),  n().createElement(E(), {
-            target: Se,
+            target: Oe,
             eventType: "resize",
-            listener: ze,
+            listener: Xe,
             key: "eventListenerOnWindowResize"
         }),  n().createElement(E(), {
-            target: Se,
+            target: Oe,
             eventType: "scroll",
-            listener: Ne,
+            listener: ze,
             options: Be,
             key: "eventListenerOnWindowScroll"
         })) : null;
-        var tt = (0, r.useCallback)((function() {
+        var rt = (0, r.useCallback)((function() {
             // checking allowAnimationUpdates avoids trying to update state after the component has been unmounted - see SUI-3666
-            if (ve.current) {
-                re(false);
+            if (de.current) {
+                ne(false);
             }
         }), []);
-        var rt = (0, r.useCallback)((function(e) {
-            me.current = e;
+        var nt = (0, r.useCallback)((function(e) {
+            ye.current = e;
             if (e && Y) {
                 u()(W.takeFocus, e);
             }
             ke(R, e);
         }), [ R, Y ]);
-        var nt = (0, r.useCallback)((function(e) {
-            ye.current = e;
+        var ot = (0, r.useCallback)((function(e) {
+            ge.current = e;
             ke(F, e);
         }), [ F ]);
-        var ot = (0, r.useCallback)((function(e) {
-            if (me.current) {
+        var at = (0, r.useCallback)((function(e) {
+            if (ye.current) {
                 if (K) {
-                    (0, W.handleTab)(me.current, e);
+                    (0, W.handleTab)(ye.current, e);
                 } else if ((0, W.isTabKey)(e)) {
-                    var t = (0, W.getSortedTabbableElements)(me.current);
+                    var t = (0, W.getSortedTabbableElements)(ye.current);
                     if (t.length > 0) {
                         var r = e.shiftKey ? t[0] : t[t.length - 1];
                         if (r === e.target) {
-                            Ae({
+                            Te({
                                 event: e,
                                 reason: "tabKey"
                             });
@@ -1355,67 +1358,67 @@
                     }
                 }
             }
-        }), [ Ae, K ]);
-        var at = (0, r.useMemo)((function() {
+        }), [ Te, K ]);
+        var it = (0, r.useMemo)((function() {
             return {
                 opacity: f ? 0 : 1
             };
         }), [ f ]);
-        var it = (0, r.useMemo)((function() {
+        var lt = (0, r.useMemo)((function() {
             return We({
                 tension: 300,
                 friction: 20,
                 clamp: true
             }, p);
         }), [ p ]);
-        var lt = (0, j.useAnimation)({
-            from: at,
-            to: we,
+        var ct = (0, j.useAnimation)({
+            from: it,
+            to: Se,
             // Setting clamp to true will stop animating at the point it hit's it's goal value.
             // This will prevent click through while animating out (SUI-6618).
-            config: it,
-            onRest: tt
+            config: lt,
+            onRest: rt
         });
-        var ct = (0, r.useMemo)((function() {
-            return We(We({}, se.outerContainerStyle), lt);
-        }), [ se.outerContainerStyle, lt ]);
         var ut = (0, r.useMemo)((function() {
+            return We(We({}, pe.outerContainerStyle), ct);
+        }), [ pe.outerContainerStyle, ct ]);
+        var ft = (0, r.useMemo)((function() {
             return h()(C === null || C === void 0 ? void 0 : C.filter((function(e) {
                 return e !== "offScreen";
             })), A().possibleCloseReasons);
         }), [ C ]);
-        var ft = g()(w) ? w(ge) : w;
+        var st = g()(w) ? w(we) : w;
         
-        return n().createElement(n().Fragment, null, Xe,  n().createElement(A(), {
-            closeReasons: ut,
-            open: Oe,
-            onRequestClose: Ae,
+        return n().createElement(n().Fragment, null, tt,  n().createElement(A(), {
+            closeReasons: ft,
+            open: Pe,
+            onRequestClose: Te,
             key: "Layer"
-        }, Oe && me.current && H &&  n().createElement(ce, {
-            anchorRect: se.anchorPos,
-            popoverEl: me.current,
-            popoverPlacement: se.placement,
+        }, Pe && ye.current && H &&  n().createElement(ce, {
+            anchorRect: pe.anchorPos,
+            popoverEl: ye.current,
+            popoverPlacement: pe.placement,
             ref: H
-        }), Oe &&  n().createElement(B, {
+        }), Pe &&  n().createElement(B, {
             "data-test": "outer-popover",
-            style: ct,
-            ref: nt
+            style: ut,
+            ref: ot
         },  n().createElement(U, Re({
             $appearance: d,
-            $boxPadding: Fe,
+            $boxPadding: $e,
             $open: D,
             "data-test": "popover",
-            ref: rt,
+            ref: nt,
             id: I,
-            onKeyDown: ot
-        }, Q),  n().createElement(n().Fragment, null, d === "none" && ft, d !== "none" && !xe &&  n().createElement(J, {
+            onKeyDown: at
+        }, Z),  n().createElement(n().Fragment, null, d === "none" && st, d !== "none" && !Ae &&  n().createElement(J, {
             "data-test": "popover-arrow",
             $appearance: d,
-            ref: he,
-            style: se.arrowStyle
+            ref: me,
+            style: pe.arrowStyle
         }), d !== "none" &&  n().createElement(G, {
             $appearance: d
-        }, ft))))));
+        }, st))))));
     }
     tt.propTypes = Xe;
     tt.possibleCloseReasons = Ke;

package/README.md

@@ -8,7 +8,7 @@ Install the package and its dependencies.
 
 1. Install the peer dependencies:
     ```bash
-    npm install react@^16 react-dom@^16 styled-components@^5
+    npm install react@^18 react-dom@^18 styled-components@^5
     ```
 2. Install the package:
     ```bash
@@ -74,7 +74,7 @@ It is strongly recommended to include only one instance of `@splunk/react-ui` in
 using multiple instances of this library on the same page is discouraged.
 
 ```
-| Multiple instances | @splunk/react-ui 4.x    | @splunk/react-ui 4.x and 3.x |
+| Multiple instances | @splunk/react-ui 5.x    | @splunk/react-ui 5.x and 4.x |
 | ------------------ | ----------------------- | ---------------------------- |
 | In the same bundle | Deduplicate             | Avoid                        |
 | On the same page   | Avoid                   | Avoid                        |
@@ -84,19 +84,19 @@ using multiple instances of this library on the same page is discouraged.
 
 Multiple instances of `@splunk/react-ui` in the same bundle should be avoided.
 For example, instead of `4.0.0` and `4.1.0` only `4.1.0` should be used.
-Multiple versions of `3.x` are not supported.
+Only major bug fixes will be supported in version `4.x`
 Use a package manager (Yarn or NPM) or a module bundler (Webpack) to deduplicate versions.
 
 ##### 1. Yarn or NPM:
 `yarn` and `npm` resolve dependencies to avoid duplicate versions.
 
 Pros:
-  * Supports `4.x` and `3.x` in the same bundle.
+  * Supports `5.x` and `4.x` in the same bundle.
 
 Cons:
   * Extra versions can unexpectedly be added to lock files while updating dependencies.
   * Upgrades may require rebuilding the lock file.
-  * All packages must all define their `@splunk/react-ui` dependency with a major version (`@^4.0` or `@^4.1`),
+  * All packages must all define their `@splunk/react-ui` dependency with a major version (`@^5.0` or `@^4.1`),
   not a minor version (`@~4.0`).  
 
 
@@ -108,7 +108,7 @@ Pros:
   * Reliably builds with one version of `@splunk/react-ui`.
 
 Cons:
-  * Cannot be used when `3.x` and `4.x` are required by different dependencies.
+  * Cannot be used when `5.x` and `4.x` are required by different dependencies.
   * If dependencies rely on a newer version, unexpected breakages may occur.
 
 ### On the same page