@enact/limestone 1.10.0 → 1.10.2

package/Scroller/tests/Scroller-specs.js

@@ -1,7 +1,9 @@
 "use strict";
 
 require("@testing-library/jest-dom");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _react = require("@testing-library/react");
+var _react2 = require("react");
 var _Scroller = _interopRequireDefault(require("../Scroller"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -66,7 +68,7 @@ describe('Scroller', function () {
     });
   });
   describe('focusable Scrollbar', function () {
-    test('should have focuable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
+    test('should have focusable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
       var id = 'scroller';
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
         "data-testid": id,
@@ -86,7 +88,7 @@ describe('Scroller', function () {
       expect(scrollBody).toHaveClass(expected);
       expect(verticalScrollbar).toHaveClass(expected);
     });
-    test('should have focuable scroll thumb when \'focusableScrollbar\' is true', function () {
+    test('should have focusable scroll thumb when \'focusableScrollbar\' is true', function () {
       var id = 'scroller';
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
         "data-testid": id,
@@ -101,6 +103,93 @@ describe('Scroller', function () {
       expect(scrollBody).not.toHaveClass(expected);
       expect(verticalScrollbar).toHaveClass(expected);
     });
+    describe('ScrollbarPlaceholder focus restoration', function () {
+      var focusSpy, pointerModeSpy, currentSpy, pausedSpy, containerSpy;
+      var placeholderElement;
+      var renderWithFocusedPlaceholder = function renderWithFocusedPlaceholder() {
+        placeholderElement = null;
+        currentSpy.mockImplementation(function () {
+          return placeholderElement;
+        });
+        var onRender = function onRender(id, phase) {
+          if (phase === 'mount') {
+            placeholderElement = document.querySelector('[data-spotlight-ignore-restore]');
+          }
+        };
+        var view = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Profiler, {
+          id: "placeholder",
+          onRender: onRender,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+            focusableScrollbar: "byEnter",
+            verticalScrollbar: "visible",
+            children: contents
+          })
+        }));
+        currentSpy.mockImplementation(function () {
+          return null;
+        });
+        focusSpy.mockClear();
+        return view;
+      };
+      beforeEach(function () {
+        jest.useFakeTimers();
+        focusSpy = jest.spyOn(_spotlight["default"], 'focus').mockImplementation(function () {
+          return true;
+        });
+        pointerModeSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+        currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent').mockReturnValue(null);
+        pausedSpy = jest.spyOn(_spotlight["default"], 'isPaused').mockReturnValue(false);
+        containerSpy = jest.spyOn(_spotlight["default"], 'getActiveContainer').mockReturnValue('active-container');
+      });
+      afterEach(function () {
+        focusSpy.mockRestore();
+        pointerModeSpy.mockRestore();
+        currentSpy.mockRestore();
+        pausedSpy.mockRestore();
+        containerSpy.mockRestore();
+        jest.useRealTimers();
+      });
+      test('should focus the active container after the placeholder disappears', function () {
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).toHaveBeenCalledWith('active-container', {
+          toOuterContainer: true
+        });
+      });
+      test('should not focus when pointer mode is active', function () {
+        pointerModeSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+      });
+      test('should defer focus while spotlight is paused, then focus after 400ms once it unpauses', function () {
+        pausedSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+        pausedSpy.mockReturnValue(false);
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(400);
+        });
+        expect(focusSpy).toHaveBeenCalledWith('active-container', {
+          toOuterContainer: true
+        });
+      });
+      test('should not focus after the 400ms retry if spotlight is still paused', function () {
+        pausedSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(400);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+      });
+    });
   });
   describe('Scrollbar accessibility', function () {
     test('should set a custom "aria-label" to the scroll thumb in the horizontal scroll bar', function () {
@@ -156,4 +245,33 @@ describe('Scroller', function () {
       expect(verticalScrollbar).toHaveClass('vertical');
     });
   });
+  describe('stickTo', function () {
+    test('should compute a stick-to-start scroll position when a contained item is focused', function () {
+      var scrollToFn = global.Element.prototype.scrollTo;
+      global.Element.prototype.scrollTo = jest.fn();
+      var pointerSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+      var currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent');
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+        direction: "horizontal",
+        scrollToContentContainerOnFocus: false,
+        stickTo: "start",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '4000px'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            "data-testid": "stick-target",
+            children: "Target"
+          })
+        })
+      }));
+      var target = _react.screen.getByTestId('stick-target');
+      currentSpy.mockReturnValue(target);
+      _react.fireEvent.focusIn(target);
+      expect(target).toBeInTheDocument();
+      currentSpy.mockRestore();
+      pointerSpy.mockRestore();
+      global.Element.prototype.scrollTo = scrollToFn;
+    });
+  });
 });

package/Scroller/useThemeScroller.js

