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

package/Clickable.js

@@ -72,15 +72,15 @@
     var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var o =  e.n(i);
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "lodash/has"
-    const a = require("lodash/has");
+    const o = require("lodash/has");
     // CONCATENATED MODULE: external "lodash/isString"
     const l = require("lodash/isString");
     var u =  e.n(l);
     // CONCATENATED MODULE: external "lodash/omit"
-    const c = require("lodash/omit");
-    var d =  e.n(c);
+    const d = require("lodash/omit");
+    var c =  e.n(d);
     // CONCATENATED MODULE: external "styled-components"
     const s = require("styled-components");
     var f =  e.n(s);
@@ -94,25 +94,25 @@
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     var p = {
-        children: o().node,
-        onClick: o().func,
-        onLinkClick: o().func,
-        transformUrl: o().func
+        children: a().node,
+        onClick: a().func,
+        onLinkClick: a().func,
+        transformUrl: a().func
     };
     var m =  t().createContext({});
     /**
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */    function y(e) {
-        var n = e.children, i = e.onClick, o = e.onLinkClick, a = e.transformUrl;
+        var n = e.children, i = e.onClick, a = e.onLinkClick, o = e.transformUrl;
         // @docs-props-type NavigationProviderProps
                 var l = (0, r.useMemo)((function() {
             return {
                 onClick: i,
-                onLinkClick: o,
-                transformUrl: a
+                onLinkClick: a,
+                transformUrl: o
             };
-        }), [ i, o, a ]);
+        }), [ i, a, o ]);
         
         return t().createElement(m.Provider, {
             value: l
@@ -152,16 +152,16 @@
     }
     function g(e, n) {
         if (null == e) return {};
-        var r, t, i = h(e, n);
+        var r, t, i = O(e, n);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < o.length; t++) {
-                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+            var a = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < a.length; t++) {
+                r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
             }
         }
         return i;
     }
-    function h(e, n) {
+    function O(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -172,127 +172,130 @@
         }
         return r;
     }
-    var O = /^[a-z0-9]+:/;
+    var h = /^[a-z0-9]+:/;
     var w = /^\/\//;
     var P = /^\//;
     var S = function e(n) {
         return n != null && P.test(n);
     };
     var j = function e(n) {
-        return n != null && !O.test(n) && !w.test(n);
+        return n != null && !h.test(n) && !w.test(n);
     };
     var x = {
-        children: o().node,
-        disabled: o().oneOfType([ o().bool, o().oneOf([ "dimmed", "disabled" ]) ]),
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        onClick: o().func,
-        openInNewContext: o().bool,
-        navigationLabel: o().string,
-        to: o().string
+        children: a().node,
+        disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        onClick: a().func,
+        openInNewContext: a().bool,
+        navigationLabel: a().string,
+        to: a().oneOfType([ a().string, a().oneOf([ undefined ]) ])
     };
