@splunk/react-ui 5.2.0 → 5.3.0

package/Checkbox.js

@@ -0,0 +1,350 @@
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = r => {
+            /******/ var o = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(o, {
+                a: o
+            });
+            /******/            return o;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (r, o) => {
+            /******/ for (var t in o) {
+                /******/ if (e.o(o, t) && !e.o(r, t)) {
+                    /******/ Object.defineProperty(r, t, {
+                        enumerable: true,
+                        get: o[t]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ T
+    });
+    // CONCATENATED MODULE: external "react"
+    const o = require("react");
+    var t =  e.n(o);
+    // CONCATENATED MODULE: external "lodash/pickBy"
+    const n = require("lodash/pickBy");
+    var a =  e.n(n);
+    // CONCATENATED MODULE: external "prop-types"
+    const i = require("prop-types");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const c = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "styled-components"
+    const s = require("styled-components");
+    var d =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxCompleted"
+    const u = require("@splunk/react-icons/CheckBoxCompleted");
+    var b =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxIndeterminate"
+    const v = require("@splunk/react-icons/CheckBoxIndeterminate");
+    var f =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const p = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Checkbox/CheckboxStyles.ts
+    var y = "5 5 16 16";
+    var h = "20px";
+    var m = d().input.attrs({
+        type: "checkbox"
+    }).withConfig({
+        displayName: "CheckboxStyles__StyledCheckbox",
+        componentId: "sc-1yo50j-0"
+    })([ "height:100%;margin:0;opacity:0;position:absolute;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}" ]);
+    var g = (0, s.css)([ "display:none;height:", ";width:", ";" ], h, h);
+    var k = d()(b()).attrs({
+        viewBox: y
+    }).withConfig({
+        displayName: "CheckboxStyles__StyledCheckIcon",
+        componentId: "sc-1yo50j-1"
+    })([ "", "" ], g);
+    var C = d()(f()).attrs({
+        viewBox: y
+    }).withConfig({
+        displayName: "CheckboxStyles__StyledIndeterminateIcon",
+        componentId: "sc-1yo50j-2"
+    })([ "", "" ], g);
+    var O = d().div.withConfig({
+        displayName: "CheckboxStyles__StyledCheckboxWrapper",
+        componentId: "sc-1yo50j-3"
+    })([ "display:inline-block;box-sizing:border-box;position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:has(", ":checked){", "{display:block;}}&:has(", ":indeterminate){", "{display:block;}}&:has(", ":focus){box-shadow:", ";}color:", ";", " &:has(", ":disabled){border-color:", ";background-color:", ";color:", ";cursor:not-allowed;&:has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}}" ], h, h, h, p.variables.borderRadius, p.variables.inputBorderWidth, p.variables.interactiveColorBorder, p.variables.interactiveColorBackground, m, k, m, C, m, p.variables.focusShadow, (0, 
+    p.pick)({
+        light: p.variables.white,
+        dark: p.variables.black
+    }), (function(e) {
+        var r = e.$error;
+        if (r) {
+            return (0, s.css)([ "border-color:", ";&:has(", ":where(:checked,:indeterminate)){background-color:", ";}" ], p.variables.interactiveColorAccentError, m, p.variables.interactiveColorAccentError);
+        }
+        return (0, s.css)([ "&:has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}" ], m, p.variables.interactiveColorAccent, p.variables.interactiveColorAccent);
+    }), m, p.variables.interactiveColorBorderDisabled, p.variables.interactiveColorBackgroundDisabled, p.variables.contentColorDisabled, m, p.variables.neutral100, p.variables.interactiveColorBackgroundDisabled);
+    var w = d().label.withConfig({
+        displayName: "CheckboxStyles__StyledLabel",
+        componentId: "sc-1yo50j-4"
+    })([ "cursor:inherit;" ]);
+    var x = d().div.withConfig({
+        displayName: "CheckboxStyles__StyledWrapper",
+        componentId: "sc-1yo50j-5"
+    })([ "", ";position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";cursor:pointer;:has(", ":disabled){color:", ";cursor:not-allowed;}&:not(:has(", ":disabled)){&:hover ", "{", "}}" ], p.mixins.reset("flex"), p.variables.spacingSmall, p.variables.inputHeight, p.variables.contentColorActive, m, p.variables.contentColorDisabled, m, O, (function(e) {
+        var r = e.$error;
+        if (r) {
+            return (0, s.css)([ ":has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}border-color:", ";background-color:", ";" ], m, p.variables.interactiveColorAccentError, p.variables.interactiveColorAccentError, p.mixins.overlayColors(p.variables.interactiveColorAccentError, p.variables.interactiveColorBorderHover), p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
+        }
+        return (0, s.css)([ ":has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}border-color:", ";background-color:", ";" ], m, p.mixins.overlayColors(p.variables.interactiveColorAccent, p.variables.interactiveColorOverlayHover), p.variables.interactiveColorAccent, p.variables.interactiveColorBorderHover, p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
+    }));
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function j(e, r) {
+        if (e) {
+            if (typeof e === "function") {
+                e(r);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = r;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
+    // CONCATENATED MODULE: ./src/Checkbox/Checkbox.tsx
+    function S(e) {
+        "@babel/helpers - typeof";
+        return S = "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;
+        }, S(e);
+    }
+    function B() {
+        return B = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var o = arguments[r];
+                for (var t in o) {
+                    ({}).hasOwnProperty.call(o, t) && (e[t] = o[t]);
+                }
+            }
+            return e;
+        }, B.apply(null, arguments);
+    }
+    function P(e, r) {
+        var o = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var t = Object.getOwnPropertySymbols(e);
+            r && (t = t.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), o.push.apply(o, t);
+        }
+        return o;
+    }
+    function E(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var o = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? P(Object(o), !0).forEach((function(r) {
+                I(e, r, o[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : P(Object(o)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(o, r));
+            }));
+        }
+        return e;
+    }
+    function I(e, r, o) {
+        return (r = _(r)) in e ? Object.defineProperty(e, r, {
+            value: o,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = o, e;
+    }
+    function _(e) {
+        var r = D(e, "string");
+        return "symbol" == S(r) ? r : r + "";
+    }
+    function D(e, r) {
+        if ("object" != S(e) || !e) return e;
+        var o = e[Symbol.toPrimitive];
+        if (void 0 !== o) {
+            var t = o.call(e, r || "default");
+            if ("object" != S(t)) return t;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
+    }
+    function q(e, r) {
+        if (null == e) return {};
+        var o, t, n = A(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var a = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < a.length; t++) {
+                o = a[t], -1 === r.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (n[o] = e[o]);
+            }
+        }
+        return n;
+    }
+    function A(e, r) {
+        if (null == e) return {};
+        var o = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (-1 !== r.indexOf(t)) continue;
+                o[t] = e[t];
+            }
+        }
+        return o;
+    }
+    /** @public */    var M = {
+        checked: l().oneOf([ true, false, "indeterminate" ]),
+        children: l().node,
+        defaultChecked: l().bool,
+        describedBy: l().string,
+        disabled: l().bool,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        error: l().bool,
+        inert: l().bool,
+        inputRef: l().oneOfType([ l().func, l().object ]),
+        labelledBy: l().string,
+        name: l().string,
+        onChange: l().func,
+        /** @private. */
+        required: l().bool
+    };
+    var R = function e(r) {
+        var n = r.checked, i = r.children, l = r.defaultChecked, s = r.describedBy, d = r.disabled, u = r.elementRef, b = r.error, v = r.id, f = r.inert, p = r.inputRef, y = r.labelledBy, h = r.name, g = r.onChange, S = r.required, P = r.role, I = r.tabIndex, _ = r.value, D = q(r, [ "checked", "children", "defaultChecked", "describedBy", "disabled", "elementRef", "error", "id", "inert", "inputRef", "labelledBy", "name", "onChange", "required", "role", "tabIndex", "value" ]);
+        // @docs-props-type CheckboxPropsBase
+        // this component intentionally does not use useControlled because it uses React's checked/defaultChecked built-in instead
+        // https://react.dev/reference/react-dom/components/input#providing-an-initial-value-for-an-input
+                var A = (0, o.useCallback)((function(e) {
+            g === null || g === void 0 ? void 0 : g(e, {
+                checked: e.currentTarget.checked,
+                name: h,
+                value: e.currentTarget.value
+            });
+        }), [ h, g ]);
+        // If has internal label defined with children, must have an id and must use generated labelId.
+        // Otherwise, use customer defined id and external label.
+                var M = (0, o.useMemo)((function() {
+            return i && v == null ? (0, c.createDOMID)("checkbox-input") : v;
+        }), [ i, v ]);
+        var R = (0, o.useMemo)((function() {
+            return i ? (0, c.createDOMID)("checkbox-label") : y;
+        }), [ i, y ]);
+        var T = (0, o.useRef)(null);
+        var N = (0, o.useCallback)((function(e) {
+            j(T, e);
+            j(p, e);
+        }), [ p, T ]);
+        // useLayoutEffect is necessary to ensure that the checkbox is set to indeterminate before the browser paints
+                (0, o.useLayoutEffect)((function() {
+            if (T.current) {
+                // input type="checkbox" does not support indeterminate directly on the value prop - it needs to be set via JS
+                T.current.indeterminate = n === "indeterminate";
+            }
+        }), [ n ]);
+        var H = (0, o.useMemo)((function() {
+            return E(E({}, a()(D, (function(e, r) {
+                return r === "role" || r.indexOf("aria-") === 0;
+            }))), {}, {
+                "aria-describedby": s,
+                "aria-labelledby": R,
+                "aria-invalid": b || undefined
+            });
+        }), [ s, b, R, D ]);
+        var $ = {};
+        // a checkbox's value defaults to "on" if no value is passed
+        // so we cannot pass a value attribute if it is not specified
+        // to avoid overwriting the default when value is not set
+                if (_ != null) {
+            $.value = _;
+        }
+        // using React's checked/defaultChecked built-in, we cannot pass both props at once
+                if (n != null) {
+            // checked="indeterminate" is not a value Checkbox supports so handle it here
+            // specifically avoiding !!checked because Firefox will match :checked against an indeterminate checkbox with checked={true}
+            // this appears incorrect according to the spec: https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)
+            // which says: "If the element's indeterminate IDL attribute is set to true,
+            // then the control's selection should be obscured as if the control was in a third, indeterminate, state."
+            $.checked = n === true;
+        } else if (l != null) {
+            $.defaultChecked = l;
+        }
+        
+        return t().createElement(x, B({
+            "data-test": "checkbox",
+            "data-test-checked": n,
+            "data-test-disabled": d ? "disabled" : undefined,
+            "data-test-error": b ? true : undefined,
+            "data-test-value": _,
+            $error: b,
+            ref: u
+        }, D),  t().createElement(O, {
+            $error: b
+        },  t().createElement(m, B({
+            disabled: d,
+            "data-test": f ? "presentation-toggle" : "toggle",
+            id: M,
+            inert: f ? "true" : undefined,
+            name: h,
+            onChange: A,
+            ref: N,
+            required: S,
+            role: f ? "presentation" : P,
+            tabIndex: I,
+            type: "checkbox"
+        }, H, $)),  t().createElement(k, null),  t().createElement(C, null)), i &&  t().createElement(w, {
+            "data-test": "label",
+            htmlFor: M,
+            id: R
+        }, i));
+    };
+    R.propTypes = M;
+    /* harmony default export */    const T = R;
+    // CONCATENATED MODULE: ./src/Checkbox/index.ts
+    module.exports = r;
+    /******/})();