@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.4

package/Code.js

@@ -60,36 +60,43 @@
  * Watches a React ref element for changes in size.
  *
  * @param ref - The React ref to observe size changes on
- */            var c = function e(t) {
-                var n = (0, a.useState)({
+ */            var c = function e(t, n) {
+                var s = (0, a.useState)({
                     width: 0,
                     height: 0
-                }), s = r(n, 2), i = s[0], o = s[1];
+                }), i = r(s, 2), o = i[0], l = i[1];
                 (0, a.useEffect)((function() {
                     var e = t.current;
                     if (typeof window !== "undefined" && window.ResizeObserver) {
-                        var n = new ResizeObserver((function(e) {
+                        var a = new ResizeObserver((function(e) {
                             if (e[0]) {
-                                var n, a;
-                                o({
-                                    width: (t === null || t === void 0 ? void 0 : (n = t.current) === null || n === void 0 ? void 0 : n.getBoundingClientRect().width) || 0,
-                                    height: (t === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.getBoundingClientRect().height) || 0
-                                });
+                                var a, r;
+                                var s = {
+                                    width: (t === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.getBoundingClientRect().width) || 0,
+                                    height: (t === null || t === void 0 ? void 0 : (r = t.current) === null || r === void 0 ? void 0 : r.getBoundingClientRect().height) || 0
+                                };
+                                l((function(e) {
+                                    if (e.height !== s.height || e.width !== s.width) {
+                                        n === null || n === void 0 ? void 0 : n(s);
+                                        return s;
+                                    }
+                                    return o;
+                                }));
                             }
                         }));
                         if (e) {
-                            n.observe(e);
+                            a.observe(e);
                         }
                         return function() {
                             if (e) {
-                                n.unobserve(e);
+                                a.unobserve(e);
                             }
                         };
                     }
                     // Return a no-op function to satisfy consistent-return rule
                                         return function() {};
                 }), [ t ]);
-                return i;
+                return o;
             };
             /* harmony default export */            const p = c;
         } // CONCATENATED MODULE: ./src/useResizeObserver/index.ts

package/Color.js

@@ -181,7 +181,7 @@
         // EXPORTS
                 n.d(t, {
             default: () => /* reexport */ Qe,
-            defaultPalette: () => /* reexport */ Re
+            defaultPalette: () => /* reexport */ Be
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -236,7 +236,7 @@
         var j = y().div.withConfig({
             displayName: "ColorInputStyles__StyledSystemColorPickerWrapper",
             componentId: "sc-80hen8-2"
-        })([ "position:relative;height:", ";width:", ";border:1px solid ", ";box-sizing:border-box;border-radius:", ";", " ", " &:focus-within{box-shadow:", ";}" ], m.variables.inputHeight, m.variables.inputHeight, m.variables.interactiveColorBorder, m.variables.borderRadius, (function(e) {
+        })([ "position:relative;height:", ";width:", ";border:", " solid ", ";box-sizing:border-box;border-radius:", ";", " ", " &:focus-within{box-shadow:", ";}" ], m.variables.inputHeight, m.variables.inputHeight, m.variables.inputBorderWidth, m.variables.interactiveColorBorder, m.variables.borderRadius, (function(e) {
             var r = e.$append;
             return r && (0, b.css)([ "margin-inline-end:-1px;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none;" ]);
         }), (function(e) {
@@ -246,17 +246,17 @@
         var P = y().input.withConfig({
             displayName: "ColorInputStyles__StyledSystemColorPicker",
             componentId: "sc-80hen8-3"
-        })([ "opacity:0;width:100%;height:100%;border:1px solid transparent;cursor:pointer;pointer-events:auto;" ]);
+        })([ "opacity:0;width:100%;height:100%;border:", " solid transparent;cursor:pointer;pointer-events:auto;" ], m.variables.inputBorderWidth);
         var q = y()(x()).withConfig({
             displayName: "ColorInputStyles__StyledColorPickerIcon",
             componentId: "sc-80hen8-4"
         })([ "box-sizing:border-box;height:100%;margin:auto;position:absolute;right:0;left:0;pointer-events:none;" ]);
         // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-        const R = require("@splunk/react-icons/Checkmark");
-        var $ =  n.n(R);
+        const B = require("@splunk/react-icons/Checkmark");
+        var R =  n.n(B);
         // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const B = require("@splunk/react-ui/Clickable");
-        var T =  n.n(B);
+        const $ = require("@splunk/react-ui/Clickable");
+        var T =  n.n($);
         // CONCATENATED MODULE: ./src/utils/determineTextBrightness.ts
         function A(e, r) {
             return M(e) || F(e, r) || H(e, r) || N();
@@ -372,7 +372,7 @@
         var J = function e(r, n) {
             return W(r, n || undefined) === z ? m.variables.black : m.variables.white;
         };
-        var Q = y()($()).withConfig({
+        var Q = y()(R()).withConfig({
             displayName: "SwatchStyles__StyledCheck",
             componentId: "sc-1wxunhq-0"
         })([ "box-sizing:border-box;", "" ], (function(e) {
@@ -385,7 +385,7 @@
         var X = y().div.withConfig({
             displayName: "SwatchStyles__StyledOuter",
             componentId: "sc-1wxunhq-1"
-        })([ "border:1px solid ", ";border-radius:", ";box-sizing:border-box;height:", ";min-width:", ";&:focus-within{box-shadow:", ";z-index:1;}", " ", " ", "" ], m.variables.interactiveColorBorder, m.variables.borderRadius, m.variables.inputHeight, m.variables.inputHeight, m.variables.focusShadow, (function(e) {
+        })([ "border:", " solid ", ";border-radius:", ";box-sizing:border-box;height:", ";min-width:", ";&:focus-within{box-shadow:", ";z-index:1;}", " ", " ", "" ], m.variables.inputBorderWidth, m.variables.interactiveColorBorder, m.variables.borderRadius, m.variables.inputHeight, m.variables.inputHeight, m.variables.focusShadow, (function(e) {
             var r = e.$disabled;
             return !r && (0, b.css)([ "&:hover{border-color:", ";}" ], m.variables.interactiveColorBorderHover);
         }), (function(e) {
@@ -408,7 +408,7 @@
         })).withConfig({
             displayName: "SwatchStyles__StyledClickable",
             componentId: "sc-1wxunhq-2"
-        })([ "display:block;position:relative;flex:0 0 auto;width:100%;height:100%;border:1px solid ", ";border-radius:3px;", ";", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], m.variables.neutral100, (function(e) {
+        })([ "display:block;position:relative;flex:0 0 auto;width:100%;height:100%;border:", " solid ", ";border-radius:3px;", ";", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], m.variables.inputBorderWidth, m.variables.neutral100, (function(e) {
             var r = e.$value;
             return r === null && (0, b.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );" ], m.variables.contentColorNegative);
         }), (function(e) {
@@ -631,7 +631,7 @@
             var a = t.allowTransparent, l = t.append, o = t.disabled, i = t.inputRef, u = t.labelledBy, s = t.onChange, c = t.showPicker, d = t.showSubmitButton, b = t.value, y = t.valueIsCustom, m = fe(t, [ "allowTransparent", "append", "disabled", "inputRef", "labelledBy", "onChange", "showPicker", "showSubmitButton", "value", "valueIsCustom" ]);
             var h = (0, e.useState)((0, p.createDOMID)("hex-input-reader-content")), w = oe(h, 1), S = w[0];
             var x = (0, e.useState)(""), k = oe(x, 2), O = k[0], E = k[1];
-            var R = (0, e.useState)(""), $ = oe(R, 2), B = $[0], T = $[1];
+            var B = (0, e.useState)(""), R = oe(B, 2), $ = R[0], T = R[1];
             var A = (0, e.useCallback)((function(e) {
                 E(be(e));
                 T(e !== null && e !== void 0 ? e : "");
@@ -641,7 +641,7 @@
                 T(pe(b));
             }), [ b ]);
             var N = (0, e.useCallback)((function(e) {
-                var r = be(pe(B));
+                var r = be(pe($));
                 var n = r !== undefined && (r == null || r === G && a || (0, f.isValidHexColor)(r));
                 if (n) {
                     s === null || s === void 0 ? void 0 : s(e, {
@@ -651,7 +651,7 @@
                     // eslint-disable-next-line no-console
                     console.warn('"'.concat(r, '" is not a valid hex color.'));
                 }
-            }), [ a, B, s ]);
+            }), [ a, $, s ]);
             var H = (0, e.useCallback)((function(e, r) {
                 var n = r.value;
                 A(n);
@@ -693,7 +693,7 @@
                 onChange: H,
                 onKeyDown: D,
                 spellCheck: false,
-                value: B
+                value: $
             }, m)), M), d &&  r().createElement(ae, {
                 "data-test": "textbox-swatch",
                 disabled: !!o,
@@ -764,13 +764,13 @@
             }
             return n;
         }
-        var Re = [ "#7B56DB", "#009CEB", "#00CDAF", "#DD9900", "#FF677B", "#CB2196", "#813193", "#0051B5", "#008C80", "#99B100", "#FFA476", "#FF6ACE", "#AE8CFF", "#00689D", "#00490A", "#465D00", "#9D6300", "#F6540B", "#FF969E", "#E47BFE" ];
-        var $e = function e(r, n) {
+        var Be = [ "#7B56DB", "#009CEB", "#00CDAF", "#DD9900", "#FF677B", "#CB2196", "#813193", "#0051B5", "#008C80", "#99B100", "#FFA476", "#FF6ACE", "#AE8CFF", "#00689D", "#00490A", "#465D00", "#9D6300", "#F6540B", "#FF969E", "#E47BFE" ];
+        var Re = function e(r, n) {
             return n != null && (r === null || r === void 0 ? void 0 : r.includes(n));
         };
-        var Be = [ null, "#ffffff", "#000000" ];
+        var $e = [ null, "#ffffff", "#000000" ];
         function Te(n) {
-            var t = n.activeInputRef, a = n.disabled, l = n.onChange, o = n.palette, i = o === void 0 ? Re : o, u = n.value, s = Pe(n, [ "activeInputRef", "disabled", "onChange", "palette", "value" ]);
+            var t = n.activeInputRef, a = n.disabled, l = n.onChange, o = n.palette, i = o === void 0 ? Be : o, u = n.value, s = Pe(n, [ "activeInputRef", "disabled", "onChange", "palette", "value" ]);
             var c = (0, e.useMemo)((function() {
                 return i === null || i === void 0 ? void 0 : i.map((function(e) {
                     return e === null ? e : e.toLowerCase();
@@ -778,10 +778,10 @@
             }), [ i ]);
             var d = u != null ? u.toLowerCase() : u;
             var f = (0, e.useMemo)((function() {
-                return $e(c, d);
+                return Re(c, d);
             }), [ c, d ]);
             var v = (0, e.useMemo)((function() {
-                return $e(Be, d);
+                return Re($e, d);
             }), [ d ]);
             var p = !f && !v && d !== "";
             var b = (0, e.useMemo)((function() {
@@ -811,7 +811,7 @@
             }));
             var h =  r().createElement(_e, {
                 "data-test": "tool-bar"
-            }, Be.map((function(e) {
+            }, $e.map((function(e) {
                 
                 return r().createElement(ae, {
                     key: e,
@@ -943,7 +943,7 @@
  * 1. If palette contains the color and the color is selected, the dropdown focus the color.
  * 2. If palette doesn't contain the color, the custom color picker swatch is focused.
  */        function Je(n) {
-            var t = n.append, a = n.defaultValue, l = n.disabled, o = n.describedBy, u = n.elementRef, c = n.error, f = n.hideInput, b = n.labelledBy, y = n.name, m = n.onChange, h = n.palette, g = h === void 0 ? Re : h, w = n.prepend, C = n.required, S = n.value, x = We(n, [ "append", "defaultValue", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "onChange", "palette", "prepend", "required", "value" ]);
+            var t = n.append, a = n.defaultValue, l = n.disabled, o = n.describedBy, u = n.elementRef, c = n.error, f = n.hideInput, b = n.labelledBy, y = n.name, m = n.onChange, h = n.palette, g = h === void 0 ? Be : h, w = n.prepend, C = n.required, S = n.value, x = We(n, [ "append", "defaultValue", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "onChange", "palette", "prepend", "required", "value" ]);
             // @docs-props-type ColorPropsBase
                         var k = (0, e.useMemo)((function() {
                 return g.some((function(e) {
@@ -956,22 +956,22 @@
                 componentProps: arguments[0]
             });
             var E = (0, e.useState)(a), I = De(E, 2), _ = I[0], j = I[1];
-            var P = (0, e.useState)(false), q = De(P, 2), R = q[0], $ = q[1];
-            var B = s()(R);
+            var P = (0, e.useState)(false), q = De(P, 2), B = q[0], R = q[1];
+            var $ = s()(B);
             var T = (0, e.useState)((function() {
                 return (0, p.createDOMID)("swatch-reader-content");
             })), A = De(T, 1), N = A[0];
             var H = (0, e.useRef)(null);
             var D = (0, e.useRef)(null);
             (0, e.useEffect)((function() {
-                if (R) {
+                if (B) {
                     var e, r;
                     (e = D.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
-                } else if (B) {
+                } else if ($) {
                     var n;
                     H === null || H === void 0 ? void 0 : (n = H.current) === null || n === void 0 ? void 0 : n.focus();
                 }
-            }), [ R, B ]);
+            }), [ B, $ ]);
             var F = (0, e.useMemo)((function() {
                 return O ? S : _;
             }), [ O, S, _ ]);
@@ -993,20 +993,20 @@
                 }
             }), [ O, y, m, F ]);
             var L = (0, e.useCallback)((function() {
-                $(false);
+                R(false);
             }), []);
             var z = (0, e.useCallback)((function() {
-                $(true);
+                R(true);
             }), []);
             var V = (0, e.useCallback)((function(e, r) {
                 var n = r.value;
                 e.preventDefault();
-                $(false);
+                R(false);
                 M(n);
             }), [ M ]);
             var W = (0, e.useCallback)((function(e, r) {
                 var n = r.value;
-                $(false);
+                R(false);
                 M(n);
             }), [ M ]);
             var K = function e() {
@@ -1046,7 +1046,7 @@
                 closeReasons: Ge,
                 onRequestClose: L,
                 onRequestOpen: z,
-                open: R,
+                open: B,
                 retainFocus: true,
                 takeFocus: false,
                 toggle: U()

package/ComboBox.js

@@ -444,10 +444,12 @@
             W === null || W === void 0 ? void 0 : W();
         }), [ W ]);
         var Fe = (0, r.useCallback)((function() {
-            Oe(true);
-            de(0);
-            X === null || X === void 0 ? void 0 : X();
-        }), [ X ]);
+            if (!he) {
+                Oe(true);
+                de(0);
+                X === null || X === void 0 ? void 0 : X();
+            }
+        }), [ he, X ]);
         var Ve = (0, r.useCallback)((function() {
             return ue ? ae : Te;
         }), [ ue, ae, Te ]);
@@ -502,10 +504,10 @@
         }), [ ze, Xe, ke ]);
         var $e = (0, r.useCallback)((function(e) {
             e.stopPropagation();
-            if (!he && !d) {
+            if (!d) {
                 Fe();
             }
-        }), [ d, he, Fe ]);
+        }), [ d, Fe ]);
         var Ge = (0, r.useCallback)((function(e) {
             var n = e.event, r = e.reason;
             var t = r === "offScreen" || r === "escapeKey" || r === "clickAway" && be && !J(be, n);

package/Date.js

@@ -108,7 +108,7 @@
     var w = h().div.withConfig({
         displayName: "DateStyles__IconContainer",
         componentId: "kacgdc-1"
-    })([ "align-items:center;color:", ";display:flex;pointer-events:none;" ], (0, O.pickVariant)("$disabled", {
+    })([ "align-items:center;color:", ";display:flex;" ], (0, O.pickVariant)("$disabled", {
         false: O.variables.contentColorMuted,
         true: O.variables.contentColorDisabled
     }));