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

package/NonInteractiveCheckbox.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // 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, {
+            /******/ for (var o in t) {
+                /******/ if (e.o(t, o) && !e.o(r, o)) {
+                    /******/ Object.defineProperty(r, o, {
                         enumerable: true,
-                        get: t[n]
+                        get: t[o]
                     });
                     /******/                }
                 /******/            }
@@ -61,129 +61,41 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ _
+        default: () => /* reexport */ i
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
-    var n =  e.n(t);
+    var o =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
-    // CONCATENATED MODULE: external "styled-components"
-    const l = require("styled-components");
-    var i =  e.n(l);
-    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBox"
-    const c = require("@splunk/react-icons/CheckBox");
-    var s =  e.n(c);
-    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxCompleted"
-    const d = require("@splunk/react-icons/CheckBoxCompleted");
-    var u =  e.n(d);
-    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxIndeterminate"
-    const v = require("@splunk/react-icons/CheckBoxIndeterminate");
-    var p =  e.n(v);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
-    // CONCATENATED MODULE: ./src/NonInteractiveCheckbox/NonInteractiveCheckboxStyles.ts
-    var m = "20px";
-    var f = (0, l.css)([ "width:", ";height:", ";" ], m, m);
-    var y = (0, l.css)([ "transform:translateY(-2px);clip-path:inset(0% round ", ");" ], b.variables.borderRadius);
-    var h = i().div.withConfig({
-        displayName: "NonInteractiveCheckboxStyles__StyledCheckBoxWrapper",
-        componentId: "sc-1mawanc-0"
-    })([ "", " position:relative;flex-shrink:0;max-height:", ";" ], b.mixins.reset("inline-block"), m);
-    var C = i()(s()).withConfig({
-        displayName: "NonInteractiveCheckboxStyles__StyledCheckboxEmpty",
-        componentId: "sc-1mawanc-1"
-    })([ "", " ", " color:", ";", "" ], f, y, b.variables.interactiveColorBorder, (function(e) {
-        var r = e.$disabled;
-        return !!r && (0, l.css)([ "color:", ";" ], b.variables.interactiveColorBorderDisabled);
-    }));
-    var x = i()(s()).withConfig({
-        displayName: "NonInteractiveCheckboxStyles__StyledCheckBoxBackground",
-        componentId: "sc-1mawanc-2"
-    })([ "", " ", " color:", ";", "" ], f, y, b.variables.interactiveColorAccent, (function(e) {
-        var r = e.$disabled;
-        return !!r && (0, l.css)([ "color:", ";" ], b.variables.neutral100);
-    }));
-    var k = i()(u()).withConfig({
-        displayName: "NonInteractiveCheckboxStyles__StyledCheckBoxCompleted",
-        componentId: "sc-1mawanc-3"
-    })([ "", " position:absolute;left:0;top:0;color:", ";", "" ], f, b.variables.contentColorInverted, (function(e) {
-        var r = e.$disabled;
-        return !!r && (0, l.css)([ "color:", ";" ], b.variables.contentColorDisabled);
-    }));
-    var w = k.withComponent(p());
+    const a = require("prop-types");
+    var n =  e.n(a);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
+    const l = require("@splunk/react-ui/Switch");
+    var c =  e.n(l);
     // CONCATENATED MODULE: ./src/NonInteractiveCheckbox/NonInteractiveCheckbox.tsx
