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

package/FormRows.js

@@ -61,8 +61,8 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        Row: () => /* reexport */ ie,
-        default: () => /* reexport */ he
+        Row: () => /* reexport */ Z,
+        default: () => /* reexport */ be
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -70,142 +70,82 @@
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var a =  e.n(o);
+    // CONCATENATED MODULE: external "@splunk/react-icons/Plus"
+    const i = require("@splunk/react-icons/Plus");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const i = require("@splunk/ui-utils/i18n");
+    const u = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const l = require("@splunk/ui-utils/keyboard");
+    const s = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: ./src/FormRows/FormRowsContext.tsx
-    var s =  (0, r.createContext)({
-        disabledDeleteButton: false,
+    var d =  (0, r.createContext)({
+        disabledRemoveButton: false,
         sortable: true
     });
-    s.displayName = "FormRows";
-    /* harmony default export */    const c = s;
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const u = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-icons/Plus"
-    const d = require("@splunk/react-icons/Plus");
-    var p =  e.n(d);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Plus"
-    const f = require("@splunk/react-icons/enterprise/Plus");
+    d.displayName = "FormRows";
+    /* harmony default export */    const c = d;
+    // CONCATENATED MODULE: external "@splunk/react-icons/TrashCanCross"
+    const f = require("@splunk/react-icons/TrashCanCross");
     var v =  e.n(f);
-    // CONCATENATED MODULE: ./src/FormRows/icons/FormRowsPlusIcon.tsx
-    var m = function e() {
-        var n = (0, u.useSplunkTheme)(), r = n.isEnterprise, o = n.isCompact;
-        var a = o ? "20px" : "24px";
-        return r ?  t().createElement(v(), {
-            screenReaderText: null,
-            hideDefaultTooltip: true
-        }) :  t().createElement(p(), {
-            width: a,
-            height: a
-        });
-    };
-    /* harmony default export */    const b = m;
-    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const y = require("@splunk/react-icons/Cross");
-    var g =  e.n(y);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-    const h = require("@splunk/react-icons/enterprise/Close");
-    var x =  e.n(h);
     // CONCATENATED MODULE: external "styled-components"
-    const w = require("styled-components");
-    var S =  e.n(w);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const R = require("@splunk/react-ui/Box");
-    var O =  e.n(R);
+    const p = require("styled-components");
+    var m =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const j = require("@splunk/react-ui/Button");
-    var k =  e.n(j);
+    const b = require("@splunk/react-ui/Button");
+    var g =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const E = require("@splunk/react-ui/ButtonSimple");
-    var q =  e.n(E);
+    const y = require("@splunk/react-ui/ButtonSimple");
+    var h =  e.n(y);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const w = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
-    var C = S()(O()).withConfig({
-        displayName: "FormRowsStyles__StyledBox",
+    var R = m().div.withConfig({
+        displayName: "FormRowsStyles__StyledDiv",
         componentId: "sc-1j4j7h3-0"
-    })([ "", ";" ], u.mixins.reset("block"));
-    var P = S().div.withConfig({
+    })([ "", ";justify-content:start;grid-template-columns:[drag-handle] min-content [content] auto [remove-button] min-content;column-gap:", ";row-gap:", ";" ], w.mixins.reset("grid"), w.variables.spacingSmall, w.variables.spacingXSmall);
+    var S = m().div.withConfig({
         displayName: "FormRowsStyles__StyledHeader",
         componentId: "sc-1j4j7h3-1"
-    })([ "padding-left:", ";", "" ], (0, u.pick)({
-        enterprise: u.variables.spacingSmall,
-        prisma: "16px"
-    }), (0, u.pick)({
-        prisma: {
-            comfortable: (0, w.css)([ "padding-bottom:8px;" ]),
-            compact: (0, w.css)([ "padding-bottom:6px;" ])
-        }
+    })([ "", ";grid-column:content;" ], w.mixins.typography("largeBody", {
+        color: "active"
     }));
-    var _ = S()(k()).withConfig({
+    var O = (0, p.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], w.variables.spacingXSmall);
+    var j = m()(g()).withConfig({
         displayName: "FormRowsStyles__StyledAddRowButton",
         componentId: "sc-1j4j7h3-2"
-    })([ "", "" ], (function(e) {
-        var n = e.$sortable;
-        return n && (0, u.pick)({
-            prisma: (0, w.css)([ "margin-left:16px;" ])
-        });
-    }));
-    var I = S().div.withConfig({
-        displayName: "FormRowsStyles__StyledRows",
+    })([ "", ";" ], O);
+    var x = m().div.withConfig({
+        displayName: "FormRowsStyles__StyledMenuWrapper",
         componentId: "sc-1j4j7h3-3"
-    })([ "position:relative;", "" ], (0, u.pick)({
-        prisma: {
-            comfortable: (0, w.css)([ "padding-bottom:12px;" ]),
-            compact: (0, w.css)([ "padding-bottom:10px;" ])
-        }
-    }));
-    var D = S().div.withConfig({
-        displayName: "FormRowsStyles__Styled",
+    })([ "", ";" ], O);
+    var E = m()(h()).withConfig({
+        displayName: "FormRowsStyles__StyledDragButton",
         componentId: "sc-1j4j7h3-4"
-    })([ "", ";position:relative;&.sorting{z-index:calc(", " + 1);}", " &:focus{outline:0;box-shadow:", ";}" ], (0, 
-    u.pick)({
-        enterprise: (0, w.css)([ "padding:3px calc(", " + 3px) 3px 0;" ], u.variables.inputHeight),
-        prisma: {
-            comfortable: (0, w.css)([ "padding:8px calc(", " + 8px) 8px 0;" ], u.variables.inputHeight),
-            compact: (0, w.css)([ "padding:6px calc(", " + 8px) 6px 0;" ], u.variables.inputHeight)
-        }
-    }), u.variables.zindexPopover, (function(e) {
-        var n = e.$sortable;
-        return n && (0, w.css)([ "padding-left:", ";" ], (0, u.pick)({
-            enterprise: u.variables.spacingSmall,
-            prisma: "16px"
-        }));
-    }), u.variables.focusShadow);
-    var T = S().div.withConfig({
-        displayName: "FormRowsStyles__StyledButton",
+    })([ "grid-column:drag-handle;border:none;width:", ";height:", ";cursor:move;user-select:none;-webkit-user-drag:element;" ], w.variables.inputHeight, w.variables.inputHeight);
+    var C = m()(h()).withConfig({
+        displayName: "FormRowsStyles__StyledRemoveButton",
         componentId: "sc-1j4j7h3-5"
-    })([ "position:absolute;right:0;top:", ";float:right;" ], (0, u.pick)({
-        enterprise: "3px",
-        prisma: {
-            comfortable: "8px",
-            compact: "6px"
-        }
-    }));
-    var B = S()(q()).withConfig({
-        displayName: "FormRowsStyles__StyledButtonSimple",
+    })([ "grid-column:remove-button;border:none;width:", ";height:", ";" ], w.variables.inputHeight, w.variables.inputHeight);
+    var k = m().div.withConfig({
+        displayName: "FormRowsStyles__StyledInputWrapper",
         componentId: "sc-1j4j7h3-6"
-    })([ "float:right;width:", ";height:", ";text-align:center;" ], u.variables.inputHeight, u.variables.inputHeight);
-    var N = S().div.withConfig({
-        displayName: "FormRowsStyles__StyledDrag",
+    })([ "display:flex;gap:", ";" ], w.variables.spacingXSmall);
+    var q = function e(n) {
+        return n ? "drag-handle" : "content";
+    };
+    /* Row includes drag handle, input, and remove button */    var P = m().div.withConfig({
+        displayName: "FormRowsStyles__StyledRow",
         componentId: "sc-1j4j7h3-7"
-    })([ "position:absolute;left:0;right:0;content:'';cursor:move;background:", ";width:", ";top:", ";", "" ], u.variables.draggableBackground, (0, 
-    u.pick)({
-        enterprise: "7px",
-        prisma: "6px"
-    }), (0, u.pick)({
-        enterprise: "4px",
-        prisma: {
-            comfortable: "18px",
-            compact: "12px"
-        }
-    }), (0, u.pick)({
-        enterprise: (0, w.css)([ "bottom:3px;opacity:0.5;" ]),
-        prisma: (0, w.css)([ "height:20px;" ])
-    }));
+    })([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){grid-column:", " / remove-button;padding-right:", ";}" ], w.mixins.reset("grid"), (function(e) {
+        var n = e.$sortable;
+        return q(n);
+    }), w.variables.spacingXSmall, w.variables.borderRadius, w.variables.zindexPopover, E, E, w.variables.interactiveColorOverlayDrag, C, (function(e) {
+        var n = e.$sortable;
+        return q(n);
+    }), w.variables.spacingXSmall);
     // CONCATENATED MODULE: ./src/FormRows/RowInternal.tsx
-    function A() {
-        return A = Object.assign ? Object.assign.bind() : function(e) {
+    function I() {
+        return I = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -213,11 +153,11 @@
                 }
             }
             return e;
-        }, A.apply(null, arguments);
+        }, I.apply(null, arguments);
     }
