@enact/limestone 1.10.1 → 1.10.2

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/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,