-    function g(e, r) {
-        if (null == e) return {};
-        var t, n, o = S(e, r);
-        if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < a.length; n++) {
-                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
-            }
-        }
-        return o;
-    }
-    function S(e, r) {
-        if (null == e) return {};
-        var t = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                t[n] = e[n];
-            }
-        }
-        return t;
-    }
-    var B = {
-        disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed" ]) ]),
-        selected: a().oneOfType([ a().bool, a().oneOf([ "some" ]) ])
+    var s = {
+        disabled: n().bool,
+        selected: n().oneOfType([ n().bool, n().oneOf([ "some" ]) ])
     };
     /**
- * NonInteractiveCheckbox is a private component that replaces our internal usage of Switch's interactive={false}
- * with react-icons instead in components like Menu.Item, Table.Toggle, etc. (SUI-6757)
+ * NonInteractiveCheckbox is a private component that replaced our internal usage of Switch's interactive={false}
+ * for components like Menu.Item, Table.Toggle, etc. (SUI-6757)
  *
- */    function O(e) {
-        var r = e.disabled, o = e.selected, a = g(e, [ "disabled", "selected" ]);
-        // The SVG icon has built-in internal spacing, creating a slight visual discrepancy compared to the Switch component.
-        // Adjusting the viewBox helps align the checkbox icon visually with the Switch for a consistent appearance.
-                var l = "3 3 18 18";
-        var i = "4 4 16 16";
-        var c = (0, t.useCallback)((function() {
-            if (o === true) {
-                
-                return n().createElement(n().Fragment, null,  n().createElement(x, {
-                    viewBox: l,
-                    variant: "filled",
-                    $disabled: r
-                }),  n().createElement(k, {
-                    viewBox: i,
-                    $disabled: r
-                }));
-            }
-            if (o === "some") {
-                
-                return n().createElement(n().Fragment, null,  n().createElement(x, {
-                    viewBox: l,
-                    variant: "filled",
-                    $disabled: r
-                }),  n().createElement(w, {
-                    viewBox: i,
-                    $disabled: r
-                }));
-            }
-            
-            return n().createElement(C, {
-                viewBox: l,
-                $disabled: r
-            });
-        }), [ o, r ]);
+ */    var d = function e(r) {
+        var t = r.className, a = r.disabled, n = r.selected;
         
-        return n().createElement(h, a, c());
-    }
-    O.propTypes = B;
-    /* harmony default export */    const _ = O;
+        return o().createElement(c(), {
+            appearance: "checkbox",
+            className: t,
+            "data-test": "non-interactive-checkbox",
+            disabled: a,
+            role: "presentation",
+            selected: n,
+            tabIndex: -1
+        });
+    };
+    d.propTypes = s;
+    /* harmony default export */    const i = d;
     // CONCATENATED MODULE: ./src/NonInteractiveCheckbox/index.ts
     module.exports = r;
     /******/})();

package/Number.js

@@ -77,8 +77,8 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const c = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
-    const d = require("@splunk/react-ui/useControlled");
-    var s =  e.n(d);
+    const s = require("@splunk/react-ui/useControlled");
+    var d =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const f = require("@splunk/react-ui/usePrevious");
     var v =  e.n(f);
@@ -104,14 +104,14 @@
     const x = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Number/NumberStyles.ts
     var E = "24px";
