@splunk/react-ui 5.0.0 → 5.1.0

package/FormRows.js

@@ -82,66 +82,66 @@
     });
     u.displayName = "FormRows";
     /* harmony default export */    const d = u;
-    // CONCATENATED MODULE: external "@splunk/react-icons/TrashCanCross"
-    const c = require("@splunk/react-icons/TrashCanCross");
-    var f =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const v = require("styled-components");
-    var m =  e.n(v);
+    const c = require("styled-components");
+    var f =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const p = require("@splunk/react-ui/Button");
-    var b =  e.n(p);
+    const v = require("@splunk/react-ui/Button");
+    var m =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const g = require("@splunk/react-ui/ButtonSimple");
-    var y =  e.n(g);
+    const p = require("@splunk/react-ui/ButtonSimple");
+    var b =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const h = require("@splunk/themes");
+    const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
-    var w = (0, v.css)([ "width:", ";height:", ";" ], h.variables.inputHeight, h.variables.inputHeight);
-    var R = m()(y()).withConfig({
+    var y = (0, c.css)([ "width:", ";height:", ";" ], g.variables.inputHeight, g.variables.inputHeight);
+    var h = f()(b()).withConfig({
         displayName: "FormRowsStyles__StyledDragButton",
         componentId: "sc-1j4j7h3-0"
-    })([ "", ";grid-column:drag-handle;cursor:move;user-select:none;-webkit-user-drag:element;" ], w);
-    var S = m()(y()).withConfig({
+    })([ "", ";grid-column:drag-handle;cursor:move;user-select:none;-webkit-user-drag:element;" ], y);
+    var w = f()(b()).withConfig({
         displayName: "FormRowsStyles__StyledRemoveButton",
         componentId: "sc-1j4j7h3-1"
-    })([ "", ";grid-column:remove-button;" ], w);
-    var O = m().div.withConfig({
+    })([ "", ";grid-column:remove-button;" ], y);
+    var R = f().div.withConfig({
         displayName: "FormRowsStyles__StyledDiv",
         componentId: "sc-1j4j7h3-2"
-    })([ "", ";justify-content:start;&:has(", "):has(", "){grid-template-columns:[drag-handle] min-content [content] minmax(auto,1fr) [remove-button] min-content;}&:has(", "){grid-template-columns:[drag-handle] min-content [content] minmax(auto,1fr);}&:has(", "){grid-template-columns:[content] minmax(auto,1fr) [remove-button] min-content;}grid-template-columns:[content] minmax(auto,1fr);column-gap:", ";row-gap:", ";" ], h.mixins.reset("grid"), R, S, R, S, h.variables.spacingSmall, h.variables.spacingXSmall);
-    var x = m().div.withConfig({
+    })([ "", ";justify-content:start;&:has(", "):has(", "){grid-template-columns:[drag-handle] min-content [content] minmax(auto,1fr) [remove-button] min-content;}&:has(", "){grid-template-columns:[drag-handle] min-content [content] minmax(auto,1fr);}&:has(", "){grid-template-columns:[content] minmax(auto,1fr) [remove-button] min-content;}grid-template-columns:[content] minmax(auto,1fr);column-gap:", ";row-gap:", ";" ], g.mixins.reset("grid"), h, w, h, w, g.variables.spacingSmall, g.variables.spacingXSmall);
+    var S = f().div.withConfig({
         displayName: "FormRowsStyles__StyledHeader",
         componentId: "sc-1j4j7h3-3"
-    })([ "", ";grid-column:content;" ], h.mixins.typography("largeBody", {
+    })([ "", ";grid-column:content;" ], g.mixins.typography("largeBody", {
         color: "active"
     }));
-    var j = (0, v.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], h.variables.spacingXSmall);
-    var C = m()(b()).withConfig({
+    var O = (0, c.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], g.variables.spacingXSmall);
+    var x = f()(m()).withConfig({
         displayName: "FormRowsStyles__StyledAddRowButton",
         componentId: "sc-1j4j7h3-4"
-    })([ "", ";" ], j);
-    var E = m().div.withConfig({
+    })([ "", ";" ], O);
+    var j = f().div.withConfig({
         displayName: "FormRowsStyles__StyledMenuWrapper",
         componentId: "sc-1j4j7h3-5"
-    })([ "", ";" ], j);
-    var q = m().div.withConfig({
+    })([ "", ";" ], O);
+    var C = f().div.withConfig({
         displayName: "FormRowsStyles__StyledInputWrapper",
         componentId: "sc-1j4j7h3-6"
-    })([ "display:flex;gap:", ";" ], h.variables.spacingXSmall);
-    var k = function e(n) {
+    })([ "display:flex;gap:", ";" ], g.variables.spacingXSmall);
+    var E = function e(n) {
         return n ? "drag-handle" : "content";
     };
-    /* Row includes drag handle, input, and remove button */    var P = m().div.withConfig({
+    /* Row includes drag handle, input, and remove button */    var k = f().div.withConfig({
         displayName: "FormRowsStyles__StyledRow",
         componentId: "sc-1j4j7h3-7"
-    })([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}", "" ], h.mixins.reset("grid"), (function(e) {
+    })([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}", "" ], g.mixins.reset("grid"), (function(e) {
         var n = e.$sortable;
-        return k(n);
-    }), h.variables.spacingXSmall, h.variables.borderRadius, h.variables.zindexPopover, (function(e) {
+        return E(n);
+    }), g.variables.spacingXSmall, g.variables.borderRadius, g.variables.zindexPopover, (function(e) {
         var n = e.$sortable;
-        return n && (0, v.css)([ "&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){padding-inline-end:", ";}" ], R, R, h.variables.interactiveColorOverlayDrag, S, h.variables.spacingXSmall);
+        return n && (0, c.css)([ "&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){padding-inline-end:", ";}" ], h, h, g.variables.interactiveColorOverlayDrag, w, g.variables.spacingXSmall);
     }));
+    // CONCATENATED MODULE: external "@splunk/react-icons/TrashCanCross"
+    const q = require("@splunk/react-icons/TrashCanCross");
+    var P =  e.n(q);
     // CONCATENATED MODULE: ./src/FormRows/RowInternal.tsx
     function I() {
         return I = Object.assign ? Object.assign.bind() : function(e) {
@@ -184,38 +184,38 @@
         style: a().object,
         value: a().node
     };
-    var T = (0, s._)("Remove row");
-    var M =  t().forwardRef((function(e, n) {
+    var M = (0, s._)("Remove row");
+    var T =  t().forwardRef((function(e, n) {
         var o = e.children, a = e.index, i = e.onRequestRemove, l = e.renderDragHandle, s = _(e, [ "children", "index", "onRequestRemove", "renderDragHandle" ]);
-        var u = (0, r.useContext)(d), c = u.disabledRemoveButton, v = u.hasOnRequestAdd, m = u.sortable;
-        var p = (0, r.useCallback)((function(e) {
+        var u = (0, r.useContext)(d), c = u.disabledRemoveButton, f = u.hasOnRequestAdd, v = u.sortable;
+        var m = (0, r.useCallback)((function(e) {
             // FormRows remove functionality doesn't work without an index, but index is not a required prop. FormRows will throw an error
             // when rows are sortable and/or removable and index is not provided.
             i === null || i === void 0 ? void 0 : i(e, {
                 index: a !== null && a !== void 0 ? a : 0
             });
         }), [ i, a ]);
-        var b = i !== undefined;
+        var p = i !== undefined;
         (0, r.useEffect)((function() {
             if (false) {}
             if (false) {}
             if (false) {}
-        }), [ v, b, m, a ]);
+        }), [ f, p, v, a ]);
         
-        return t().createElement(P, I({
-            $sortable: m,
+        return t().createElement(k, I({
+            $sortable: v,
             "data-test": "row",
             ref: n
-        }, s), l && l(),  t().createElement(q, null, o), b &&  t().createElement(S, {
+        }, s), l && l(),  t().createElement(C, null, o), p &&  t().createElement(w, {
             appearance: "subtle",
-            "aria-label": T,
+            "aria-label": M,
             "data-test": "remove",
             disabled: c,
-            onClick: p
-        },  t().createElement(f(), null)));
+            onClick: m
+        },  t().createElement(P(), null)));
     }));
-    M.propTypes = A;
-    /* harmony default export */    const N = M;
+    T.propTypes = A;
+    /* harmony default export */    const N = T;
     // CONCATENATED MODULE: external "@dnd-kit/sortable"
     const B = require("@dnd-kit/sortable");
     // CONCATENATED MODULE: external "@dnd-kit/utilities"
@@ -292,37 +292,40 @@
             // when rows are sortable and/or removable and index is not provided.
             id: (a !== null && a !== void 0 ? a : 0) + 1
         }), s = l.attributes, u = l.listeners, c = l.setActivatorNodeRef, f = l.setNodeRef, v = l.transform, m = l.transition;
-        var p = {
-            transform: F.CSS.Transform.toString(v),
-            transition: m
-        };
-        var b = function e(r) {
-            f(r);
-            L(n, r);
-        };
+        var p = (0, r.useMemo)((function() {
+            return {
+                // CSS.Translate outputs only translate3d(x, y, 0), ignoring scale or rotation, so dragged items maintain their original size and shape. Using CSS.Transform here can incorrectly apply scale properties that will cause the element to scale or skew on drag.
+                transform: F.CSS.Translate.toString(v),
+                transition: m
+            };
+        }), [ v, m ]);
+        var b = (0, r.useCallback)((function(e) {
+            f(e);
+            L(n, e);
+        }), [ f, n ]);
         var g = (0, r.useContext)(d), y = g.onKeyDown;
-        var h = (0, r.useCallback)((function(e) {
+        var w = (0, r.useCallback)((function(e) {
             // FormRows drag functionality doesn't work without an index, but index is not a required prop. FormRows will throw an error
             // when rows are sortable and/or removable and index is not provided.
             y === null || y === void 0 ? void 0 : y(e, {
                 index: a !== null && a !== void 0 ? a : 0
             });
         }), [ y, a ]);
-        var w = (0, r.useCallback)((function() {
+        var R = (0, r.useCallback)((function() {
             
-            return t().createElement(R, K({
+            return t().createElement(h, K({
                 appearance: "subtle",
                 "aria-label": W,
                 "data-test": "drag-handle",
-                onKeyDown: h,
+                onKeyDown: w,
                 ref: c
             }, u),  t().createElement(X(), null));
-        }), [ h, u, c ]);
+        }), [ w, u, c ]);
         
         return t().createElement(N, K({
             index: a,
             ref: b,
-            renderDragHandle: w,
+            renderDragHandle: R,
             style: p
         }, i, s), o);
     }));
@@ -618,7 +621,7 @@
         var b = f !== undefined && !i;
         var g = c !== undefined;
         
-        return t().createElement(O, se({
+        return t().createElement(R, se({
             ref: l,
             "data-test": "form-rows"
         }, v),  t().createElement(d.Provider, {
@@ -629,9 +632,9 @@
                 hasOnRequestAdd: g,
                 sortable: b
             }
-        }, s &&  t().createElement(x, null, s),  t().createElement(le, {
+        }, s &&  t().createElement(S, null, s),  t().createElement(le, {
             onSortEnd: p
-        }, a), u &&  t().createElement(E, null, u) || g &&  t().createElement(C, {
+        }, a), u &&  t().createElement(j, null, u) || g &&  t().createElement(x, {
             disabled: i,
             appearance: "secondary",
             "data-test": "add-row",

package/Image.js

@@ -67,14 +67,14 @@
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
-    // CONCATENATED MODULE: external "prop-types"
-    const a = require("prop-types");
-    var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/endsWith"
-    const l = require("lodash/endsWith");
-    var i =  e.n(l);
+    const a = require("lodash/endsWith");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/toLower"
-    const u = require("lodash/toLower");
+    const l = require("lodash/toLower");
+    var i =  e.n(l);
+    // CONCATENATED MODULE: external "prop-types"
+    const u = require("prop-types");
     var s =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/File"
     const c = require("@splunk/react-ui/File");
@@ -164,18 +164,18 @@
         return t;
     }
     /** @public */    var S = {
-        allowExtensions: o().arrayOf(o().string),
-        defaultFilename: o().string,
-        defaultImageDataURI: o().string,
-        disabled: o().bool,
-        dropAnywhere: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        onImageChange: o().func
+        allowExtensions: s().arrayOf(s().string),
+        defaultFilename: s().string,
+        defaultImageDataURI: s().string,
+        disabled: s().bool,
+        dropAnywhere: s().bool,
+        elementRef: s().oneOfType([ s().func, s().object ]),
+        error: s().bool,
+        onImageChange: s().func
     };
     var R = function e(r, t) {
         return !!r && t.some((function(e) {
-            return i()(s()(r), ".".concat(s()(e)));
+            return o()(i()(r), ".".concat(i()(e)));
         }));
     };
     var E = new FileReader;