@enact/limestone 1.10.0 → 1.10.2

package/VirtualList/VirtualList.js

@@ -456,6 +456,21 @@ _VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype
    * @public
    */
   spotlightId: _propTypes["default"].string,
+  /**
+   * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+   * beneath it.
+   *
+   * When set to `'start'`, moving focus with 5-way keys keeps the focus indicator at a fixed slot
+   * at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+   * newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+   * last position so the focused item stays visible.
+   *
+   * This is ignored when `snapToCenter` is set.
+   *
+   * @type {('start')}
+   * @public
+   */
+  stickTo: _propTypes["default"].oneOf(['start']),
   /**
    * Specifies how to show vertical scrollbar.
    *
@@ -908,6 +923,21 @@ _VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pr
    * @public
    */
   spotlightId: _propTypes["default"].string,
+  /**
+   * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+   * beneath it.
+   *
+   * When set to `'start'`, moving focus with 5-way keys keeps the focus indicator at a fixed slot
+   * at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+   * newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+   * last position so the focused item stays visible.
+   *
+   * This is ignored when `snapToCenter` is set.
+   *
+   * @type {('start')}
+   * @public
+   */
+  stickTo: _propTypes["default"].oneOf(['start']),
   /**
    * Specifies how to show vertical scrollbar.
    *

package/VirtualList/tests/stickTo-specs.js

@@ -0,0 +1,115 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _react = require("@testing-library/react");
+var _Item = _interopRequireDefault(require("../../Item"));
+var _VirtualList = _interopRequireDefault(require("../VirtualList"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["index"]; // These tests exercise the `stickTo="start"` scroll behavior added to `useThemeVirtualList`. They
+// live in their own file because they depend on a clean Spotlight instance.
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var focus = function focus(elm) {
+  return _react.fireEvent.focus(elm);
+};
+var keyDownUp = function keyDownUp(keyCode) {
+  return function (elm) {
+    _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode
+    });
+    return _react.fireEvent.keyUp(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var pressDownKey = keyDownUp(40);
+describe('VirtualList stickTo="start"', function () {
+  var clientSize, currentFocusIndex, dataSize, handlerOnFocus, items, itemSize, renderItem;
+  beforeEach(function () {
+    clientSize = {
+      clientWidth: 1280,
+      clientHeight: 720
+    };
+    currentFocusIndex = -1;
+    dataSize = 200;
+    items = [];
+    itemSize = 60;
+    handlerOnFocus = function handlerOnFocus(index) {
+      return function () {
+        currentFocusIndex = index;
+      };
+    };
+    renderItem = function renderItem(_ref) {
+      var index = _ref.index,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      // eslint-disable-line enact/display-name
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        onFocus: handlerOnFocus(index),
+        children: items[index].name
+      }));
+    };
+    for (var i = 0; i < dataSize; i++) {
+      items.push({
+        name: 'Account ' + i
+      });
+    }
+  });
+  afterEach(function () {
+    clientSize = null;
+    dataSize = null;
+    handlerOnFocus = null;
+    items = null;
+    itemSize = null;
+    renderItem = null;
+  });
+  test('should scroll to anchor the focused item at the start slot on 5-way navigation', function () {
+    var spy = jest.fn(function () {});
+    var scrollToFn = global.Element.prototype.scrollTo;
+    global.Element.prototype.scrollTo = spy;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      itemRenderer: renderItem,
+      itemSize: itemSize,
+      stickTo: "start"
+    }));
+    var list = _react.screen.getByRole('list');
+    var item13 = list.children.item(13).children.item(0);
+    focus(item13);
+    expect(currentFocusIndex).toBe(13);
+    pressDownKey(item13);
+    expect(currentFocusIndex).toBe(14);
+    expect(spy).toHaveBeenCalled();
+    global.Element.prototype.scrollTo = scrollToFn;
+  });
+  test('should scroll a focused item to the start slot', function () {
+    var spy = jest.fn(function () {});
+    var scrollToFn = global.Element.prototype.scrollTo;
+    global.Element.prototype.scrollTo = spy;
+    var pointerSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+    var currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent');
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      direction: "horizontal",
+      itemRenderer: renderItem,
+      itemSize: itemSize,
+      stickTo: "start"
+    }));
+    var list = _react.screen.getByRole('list');
+    var node = list.querySelector('[data-index="13"]');
+    currentSpy.mockReturnValue(node);
+    _react.fireEvent.focusIn(node);
+    expect(spy).toHaveBeenCalled();
+    currentSpy.mockRestore();
+    pointerSpy.mockRestore();
+    global.Element.prototype.scrollTo = scrollToFn;
+  });
+});

package/VirtualList/tests/useEvent-specs.js

@@ -27,6 +27,14 @@ var keyDownUp = function keyDownUp(keyCode) {
     });
   };
 };
+var keyDownRepeat = function keyDownRepeat(keyCode) {
+  return function (elm) {
+    return _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode,
+      repeat: true
+    });
+  };
+};
 var pressLeftKey = keyDownUp(37);
 var pressRightKey = keyDownUp(39);
 var pressUpKey = keyDownUp(38);
@@ -148,6 +156,37 @@ describe('VirtualList useEvent', function () {
     expect(spy).toHaveBeenCalled();
     global.Element.prototype.scrollTo = scrollToFn;
   });
+  test('should handle repeat keydown on first VirtualList entry without error', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      itemRenderer: renderItem,
+      itemSize: itemSize
+    }));
+    var list = _react.screen.getByRole('list');
+    var item0 = list.children.item(0).children.item(0);
+    focus(item0);
+    expect(currentFocusIndex).toBe(0);
+    keyDownRepeat(40)(item0);
+    expect(currentFocusIndex).toBe(0);
+  });
+  test('should handle repeat keydown when data-index jumps unexpectedly without error', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      itemRenderer: renderItem,
+      itemSize: itemSize
+    }));
+    var list = _react.screen.getByRole('list');
+    var item0 = list.children.item(0).children.item(0);
+    var item1 = list.children.item(1).children.item(0);
+    focus(item0);
+    pressDownKey(item0);
+    expect(currentFocusIndex).toBe(1);
+    item1.dataset.index = '20';
+    keyDownRepeat(40)(item1);
+    expect(currentFocusIndex).toBe(1);
+  });
   test('should scroll by page-down key', function () {
     var spy = jest.fn(function () {});
     var scrollToFn = global.Element.prototype.scrollTo;

package/VirtualList/useEvent.js

@@ -28,13 +28,14 @@ var isDown = (0, _keymap.is)('down'),
     // should return -1 if index is not a number or a negative value
     return number >= 0 ? number : -1;
   };
-var prevKeyDownIndex = -1;
 var useEventKey = exports.useEventKey = function useEventKey(props, instances, context) {
   // Mutable value
 
   var mutableRef = (0, _react.useRef)({
     fn: null
   });
+  var prevKeyDownIndexRef = (0, _react.useRef)(-1);
+  var hasProcessedKeyDownRef = (0, _react.useRef)(false);
 
   // Functions
 
@@ -121,6 +122,7 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
     var handle5WayKeyUp = context.handle5WayKeyUp,
       handleDirectionKeyDown = context.handleDirectionKeyDown,
       handlePageUpDownKeyDown = context.handlePageUpDownKeyDown,
+      resetAccelerator = context.resetAccelerator,
       spotlightAcceleratorProcessKey = context.spotlightAcceleratorProcessKey;
     function handleKeyDown(ev) {
       var keyCode = ev.keyCode,
@@ -163,15 +165,50 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
               isRightMovement = _getNextIndex.isRightMovement,
               isWrapped = _getNextIndex.isWrapped,
               nextIndex = _getNextIndex.nextIndex;
+            var _scrollContentHandle$2 = scrollContentHandle.current,
+              dimensionToExtent = _scrollContentHandle$2.dimensionToExtent,
+              isPrimaryDirectionVertical = _scrollContentHandle$2.isPrimaryDirectionVertical;
+
+            // VirtualList recycles DOM nodes during scroll. If a node gets reused for a different index
+            // while browser focus stays on it, target.dataset.index reflects the new (wrong) index.
+            // Detect this by checking if the index jumped unnaturally during key repeat.
+            var isForwardKey = isPrimaryDirectionVertical ? isDownKey : isRightMovement;
+            var isBackwardKey = isPrimaryDirectionVertical ? isUpKey : isLeftMovement;
+            var isOutdatedIndex = repeat && prevKeyDownIndexRef.current !== -1 && (isForwardKey && (prevKeyDownIndexRef.current > index || index > prevKeyDownIndexRef.current + dimensionToExtent) || isBackwardKey && (prevKeyDownIndexRef.current < index || index < prevKeyDownIndexRef.current - dimensionToExtent));
+
+            // Block the first repeat event when entering VirtualList from outside with acceleration.
+            // prevKeyDownIndexRef is -1 only on first entry; a repeat here means key was held before entering.
+            var isFirstEntryRepeat = repeat && !hasProcessedKeyDownRef.current;
+            if (isFirstEntryRepeat) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              resetAccelerator();
+              return;
+            }
+            if (isOutdatedIndex) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              resetAccelerator();
+              var correctedNextIndex = isForwardKey ? prevKeyDownIndexRef.current + dimensionToExtent : prevKeyDownIndexRef.current - dimensionToExtent;
+              if (correctedNextIndex >= 0 && correctedNextIndex < props.dataSize) {
+                var currentItemNode = instances.itemRefs.current[prevKeyDownIndexRef.current % scrollContentHandle.current.state.numOfItems];
+                var correctedTarget = currentItemNode && parseInt(currentItemNode.dataset.index) === prevKeyDownIndexRef.current ? currentItemNode : target;
+                handleDirectionKeyDown(ev, 'acceleratedKeyDown', {
+                  isWrapped: false,
+                  keyCode: keyCode,
+                  nextIndex: correctedNextIndex,
+                  repeat: repeat,
+                  target: correctedTarget
+                });
+                prevKeyDownIndexRef.current = correctedNextIndex;
+              }
+              // At list boundary: keep prevKeyDownIndexRef.current unchanged so next event stays recoverable
+              return;
+            }
             if (nextIndex >= 0) {
               // if the candidate is another item
               ev.preventDefault();
               ev.stopPropagation();
-              if (repeat && prevKeyDownIndex !== -1 && (isDownKey && prevKeyDownIndex > index || isUpKey && prevKeyDownIndex < index)) {
-                // Ignore keyEvent from item with wrong data-index (Workaround for data-index bug)
-                // Sometimes keyDown event occurs before the data-index updated, it causes reverse focus change
-                return;
-              }
               if (props.scrollContainerHandle && props.scrollContainerHandle.current) {
                 props.scrollContainerHandle.current.lastInputType = 'arrowKey';
               }
@@ -188,9 +225,6 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
                 focusableScrollbar = props.focusableScrollbar,
                 isHorizontalScrollbarVisible = props.isHorizontalScrollbarVisible,
                 isVerticalScrollbarVisible = props.isVerticalScrollbarVisible;
-              var _scrollContentHandle$2 = scrollContentHandle.current,
-                dimensionToExtent = _scrollContentHandle$2.dimensionToExtent,
-                isPrimaryDirectionVertical = _scrollContentHandle$2.isPrimaryDirectionVertical;
               var column = index % dimensionToExtent;
               var row = (index - column) % dataSize / dimensionToExtent;
               var directions = {};
@@ -236,7 +270,8 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
               }
             }
           }
-          prevKeyDownIndex = index;
+          prevKeyDownIndexRef.current = index;
+          hasProcessedKeyDownRef.current = true;
           if (isLeaving) {
             handleDirectionKeyDown(ev, 'keyLeave');
           }

package/VirtualList/useThemeVirtualList.js

@@ -99,6 +99,9 @@ var useSpottable = function useSpottable(props, instances) {
       handle5WayKeyUp: function handle5WayKeyUp() {
         SpotlightAccelerator.reset();
       },
+      resetAccelerator: function resetAccelerator() {
+        SpotlightAccelerator.reset();
+      },
       spotlightAcceleratorProcessKey: function spotlightAcceleratorProcessKey(ev) {
         return SpotlightAccelerator.processKey(ev, nop);
       }
@@ -192,6 +195,10 @@ var useSpottable = function useSpottable(props, instances) {
     var index = getNumberValue(target.dataset.index);
     var direction = (0, _spotlight.getDirection)(keyCode);
     var allowAffordance = !(noAffordance || orientation === 'horizontal');
+    // When anchoring focus to the start slot, always scroll the newly focused item to that slot
+    // rather than leaving it in place when it happens to be already visible. `snapToCenter` is a
+    // more specific mode and keeps precedence.
+    var stickToStart = props.stickTo === 'start' && !snapToCenter;
     var shouldMove = snapToCenter ? nextIndex > 0 && nextIndex < dataSize - 1 && index > 0 : nextIndex >= 0 && index >= 0;
     mutableRef.current.isScrolledBy5way = false;
     mutableRef.current.isScrolledByJump = false;
@@ -203,7 +210,7 @@ var useSpottable = function useSpottable(props, instances) {
         startBoundary = scrollMode === 'native' ? scrollPosition : scrollPositionTarget,
         endBoundary = startBoundary + clientSize - (!allowAffordance ? 0 : _resolution["default"].scale(_useScroll.affordanceSize));
       mutableRef.current.lastFocusedIndex = nextIndex;
-      if (start >= startBoundary && end <= endBoundary) {
+      if (!stickToStart && start >= startBoundary && end <= endBoundary) {
         // The next item could be still out of viewport. So we need to prevent scrolling into view with `isScrolledBy5way` flag.
         mutableRef.current.isScrolledBy5way = true;
         focusByIndex(nextIndex, direction);
@@ -213,6 +220,9 @@ var useSpottable = function useSpottable(props, instances) {
       } else if (!snapToCenter || !mutableRef.current.isScrollingBySnapToCenter) {
         var itemNode = getItemNode(nextIndex);
         var stickTo = Math.abs(endBoundary - end) < Math.abs(startBoundary - start) ? 'end' : 'start';
+        if (stickToStart) {
+          stickTo = 'start';
+        }
         stickTo = snapToCenter ? 'center' : stickTo;
         mutableRef.current.isScrolledBy5way = true;
         mutableRef.current.isWrappedBy5way = isWrapped;
@@ -286,6 +296,7 @@ var useSpottable = function useSpottable(props, instances) {
     var offsetToClientEnd = Math.max(0, primary.clientSize - (snapToCenter ? primary.gridSize : primary.itemSize) - (!allowAffordance ? 0 : _resolution["default"].scale(_useScroll.affordanceSize)));
     var focusedIndex = getNumberValue(item.getAttribute(_useScroll.dataIndexAttribute));
     var offsetToCenter = snapToCenter ? primary.clientSize / 2 - primary.gridSize / 2 : 0;
+    var stickToStart = props.stickTo === 'start' && !snapToCenter;
     if (focusedIndex >= 0) {
       var gridPosition = scrollContentHandle.current.getGridPosition(focusedIndex);
       if (numOfItems > 0 && focusedIndex % numOfItems !== mutableRef.current.lastFocusedIndex % numOfItems) {
@@ -296,7 +307,13 @@ var useSpottable = function useSpottable(props, instances) {
       }
       mutableRef.current.lastFocusedIndex = focusedIndex;
       if (primary.clientSize >= primary.itemSize) {
-        if (gridPosition.primaryPosition > scrollPosition + offsetToClientEnd) {
+        if (stickToStart) {
+          // anchor to the start slot
+          // Clamp to the scroll bounds so that at the end of the list, the list stops at its
+          // last position while keeping the focused item visible.
+          var maxPos = scrollContentHandle.current.isPrimaryDirectionVertical ? scrollContentHandle.current.scrollBounds.maxTop : scrollContentHandle.current.scrollBounds.maxLeft;
+          gridPosition.primaryPosition = Math.max(0, Math.min(gridPosition.primaryPosition, maxPos));
+        } else if (gridPosition.primaryPosition > scrollPosition + offsetToClientEnd) {
           // forward over
           gridPosition.primaryPosition -= pageScroll ? 0 : offsetToClientEnd - offsetToCenter;
         } else if (gridPosition.primaryPosition >= scrollPosition) {
@@ -431,6 +448,7 @@ var useThemeVirtualList = exports.useThemeVirtualList = function useThemeVirtual
   delete rest.scrollContentHandle;
   delete rest.snapToCenter;
   delete rest.spotlightId;
+  delete rest.stickTo;
   delete rest.wrap;
   return _objectSpread(_objectSpread({}, rest), {}, {
     containerProps: {

package/WizardPanels/WizardPanels.module.css

@@ -7,7 +7,7 @@
   margin-top: calc(var(--primitive-spacing-84) * -1);
 }
 .wizardPanels .content {
-  margin: var(--primitive-spacing-60) NaNrem - NaNrem - var(--primitive-spacing-36)));
+  margin: var(--primitive-spacing-60) calc(324px - calc(132px - var(--primitive-spacing-36)));
 }
 .wizardPanels .footer {
   text-align: center;

package/internal/DateComponentPicker/DateComponentPicker.module.css

@@ -5,14 +5,14 @@
   vertical-align: inherit;
 }
 .dateComponentPicker .label {
+  text-align: center;
+  white-space: nowrap;
   font-weight: var(--primitive-font-weight-regular);
   font-size: var(--primitive-font-size-60);
   font-style: normal;
   font-family: "Limestone";
-  line-height: 1.4em;
-  text-align: center;
+  line-height: 1.34em;
   padding: 0.75rem 1rem;
-  white-space: nowrap;
 }
 :global(.enact-locale-non-latin) .dateComponentPicker .label {
   font-family: "Limestone";

package/internal/DateTime/DateTime.module.css

@@ -19,6 +19,9 @@
 .dateTime .pickers > *:nth-last-child(2) {
   margin-inline-end: 0;
 }
+.dateTime:global(.largeText) .heading {
+  font-size: var(--primitive-font-size-80);
+}
 .dateTime:global(.neutral) .heading {
   color: var(--semantic-color-on-background-main);
 }

package/internal/Picker/Picker.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "PickerItem", {
   }
 });
 exports["default"] = void 0;
-var _classnames3 = _interopRequireDefault(require("classnames"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 var _handle = require("@enact/core/handle");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _keymap = require("@enact/core/keymap");
@@ -27,6 +27,7 @@ var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _Skinnable = _interopRequireDefault(require("../../Skinnable"));
+var _Steps = _interopRequireDefault(require("../../Steps"));
 var _$L = _interopRequireDefault(require("../$L"));
 var _validators = require("../validators");
 var _util2 = require("../util");
@@ -418,7 +419,7 @@ var _PickerBase = function PickerBase(props) {
   }, [hasReachedBound, orientation, props, step]);
   var determineClasses = (0, _react.useCallback)(function (cssProps, decrementerDisabledProp, incrementerDisabledProp) {
     var classNameVariable = props.className;
-    return (0, _classnames3["default"])(cssProps.picker, cssProps[changedBy], cssProps[orientation], cssProps[width], _defineProperty(_defineProperty(_defineProperty({}, cssProps.joined, joined), cssProps.decrementing, !decrementerDisabledProp && pressed === -1), cssProps.incrementing, !incrementerDisabledProp && pressed === 1), classNameVariable);
+    return (0, _classnames2["default"])(cssProps.picker, cssProps[changedBy], cssProps[orientation], cssProps[width], _defineProperty(_defineProperty(_defineProperty({}, cssProps.joined, joined), cssProps.decrementing, !decrementerDisabledProp && pressed === -1), cssProps.incrementing, !incrementerDisabledProp && pressed === 1), classNameVariable);
   }, [changedBy, joined, orientation, pressed, props, width]);
   var calcValueText = (0, _react.useCallback)(function () {
     var _props$accessibilityH = props.accessibilityHint,
@@ -580,14 +581,11 @@ var _PickerBase = function PickerBase(props) {
         noAnimation: noAnimation,
         reverseTransition: reverseTransition.current,
         children: children
-      }), showIndicators && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-        className: css.indicatorContainer
-      }, voiceProps), {}, {
-        children: children.map(function (c, indicator) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames3["default"])(css.indicator, _defineProperty({}, css.active, index === indicator))
-          }, "indicator".concat(indicator));
-        })
+      }), showIndicators && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps["default"], _objectSpread(_objectSpread({}, voiceProps), {}, {
+        css: css,
+        highlightCurrentOnly: true,
+        current: index + 1,
+        total: children.length
       }))]
     }), isHorizontalJoinedEnter ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, _objectSpread(_objectSpread({}, voiceProps), {}, {
       align: joined ? 'stretch' : null,