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

package/Date.js

@@ -84,42 +84,33 @@
     var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
     const p = require("@splunk/react-ui/useControlled");
-    var m =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const y = require("@splunk/themes");
+    var y =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const b = require("@splunk/ui-utils/id");
+    const m = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const g = require("@splunk/ui-utils/keyboard");
+    const b = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const h = require("styled-components");
-    var C =  e.n(h);
+    const g = require("styled-components");
+    var h =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-    const k = require("@splunk/react-ui/Text");
-    var S =  e.n(k);
+    const C = require("@splunk/react-ui/Text");
+    var k =  e.n(C);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const O = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Date/DateStyles.ts
-    var O = C()(S()).withConfig({
+    var S = h()(k()).withConfig({
         displayName: "DateStyles__StyledText",
         componentId: "kacgdc-0"
-    })([ "cursor:", ";&[data-inline]{flex-basis:", ";width:", ";}" ], (0, y.pickVariant)("$disabled", {
+    })([ "cursor:", ";&[data-inline]{width:160px;}" ], (0, O.pickVariant)("$disabled", {
         false: "text",
         true: "not-allowed"
-    }), (0, y.pick)({
-        enterprise: "105px",
-        prisma: "150px"
-    }), (0, y.pick)({
-        enterprise: {
-            comfortable: "105px",
-            compact: "80px"
-        },
-        prisma: "150px"
     }));
-    var w = C().div.withConfig({
+    var w = h().div.withConfig({
         displayName: "DateStyles__IconContainer",
         componentId: "kacgdc-1"
-    })([ "align-items:center;color:", ";display:flex;pointer-events:none;" ], (0, y.pickVariant)("$disabled", {
-        false: y.variables.contentColorMuted,
-        true: y.variables.contentColorDisabled
+    })([ "align-items:center;color:", ";display:flex;" ], (0, O.pickVariant)("$disabled", {
+        false: O.variables.contentColorMuted,
+        true: O.variables.contentColorDisabled
     }));
     // CONCATENATED MODULE: ./src/Date/Icon.tsx
     function V() {
@@ -133,8 +124,8 @@
             return e;
         }, V.apply(null, arguments);
     }
-    function x(e) {
-        var n = (0, y.useSplunkTheme)(), t = n.density;
+    function j(e) {
+        var n = (0, O.useSplunkTheme)(), t = n.density;
         var a = t === "compact" ? "20px" : "24px";
         
         return r().createElement("svg", V({
@@ -154,7 +145,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function j(e, n) {
+    function x(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -179,12 +170,12 @@
         }, D.apply(null, arguments);
     }
     function M(e, n) {
-        return P(e) || I(e, n) || T(e, n) || q();
+        return P(e) || T(e, n) || I(e, n) || q();
     }
     function q() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function T(e, n) {
+    function I(e, n) {
         if (e) {
             if ("string" == typeof e) return E(e, n);
             var t = {}.toString.call(e).slice(8, -1);
@@ -198,7 +189,7 @@
         }
         return r;
     }
-    function I(e, n) {
+    function T(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, a, l, o, i = [], u = !0, c = !1;
@@ -279,176 +270,193 @@
  * @type string
  */    var _ = "YYYY-MM-DD";
     var F = function e(n) {
+        if (n === "") {
+            return;
+        }
         if (!c()(n, _).isValid()) {
             // eslint-disable-next-line no-console
             console.error('Invalid date string value "'.concat(n, '" provided to Moment.'));
         }
     };
     function K(e) {
-        var n = e.defaultValue, a = e.disabled, l = e.elementRef, o = e.highlightToday, u = e.inline, d = u === void 0 ? true : u, p = e.inputOnly, h = e.locale, C = h === void 0 ? "en_US" : h, k = e.name, S = e.onChange, V = e.onClick, q = e.onFocus, T = e.onKeyDown, E = e.value, I = A(e, [ "defaultValue", "disabled", "elementRef", "highlightToday", "inline", "inputOnly", "locale", "name", "onChange", "onClick", "onFocus", "onKeyDown", "value" ]);
+        var n = e.defaultValue, a = e.disabled, l = e.elementRef, o = e.highlightToday, u = e.inline, d = u === void 0 ? true : u, p = e.inputOnly, g = e.locale, h = g === void 0 ? "en_US" : g, C = e.name, k = e.onChange, O = e.onClick, V = e.onFocus, q = e.onKeyDown, I = e.value, E = A(e, [ "defaultValue", "disabled", "elementRef", "highlightToday", "inline", "inputOnly", "locale", "name", "onChange", "onClick", "onFocus", "onKeyDown", "value" ]);
         // @docs-props-type DatePropsBase
-                var P = m()({
+                var T = y()({
             componentName: "Date",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0]
         });
-        var H = (0, y.useSplunkTheme)(), R = H.isPrisma;
-        var F = (0, t.useState)(null), $ = M(F, 2), B = $[0], Y = $[1];
-        var N = (0, t.useState)(false), Z = M(N, 2), U = Z[0], z = Z[1];
-        var L = (0, t.useState)(), G = M(L, 2), J = G[0], Q = G[1];
-        var W = (0, t.useState)(n || c()().locale(C).format(_)), X = M(W, 2), ee = X[0], ne = X[1];
-        var te = (0, t.useState)(null), re = M(te, 2), ae = re[0], le = re[1];
-        var oe = (0, t.useState)(null), ie = M(oe, 2), ue = ie[0], ce = ie[1];
-        var se = (0, t.useRef)(false);
-        var fe = (0, b.createDOMID)("calendar");
-        var de = (0, t.useMemo)((function() {
-            return P ? E : ee;
-        }), [ P, E, ee ]);
+        var P = (0, t.useState)(null), H = M(P, 2), R = H[0], F = H[1];
+        var $ = (0, t.useState)(false), B = M($, 2), Y = B[0], N = B[1];
+        var Z = (0, t.useState)(), U = M(Z, 2), z = U[0], L = U[1];
+        var G = (0, t.useState)((function() {
+            if (typeof n === "string") {
+                return n;
+            }
+            return c()().locale(h).format(_);
+        })), J = M(G, 2), Q = J[0], W = J[1];
+        var X = (0, t.useState)(null), ee = M(X, 2), ne = ee[0], te = ee[1];
+        var re = (0, t.useState)(null), ae = M(re, 2), le = ae[0], oe = ae[1];
+        var ie = (0, t.useRef)(false);
+        var ue = (0, m.createDOMID)("calendar");
+        var ce = (0, t.useMemo)((function() {
+            return T ? I : Q;
+        }), [ T, I, Q ]);
         (0, t.useEffect)((function() {
             if (false) {}
-        }), [ de ]);
+        }), [ ce ]);
         (0, t.useEffect)((function() {
             /**
      * If `openWithFocus` and `calendarOpen` are set the user is attempting to navigate to the dropdown, but it's closed.
      * On the first update following the state change set focus to the active day within the calendar.
      */
-            if (se.current && U) {
-                se.current = false;
-                (0, s.focusActiveDay)(ae);
+            if (ie.current && Y) {
+                ie.current = false;
+                (0, s.focusActiveDay)(ne);
             }
-        }), [ ae, U ]);
-        var ve = (0, t.useMemo)((function() {
-            return J === undefined ? c()(de, K.momentFormat, C).format("l") : J;
-        }), [ de, C, J ]);
-        var pe = (0, t.useCallback)((function(e, n, t) {
+        }), [ ne, Y ]);
+        var se = (0, t.useMemo)((function() {
+            if (z === undefined) {
+                if (ce === undefined || ce === "") {
+                    return "";
+                }
+                return c()(ce, _, h).format("l");
+            }
+            return z;
+        }), [ ce, h, z ]);
+        var fe = (0, t.useCallback)((function(e, n, t) {
             var r = n.value;
             if (t !== "textInput") {
-                ue === null || ue === void 0 ? void 0 : ue.focus();
+                le === null || le === void 0 ? void 0 : le.focus();
             }
-            if (de !== r) {
-                z(false);
-                Q(undefined);
-                ne(P ? undefined : r);
-                S === null || S === void 0 ? void 0 : S(e, {
+            if (ce !== r) {
+                N(false);
+                L(undefined);
+                W(T ? undefined : r);
+                k === null || k === void 0 ? void 0 : k(e, {
                     value: r,
-                    name: k
+                    name: C
                 });
             } else {
-                z(false);
+                N(false);
             }
-        }), [ de, ue, P, k, S ]);
-        var me = (0, t.useCallback)((function(e) {
-            var n = c()(J, "l", C);
-            if (n.isValid()) {
-                pe(e, {
+        }), [ ce, le, T, C, k ]);
+        var de = (0, t.useCallback)((function(e) {
+            var n = c()(z, "l", h);
+            if (z === "") {
+                fe(e, {
+                    value: ""
+                }, "textInput");
+            } else if (n.isValid()) {
+                fe(e, {
                     value: n.format(K.momentFormat)
                 }, "textInput");
             } else {
-                z(false);
-                Q(undefined);
+                N(false);
+                L(undefined);
             }
-        }), [ pe, C, J ]);
-        var ye = (0, t.useCallback)((function(e, n) {
+        }), [ fe, h, z ]);
+        var ve = (0, t.useCallback)((function(e, n) {
             if (!p) {
-                z(true);
+                N(true);
             }
-            q === null || q === void 0 ? void 0 : q(e, n);
-        }), [ p, q ]);
-        var be = (0, t.useCallback)((function(e) {
-            if (!p && !U) {
-                z(true);
+            V === null || V === void 0 ? void 0 : V(e, n);
+        }), [ p, V ]);
+        var pe = (0, t.useCallback)((function(e) {
+            if (!p && !Y) {
+                N(true);
             }
-            V === null || V === void 0 ? void 0 : V(e);
-        }), [ U, p, V ]);
-        var ge = (0, t.useCallback)((function(e, n) {
+            O === null || O === void 0 ? void 0 : O(e);
+        }), [ Y, p, O ]);
+        var ye = (0, t.useCallback)((function(e, n) {
             var t = n.value;
-            Q(t);
-            z(!p);
+            L(t);
+            N(!p);
         }), [ p ]);
-        var he = (0, t.useCallback)((function(e) {
-            var n = (0, g.keycode)(e.nativeEvent);
+        var me = (0, t.useCallback)((function(e) {
+            var n = (0, b.keycode)(e.nativeEvent);
             if (n === "enter" || n === "tab") {
-                me(e);
+                de(e);
             } else if (!p && n === "down") {
                 e.preventDefault();
-                if (!U) {
-                    se.current = true;
-                    z(true);
-                } else if (ae) {
-                    (0, s.focusActiveDay)(ae);
+                if (!Y) {
+                    ie.current = true;
+                    N(true);
+                } else if (ne) {
+                    (0, s.focusActiveDay)(ne);
                 }
             } else if (n === "esc") {
-                z(false);
-                Q(undefined);
-                ue === null || ue === void 0 ? void 0 : ue.focus();
+                N(false);
+                L(undefined);
+                le === null || le === void 0 ? void 0 : le.focus();
             }
-            T === null || T === void 0 ? void 0 : T(e);
-        }), [ me, ae, U, ue, p, T ]);
-        var Ce = (0, t.useCallback)((function(e) {
-            Y(e);
-            j(l, e);
+            q === null || q === void 0 ? void 0 : q(e);
+        }), [ de, ne, Y, le, p, q ]);
+        var be = (0, t.useCallback)((function(e) {
+            F(e);
+            x(l, e);
         }), [ l ]);
-        var ke = (0, t.useCallback)((function(e) {
-            ce(e);
+        var ge = (0, t.useCallback)((function(e) {
+            oe(e);
         }), []);
-        var Se = (0, t.useCallback)((function(e) {
-            le(e);
+        var he = (0, t.useCallback)((function(e) {
+            te(e);
         }), []);
-        var Oe = (0, t.useCallback)((function(e) {
+        var Ce = (0, t.useCallback)((function(e) {
             var n = e.event, t = e.reason;
-            if ((t === "clickAway" || t === "escapeKey") && n !== undefined && n.target !== B) {
-                me(n);
+            if ((t === "clickAway" || t === "escapeKey") && n !== undefined && n.target !== R) {
+                de(n);
                 if (t === "escapeKey") {
-                    ue === null || ue === void 0 ? void 0 : ue.focus();
+                    le === null || le === void 0 ? void 0 : le.focus();
                 }
             }
-        }), [ B, ue, me ]);
-        var we = R && !p &&  r().createElement(w, {
+        }), [ R, le, de ]);
+        var ke = !p &&  r().createElement(w, {
             "aria-hidden": true,
             $disabled: a
-        },  r().createElement(x, null));
-        var Ve;
-        var xe = {};
+        },  r().createElement(j, null));
+        var Oe;
+        var Se = {};
         if (!p) {
-            xe.role = "combobox";
-            xe["aria-controls"] = U ? fe : undefined;
-            xe["aria-expanded"] = a ? false : U;
-            xe["aria-haspopup"] = true;
-            Ve =  r().createElement(v(), {
-                anchor: B,
-                id: fe,
-                open: a ? false : U,
-                onRequestClose: Oe
+            Se.role = "combobox";
+            Se["aria-controls"] = Y ? ue : undefined;
+            Se["aria-expanded"] = a ? false : Y;
+            Se["aria-haspopup"] = true;
+            Oe =  r().createElement(v(), {
+                anchor: R,
+                id: ue,
+                open: a ? false : Y,
+                onRequestClose: Ce
             },  r().createElement(f(), {
-                elementRef: Se,
+                elementRef: he,
                 highlightToday: o,
-                locale: C,
-                onChange: pe,
-                value: de
+                locale: h,
+                onChange: fe,
+                value: ce === "" ? undefined : ce
             }));
         }
         
-        return r().createElement(O, D({
+        return r().createElement(S, D({
             autoCapitalize: "off",
             autoComplete: "off",
             autoCorrect: "off",
             spellCheck: false,
             "data-test": "date",
-            "data-test-value": de,
-            "data-test-popover-id": fe,
+            "data-test-value": ce,
+            "data-test-popover-id": ue,
             disabled: a,
-            elementRef: Ce,
+            elementRef: be,
             inline: d,
-            inputRef: ke,
-            name: k,
-            onChange: ge,
-            onClick: be,
-            onFocus: ye,
-            onKeyDown: he,
-            value: ve,
-            startAdornment: we,
+            inputRef: ge,
+            name: C,
+            onChange: ye,
+            onClick: pe,
+            onFocus: ve,
+            onKeyDown: me,
+            value: se,
+            startAdornment: ke,
             $disabled: a
-        }, xe, i()(I, "multiline", "onSelect", "spellCheck")), Ve);
+        }, Se, i()(E, "multiline", "onSelect", "spellCheck")), Oe);
     }
     K.propTypes = R;
     K.momentFormat = _;

package/Divider.js

@@ -70,20 +70,21 @@
     const n = require("prop-types");
     var i =  e.n(n);
     // CONCATENATED MODULE: external "styled-components"
-    const l = require("styled-components");
-    var a =  e.n(l);
+    const a = require("styled-components");
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Divider/DividerStyles.ts
-    var u = a().hr.withConfig({
+    var u = l().hr.withConfig({
         displayName: "DividerStyles__StyledRule",
         componentId: "gl6kyz-0"
     })([ "", ";", ";border-color:", ";" ], c.mixins.reset("block"), (0, c.pickVariant)("$orientation", {
-        horizontal: (0, l.css)([ "border-top-style:solid;border-width:1px;" ]),
-        vertical: (0, l.css)([ "display:inline;border-left-style:solid;border-width:1px;" ])
-    }), (0, c.pick)({
-        enterprise: c.variables.borderColor,
-        prisma: c.variables.neutral200
+        horizontal: (0, a.css)([ "border-top-style:solid;border-width:1px;" ]),
+        vertical: (0, a.css)([ "display:inline;border-left-style:solid;border-width:1px;" ])
+    }), (0, c.pickVariant)("$appearance", {
+        default: c.variables.borderColor,
+        weak: c.variables.borderColorWeak,
+        strong: c.variables.borderColorStrong
     }));
     // CONCATENATED MODULE: ./src/Divider/Divider.tsx
     function f(e) {
@@ -94,8 +95,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, f(e);
     }
-    function s() {
-        return s = Object.assign ? Object.assign.bind() : function(e) {
+    function p() {
+        return p = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var o in t) {
@@ -103,9 +104,9 @@
                 }
             }
             return e;
-        }, s.apply(null, arguments);
+        }, p.apply(null, arguments);
     }
-    function p(e, r) {
+    function s(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -118,9 +119,9 @@
     function b(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? p(Object(t), !0).forEach((function(r) {
+            r % 2 ? s(Object(t), !0).forEach((function(r) {
                 y(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : p(Object(t)).forEach((function(r) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : s(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
@@ -171,29 +172,31 @@
         return t;
     }
     var g = {
-        elementRef: i().oneOfType([ i().func, i().object ]),
+        appearance: i().oneOf([ "default", "weak", "strong" ]),
         decorative: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
         orientation: i().oneOf([ "horizontal", "vertical" ])
     };
     function j(e) {
-        var r = e.elementRef, t = e.decorative, n = t === void 0 ? false : t, i = e.orientation, l = i === void 0 ? "horizontal" : i, a = m(e, [ "elementRef", "decorative", "orientation" ]);
+        var r = e.appearance, t = r === void 0 ? "default" : r, n = e.elementRef, i = e.decorative, a = i === void 0 ? false : i, l = e.orientation, c = l === void 0 ? "horizontal" : l, f = m(e, [ "appearance", "elementRef", "decorative", "orientation" ]);
         // @docs-props-type DividerPropsBase
-                var c = b({
+                var s = b({
             "data-test": "divider",
-            ref: r,
-            $orientation: l
-        }, a);
+            ref: n,
+            $appearance: t,
+            $orientation: c
+        }, f);
         // aria-orientation is not needed when decorative and div is used to have no semantics
-                if (n) {
+                if (a) {
             
-            return o().createElement(u, s({
+            return o().createElement(u, p({
                 as: "div"
-            }, c));
+            }, s));
         }
         
-        return o().createElement(u, s({
-            "aria-orientation": l
-        }, c));
+        return o().createElement(u, p({
+            "aria-orientation": c
+        }, s));
     }
     j.propTypes = g;
     /* harmony default export */    const h = j;