-    function H(e, n) {
+    function _(e, n) {
         if (null == e) return {};
-        var r, t, o = F(e, n);
+        var r, t, o = D(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -226,7 +166,7 @@
         }
         return o;
     }
-    function F(e, n) {
+    function D(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -237,7 +177,7 @@
         }
         return r;
     }
-    /** @public */    var M = {
+    /** @public */    var T = {
         children: a().node,
         index: a().number,
         onRequestRemove: a().func,
@@ -245,59 +185,44 @@
         style: a().object,
         value: a().node
     };
-    var L =  t().forwardRef((function(e, n) {
-        var o = e.children, a = e.index, l = e.onRequestRemove, s = e.renderDragHandle, d = H(e, [ "children", "index", "onRequestRemove", "renderDragHandle" ]);
-        var p = (0, u.useSplunkTheme)(), f = p.isCompact, v = p.isEnterprise;
-        var m = f ? "20px" : "24px";
-        var b = (0, r.useContext)(c), y = b.disabledDeleteButton, h = b.hasOnRequestAdd, w = b.onKeyDown, S = b.sortable;
-        var R = (0, r.useCallback)((function(e) {
-            // TODO: this callback doesn't work correctly if index isn't provided SUI-5639
-            w === null || w === void 0 ? void 0 : w(e, {
-                index: a !== null && a !== void 0 ? a : 0
-            });
-        }), [ w, a ]);
-        var O = (0, r.useCallback)((function(e) {
-            // TODO: this callback doesn't work correctly if index isn't provided SUI-5639
-            l === null || l === void 0 ? void 0 : l(e, {
+    var M =  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 d = (0, r.useContext)(c), f = d.disabledRemoveButton, p = d.hasOnRequestAdd, m = d.sortable;
+        var b = (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
             });
-        }), [ l, a ]);
-        var j = l !== undefined;
-        if (false) {}
-        if (false) {}
-        if (false) {}
+        }), [ i, a ]);
+        var g = i !== undefined;
+        (0, r.useEffect)((function() {
+            if (false) {}
+            if (false) {}
+            if (false) {}
+        }), [ p, g, m, a ]);
         
-        return t().createElement(D, A({
-            $sortable: S,
+        return t().createElement(P, I({
+            $sortable: m,
             "data-test": "row",
-            ref: n,
-            onKeyDown: R
-        }, d), s && s(), o, j &&  t().createElement(T, null,  t().createElement(B, {
-            appearance: "subtle",
-            "aria-label": (0, i._)("Remove Row"),
+            ref: n
+        }, s), l && l(),  t().createElement(k, null, o), g &&  t().createElement(C, {
+            appearance: "secondary",
+            "aria-label": (0, u._)("Remove Row"),
             "data-test": "remove",
-            disabled: y,
-            onClick: O
-        }, v ?  t().createElement(x(), {
-            "data-test": "cross",
-            inline: false,
-            screenReaderText: null,
-            size: "13px"
-        }) :  t().createElement(g(), {
-            "data-test": "cross",
-            height: m,
-            width: m
-        }))));
+            disabled: f,
+            onClick: b
+        },  t().createElement(v(), null)));
     }));
