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

package/DualListbox.js

@@ -95,8 +95,8 @@
  * Defaults to `'{}'`.
  * @public
  */
-    var g =  n().createContext({});
-    /* harmony default export */    const h = g;
+    var h =  n().createContext({});
+    /* harmony default export */    const g = h;
     // CONCATENATED MODULE: ./src/DualListbox/ScreenReaderWrapper.tsx
     function y() {
         return y = Object.assign ? Object.assign.bind() : function(e) {
@@ -112,7 +112,7 @@
     function k(e) {
         var r = y({}, e);
         var a = p()();
-        var i = (0, t.useContext)(h);
+        var i = (0, t.useContext)(g);
         var l = i.getScreenReaderMessage, o = i.updateScreenReaderRefreshHook;
         (0, t.useEffect)((function() {
             o === null || o === void 0 ? void 0 : o(a);
@@ -242,14 +242,14 @@
     const V = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const j = require("@splunk/react-ui/Clickable");
-    var D =  e.n(j);
+    var B =  e.n(j);
     // CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
-    var H = _()(D()).withConfig({
+    var D = _()(B()).withConfig({
         displayName: "ToolbarButtonStyles__StyledClickable",
         componentId: "k7zksz-0"
     })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], V.mixins.reset("block"), (0, 
     V.pick)({
-        enterprise: "1px solid transparent"
+        enterprise: "".concat(V.variables.inputBorderWidth, " solid transparent")
     }), V.variables.borderRadius, (0, V.pick)({
         enterprise: V.variables.fontWeightSemiBold,
         prisma: V.variables.fontWeightSemiBold
@@ -288,7 +288,7 @@
             prisma: V.variables.contentColorDisabled
         }))
     }));
-    var B = _().span.withConfig({
+    var H = _().span.withConfig({
         displayName: "ToolbarButtonStyles__StyledIcon",
         componentId: "k7zksz-1"
     })([ "align-items:center;display:flex;flex-direction:row;flex-shrink:0;font-size:", ";justify-content:center;max-width:100%;" ], (0, 
@@ -358,29 +358,29 @@
         if (!d) {
             return null;
         }
-        var g = d(l), h = g.disabled;
+        var h = d(l), g = h.disabled;
         
         return n().createElement(P(), {
             defaultPlacement: u,
             content:  n().createElement("span", {
                 "aria-hidden": true
             }, o)
-        },  n().createElement(H, M({
+        },  n().createElement(D, M({
             "aria-label": r,
             "aria-keyshortcuts": a,
-            "aria-disabled": h || undefined,
+            "aria-disabled": g || undefined,
             "data-test": "toolbar-button",
-            $disabled: h,
-            onClick: !h ? m : undefined
-        }, c),  n().createElement(B, null, i)));
+            $disabled: g,
+            onClick: !g ? m : undefined
+        }, c),  n().createElement(H, null, i)));
     }
     $.propsTypes = K;
     /* harmony default export */    const F = $;
     // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
     const z = require("@splunk/react-ui/NonInteractiveCheckbox");
-    var U =  e.n(z);
+    var W =  e.n(z);
     // CONCATENATED MODULE: ./src/DualListbox/OptionStyles.ts
-    var W = _().li.withConfig({
+    var U = _().li.withConfig({
         displayName: "OptionStyles__StyledListItem",
         componentId: "q275d9-0"
     })([ "align-items:center;color:", ";cursor:pointer;display:flex;overflow:hidden;width:100%;word-wrap:break-word;line-height:20px;", " ", "" ], V.variables.contentColorActive, (0, 
@@ -399,10 +399,10 @@
         }),
         enterprise: (0, N.css)([ "&:hover{background:", ";}" ], V.variables.backgroundColorHover)
     }));
-    var X = _()(U()).withConfig({
+    var X = _()(W()).withConfig({
         displayName: "OptionStyles__StyledNonInteractiveCheckbox",
         componentId: "q275d9-1"
-    })([ "svg{padding-left:", ";}" ], V.variables.spacingSmall);
+    })([ "padding-left:", ";" ], V.variables.spacingSmall);
     var G = _().div.withConfig({
         displayName: "OptionStyles__StyledDiv",
         componentId: "q275d9-2"
@@ -482,18 +482,18 @@
         if (!v) {
             return null;
         }
-        var m = v(l), g = m.active, h = m.selected;
-        var y = !!(f ? i : h);
+        var m = v(l), h = m.active, g = m.selected;
+        var y = !!(f ? i : g);
         
-        return n().createElement(W, Y({
+        return n().createElement(U, Y({
             "aria-selected": y,
             "data-test": "option",
             "data-test-value": l,
-            "data-test-active": g,
+            "data-test-active": h,
             id: r,
             onClick: b,
             role: "option",
-            $active: g,
+            $active: h,
             $selected: y
         }, o),  n().createElement(X, {
             selected: y
@@ -518,7 +518,7 @@
     var ce = _().div.withConfig({
         displayName: "LabelStyles__StyledSwitchContainer",
         componentId: "unwplx-2"
-    })([ "align-items:center;border:1px solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", "" ], V.variables.spacingSmall, V.variables.spacingSmall, (function(e) {
+    })([ "align-items:center;border:", " solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", "" ], V.variables.inputBorderWidth, V.variables.spacingSmall, V.variables.spacingSmall, (function(e) {
         var r = e.$columnNumber;
         return (0, N.css)([ "grid-column:", ";" ], "list".concat(r));
     }));
@@ -536,17 +536,17 @@
         var s = (0, t.useContext)(Q);
         var v = p()();
         var f = (0, t.useRef)((0, ae.createDOMID)("switch"));
-        var b = s.updateLabelRefreshHookByName, g = s.getLabelState;
+        var b = s.updateLabelRefreshHookByName, h = s.getLabelState;
         (0, t.useEffect)((function() {
             b === null || b === void 0 ? void 0 : b(o, v);
             return function() {
                 return b === null || b === void 0 ? void 0 : b(o);
             };
         }), [ o, b, v ]);
-        if (!g) {
+        if (!h) {
             return null;
         }
-        var h = g(), y = h.disabled, k = h.selected, C = h.selectedValueCount, x = h.valueCount;
+        var g = h(), y = g.disabled, k = g.selected, C = g.selectedValueCount, x = g.valueCount;
         
         return n().createElement(ce, {
             $columnNumber: a
@@ -576,7 +576,7 @@
     var fe = _().ul.withConfig({
         displayName: "ListboxStyles__StyledListbox",
         componentId: "sc-11oqtd-0"
-    })([ "background-color:", ";border:1px solid ", ";border-radius:", ";grid-row:lists;list-style:none;margin:0;min-height:0;min-width:0;overflow:auto;padding:0;position:relative;&:focus{box-shadow:", ";outline:none;}", "" ], V.variables.transparent, (0, 
+    })([ "background-color:", ";border:", " solid ", ";border-radius:", ";grid-row:lists;list-style:none;margin:0;min-height:0;min-width:0;overflow:auto;padding:0;position:relative;&:focus{box-shadow:", ";outline:none;}", "" ], V.variables.transparent, V.variables.inputBorderWidth, (0, 
     V.pick)({
         enterprise: V.variables.gray60,
         prisma: V.variables.interactiveColorBorder
@@ -618,7 +618,7 @@
         }
         return t;
     }
-    var ge = {
+    var he = {
         children: i().node,
         index: i().number.isRequired,
         label: i().string.isRequired,
@@ -628,11 +628,11 @@
         onKeyDown: i().func,
         onSelectAllClick: i().func
     };
-    function he(e) {
+    function ge(e) {
         var r = e.children, a = e.elementRef, i = e.index, l = e.label, o = e.name, u = e.onClick, c = e.onKeyDown, s = e.onSelectAllClick, v = be(e, [ "children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick" ]);
         var d = (0, t.useRef)((0, ae.createDOMID)("label"));
         var f = (0, t.useRef)((0, ae.createDOMID)("listbox"));
-        var p = (0, t.useContext)(h), b = p.controlled, m = p.getSelectedStateForValue, g = p.getActiveValue, y = p.getSelectedValueCount, k = p.getValueCount, C = p.updateLabelRefreshHookByName, x = p.updateOptionRefreshHookByValue;
+        var p = (0, t.useContext)(g), b = p.controlled, m = p.getSelectedStateForValue, h = p.getActiveValue, y = p.getSelectedValueCount, k = p.getValueCount, C = p.updateLabelRefreshHookByName, x = p.updateOptionRefreshHookByValue;
         var S = (0, t.useCallback)((function(e, r) {
             var t = r.value;
             u === null || u === void 0 ? void 0 : u(e, {
@@ -642,10 +642,10 @@
         }), [ o, u ]);
         var w = (0, t.useCallback)((function(e) {
             return {
-                active: (g === null || g === void 0 ? void 0 : g(o)) === e,
+                active: (h === null || h === void 0 ? void 0 : h(o)) === e,
                 selected: !!(m === null || m === void 0 ? void 0 : m(e))
             };
-        }), [ o, g, m ]);
+        }), [ o, h, m ]);
         var O = (0, t.useCallback)((function() {
             var e = (k === null || k === void 0 ? void 0 : k(o)) || 0;
             var r = (y === null || y === void 0 ? void 0 : y(o)) || 0;
@@ -712,8 +712,8 @@
             $columnNumber: i
         }, v), r));
     }
-    he.propTypes = ge;
-    /* harmony default export */    const ye = he;
+    ge.propTypes = he;
+    /* harmony default export */    const ye = ge;
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const ke = require("@splunk/react-ui/Box");
     var Ce =  e.n(ke);
@@ -815,6 +815,7 @@
     /** @public */    var _e = {
         children: i().node,
         controlled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
         fill: i().bool,
         inline: i().bool,
         onChange: i().func,
@@ -826,85 +827,85 @@
     };
     function Ve(e) {
         var r, a, i, u;
-        var s = e.children, f = e.controlled, b = f === void 0 ? false : f, m = e.fill, g = m === void 0 ? false : m, y = e.inline, k = y === void 0 ? false : y, R = e.onChange, I = e.onSelect, q = e.lists, P = Pe(e, [ "children", "controlled", "fill", "inline", "onChange", "onSelect", "lists" ]);
+        var s = e.children, f = e.controlled, b = f === void 0 ? false : f, m = e.elementRef, h = e.fill, y = h === void 0 ? false : h, k = e.inline, R = k === void 0 ? false : k, I = e.onChange, q = e.onSelect, P = e.lists, N = Pe(e, [ "children", "controlled", "elementRef", "fill", "inline", "onChange", "onSelect", "lists" ]);
         // @docs-props-type DualListboxPropsBase
-                var N = p()();
-        var _ = (0, t.useRef)(false);
+                var _ = p()();
+        var V = (0, t.useRef)(false);
         (0, t.useEffect)((function() {
-            _.current = true;
+            V.current = true;
         }), []);
         // TODO: Implement shared isControlled hook (SUI-5283).
-                var V = (0, t.useRef)(b);
+                var j = (0, t.useRef)(b);
         // List One "Available" Refs
-                var j = (0, t.useRef)([]);
+                var B = (0, t.useRef)([]);
         var D = (0, t.useRef)([]);
         var H = (0, t.useRef)();
-        var B = (0, t.useRef)(null);
-        var M = (0, t.useRef)([]);
+        var M = (0, t.useRef)(null);
+        var T = (0, t.useRef)([]);
         // List Two "Selected" Refs
-                var T = (0, t.useRef)([]);
-        var A = (0, t.useRef)([]);
-        var K = (0, t.useRef)();
-        var $ = (0, t.useRef)(null);
-        var z = (0, t.useRef)([]);
+                var A = (0, t.useRef)([]);
+        var K = (0, t.useRef)([]);
+        var $ = (0, t.useRef)();
+        var z = (0, t.useRef)(null);
+        var W = (0, t.useRef)([]);
         // Refresh Hook Stores, used to render indivual elements when uncontrolled
                 var U = (0, t.useRef)({});
-        var W = (0, t.useRef)({});
         var X = (0, t.useRef)({});
-        var G = (0, t.useRef)();
+        var G = (0, t.useRef)({});
+        var J = (0, t.useRef)();
         // Activity Values Refs
-                var J = (0, t.useRef)();
-        var Q = (0, t.useRef)({});
+                var Q = (0, t.useRef)();
         var Y = (0, t.useRef)({});
         var Z = (0, t.useRef)({});
-        var ee = (0, t.useRef)(0);
+        var ee = (0, t.useRef)({});
+        var re = (0, t.useRef)(0);
         // Key Match Refs
-                var re = (0, t.useRef)();
-        var te = (0, t.useRef)();
-        var ne = (0, t.useRef)([]);
+                var te = (0, t.useRef)();
+        var ne = (0, t.useRef)();
+        var ae = (0, t.useRef)([]);
         if (false) {}
         if (false) {}
         if (false) {}
         // Unpack names and labels instead of relying on `lists` being a consistent reference
-                var ae = (r = q[0]) === null || r === void 0 ? void 0 : r.name;
-        var ie = (a = q[1]) === null || a === void 0 ? void 0 : a.name;
-        var le = (i = q[0]) === null || i === void 0 ? void 0 : i.label;
-        var oe = (u = q[1]) === null || u === void 0 ? void 0 : u.label;
+                var ie = (r = P[0]) === null || r === void 0 ? void 0 : r.name;
+        var le = (a = P[1]) === null || a === void 0 ? void 0 : a.name;
+        var oe = (i = P[0]) === null || i === void 0 ? void 0 : i.label;
+        var ue = (u = P[1]) === null || u === void 0 ? void 0 : u.label;
         // Copy previous state for uncontrolled render so it's not voided by following value reset
-                var ue = new Set(T.current);
+                var ce = new Set(A.current);
         // This ensures we recapture the indexes after batch moves, but will be refactored when sorting is implemented (SUI-5270).
-                j.current = [];
+                B.current = [];
+        A.current = [];
         T.current = [];
-        M.current = [];
-        z.current = [];
+        W.current = [];
         // Clean the data stores before we copy the references into listData
-                if (!_.current || V.current) {
+                if (!V.current || j.current) {
             D.current = [];
-            A.current = [];
-            Q.current = {};
-            Z.current = {};
+            K.current = [];
             Y.current = {};
+            ee.current = {};
+            Z.current = {};
         }
-        var ce = [ {
+        var se = [ {
             options: [],
-            matchOptions: M.current,
-            values: j.current,
+            matchOptions: T.current,
+            values: B.current,
             selectedValues: D.current,
             activeValue: H.current,
             activeFound: !H.current
         }, {
             options: [],
-            matchOptions: z.current,
-            values: T.current,
-            selectedValues: A.current,
-            activeValue: K.current,
-            activeFound: !K.current
+            matchOptions: W.current,
+            values: A.current,
+            selectedValues: K.current,
+            activeValue: $.current,
+            activeFound: !$.current
         } ];
-        if (!_.current || V.current) {
+        if (!V.current || j.current) {
             t.Children.toArray(s).filter(t.isValidElement).forEach((function(e) {
                 var r = e.props, t = r.value, n = r.label;
-                var a = e.props.listName === ie;
-                var i = ce[a ? 1 : 0];
+                var a = e.props.listName === le;
+                var i = se[a ? 1 : 0];
                 // Ensure the active value is found on controlled renders
                                 if (!i.activeFound && i.activeValue === t) {
                     i.activeFound = true;
@@ -919,128 +920,128 @@
                 if (l) {
                     i.selectedValues.push(t);
                 }
-                Q.current[t] = l;
-                Z.current[t] = i.values.length - 1;
-                Y.current[t] = e.props.id;
+                Y.current[t] = l;
+                ee.current[t] = i.values.length - 1;
+                Z.current[t] = e.props.id;
             }));
         } else {
             t.Children.toArray(s).filter(t.isValidElement).forEach((function(e) {
                 var r = e.props, t = r.value, n = r.label;
-                var a = ue.has(t);
-                var i = ce[a ? 1 : 0];
+                var a = ce.has(t);
+                var i = se[a ? 1 : 0];
                 i.values.push(t);
                 i.options.push(e);
                 i.matchOptions.push({
                     value: t,
                     label: n
                 });
-                Z.current[t] = i.values.length - 1;
+                ee.current[t] = i.values.length - 1;
             }));
         }
-        var se = (0, t.useCallback)((function(e, r) {
-            if (e === ae) {
+        var ve = (0, t.useCallback)((function(e, r) {
+            if (e === ie) {
                 H.current = r;
             } else {
-                K.current = r;
+                $.current = r;
             }
-        }), [ ae ]);
-        var ve = (0, t.useCallback)((function(e) {
-            return e === ae ? H.current : K.current;
-        }), [ ae ]);
-        var de = (0, t.useCallback)((function(e, r) {
-            if (e === ae) {
+        }), [ ie ]);
+        var de = (0, t.useCallback)((function(e) {
+            return e === ie ? H.current : $.current;
+        }), [ ie ]);
+        var fe = (0, t.useCallback)((function(e, r) {
+            if (e === ie) {
                 D.current = r;
             } else {
-                A.current = r;
+                K.current = r;
             }
-        }), [ ae ]);
-        var fe = (0, t.useCallback)((function(e) {
-            return e === ae ? D.current : A.current;
-        }), [ ae ]);
+        }), [ ie ]);
         var pe = (0, t.useCallback)((function(e) {
-            return fe(e).length;
-        }), [ fe ]);
-        var be = (0, t.useCallback)((function() {
-            return J.current;
+            return e === ie ? D.current : K.current;
+        }), [ ie ]);
+        var be = (0, t.useCallback)((function(e) {
+            return pe(e).length;
+        }), [ pe ]);
+        var me = (0, t.useCallback)((function() {
+            return Q.current;
         }), []);
-        var me = (0, t.useCallback)((function(e) {
-            return Q.current[e];
+        var he = (0, t.useCallback)((function(e) {
+            return Y.current[e];
         }), []);
         var ge = (0, t.useCallback)((function(e, r) {
-            if (e === ae) {
-                j.current = r;
+            if (e === ie) {
+                B.current = r;
             } else {
-                T.current = r;
+                A.current = r;
             }
-        }), [ ae ]);
-        var he = (0, t.useCallback)((function(e) {
-            return e === ae ? j.current : T.current;
-        }), [ ae ]);
+        }), [ ie ]);
         var ke = (0, t.useCallback)((function(e) {
-            return he(e).length;
-        }), [ he ]);
+            return e === ie ? B.current : A.current;
+        }), [ ie ]);
         var Ce = (0, t.useCallback)((function(e) {
-            var r = ke(e);
-            return r > 0 && r === pe(e);
-        }), [ ke, pe ]);
+            return ke(e).length;
+        }), [ ke ]);
         var Re = (0, t.useCallback)((function(e) {
-            return e === ae ? M.current : z.current;
-        }), [ ae ]);
+            var r = Ce(e);
+            return r > 0 && r === be(e);
+        }), [ Ce, be ]);
         var Ee = (0, t.useCallback)((function(e) {
-            var r = ke(e);
-            var t = pe(e);
+            return e === ie ? T.current : W.current;
+        }), [ ie ]);
+        var Ie = (0, t.useCallback)((function(e) {
+            var r = Ce(e);
+            var t = be(e);
             return {
                 disabled: r < 1 || t < 1
             };
-        }), [ ke, pe ]);
-        var Ie = (0, t.useCallback)((function() {
-            if (J.current && J.current.length > 0) {
+        }), [ Ce, be ]);
+        var Le = (0, t.useCallback)((function() {
+            if (Q.current && Q.current.length > 0) {
                 var e;
-                J.current = "";
-                (e = G.current) === null || e === void 0 ? void 0 : e.call(G);
+                Q.current = "";
+                (e = J.current) === null || e === void 0 ? void 0 : e.call(J);
             }
         }), []);
-        var Le = (0, t.useCallback)((function() {
-            re.current = undefined;
-            ne.current = [];
-            if (te.current) {
-                clearTimeout(te.current);
+        var qe = (0, t.useCallback)((function() {
+            te.current = undefined;
+            ae.current = [];
+            if (ne.current) {
+                clearTimeout(ne.current);
             }
         }), []);
-        var qe = (0, t.useCallback)((function(e) {
-            G.current = e;
+        var Ne = (0, t.useCallback)((function(e) {
+            J.current = e;
         }), []);
-        var Ne = (0, t.useCallback)((function(e, r) {
+        var _e = (0, t.useCallback)((function(e, r) {
             if (r) {
-                X.current[e] = r;
+                G.current[e] = r;
             } else {
-                delete X.current[e];
+                delete G.current[e];
             }
         }), []);
-        var _e = (0, t.useCallback)((function(e, r) {
+        var Ve = (0, t.useCallback)((function(e, r) {
             if (r) {
-                W.current[e] = r;
+                X.current[e] = r;
             } else {
-                delete W.current[e];
+                delete X.current[e];
             }
         }), []);
-        var Ve = (0, t.useCallback)((function(e, r) {
+        var je = (0, t.useCallback)((function(e, r) {
             if (r) {
                 U.current[e] = r;
             } else {
                 delete U.current[e];
             }
         }), []);
-        var je = (0, t.useCallback)((function(e) {
+        var Be = (0, t.useCallback)((function(e) {
             if (e) {
                 var r, t;
-                (r = (t = X.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
+                (r = (t = G.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
         var De = (0, t.useCallback)((function(e) {
             if (e) {
                 var r, t;
-                (r = (t = W.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
+                (r = (t = X.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
         var He = (0, t.useCallback)((function(e) {
@@ -1049,30 +1050,30 @@
                 (r = (t = U.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
-        var Be = (0, t.useCallback)((function(e) {
-            Ie();
+        var Me = (0, t.useCallback)((function(e) {
+            Le();
             De(e);
-            He(ae);
             He(ie);
-        }), [ Ie, He, De, ae, ie ]);
-        var Me = (0, t.useCallback)((function(e, r) {
+            He(le);
+        }), [ Le, He, De, ie, le ]);
+        var Te = (0, t.useCallback)((function(e, r) {
             var t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-            var n = e === ae ? B.current : $.current;
+            var n = e === ie ? M.current : z.current;
             if (!n) {
                 return;
             }
-            var a = ve(e);
-            se(e, r);
+            var a = de(e);
+            ve(e, r);
             if (!t) {
                 // render new
-                je(r);
+                Be(r);
             }
             if (r !== a) {
                 if (!t) {
                     // render previous
-                    je(a);
+                    Be(a);
                 }
-                var i = r ? Y.current[r] : "";
+                var i = r ? Z.current[r] : "";
                 // update listbox via dom to avoid render + child render
                                 n.setAttribute("aria-activedescendant", i);
                 if (!t && i.length > 0) {
@@ -1080,30 +1081,30 @@
                     O(l);
                 }
             }
-        }), [ ve, se, je, ae ]);
-        var Te = (0, t.useCallback)((function(e, r) {
+        }), [ de, ve, Be, ie ]);
+        var Ae = (0, t.useCallback)((function(e, r) {
             var t = r.value, n = r.name;
-            var a = Ce(n) ? he(n) : fe(n);
+            var a = Re(n) ? ke(n) : pe(n);
             var i = x(a, t);
-            if (!V.current) {
-                Q.current[t] = !Q.current[t];
-                de(n, i);
-                Be(n);
+            if (!j.current) {
+                Y.current[t] = !Y.current[t];
+                fe(n, i);
+                Me(n);
             }
-            Me(n, t);
+            Te(n, t);
             e.preventDefault();
-            I === null || I === void 0 ? void 0 : I(e, {
+            q === null || q === void 0 ? void 0 : q(e, {
                 values: i,
                 listName: n
             });
-        }), [ Ce, fe, he, de, Me, Be, I ]);
-        var Ae = (0, t.useCallback)((function(e, r) {
+        }), [ Re, pe, ke, fe, Te, Me, q ]);
+        var Ke = (0, t.useCallback)((function(e, r) {
             var t = r.initialIndex, n = r.name, a = r.targetIndex;
-            var i = he(n);
+            var i = ke(n);
             var l = Math.min(t, a);
             var o = Math.max(t, a);
             var u = [];
-            if (V.current) {
+            if (j.current) {
                 u = i.slice(l, o + 1);
             } else {
                 i.forEach((function(e, r) {
@@ -1114,75 +1115,75 @@
                     } else {
                         t = false;
                     }
-                    if (Q.current[e] !== t) {
-                        Q.current[e] = t;
-                        je(e);
+                    if (Y.current[e] !== t) {
+                        Y.current[e] = t;
+                        Be(e);
                     }
                 }));
-                de(n, u);
-                Be(n);
+                fe(n, u);
+                Me(n);
             }
-            Me(n, i[a]);
+            Te(n, i[a]);
             e.preventDefault();
             e.stopPropagation();
-            I === null || I === void 0 ? void 0 : I(e, {
+            q === null || q === void 0 ? void 0 : q(e, {
                 values: u,
                 listName: n
             });
-        }), [ he, I, de, Me, Be, je ]);
-        var Ke = (0, t.useCallback)((function(e, r) {
+        }), [ ke, q, fe, Te, Me, Be ]);
+        var $e = (0, t.useCallback)((function(e, r) {
             var t = r.name, n = r.selected;
-            var a = he(t);
+            var a = ke(t);
             var i = n === true ? [] : a;
             var l = n !== true;
-            if (!V.current) {
+            if (!j.current) {
                 a === null || a === void 0 ? void 0 : a.forEach((function(e) {
-                    if (Q.current[e] !== l) {
-                        Q.current[e] = l;
-                        je(e);
+                    if (Y.current[e] !== l) {
+                        Y.current[e] = l;
+                        Be(e);
                     }
                 }));
-                de(t, i);
-                Be(t);
+                fe(t, i);
+                Me(t);
             }
             e.preventDefault();
-            I === null || I === void 0 ? void 0 : I(e, {
+            q === null || q === void 0 ? void 0 : q(e, {
                 values: i,
                 listName: t
             });
-        }), [ he, I, de, Be, je ]);
+        }), [ ke, q, fe, Me, Be ]);
         // handleMoveValues does not update the active value of the source, keyboard and mouse differ, only the target active value is updated
-                var $e = (0, t.useCallback)((function(e, r, t) {
-            var n = he(r);
-            var a = fe(r);
-            var i = Ce(r);
-            var o = he(t);
-            var u = ve(t);
+                var Fe = (0, t.useCallback)((function(e, r, t) {
+            var n = ke(r);
+            var a = pe(r);
+            var i = Re(r);
+            var o = ke(t);
+            var u = de(t);
             if (n.length === 0 || !i && a.length === 0) {
                 return;
             }
             if (!u && a.length > 0) {
                 // target lacks an active value, default to the first
                 // skip the render it will be catch in batch
-                Me(t, a[0], true);
+                Te(t, a[0], true);
             }
             var c = (0, d.sprintf)((0, l._)("Moved %(count)d items to %(listLabel)s list"), {
                 count: a.length,
-                listLabel: t === ae ? le : oe
+                listLabel: t === ie ? oe : ue
             });
             // These new values do not perserve sort position, may need to be refactored with sort logic (SUI-5270).
                         var s = i ? [] : S(n, a);
             var v = o.concat(a);
-            if (!V.current) {
+            if (!j.current) {
                 a.forEach((function(e) {
-                    Q.current[e] = false;
+                    Y.current[e] = false;
                 }));
                 ge(t, v);
                 ge(r, s);
-                de(r, []);
-                J.current = c;
+                fe(r, []);
+                Q.current = c;
                 // move is a batch update, force a full render, no internal update needed
-                                N();
+                                _();
             }
             var f = {
                 affectedValues: a,
@@ -1194,40 +1195,40 @@
                 values: a.slice()
             };
             e.preventDefault();
-            R === null || R === void 0 ? void 0 : R(e, f);
-        }), [ N, ve, Ce, fe, he, R, de, ge, Me, ae, le, oe ]);
-        var Fe = (0, t.useCallback)((function(e, r) {
+            I === null || I === void 0 ? void 0 : I(e, f);
+        }), [ _, de, Re, pe, ke, I, fe, ge, Te, ie, oe, ue ]);
+        var ze = (0, t.useCallback)((function(e, r) {
             var t = r.name;
-            var n = Ce(t);
-            var a = ve(t);
-            var i = t === ae ? ie : ae;
-            if (a && (n || !!Q.current[a])) {
+            var n = Re(t);
+            var a = de(t);
+            var i = t === ie ? le : ie;
+            if (a && (n || !!Y.current[a])) {
                 // active option was present in items to be removed, clear the active option
-                Me(t);
+                Te(t);
             }
-            $e(e, t, i);
-        }), [ ve, Ce, $e, Me, ae, ie ]);
-        var ze = (0, t.useCallback)((function(e, r) {
+            Fe(e, t, i);
+        }), [ de, Re, Fe, Te, ie, le ]);
+        var We = (0, t.useCallback)((function(e, r) {
             var t = r.name, n = r.value;
             if (e.nativeEvent.shiftKey) {
-                Ae(e, {
-                    targetIndex: Z.current[n],
-                    initialIndex: ee.current,
+                Ke(e, {
+                    targetIndex: ee.current[n],
+                    initialIndex: re.current,
                     name: t
                 });
             } else {
-                Te(e, {
+                Ae(e, {
                     name: t,
                     value: n
                 });
             }
-        }), [ Ae, Te ]);
+        }), [ Ke, Ae ]);
         var Ue = (0, t.useCallback)((function(e, r) {
-            Ke(e, r);
-        }), [ Ke ]);
-        var We = (0, t.useCallback)((function(e, r) {
+            $e(e, r);
+        }), [ $e ]);
+        var Xe = (0, t.useCallback)((function(e, r) {
             var t = e.nativeEvent.key;
-            var n = Re(r);
+            var n = Ee(r);
             // Checking for a single character to avoid complications from double-byte languages and emojis.
                         if (t.length === 1) {
                 var a = [];
@@ -1235,21 +1236,21 @@
                     index: 0,
                     value: t
                 };
-                if (!re.current) {
+                if (!te.current) {
                     if (t === " ") {
-                        Le();
+                        qe();
                         return;
                     }
                     a = E(n, i);
-                } else if (ne.current.length > 1) {
-                    i.index = re.current.index + 1;
-                    a = E(ne.current, i);
+                } else if (ae.current.length > 1) {
+                    i.index = te.current.index + 1;
+                    a = E(ae.current, i);
                 }
                 if (a.length) {
                     var l = 0;
                     // If the active option is a first character match, cycle to the next matching option.
                                         if (i.index === 0 && a.length > 1) {
-                        var o = ve(r);
+                        var o = de(r);
                         if (o) {
                             var u = a.findIndex((function(e) {
                                 return e.value === o;
@@ -1259,40 +1260,40 @@
                             }
                         }
                     }
-                    Me(r, a[l].value);
+                    Te(r, a[l].value);
                 }
-                ne.current = a;
-                re.current = i;
-                if (te.current) {
-                    clearTimeout(te.current);
+                ae.current = a;
+                te.current = i;
+                if (ne.current) {
+                    clearTimeout(ne.current);
                 }
-                te.current = setTimeout(Le, 500);
+                ne.current = setTimeout(qe, 500);
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }), [ ve, Re, Le, Me ]);
-        var Xe = (0, t.useCallback)((function(e, r) {
+        }), [ de, Ee, qe, Te ]);
+        var Ge = (0, t.useCallback)((function(e, r) {
             var t = r.name;
             var n = (0, o.keycode)(e.nativeEvent);
-            var a = he(t);
-            var i = fe(t);
-            var l = Ce(t);
-            var u = ve(t);
-            var c = u ? Z.current[u] : -1;
-            var s = ee.current >= 0 ? ee.current : 0;
-            if (J.current && J.current.length > 0) {
-                Ie();
+            var a = ke(t);
+            var i = pe(t);
+            var l = Re(t);
+            var u = de(t);
+            var c = u ? ee.current[u] : -1;
+            var s = re.current >= 0 ? re.current : 0;
+            if (Q.current && Q.current.length > 0) {
+                Le();
             }
             var v = u;
             switch (n) {
               case "shift":
-                ee.current = c;
+                re.current = c;
                 break;
 
               case "home":
                 if (e.nativeEvent.ctrlKey && e.nativeEvent.shiftKey) {
                     // handle select until start
-                    Ae(e, {
+                    Ke(e, {
                         targetIndex: 0,
                         initialIndex: s,
                         name: t
@@ -1306,7 +1307,7 @@
               case "end":
                 if (e.nativeEvent.ctrlKey && e.nativeEvent.shiftKey) {
                     // handle select until end
-                    Ae(e, {
+                    Ke(e, {
                         targetIndex: a.length - 1,
                         initialIndex: s,
                         name: t
@@ -1319,7 +1320,7 @@
               case "up":
                 if (e.nativeEvent.shiftKey) {
                     // handle select until previous
-                    Ae(e, {
+                    Ke(e, {
                         targetIndex: Math.max(c - 1, 0),
                         initialIndex: s,
                         name: t
@@ -1332,7 +1333,7 @@
               case "down":
                 if (e.nativeEvent.shiftKey) {
                     // handle select until next
-                    Ae(e, {
+                    Ke(e, {
                         targetIndex: Math.min(c + 1, a.length - 1),
                         initialIndex: s,
                         name: t
@@ -1344,7 +1345,7 @@
 
               case "space":
                 if (u != null) {
-                    Te(e, {
+                    Ae(e, {
                         name: t,
                         value: u
                     });
@@ -1352,7 +1353,7 @@
                 break;
 
               case "enter":
-                if (t === ae) {
+                if (t === ie) {
                     if (l) {
                         // all values moved, no longer an active value
                         v = undefined;
@@ -1360,12 +1361,12 @@
                         // somes values moved, determine next active value
                         v = w(c, a, i);
                     }
-                    $e(e, ae, ie);
+                    Fe(e, ie, le);
                 }
                 break;
 
               case "delete":
-                if (t === ie) {
+                if (t === le) {
                     if (l) {
                         // all values moved, no longer an active value
                         v = undefined;
@@ -1373,108 +1374,109 @@
                         // somes values moved, determine next active value
                         v = w(c, a, i);
                     }
-                    $e(e, ie, ae);
+                    Fe(e, le, ie);
                 }
                 break;
 
               default:
                 if (n === "a" && (e.nativeEvent.ctrlKey || e.nativeEvent.metaKey)) {
                     // handle control + A, otherwise let 'a' passthrough
-                    Ke(e, {
+                    $e(e, {
                         name: t,
                         selected: l
                     });
                 } else {
                     // do fuzzy match
-                    We(e, t);
+                    Xe(e, t);
                 }
                 break;
             }
             if (v !== u) {
                 e.preventDefault();
-                Me(t, v);
+                Te(t, v);
             }
-        }), [ Ie, ve, Ce, fe, he, We, $e, Ae, Te, Ke, Me, ae, ie ]);
-        var Ge = (0, t.useMemo)((function() {
+        }), [ Le, de, Re, pe, ke, Xe, Fe, Ke, Ae, $e, Te, ie, le ]);
+        var Je = (0, t.useMemo)((function() {
             return {
-                onButtonClick: Fe,
-                updateButtonRefreshHookByName: Ve,
-                getButtonState: Ee
+                onButtonClick: ze,
+                updateButtonRefreshHookByName: je,
+                getButtonState: Ie
             };
-        }), [ Fe, Ve, Ee ]);
-        var Je = (0, t.useMemo)((function() {
+        }), [ ze, je, Ie ]);
+        var Qe = (0, t.useMemo)((function() {
             return {
-                controlled: V.current,
-                getActiveValue: ve,
-                getScreenReaderMessage: be,
-                getSelectedStateForValue: me,
-                getSelectedValueCount: pe,
-                getValueCount: ke,
-                updateLabelRefreshHookByName: _e,
-                updateOptionRefreshHookByValue: Ne,
-                updateScreenReaderRefreshHook: qe
+                controlled: j.current,
+                getActiveValue: de,
+                getScreenReaderMessage: me,
+                getSelectedStateForValue: he,
+                getSelectedValueCount: be,
+                getValueCount: Ce,
+                updateLabelRefreshHookByName: Ve,
+                updateOptionRefreshHookByValue: _e,
+                updateScreenReaderRefreshHook: Ne
             };
-        }), [ ve, be, me, pe, ke, _e, Ne, qe ]);
-        if (V.current && !ce[0].activeFound) {
+        }), [ de, me, he, be, Ce, Ve, _e, Ne ]);
+        if (j.current && !se[0].activeFound) {
             // listOne active value wasn't found, likely the result of a controlled state reset
             // update interal values, skip the render it will be caught in batch
-            Me(ae, undefined, true);
+            Te(ie, undefined, true);
         }
-        if (V.current && !ce[1].activeFound) {
+        if (j.current && !se[1].activeFound) {
             // listTwo active value wasn't found, likely the result of a controlled state reset
             // update interal values, skip the render it will be caught in batch
-            Me(ie, undefined, true);
+            Te(le, undefined, true);
         }
         
         return n().createElement(xe, we({
             "data-test": "dual-listbox",
-            $inline: g ? false : k,
-            $fill: g
-        }, P),  n().createElement(h.Provider, {
-            value: Je
+            elementRef: m,
+            $inline: y ? false : R,
+            $fill: y
+        }, N),  n().createElement(g.Provider, {
+            value: Qe
         },  n().createElement(ye, {
             index: 0,
-            elementRef: B,
-            label: le,
-            name: ae,
-            onClick: ze,
-            onKeyDown: Xe,
+            elementRef: M,
+            label: oe,
+            name: ie,
+            onClick: We,
+            onKeyDown: Ge,
             onSelectAllClick: Ue
-        }, ce[0].options),  n().createElement(Se, null,  n().createElement(L.Provider, {
-            value: Ge
+        }, se[0].options),  n().createElement(Se, null,  n().createElement(L.Provider, {
+            value: Je
         },  n().createElement(F, {
             ariaLabel: (0, d.sprintf)((0, l._)("Move selected options to %(listLabel)s list"), {
-                listLabel: oe
+                listLabel: ue
             }),
             ariaKeyShortcuts: "Enter",
             "data-test": "move-to-secondary",
             icon:  n().createElement(v(), null),
-            name: ae,
+            name: ie,
             tooltipLabel: (0, d.sprintf)((0, l._)("Move to %(listLabel)s"), {
-                listLabel: oe
+                listLabel: ue
             }),
             tooltipPlacement: "left"
         }),  n().createElement(F, {
             ariaLabel: (0, d.sprintf)((0, l._)("Move selected options to %(listLabel)s list"), {
-                listLabel: le
+                listLabel: oe
             }),
             ariaKeyShortcuts: "Delete",
             "data-test": "move-to-primary",
             icon:  n().createElement(c(), null),
-            name: ie,
+            name: le,
             tooltipLabel: (0, d.sprintf)((0, l._)("Move to %(listLabel)s"), {
-                listLabel: le
+                listLabel: oe
             }),
             tooltipPlacement: "right"
         }))),  n().createElement(ye, {
             index: 1,
-            elementRef: $,
-            label: oe,
-            name: ie,
-            onClick: ze,
-            onKeyDown: Xe,
+            elementRef: z,
+            label: ue,
+            name: le,
+            onClick: We,
+            onKeyDown: Ge,
             onSelectAllClick: Ue
-        }, ce[1].options),  n().createElement(C, null)));
+        }, se[1].options),  n().createElement(C, null)));
     }
     Ve.propTypes = _e;
     Ve.Option = ne;