-    function L(e, n) {
-        return !!n && !e;
+    function L(e) {
+        return e !== undefined;
     }
     /**
  * `Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set
  * and the `disabled` prop is `false`. This is called link mode.
- */    var I =  t().forwardRef((function(e, n) {
-        var i = e.children, o = e.disabled, a = e.elementRef, l = e.navigationLabel, c = e.onClick, s = e.openInNewContext, f = e.to, v = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "to" ]);
+ */    var I =  t().forwardRef((function(e, 
+    // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
+    n) {
+        var i = e.children, a = e.disabled, o = e.elementRef, l = e.navigationLabel, d = e.onClick, s = e.openInNewContext, f = e.tag, v = e.to, p = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "tag", "to" ]);
         // @docs-props-type ClickablePropsBase
-                var p = (0, r.useContext)(m), y = p.onClick, h = p.onLinkClick, O = p.transformUrl;
+                var y = (0, r.useContext)(m), O = y.onClick, h = y.onLinkClick, w = y.transformUrl;
         (0, r.useEffect)((function() {
             if (false) {}
             // this effect only runs once
             // eslint-disable-next-line react-hooks/exhaustive-deps
                 }), []);
-        var w = (0, r.useCallback)((function(e) {
-            k(a, e);
+        var P = (0, r.useCallback)((function(e) {
+            k(o, e);
             k(n, e);
-        }), [ a, n ]);
+        }), [ o, n ]);
         // memoizing this result causes TS to lose track of the type guard established by isLinkCheck
-                var P = L(o, f);
+                var x = L(v);
         // ideally we wouldn't need to pass "to" as "toValue" here
         // but without doing that TS thinks the return value of this is
         // string | undefined which doesn't work for usages of this function
-                var x = (0, r.useCallback)((function(e) {
-            return O != null ? O(e, {
+                var I = (0, r.useCallback)((function(e) {
+            return w != null ? w(e, {
                 isInternal: j(e),
                 isRootRelative: S(e)
             }) : e;
-        }), [ O ]);
-        var I = (0, r.useCallback)((function(e) {
-            if (P) {
+        }), [ w ]);
+        var R = (0, r.useCallback)((function(e) {
+            if (x) {
                 // when user command-click on mac or ctrl-click on other platforms, and
                 // Tag is an <a>, let the click pass through, let the <a> to achieve user's
                 // intent of 'open in new context'
                 // on mac, ctrl-click will be caught and open option menu even before hitting
                 // the DOM, so we're safe to check both metaKey and ctrlKey here
                 // without platform sniffing
-                if ((e.metaKey || e.ctrlKey) && f) {
+                if ((e.metaKey || e.ctrlKey) && v) {
                     return;
                 }
             }
-            c === null || c === void 0 ? void 0 : c(e);
-            var n = c == null && y != null;
-            if (P && (n || h != null)) {
+            d === null || d === void 0 ? void 0 : d(e);
+            var n = d == null && O != null;
+            if (x && (n || h != null)) {
                 var r = l;
                 if (!r && u()(i)) {
                     r = i;
                 }
                 var t = {
-                    to: x(f),
-                    originalTo: f,
+                    to: I(v),
+                    originalTo: v,
                     openInNewContext: s,
                     label: r
                 };
                 if (n) {
-                    y(e, t);
+                    O(e, t);
                 }
                 h === null || h === void 0 ? void 0 : h(e, t);
             }
-        }), [ i, x, P, l, c, y, h, s, f ]);
-        // Only set the href attribute when enabled, and therefore using an <a> tag
-                if (P) {
-            var R = s ? "_blank" : undefined;
-            var q = s && j(f) ? "noopener noreferrer" : undefined;
+        }), [ i, I, x, l, d, O, h, s, v ]);
+        // Only set the href attribute when enabled and therefore using an <a> tag
+                if (x && f !== "button") {
+            if (a) {
+                
+                return t().createElement(b, C({
+                    "data-test": "clickable",
+                    "data-test-disabled": a,
+                    ref: P,
+                    role: "link",
+                    "aria-disabled": "true"
+                }, p), i);
+            }
+            var T = s ? "_blank" : undefined;
+            var q = s && j(v) ? "noopener noreferrer" : undefined;
             
             return t().createElement(b, C({
                 "data-test": "clickable",
-                ref: w,
-                href: x(f),
-                target: R,
+                ref: P,
+                href: I(v),
+                target: T,
                 rel: q,
-                onClick: I
-            }, d()(v)), i);
-        }
-        if (o && f != null) {
-            
-            return t().createElement(b, C({
-                "data-test": "clickable",
-                ref: w,
-                role: "link",
-                "aria-disabled": "true"
-            }, v), i);
+                onClick: R
+            }, c()(p)), i);
         }
         // button variant
-                var N = o === true || o === "dimmed" || undefined;
-        var T;
+                var N = a === true || a === "dimmed" || undefined;
+        var _;
         if (N) {
-            T = "dimmed";
-        } else if (o === "disabled") {
-            T = "disabled";
+            _ = "dimmed";
+        } else if (a === "disabled") {
+            _ = "disabled";
         }
         
         return t().createElement(b, C({
             as: "button",
             "aria-disabled": N,
             "data-test": "clickable",
-            "data-test-disabled": T,
-            ref: w,
+            "data-test-disabled": _,
+            ref: P,
             type: "button",
-            disabled: o === "disabled",
-            onClick: c && !o ? I : undefined
-        }, d()(v, "disabled")), i);
+            disabled: a === "disabled",
+            onClick: d && !a ? R : undefined
+        }, c()(p, "disabled")), i);
     }));
     I.propTypes = x;
     /* harmony default export */    const R = I;

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

@@ -200,7 +200,7 @@
             "data-test-value": b,
             description: o,
             descriptionPosition: i,
-            disabled: l,
+            disabled: l ? "disabled" : undefined,
             elementRef: g,
             startAdornment: c,
             matchRanges: f,
@@ -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);