-    L.propTypes = M;
-    /* harmony default export */    const $ = L;
+    M.propTypes = T;
+    /* harmony default export */    const N = M;
     // CONCATENATED MODULE: external "@dnd-kit/sortable"
-    const z = require("@dnd-kit/sortable");
+    const A = require("@dnd-kit/sortable");
     // CONCATENATED MODULE: external "@dnd-kit/utilities"
-    const K = require("@dnd-kit/utilities");
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const V = require("@splunk/react-ui/ScreenReaderContent");
-    var G =  e.n(V);
+    const B = require("@dnd-kit/utilities");
+    // CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
+    const F = require("@splunk/react-icons/ParallelDots");
+    var H =  e.n(F);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -305,7 +230,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);
@@ -318,9 +243,20 @@
         }
     }
     // CONCATENATED MODULE: ./src/FormRows/SortableRow.tsx
-    function Q(e, n) {
+    function L() {
+        return L = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                }
+            }
+            return e;
+        }, L.apply(null, arguments);
+    }
+    function K(e, n) {
         if (null == e) return {};
-        var r, t, o = U(e, n);
+        var r, t, o = $(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -329,7 +265,7 @@
         }
         return o;
     }
-    function U(e, n) {
+    function $(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -340,65 +276,60 @@
         }
         return r;
     }
