@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.5

package/FormRows.js

@@ -61,8 +61,8 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        Row: () => /* reexport */ Y,
-        default: () => /* reexport */ me
+        Row: () => /* reexport */ ee,
+        default: () => /* reexport */ ge
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -79,7 +79,7 @@
     const u = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: ./src/FormRows/FormRowsContext.tsx
     var d =  (0, r.createContext)({
-        disabledDeleteButton: false,
+        disabledRemoveButton: false,
         sortable: true
     });
     d.displayName = "FormRows";
@@ -88,56 +88,65 @@
     const f = require("@splunk/react-icons/TrashCanCross");
     var v =  e.n(f);
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var m =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const b = require("@splunk/react-ui/Box");
-    var y =  e.n(b);
+    const m = require("styled-components");
+    var p =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const g = require("@splunk/react-ui/Button");
-    var h =  e.n(g);
+    const b = require("@splunk/react-ui/Button");
+    var g =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const w = require("@splunk/react-ui/ButtonSimple");
-    var R =  e.n(w);
+    const y = require("@splunk/react-ui/ButtonSimple");
+    var h =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const S = require("@splunk/themes");
+    const w = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
-    var O = m()(y()).withConfig({
-        displayName: "FormRowsStyles__StyledBox",
+    var R = (0, m.css)([ "border:none;width:", ";height:", ";" ], w.variables.inputHeight, w.variables.inputHeight);
+    var S = p()(h()).withConfig({
+        displayName: "FormRowsStyles__StyledDragButton",
         componentId: "sc-1j4j7h3-0"
-    })([ "", ";" ], S.mixins.reset("block"));
-    var x = m().div.withConfig({
-        displayName: "FormRowsStyles__StyledHeader",
+    })([ "", ";grid-column:drag-handle;cursor:move;user-select:none;-webkit-user-drag:element;" ], R);
+    var O = p()(h()).withConfig({
+        displayName: "FormRowsStyles__StyledRemoveButton",
         componentId: "sc-1j4j7h3-1"
-    })([ "", ";padding-left:", ";" ], S.mixins.typography("largeBody", {
-        color: "active"
-    }), S.variables.spacingXXXLarge);
-    var j = m()(h()).withConfig({
-        displayName: "FormRowsStyles__StyledAddRowButton",
+    })([ "", ";grid-column:remove-button;" ], R);
+    var x = p().div.withConfig({
+        displayName: "FormRowsStyles__StyledDiv",
         componentId: "sc-1j4j7h3-2"
-    })([ "", ";" ], (function(e) {
-        var n = e.$sortable;
-        return n && (0, p.css)([ "margin:", " 0 0 ", ";" ], S.variables.spacingXSmall, S.variables.spacingXXXLarge);
-    }));
-    var k = m().div.withConfig({
-        displayName: "FormRowsStyles__StyledDrag",
+    })([ "", ";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:", ";" ], w.mixins.reset("grid"), S, O, S, O, w.variables.spacingSmall, w.variables.spacingXSmall);
+    var j = p().div.withConfig({
+        displayName: "FormRowsStyles__StyledHeader",
         componentId: "sc-1j4j7h3-3"
-    })([ "display:flex;align-items:center;justify-content:center;" ]);
-    var q = m()(R()).withConfig({
-        displayName: "FormRowsStyles__StyledDragButton",
+    })([ "", ";grid-column:content;" ], w.mixins.typography("largeBody", {
+        color: "active"
+    }));
+    var E = (0, m.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], w.variables.spacingXSmall);
+    var C = p()(g()).withConfig({
+        displayName: "FormRowsStyles__StyledAddRowButton",
         componentId: "sc-1j4j7h3-4"
-    })([ "border:none;width:", ";height:", ";cursor:move;user-select:none;-webkit-user-drag:element;" ], S.variables.inputHeight, S.variables.inputHeight);
-    var C = m()(R()).withConfig({
-        displayName: "FormRowsStyles__StyledRemoveButton",
+    })([ "", ";" ], E);
+    var k = p().div.withConfig({
+        displayName: "FormRowsStyles__StyledMenuWrapper",
         componentId: "sc-1j4j7h3-5"
-    })([ "border:none;width:", ";height:", ";" ], S.variables.inputHeight, S.variables.inputHeight);
-    var E = m().div.withConfig({
-        displayName: "FormRowsStyles__Styled",
+    })([ "", ";" ], E);
+    var q = p().div.withConfig({
+        displayName: "FormRowsStyles__StyledInputWrapper",
         componentId: "sc-1j4j7h3-6"
-    })([ "display:flex;position:relative;padding:", " 0;gap:", ";border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){padding-right:", ";}" ], S.variables.spacingXSmall, S.variables.spacingSmall, S.variables.borderRadius, S.variables.zindexPopover, q, q, S.variables.interactiveColorOverlayDrag, C, S.variables.spacingXSmall);
+    })([ "display:flex;gap:", ";" ], w.variables.spacingXSmall);
+    var P = function e(n) {
+        return n ? "drag-handle" : "content";
+    };
+    /* Row includes drag handle, input, and remove button */    var I = p().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;}", "" ], w.mixins.reset("grid"), (function(e) {
+        var n = e.$sortable;
+        return P(n);
+    }), w.variables.spacingXSmall, w.variables.borderRadius, w.variables.zindexPopover, (function(e) {
+        var n = e.$sortable;
+        return n && (0, m.css)([ "&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){padding-inline-end:", ";}" ], S, S, w.variables.interactiveColorOverlayDrag, O, w.variables.spacingXSmall);
+    }));
     // CONCATENATED MODULE: ./src/FormRows/RowInternal.tsx