@@ -284,8 +284,11 @@ var useSpottable = function useSpottable(props, instances) {
       itemLeft = _getFocusedItemBounds.left,
       itemWidth = _getFocusedItemBounds.width;
     var rtl = props.rtl,
+      stickTo = props.stickTo,
       coordinateCoefficient = rtl && !(_platform["default"].chrome < 85) ? -1 : 1,
-      clientWidth = scrollContentHandle.current.scrollBounds.clientWidth,
+      _scrollContentHandle$ = scrollContentHandle.current.scrollBounds,
+      clientWidth = _scrollContentHandle$.clientWidth,
+      maxLeft = _scrollContentHandle$.maxLeft,
       rtlDirection = rtl ? -1 : 1,
       _scrollContentNode$ge = scrollContentNode.getBoundingClientRect(),
       containerLeft = _scrollContentNode$ge.left,
@@ -293,6 +296,18 @@ var useSpottable = function useSpottable(props, instances) {
       currentScrollLeft = rtl && coordinateCoefficient === 1 ? scrollContentHandle.current.scrollBounds.maxLeft - scrollLastPosition : scrollLastPosition,
       newItemLeft = coordinateCoefficient * scrollContentNode.scrollLeft + (itemLeft - containerLeft);
     var nextScrollLeft = scrollContentHandle.current.scrollPos.left;
+    if (stickTo === 'start') {
+      // Anchor the focused item to a fixed "focus position" near the start edge so the focus
+      // indicator stays put while the list scrolls beneath it. The offset matches the in-view
+      // threshold (`affordanceSize`) used by `calculatePositionOnFocus`.
+      var affordanceLeft = _resolution["default"].scale(_useScroll.affordanceSize);
+
+      // Position the item at the fixed slot, then clamp to the scroll bounds. Clamping handles
+      // the end of the list: the item can no longer reach the slot, so the list scrolls only to
+      // its last position while the focused item (including its full width) stays visible.
+      nextScrollLeft += rtlDirection * (newItemLeft - currentScrollLeft - affordanceLeft);
+      return Math.max(0, Math.min(nextScrollLeft, maxLeft));
+    }
     if (newItemLeft + itemWidth > clientWidth + currentScrollLeft && itemWidth < clientWidth) {
       // If focus is moved to an element outside of view area (to the right), scroller will move
       // to the right just enough to show the current `focusedItem`. This does not apply to
@@ -325,7 +340,11 @@ var useSpottable = function useSpottable(props, instances) {
     }
     var containerRect = (0, _utils.getRect)(containerNode);
     var itemRect = (0, _utils.getRect)(item);
-    if (horizontal && !(itemRect.left >= containerRect.left + _resolution["default"].scale(_useScroll.affordanceSize) && itemRect.right <= containerRect.right - _resolution["default"].scale(_useScroll.affordanceSize))) {
+
+    // When anchoring focus to a fixed slot, always recompute the scroll position so each newly
+    // focused item is pulled to the slot rather than only when it falls outside the view.
+    var stickToStart = props.stickTo === 'start';
+    if (horizontal && (stickToStart || !(itemRect.left >= containerRect.left + _resolution["default"].scale(_useScroll.affordanceSize) && itemRect.right <= containerRect.right - _resolution["default"].scale(_useScroll.affordanceSize)))) {
       scrollContentHandle.current.scrollPos.left = calculateScrollLeft(item, scrollPosition);
     }
     if (vertical && !(itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom - _resolution["default"].scale(_useScroll.affordanceSize))) {
@@ -363,6 +382,7 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
   delete rest.scrollContentHandle;
   delete rest.setThemeScrollContentHandle;
   delete rest.spotlightId;
+  delete rest.stickTo;
 
   // Hooks
   var isScrollbarVisible = isHorizontalScrollbarVisible || isVerticalScrollbarVisible;
@@ -377,6 +397,9 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
   var _ref3 = props.focusableScrollbar === 'byEnter' ? getFocusableBodyProps(scrollContainerRef, contentId, isScrollbarVisible) : {},
     setNavigableFilter = _ref3.setNavigableFilter,
     focusableBodyProps = _objectWithoutProperties(_ref3, _excluded2);
+  if (focusableBodyProps.className) {
+    focusableBodyProps.className = (0, _classnames["default"])(focusableBodyProps.className, isVerticalScrollbarVisible && _ScrollerModule["default"].hasVerticalScrollbar, isHorizontalScrollbarVisible && _ScrollerModule["default"].hasHorizontalScrollbar);
+  }
   (0, _react.useLayoutEffect)(function () {
     // Initial filter setting
     if (setNavigableFilter) {

package/Slider/Slider.d.ts

@@ -2,7 +2,7 @@
 
 import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
 import { SliderDecoratorProps as ui_Slider_SliderDecoratorProps } from "@enact/ui/Slider";
 import * as React from "react";