-    function W() {
-        return W = Object.assign ? Object.assign.bind() : function(e) {
-            for (var n = 1; n < arguments.length; n++) {
-                var r = arguments[n];
-                for (var t in r) {
-                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
-                }
-            }
-            return e;
-        }, W.apply(null, arguments)
-        /** @public */;
-    }
-    var X = {
+    /** @public */    var z = {
         children: a().node,
         index: a().number,
         onRequestRemove: a().func,
         value: a().node
     };
-    var Y =  t().forwardRef((function(e, n) {
-        
-        return t().createElement(N, W({
-            "data-test": "drag-handle",
-            ref: n
-        }, e),  t().createElement(G(), null, (0, i._)("Press arrow up or arrow down to re-order items")));
-    }));
-    var Z =  t().forwardRef((function(e, n) {
-        var r = e.children, o = e.index, a = Q(e, [ "children", "index" ]);
+    var W =  t().forwardRef((function(e, n) {
+        var o = e.children, a = e.index, i = K(e, [ "children", "index" ]);
         // @docs-props-type RowPropsBase
-                var i = (0, z.useSortable)({
+                var l = (0, A.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: (o || 0) + 1
-        }), l = i.attributes, s = i.listeners, c = i.setActivatorNodeRef, u = i.setNodeRef, d = i.transform, p = i.transition;
-        var f = {
-            transform: K.CSS.Transform.toString(d),
-            transition: p
+            // 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
+        }), s = l.attributes, d = l.listeners, f = l.setActivatorNodeRef, v = l.setNodeRef, p = l.transform, m = l.transition;
+        var b = {
+            transform: B.CSS.Transform.toString(p),
+            transition: m
         };
-        var v = function e(r) {
-            u(r);
-            J(n, r);
+        var g = function e(r) {
+            v(r);
+            X(n, r);
         };
+        var y = (0, r.useContext)(c), h = y.onKeyDown;
+        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.
+            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(E, L({
+                appearance: "secondary",
+                "aria-label": (0, u._)("Drag handle"),
+                "data-test": "drag-handle",
+                onKeyDown: w,
+                ref: f
+            }, d),  t().createElement(H(), null));
+        }), [ w, d, f ]);
         
-        return t().createElement($, W({
-            index: o,
-            ref: v,
-            renderDragHandle: function e() {
-                
-                return t().createElement(Y, W({
-                    ref: c
-                }, s));
-            },
-            style: f
-        }, a, l), r);
+        return t().createElement(N, L({
+            index: a,
+            ref: g,
+            renderDragHandle: R,
+            style: b
+        }, i, s), o);
     }));
-    Z.propTypes = X;
-    /* harmony default export */    const ee = Z;
+    W.propTypes = z;
+    /* harmony default export */    const U = W;
     // CONCATENATED MODULE: ./src/FormRows/Row.tsx
-    function ne() {
-        return ne = Object.assign ? Object.assign.bind() : function(e) {
+    function V() {
+        return V = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -406,11 +337,11 @@
                 }
             }
             return e;
-        }, ne.apply(null, arguments);
+        }, V.apply(null, arguments);
     }