-    var D = m()(C()).withConfig({
+    var B = m()(C()).withConfig({
         displayName: "NumberStyles__StyledText",
         componentId: "sc-2ekj9s-0"
     })([ "&[data-inline]{width:180px;}", "" ], (function(e) {
         var r = e.$startAdornment;
         return r ? (0, p.css)([ "padding-inline-start:0;" ]) : (0, p.css)([ "padding-inline-end:0;" ]);
     }));
-    var A = m().div.withConfig({
+    var D = m().div.withConfig({
         displayName: "NumberStyles__StyledControls",
         componentId: "sc-2ekj9s-1"
     })([ "width:", ";height:100%;", "" ], E, (function(e) {
@@ -124,27 +124,27 @@
         } else {
             a = x.variables.interactiveColorBorder;
         }
-        return (0, p.css)([ "", "" ], r ? (0, p.css)([ "border-inline-end:1px solid ", ";" ], a) : (0, 
-        p.css)([ "border-inline-start:1px solid ", ";" ], a));
+        return (0, p.css)([ "", "" ], r ? (0, p.css)([ "border-inline-end:", " solid ", ";" ], x.variables.inputBorderWidth, a) : (0, 
+        p.css)([ "border-inline-start:", " solid ", ";" ], x.variables.inputBorderWidth, a));
     }));
-    var N = (0, p.css)([ "height:12px;width:12px;" ]);
-    var P = m()(k()).withConfig({
+    var A = (0, p.css)([ "height:12px;width:12px;" ]);
+    var N = m()(k()).withConfig({
         displayName: "NumberStyles__StyledChevronDown",
         componentId: "sc-2ekj9s-2"
-    })([ "", ";" ], N);
-    var T = m()(j()).withConfig({
+    })([ "", ";" ], A);
+    var P = m()(j()).withConfig({
         displayName: "NumberStyles__StyledChevronUp",
         componentId: "sc-2ekj9s-3"
-    })([ "", ";" ], N);
-    var _ = (0, p.css)([ "display:flex;align-items:center;justify-content:center;font-size:inherit;min-width:0;min-height:0;color:", ";height:calc(50% - 0.5px);width:100%;&:hover:not([disabled]){background-color:", ";}&:active:not([disabled]){background-color:", ";box-shadow:", ";}" ], x.variables.contentColorActive, x.variables.actionColorBackgroundSecondaryHover, x.variables.actionColorBackgroundSecondary, x.variables.focusShadowInset);
-    var B = m()(y()).withConfig({
+    })([ "", ";" ], A);
+    var T = (0, p.css)([ "display:flex;align-items:center;justify-content:center;font-size:inherit;min-width:0;min-height:0;color:", ";height:calc(50% - 0.5px);width:100%;&:hover:not([disabled]){background-color:", ";}&:active:not([disabled]){background-color:", ";box-shadow:", ";}" ], x.variables.contentColorActive, x.variables.actionColorBackgroundSecondaryHover, x.variables.actionColorBackgroundSecondary, x.variables.focusShadowInset);
+    var _ = m()(y()).withConfig({
         displayName: "NumberStyles__StyledDecrementButton",
         componentId: "sc-2ekj9s-4"
-    })([ "", ";border-top-left-radius:0;border-top-right-radius:0;" ], _);
+    })([ "", ";border-top-left-radius:0;border-top-right-radius:0;" ], T);
     var I = m()(y()).withConfig({
         displayName: "NumberStyles__StyledIncrementButton",
         componentId: "sc-2ekj9s-5"
-    })([ "", ";border-bottom-left-radius:0;border-bottom-right-radius:0;" ], _);
+    })([ "", ";border-bottom-left-radius:0;border-bottom-right-radius:0;" ], T);
     var q = m()(g()).withConfig({
         displayName: "NumberStyles__StyledDivider",
         componentId: "sc-2ekj9s-6"
@@ -231,7 +231,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function H(e, r) {
+    function W(e, r) {
         if (e) {
             if (typeof e === "function") {
                 e(r);
@@ -244,16 +244,16 @@
         }
     }
     // CONCATENATED MODULE: ./src/Number/Number.tsx
-    function G(e) {
+    function H(e) {
         "@babel/helpers - typeof";
-        return G = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return H = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, G(e);
+        }, H(e);
     }
-    function J() {
-        return J = Object.assign ? Object.assign.bind() : function(e) {
+    function G() {
+        return G = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var n = arguments[r];
                 for (var t in n) {
@@ -261,9 +261,9 @@
                 }
             }
             return e;
-        }, J.apply(null, arguments);
+        }, G.apply(null, arguments);
     }
-    function L(e, r) {
+    function J(e, r) {
         var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -273,18 +273,18 @@
         }
         return n;
     }
-    function Q(e) {
+    function L(e) {
         for (var r = 1; r < arguments.length; r++) {
             var n = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? L(Object(n), !0).forEach((function(r) {
-                W(e, r, n[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : L(Object(n)).forEach((function(r) {
+            r % 2 ? J(Object(n), !0).forEach((function(r) {
+                Q(e, r, n[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : J(Object(n)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
             }));
         }
         return e;
     }
-    function W(e, r, n) {
+    function Q(e, r, n) {
         return (r = X(r)) in e ? Object.defineProperty(e, r, {
             value: n,
             enumerable: !0,
@@ -294,14 +294,14 @@
     }
     function X(e) {
         var r = Y(e, "string");
-        return "symbol" == G(r) ? r : r + "";
+        return "symbol" == H(r) ? r : r + "";
     }
     function Y(e, r) {
-        if ("object" != G(e) || !e) return e;
+        if ("object" != H(e) || !e) return e;
         var n = e[Symbol.toPrimitive];
         if (void 0 !== n) {
             var t = n.call(e, r || "default");
-            if ("object" != G(t)) return t;
+            if ("object" != H(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
@@ -407,28 +407,29 @@
         value: o().number
     };
     function ue(e) {
-        var r = e.append, a = e.defaultValue, o = e.describedBy, i = e.disabled, d = e.elementRef, f = e.error, p = e.hideStepButtons, m = e.inline, b = e.inputRef, y = e.locale, h = y === void 0 ? "en-US" : y, g = e.max, S = e.min, C = e.name, w = e.onBlur, k = e.onChange, O = e.onKeyDown, j = e.onKeyUp, x = e.prepend, E = e.roundTo, N = E === void 0 ? 5 : E, _ = e.step, $ = _ === void 0 ? 1 : _, K = e.endAdornment, G = e.startAdornment, L = e.value, W = oe(e, [ "append", "defaultValue", "describedBy", "disabled", "elementRef", "error", "hideStepButtons", "inline", "inputRef", "locale", "max", "min", "name", "onBlur", "onChange", "onKeyDown", "onKeyUp", "prepend", "roundTo", "step", "endAdornment", "startAdornment", "value" ]);
+        var r = e.append, a = e.defaultValue, o = e.describedBy, i = e.disabled, s = e.elementRef, f = e.error, p = e.hideStepButtons, m = e.inline, b = e.inputRef, y = e.locale, h = y === void 0 ? "en-US" : y, g = e.max, S = e.min, C = e.name, w = e.onBlur, k = e.onChange, O = e.onKeyDown, j = e.onKeyUp, x = e.prepend, E = e.roundTo, A = E === void 0 ? 5 : E, T = e.step, $ = T === void 0 ? 1 : T, K = e.endAdornment, H = e.startAdornment, J = e.value, Q = oe(e, [ "append", "defaultValue", "describedBy", "disabled", "elementRef", "error", "hideStepButtons", "inline", "inputRef", "locale", "max", "min", "name", "onBlur", "onChange", "onKeyDown", "onKeyUp", "prepend", "roundTo", "step", "endAdornment", "startAdornment", "value" ]);
         // @docs-props-type NumberPropsBase
-                var X = s()({
+                var X = d()({
             componentName: "Number",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0]
         });
-        var Y = X ? L : a;
+        var Y = X ? J : a;
         // stringValue stores the current contents of the input text box - it might be out of range, invalid, ...
                 var ee = (0, n.useState)(F(Y, h)), re = Z(ee, 2), ne = re[0], te = re[1];
         var ae = (0, n.useState)(Y), ie = Z(ae, 2), le = ie[0], ue = ie[1];
-        var ce = v()(L);
-        var de = (0, n.useRef)(null);
-        var se = (0, n.useCallback)((function(e) {
-            H(de, e);
-            H(b, e);
+        var ce = v()(J);
+        var se = (0, n.useRef)(null);
+        var de = (0, n.useCallback)((function(e) {
+            W(se, e);
+            W(b, e);
         }), [ b ]);
         var fe = (0, n.useCallback)((function(e, r) {
             if (r !== le || !X) {
                 k === null || k === void 0 ? void 0 : k(e, {
                     value: r,
-                    name: C
+                    name: C,
+                    reason: "stepButton"
                 });
             }
             if (!X) {
@@ -442,7 +443,7 @@
                 locale: h,
                 min: S,
                 max: g,
-                roundTo: N
+                roundTo: A
             });
             var t;
             // increment appropriate number
@@ -464,22 +465,22 @@
                 val: t,
                 min: S,
                 max: g,
-                roundTo: N
+                roundTo: A
             }));
-        }), [ a, fe, h, g, S, N, $, ne ]);
+        }), [ a, fe, h, g, S, A, $, ne ]);
         var pe = (0, n.useCallback)((function(e, r) {
             var n = R({
                 val: parseFloat(r.value),
                 min: S,
                 max: g,
-                roundTo: N
+                roundTo: A
             });
             var t = F(n, h);
             te(t);
-            w === null || w === void 0 ? void 0 : w(e, Q(Q({}, r), {}, {
+            w === null || w === void 0 ? void 0 : w(e, L(L({}, r), {}, {
                 value: t
             }));
-        }), [ h, g, S, w, N ]);
+        }), [ h, g, S, w, A ]);
         var me = (0, n.useCallback)((function(e, r) {
             var n = r.value;
             var t = U({
@@ -487,19 +488,20 @@
                 locale: h,
                 min: S,
                 max: g,
-                roundTo: N
+                roundTo: A
             });
             if (le !== t || !X) {
                 k === null || k === void 0 ? void 0 : k(e, {
                     value: t,
-                    name: C
+                    name: C,
+                    reason: "input"
                 });
             }
             te(n);
             if (!X) {
                 ue(t);
             }
-        }), [ X, h, g, S, C, k, N, le ]);
+        }), [ X, h, g, S, C, k, A, le ]);
         var be = (0, n.useCallback)((function(e) {
             if (!e.metaKey && !e.ctrlKey && !e.altKey && (0, c.addsCharacter)(e.nativeEvent) !== false) {
                 // only allow numbers, negative and decimals
@@ -516,7 +518,7 @@
                 // if decimal is not allowed or there is already one, prevent input
                                 if ((0, c.isDecimal)(e.nativeEvent, {
                     locale: h
-                }) && (N <= 0 || ne.indexOf(M(h)) >= 0)) {
+                }) && (A <= 0 || ne.indexOf(M(h)) >= 0)) {
                     e.preventDefault();
                 }
             }
@@ -529,21 +531,21 @@
                 e.preventDefault();
             }
             O === null || O === void 0 ? void 0 : O(e);
-        }), [ ve, h, S, O, N, $, ne ]);
+        }), [ ve, h, S, O, A, $, ne ]);
         var ye = (0, n.useCallback)((function(e) {
             var r;
-            if ((0, c.keycode)(e.nativeEvent) === "enter" && (de === null || de === void 0 ? void 0 : (r = de.current) === null || r === void 0 ? void 0 : r.value)) {
-                var n = de.current.value;
+            if ((0, c.keycode)(e.nativeEvent) === "enter" && (se === null || se === void 0 ? void 0 : (r = se.current) === null || r === void 0 ? void 0 : r.value)) {
+                var n = se.current.value;
                 var t = R({
                     val: parseFloat(n),
                     min: S,
                     max: g,
-                    roundTo: N
+                    roundTo: A
                 });
                 te(F(t, h));
             }
             j === null || j === void 0 ? void 0 : j(e);
-        }), [ h, g, S, j, N ]);
+        }), [ h, g, S, j, A ]);
         var he = (0, n.useCallback)((function(e) {
             ve(e, $);
         }), [ ve, $ ]);
@@ -555,13 +557,13 @@
         }), [ r, x ]);
         (0, n.useEffect)((function() {
             // if value prop passed, keep local valueNumeric up to date with value prop
-            if (L || L === 0) {
-                ue(L);
+            if (J || J === 0) {
+                ue(J);
             }
-        }), [ L ]);
+        }), [ J ]);
         (0, n.useEffect)((function() {
             // This useEffect has multiple dependencies, but we only want to run this code if the `value` prop has changed.
-            if (L !== ce) {
+            if (J !== ce) {
                 // on value (number) prop change compare the new value to the number version of stringValue (state)
                 // This is because we pass in the number version of stringValue to the onChange handler
                 // Thus if these values match we want to ignore the update as that is the current value based on stringValue
@@ -570,13 +572,13 @@
                     locale: h,
                     min: S,
                     max: g,
-                    roundTo: N
+                    roundTo: A
                 });
-                if (e !== L && X) {
-                    te(F(L, h));
+                if (e !== J && X) {
+                    te(F(J, h));
                 }
             }
-        }), [ X, h, g, S, ce, N, L, ne ]);
+        }), [ X, h, g, S, ce, A, J, ne ]);
         var Se = {
             append: r,
             prepend: !r,
@@ -593,41 +595,41 @@
             min: S
         });
         var ke = r && !x;