-    function P() {
-        return P = Object.assign ? Object.assign.bind() : function(e) {
+    function _() {
+        return _ = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -145,11 +154,11 @@
                 }
             }
             return e;
-        }, P.apply(null, arguments);
+        }, _.apply(null, arguments);
     }
     function D(e, n) {
         if (null == e) return {};
-        var r, t, o = I(e, n);
+        var r, t, o = T(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -158,7 +167,7 @@
         }
         return o;
     }
-    function I(e, n) {
+    function T(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -169,7 +178,7 @@
         }
         return r;
     }
-    /** @public */    var _ = {
+    /** @public */    var M = {
         children: a().node,
         index: a().number,
         onRequestRemove: a().func,
@@ -177,25 +186,28 @@
         style: a().object,
         value: a().node
     };
-    var T =  t().forwardRef((function(e, n) {
+    var N =  t().forwardRef((function(e, n) {
         var o = e.children, a = e.index, i = e.onRequestRemove, l = e.renderDragHandle, u = D(e, [ "children", "index", "onRequestRemove", "renderDragHandle" ]);
-        var d = (0, r.useContext)(c), f = d.disabledDeleteButton, p = d.hasOnRequestAdd, m = d.sortable;
+        var d = (0, r.useContext)(c), f = d.disabledRemoveButton, m = d.hasOnRequestAdd, p = d.sortable;
         var b = (0, r.useCallback)((function(e) {
-            // TODO: this callback doesn't work correctly if index isn't provided SUI-5639
+            // 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 y = i !== undefined;
-        if (false) {}
-        if (false) {}
-        if (false) {}
+        var g = i !== undefined;
+        (0, r.useEffect)((function() {
+            if (false) {}
+            if (false) {}
+            if (false) {}
+        }), [ m, g, p, a ]);
         
-        return t().createElement(E, P({
-            $sortable: m,
+        return t().createElement(I, _({
+            $sortable: p,
             "data-test": "row",
             ref: n
-        }, u), l && l(), o, y &&  t().createElement(C, {
+        }, u), l && l(),  t().createElement(q, null, o), g &&  t().createElement(O, {
             appearance: "secondary",
             "aria-label": (0, s._)("Remove Row"),
             "data-test": "remove",
@@ -203,15 +215,15 @@
             onClick: b
         },  t().createElement(v(), null)));
     }));
-    T.propTypes = _;
-    /* harmony default export */    const B = T;
+    N.propTypes = M;
+    /* harmony default export */    const A = N;
     // CONCATENATED MODULE: external "@dnd-kit/sortable"
-    const A = require("@dnd-kit/sortable");
+    const B = require("@dnd-kit/sortable");
     // CONCATENATED MODULE: external "@dnd-kit/utilities"
-    const H = require("@dnd-kit/utilities");
+    const F = require("@dnd-kit/utilities");
     // CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
-    const M = require("@splunk/react-icons/ParallelDots");
-    var N =  e.n(M);
+    const H = require("@splunk/react-icons/ParallelDots");
+    var X =  e.n(H);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -219,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 X(e, n) {
+    function L(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -232,8 +244,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/FormRows/SortableRow.tsx
-    function F() {
-        return F = Object.assign ? Object.assign.bind() : function(e) {
+    function K() {
+        return K = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -241,11 +253,11 @@
                 }
             }
             return e;
-        }, F.apply(null, arguments);
+        }, K.apply(null, arguments);
     }
-    function L(e, n) {
+    function $(e, n) {
         if (null == e) return {};
-        var r, t, o = K(e, n);
+        var r, t, o = z(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -254,7 +266,7 @@
         }
         return o;
     }
-    function K(e, n) {
+    function z(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -265,58 +277,60 @@
         }
         return r;
     }
-    /** @public */    var $ = {
+    /** @public */    var W = {
         children: a().node,
         index: a().number,
         onRequestRemove: a().func,
         value: a().node
     };
-    var z =  t().forwardRef((function(e, n) {
-        var o = e.children, a = e.index, i = L(e, [ "children", "index" ]);
+    var U =  t().forwardRef((function(e, n) {
+        var o = e.children, a = e.index, i = $(e, [ "children", "index" ]);
         // @docs-props-type RowPropsBase
-                var l = (0, A.useSortable)({
+                var l = (0, B.useSortable)({
             // @dnd-kit requires "id" to be greater than 0 https://github.com/clauderic/dnd-kit/issues/1150
-            // TODO: FormRows drag functionality doesn't work without an index, but it's not a required prop SUI-5639
-            id: (a || 0) + 1
-        }), u = l.attributes, d = l.listeners, f = l.setActivatorNodeRef, v = l.setNodeRef, p = l.transform, m = l.transition;
+            // 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.
+            id: (a !== null && a !== void 0 ? a : 0) + 1
+        }), u = l.attributes, d = l.listeners, f = l.setActivatorNodeRef, v = l.setNodeRef, m = l.transform, p = l.transition;
         var b = {
-            transform: H.CSS.Transform.toString(p),
-            transition: m
+            transform: F.CSS.Transform.toString(m),
+            transition: p
         };
-        var y = function e(r) {
+        var g = function e(r) {
             v(r);
-            X(n, r);
+            L(n, r);
         };
-        var g = (0, r.useContext)(c), h = g.onKeyDown;
+        var y = (0, r.useContext)(c), h = y.onKeyDown;
         var w = (0, r.useCallback)((function(e) {
-            // TODO: this callback doesn't work correctly if index isn't provided SUI-5639
+            // 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.
             h === null || h === void 0 ? void 0 : h(e, {
                 index: a !== null && a !== void 0 ? a : 0
             });
         }), [ h, a ]);
         var R = (0, r.useCallback)((function() {
             
-            return t().createElement(k, null,  t().createElement(q, F({
+            return t().createElement(S, K({
                 appearance: "secondary",
-                "aria-label": (0, s._)("Drag Handle"),
+                "aria-label": (0, s._)("Drag handle"),
                 "data-test": "drag-handle",
                 onKeyDown: w,
                 ref: f
-            }, d),  t().createElement(N(), null)));
+            }, d),  t().createElement(X(), null));
         }), [ w, d, f ]);
         
-        return t().createElement(B, F({
+        return t().createElement(A, K({
             index: a,
-            ref: y,
+            ref: g,
             renderDragHandle: R,
             style: b
         }, i, u), o);
     }));
-    z.propTypes = $;
-    /* harmony default export */    const U = z;
+    U.propTypes = W;
+    /* harmony default export */    const V = U;
     // CONCATENATED MODULE: ./src/FormRows/Row.tsx
-    function V() {
-        return V = Object.assign ? Object.assign.bind() : function(e) {
+    function G() {
+        return G = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -324,11 +338,11 @@
                 }
             }
             return e;
-        }, V.apply(null, arguments);
+        }, G.apply(null, arguments);
     }
-    function G(e, n) {
+    function J(e, n) {
         if (null == e) return {};
-        var r, t, o = J(e, n);
+        var r, t, o = Q(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -337,7 +351,7 @@
         }
         return o;
     }
-    function J(e, n) {
+    function Q(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -348,41 +362,41 @@
         }
         return r;
     }
-    /** @public */    var Q = {
+    /** @public */    var Y = {
         children: a().node,
         elementRef: a().oneOfType([ a().func, a().object ]),
         index: a().number,
         onRequestRemove: a().func,
         value: a().node
     };
-    function W(e) {
-        var n = e.children, o = e.elementRef, a = G(e, [ "children", "elementRef" ]);
+    function Z(e) {
+        var n = e.children, o = e.elementRef, a = J(e, [ "children", "elementRef" ]);
         // @docs-props-type RowPropsBase
                 var i = (0, r.useContext)(c), l = i.sortable;
         var s = (0, r.useMemo)((function() {
-            return l ? U : B;
+            return l ? V : A;
         }), [ l ]);
         
-        return t().createElement(s, V({
+        return t().createElement(s, G({
             ref: o
         }, a), n);
     }
-    W.propTypes = Q;
-    /* harmony default export */    const Y = W;
+    Z.propTypes = Y;
+    /* harmony default export */    const ee = Z;
     // CONCATENATED MODULE: external "@dnd-kit/core"
-    const Z = require("@dnd-kit/core");
+    const ne = require("@dnd-kit/core");
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const ee = require("@splunk/ui-utils/format");
+    const re = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
-    var ne = function e(n, r) {
+    var te = function e(n, r) {
         return n.indexOf(r) + 1;
     };
-    var re = {
+    var oe = {
         draggable: (0, s._)("To pick up a sortable row, press space or enter.\n        Use the up and down arrow keys to update the position of the row.")
     };
-    var te = function e(n) {
+    var ae = function e(n) {
         var o = n.children, a = n.onSortEnd;
-        var i = (0, Z.useSensors)((0, Z.useSensor)(Z.PointerSensor), (0, Z.useSensor)(Z.MouseSensor));
+        var i = (0, ne.useSensors)((0, ne.useSensor)(ne.PointerSensor), (0, ne.useSensor)(ne.MouseSensor));
         var l = (0, r.useRef)(true);
         var s = r.Children.toArray(o).filter(r.isValidElement);
         var u = s.map((function(e) {
@@ -403,7 +417,7 @@
             return {
                 onDragStart: function e(n) {
                     var r = n.active.id;
-                    return (0, ee.sprintf)("Picked up sortable row in position %d of %d.", ne(u, r), u.length);
+                    return (0, re.sprintf)("Picked up sortable row in position %d of %d.", te(u, r), u.length);
                 },
                 onDragOver: function e(n) {
                     var r = n.active, t = n.over;
@@ -414,39 +428,39 @@
                         l.current = false;
                         return undefined;
                     }
-                    return t ? (0, ee.sprintf)("Row moved from position %d to position %d of %d.", ne(u, r.id), ne(u, t.id), u.length) : undefined;
+                    return t ? (0, re.sprintf)("Row moved from position %d to position %d of %d.", te(u, r.id), te(u, t.id), u.length) : undefined;
                 },
                 onDragEnd: function e(n) {
                     var r = n.over;
-                    return r ? (0, ee.sprintf)("Row dropped at position %d of %d.", ne(u, r.id), u.length) : undefined;
+                    return r ? (0, re.sprintf)("Row dropped at position %d of %d.", te(u, r.id), u.length) : undefined;
                 },
                 onDragCancel: function e(n) {
                     var r = n.active.id;
-                    return (0, ee.sprintf)("Row returned to it's starting position of %d.", ne(u, r));
+                    return (0, re.sprintf)("Row returned to it's starting position of %d.", te(u, r));
                 }
             };
         }), [ u ]);
         var f = (0, r.useMemo)((function() {
             return {
-                screenReaderInstructions: re,
+                screenReaderInstructions: oe,
                 announcements: c
             };
         }), [ c ]);
         
-        return t().createElement(Z.DndContext, {
+        return t().createElement(ne.DndContext, {
             accessibility: f,
             sensors: i,
-            collisionDetection: Z.closestCenter,
+            collisionDetection: ne.closestCenter,
             onDragEnd: d
-        },  t().createElement(A.SortableContext, {
+        },  t().createElement(B.SortableContext, {
             items: u,
-            strategy: A.verticalListSortingStrategy
+            strategy: B.verticalListSortingStrategy
         }, s));
     };
-    /* harmony default export */    const oe = te;
+    /* harmony default export */    const ie = ae;
     // CONCATENATED MODULE: ./src/FormRows/FormRows.tsx
-    function ae() {
-        return ae = Object.assign ? Object.assign.bind() : function(e) {
+    function le() {
+        return le = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -454,11 +468,11 @@
                 }
             }
             return e;
-        }, ae.apply(null, arguments);
+        }, le.apply(null, arguments);
     }
-    function ie(e, n) {
+    function se(e, n) {
         if (null == e) return {};
-        var r, t, o = le(e, n);
+        var r, t, o = ue(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -467,7 +481,7 @@
         }
         return o;
     }
-    function le(e, n) {
+    function ue(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -478,7 +492,7 @@
         }
         return r;
     }
-    /** @public */    var se = {
+    /** @public */    var de = {
         addLabel: a().string,
         children: a().node,
         disabled: a().bool,
@@ -511,7 +525,7 @@
  * @param element Row element to add.
  * @param items Array of current FormRows to add to.
  * @return New array of FormRows with new Row added.
- */    var ue = function e(n, r) {
+ */    var ce = function e(n, r) {
         return r.concat(n);
     };
     /**
@@ -529,7 +543,7 @@
  * @param toIndex New index to move row to.
  * @param items Array of current FormRows.
  * @return New array of FormRows arranged in new order.
- */    var de = function e(n, t, o) {
+ */    var fe = function e(n, t, o) {
         var a = o.filter((function(e, r) {
             return r !== n;
         }));
@@ -555,7 +569,7 @@
  * @param index Index of Row to delete.
  * @param items Array of current FormRows.
  * @return New array of FormRows with Row of given index deleted.
- */    var ce = function e(n, t) {
+ */    var ve = function e(n, t) {
         return t.filter((function(e, r) {
             return r !== n;
         })).map((function(e, n) {
@@ -565,10 +579,10 @@
             });
         }));
     };
-    var fe =  t().createElement(l(), null);
-    var ve = (0, s._)("Add row");
-    function pe(e) {
-        var n = e.addLabel, o = n === void 0 ? ve : n, a = e.children, i = e.disabled, l = e.header, s = e.menu, d = e.onRequestAdd, f = e.onRequestMove, v = ie(e, [ "addLabel", "children", "disabled", "header", "menu", "onRequestAdd", "onRequestMove" ]);
+    var me =  t().createElement(l(), null);
+    var pe = (0, s._)("Add row");
+    function be(e) {
+        var n = e.addLabel, o = n === void 0 ? pe : n, a = e.children, i = e.disabled, l = e.elementRef, s = e.header, d = e.menu, f = e.onRequestAdd, v = e.onRequestMove, m = se(e, [ "addLabel", "children", "disabled", "elementRef", "header", "menu", "onRequestAdd", "onRequestMove" ]);
         // @docs-props-type FormRowsPropsBase
                 var p = (0, r.useCallback)((function(e, n) {
             var r = n.index;
@@ -578,7 +592,7 @@
             if ((0, u.keycode)(e.nativeEvent) === "up") {
                 e.preventDefault();
                 if (r > 0) {
-                    f === null || f === void 0 ? void 0 : f({
+                    v === null || v === void 0 ? void 0 : v({
                         fromIndex: r,
                         toIndex: r - 1
                     });
@@ -586,52 +600,51 @@
             } else if ((0, u.keycode)(e.nativeEvent) === "down") {
                 e.preventDefault();
                 if (r < t().Children.toArray(a).length - 1) {
-                    f === null || f === void 0 ? void 0 : f({
+                    v === null || v === void 0 ? void 0 : v({
                         fromIndex: r,
                         toIndex: r + 1
                     });
                 }
             }
-        }), [ a, f ]);
-        var m = (0, r.useCallback)((function(e) {
+        }), [ a, v ]);
+        var b = (0, r.useCallback)((function(e) {
             var n = e.oldIndex, r = e.newIndex;
-            f === null || f === void 0 ? void 0 : f({
+            v === null || v === void 0 ? void 0 : v({
                 fromIndex: n,
                 toIndex: r
             });
-        }), [ f ]);
-        var b = f !== undefined && !i;
-        var y = b ? x : "div";
-        var g = d !== undefined;
+        }), [ v ]);
+        var g = v !== undefined && !i;
+        var y = f !== undefined;
         
-        return t().createElement(O, ae({
+        return t().createElement(x, le({
+            ref: l,
             "data-test": "form-rows"
-        }, v),  t().createElement(c.Provider, {
+        }, m),  t().createElement(c.Provider, {
             // eslint-disable-next-line react/jsx-no-constructed-context-values
             value: {
-                disabledDeleteButton: i,
+                disabledRemoveButton: i,
                 onKeyDown: p,
-                hasOnRequestAdd: g,
-                sortable: b
+                hasOnRequestAdd: y,
+                sortable: g
             }
-        }, l &&  t().createElement(y, null, l),  t().createElement(oe, {
-            onSortEnd: m
-        }, a), s || g &&  t().createElement(j, {
+        }, s &&  t().createElement(j, null, s),  t().createElement(ie, {
+            onSortEnd: b
+        }, a), d &&  t().createElement(k, null, d) || y &&  t().createElement(C, {
             disabled: i,
             appearance: "secondary",
             "data-test": "add-row",
-            icon: fe,
+            icon: me,
             label: o,
-            onClick: d,
-            $sortable: b
+            onClick: f
         })));
     }
-    pe.propTypes = se;
-    pe.Row = Y;
-    pe.addRow = ue;
-    pe.moveRow = de;
-    pe.removeRow = ce;
-    /* harmony default export */    const me = pe;
+    be.propTypes = de;
+    be.Row = ee;
+    be.addRow = ce;
+    be.moveRow = fe;
+    be.removeRow = ve;
+    /* harmony default export */    const ge = be;
     // CONCATENATED MODULE: ./src/FormRows/index.ts
     module.exports = n;
     /******/})();