-    function re(e, n) {
+    function G(e, n) {
         if (null == e) return {};
-        var r, t, o = te(e, n);
+        var r, t, o = J(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -419,7 +350,7 @@
         }
         return o;
     }
-    function te(e, n) {
+    function J(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -430,38 +361,47 @@
         }
         return r;
     }
-    /** @public */    var oe = {
+    /** @public */    var Q = {
         children: a().node,
         elementRef: a().oneOfType([ a().func, a().object ]),
         index: a().number,
         onRequestRemove: a().func,
         value: a().node
     };
-    function ae(e) {
-        var n = e.children, o = e.elementRef, a = re(e, [ "children", "elementRef" ]);
+    function Y(e) {
+        var n = e.children, o = e.elementRef, a = G(e, [ "children", "elementRef" ]);
         // @docs-props-type RowPropsBase
                 var i = (0, r.useContext)(c), l = i.sortable;
-        var s = (0, r.useMemo)((function() {
-            return l ? ee : $;
+        var u = (0, r.useMemo)((function() {
+            return l ? U : N;
         }), [ l ]);
         
-        return t().createElement(s, ne({
+        return t().createElement(u, V({
             ref: o
         }, a), n);
     }
-    ae.propTypes = oe;
-    /* harmony default export */    const ie = ae;
+    Y.propTypes = Q;
+    /* harmony default export */    const Z = Y;
     // CONCATENATED MODULE: external "@dnd-kit/core"
-    const le = require("@dnd-kit/core");
+    const ee = require("@dnd-kit/core");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const ne = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
-    var se = function e(n) {
+    var re = function e(n, r) {
+        return n.indexOf(r) + 1;
+    };
+    var te = {
+        draggable: (0, u._)("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 oe = function e(n) {
         var o = n.children, a = n.onSortEnd;
-        var i = (0, le.useSensors)((0, le.useSensor)(le.PointerSensor), (0, le.useSensor)(le.MouseSensor));
-        var l = r.Children.toArray(o).filter(r.isValidElement);
-        var s = l.map((function(e) {
+        var i = (0, ee.useSensors)((0, ee.useSensor)(ee.PointerSensor), (0, ee.useSensor)(ee.MouseSensor));
+        var l = (0, r.useRef)(true);
+        var u = r.Children.toArray(o).filter(r.isValidElement);
+        var s = u.map((function(e) {
             return (e.props.index || 0) + 1;
         }));
-        var c = (0, r.useCallback)((function(e) {
+        var d = (0, r.useCallback)((function(e) {
             var n = e.active, r = e.over;
             if (r && n.id !== r.id) {
                 var t = s.indexOf(n.id);
@@ -472,20 +412,54 @@
                 });
             }
         }), [ s, a ]);
+        var c = (0, r.useMemo)((function() {
+            return {
+                onDragStart: function e(n) {
+                    var r = n.active.id;
+                    return (0, ne.sprintf)("Picked up sortable row in position %d of %d.", re(s, r), s.length);
+                },
+                onDragOver: function e(n) {
+                    var r = n.active, t = n.over;
+                    // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.
+                    // The first `onDragOver` event therefore doesn't need to be announced, because it is called
+                    // immediately after the `onDragStart` announcement and is redundant.
+                                        if (l.current) {
+                        l.current = false;
+                        return undefined;
+                    }
+                    return t ? (0, ne.sprintf)("Row moved from position %d to position %d of %d.", re(s, r.id), re(s, t.id), s.length) : undefined;
+                },
+                onDragEnd: function e(n) {
+                    var r = n.over;
+                    return r ? (0, ne.sprintf)("Row dropped at position %d of %d.", re(s, r.id), s.length) : undefined;
+                },
+                onDragCancel: function e(n) {
+                    var r = n.active.id;
+                    return (0, ne.sprintf)("Row returned to it's starting position of %d.", re(s, r));
+                }
+            };
+        }), [ s ]);
+        var f = (0, r.useMemo)((function() {
+            return {
+                screenReaderInstructions: te,
+                announcements: c
+            };
+        }), [ c ]);
         
-        return t().createElement(le.DndContext, {
+        return t().createElement(ee.DndContext, {
+            accessibility: f,
             sensors: i,
-            collisionDetection: le.closestCenter,
-            onDragEnd: c
-        },  t().createElement(z.SortableContext, {
+            collisionDetection: ee.closestCenter,
+            onDragEnd: d
+        },  t().createElement(A.SortableContext, {
             items: s,
-            strategy: z.verticalListSortingStrategy
-        }, l));
+            strategy: A.verticalListSortingStrategy
+        }, u));
     };
-    /* harmony default export */    const ce = se;
+    /* harmony default export */    const ae = oe;
     // CONCATENATED MODULE: ./src/FormRows/FormRows.tsx
-    function ue() {
-        return ue = Object.assign ? Object.assign.bind() : function(e) {
+    function ie() {
+        return ie = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -493,11 +467,11 @@
                 }
             }
             return e;
-        }, ue.apply(null, arguments);
+        }, ie.apply(null, arguments);
     }
-    function de(e, n) {
+    function le(e, n) {
         if (null == e) return {};
-        var r, t, o = pe(e, n);
+        var r, t, o = ue(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -506,7 +480,7 @@
         }
         return o;
     }
-    function pe(e, n) {
+    function ue(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -517,7 +491,7 @@
         }
         return r;
     }
-    /** @public */    var fe = {
+    /** @public */    var se = {
         addLabel: a().string,
         children: a().node,
         disabled: a().bool,
@@ -550,7 +524,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 ve = function e(n, r) {
+ */    var de = function e(n, r) {
         return r.concat(n);
     };
     /**
@@ -568,7 +542,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 me = function e(n, t, o) {
+ */    var ce = function e(n, t, o) {
         var a = o.filter((function(e, r) {
             return r !== n;
         }));
@@ -594,7 +568,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 be = function e(n, t) {
+ */    var fe = function e(n, t) {
         return t.filter((function(e, r) {
             return r !== n;
         })).map((function(e, n) {
@@ -604,72 +578,72 @@
             });
         }));
     };
-    var ye = (0, i._)("Add Row");
-    function ge(e) {
-        var n = e.addLabel, o = n === void 0 ? ye : n, a = e.children, i = e.disabled, s = e.header, u = e.menu, d = e.onRequestAdd, p = e.onRequestMove, f = de(e, [ "addLabel", "children", "disabled", "header", "menu", "onRequestAdd", "onRequestMove" ]);
+    var ve =  t().createElement(l(), null);
+    var pe = (0, u._)("Add row");
+    function me(e) {
+        var n = e.addLabel, o = n === void 0 ? pe : n, a = e.children, i = e.disabled, l = e.elementRef, u = e.header, d = e.menu, f = e.onRequestAdd, v = e.onRequestMove, p = le(e, [ "addLabel", "children", "disabled", "elementRef", "header", "menu", "onRequestAdd", "onRequestMove" ]);
         // @docs-props-type FormRowsPropsBase
-                var v = (0, r.useCallback)((function(e, n) {
+                var m = (0, r.useCallback)((function(e, n) {
             var r = n.index;
             if (e.currentTarget !== e.target) {
                 return;
             }
-            if ((0, l.keycode)(e.nativeEvent) === "up") {
+            if ((0, s.keycode)(e.nativeEvent) === "up") {
                 e.preventDefault();
                 if (r > 0) {
-                    p === null || p === void 0 ? void 0 : p({
+                    v === null || v === void 0 ? void 0 : v({
                         fromIndex: r,
                         toIndex: r - 1
                     });
                 }
-            } else if ((0, l.keycode)(e.nativeEvent) === "down") {
+            } else if ((0, s.keycode)(e.nativeEvent) === "down") {
                 e.preventDefault();
                 if (r < t().Children.toArray(a).length - 1) {
-                    p === null || p === void 0 ? void 0 : p({
+                    v === null || v === void 0 ? void 0 : v({
                         fromIndex: r,
                         toIndex: r + 1
                     });
                 }
             }
-        }), [ a, p ]);
-        var m = (0, r.useCallback)((function(e) {
+        }), [ a, v ]);
+        var b = (0, r.useCallback)((function(e) {
             var n = e.oldIndex, r = e.newIndex;
-            p === null || p === void 0 ? void 0 : p({
+            v === null || v === void 0 ? void 0 : v({
                 fromIndex: n,
                 toIndex: r
             });
-        }), [ p ]);
-        var y = p !== undefined && !i;
-        var g = y ? P : "div";
-        var h = d !== undefined;
+        }), [ v ]);
+        var g = v !== undefined && !i;
+        var y = f !== undefined;
         
-        return t().createElement(C, ue({
+        return t().createElement(R, ie({
+            ref: l,
             "data-test": "form-rows"
-        }, f),  t().createElement(c.Provider, {
+        }, p),  t().createElement(c.Provider, {
             // eslint-disable-next-line react/jsx-no-constructed-context-values
             value: {
-                disabledDeleteButton: i,
-                onKeyDown: v,
-                hasOnRequestAdd: h,
-                sortable: y
+                disabledRemoveButton: i,
+                onKeyDown: m,
+                hasOnRequestAdd: y,
+                sortable: g
             }
-        }, s &&  t().createElement(g, null, s),  t().createElement(I, null,  t().createElement(ce, {
-            onSortEnd: m
-        }, a)), u || h &&  t().createElement(_, {
+        }, u &&  t().createElement(S, null, u),  t().createElement(ae, {
+            onSortEnd: b
+        }, a), d &&  t().createElement(x, null, d) || y &&  t().createElement(j, {
             disabled: i,
-            appearance: "subtle",
+            appearance: "secondary",
             "data-test": "add-row",
-            icon:  t().createElement(b, null),
+            icon: ve,
             label: o,
-            onClick: d,
-            $sortable: y
+            onClick: f
         })));
     }
-    ge.propTypes = fe;
-    ge.Row = ie;
-    ge.addRow = ve;
-    ge.moveRow = me;
-    ge.removeRow = be;
-    /* harmony default export */    const he = ge;
+    me.propTypes = se;
+    me.Row = Z;
+    me.addRow = de;
+    me.moveRow = ce;
+    me.removeRow = fe;
+    /* harmony default export */    const be = me;
     // CONCATENATED MODULE: ./src/FormRows/index.ts
     module.exports = n;
     /******/})();