-        var Oe =  t().createElement(A, {
+        var Oe =  t().createElement(D, {
             $isAppend: ke,
             $disabled: i,
             $error: f
-        },  t().createElement(I, J({
+        },  t().createElement(I, G({
             "aria-label": (0, u._)("Increment"),
             "data-test": "increment",
             disabled: i || Ce,
             onClick: he
-        }, Se),  t().createElement(T, null)),  t().createElement(q, {
+        }, Se),  t().createElement(P, null)),  t().createElement(q, {
             $disabled: i,
             $error: f
-        }),  t().createElement(B, J({
+        }),  t().createElement(_, G({
             "aria-label": (0, u._)("Decrement"),
             "data-test": "decrement",
             disabled: i || we,
             onClick: ge
-        }, Se),  t().createElement(P, null)));
+        }, Se),  t().createElement(N, null)));
         var je = ke && !p && Oe;
         var xe = !ke && !p && Oe;
-        var Ee = G || je;
+        var Ee = H || je;
         
-        return t().createElement(D, J({
+        return t().createElement(B, G({
             autoCapitalize: "off",
             autoComplete: "off",
             autoCorrect: "off",
             "data-test": "number",
-            elementRef: d,
-            inputRef: se,
+            elementRef: s,
+            inputRef: de,
             disabled: i,
             name: C,
             describedBy: o,
             append: r,
             prepend: x
-        }, W, {
+        }, Q, {
             spellCheck: false,
             inline: m,
             onBlur: pe,