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

package/NonInteractiveCheckbox.js

@@ -0,0 +1,189 @@
+/******/ (() => {
+    // 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 t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(t, {
+                a: t
+            });
+            /******/            return t;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // 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, {
+                        enumerable: true,
+                        get: t[n]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* 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 */ _
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    var n =  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());
+    // 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" ]) ])
+    };
+    /**
+ * 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)
+ *
+ */    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 ]);
+        
+        return n().createElement(h, a, c());
+    }
+    O.propTypes = B;
+    /* harmony default export */    const _ = O;
+    // CONCATENATED MODULE: ./src/NonInteractiveCheckbox/index.ts
+    module.exports = r;
+    /******/})();