@enact/limestone 1.3.0 → 1.10.0

package/useScroll/HoverToScroll.js

@@ -48,9 +48,10 @@ var getBoundsPropertyNames = function getBoundsPropertyNames(direction) {
   };
 };
 var hoverToScrollMultiplier = {
-  horizontal: 0.015,
-  vertical: 0.04
+  horizontal: 0.008,
+  vertical: 0.02
 };
+var hoverToScrollDelay = 0.7;
 var directionToFocus = {
   horizontal: {
     before: 'right',
@@ -70,7 +71,8 @@ var directionToFocus = {
  * @ui
  * @private
  */
-var HoverToScrollBase = function HoverToScrollBase(props) {
+var _HoverToScrollBase = function HoverToScrollBase(props) {
+  (0, _util.checkPropTypes)(_HoverToScrollBase, props);
   var direction = props.direction,
     scrollContainer = props.scrollContainerHandle.current,
     _props$scrollObserver = props.scrollObserver,
@@ -147,13 +149,16 @@ var HoverToScrollBase = function HoverToScrollBase(props) {
         bounds[clientSize] *
         // scroll page size
         hoverToScrollMultiplier[direction]; // a scrolling speed factor
-
+        var startTime = (0, _util.perfNow)();
         mutableRef.current.hoveredPosition = position;
-        mutableRef.current.stopScrollByHover = false;
-        var _scrollByHover = function scrollByHover() {
+        mutableRef.current.stopScrollByHover = scrollContainer.scrolling; // stop scrollByHover when it is in scrolling
+
+        var _scrollByHover = function scrollByHover(currentTime) {
           if (!mutableRef.current.stopScrollByHover) {
+            var elapsed = (currentTime - startTime) / 1000;
+            var distanceMultiplier = elapsed < hoverToScrollDelay ? 0 : Math.min(elapsed - hoverToScrollDelay / 1.5, 1);
             scrollContainer.scrollTo({
-              position: _defineProperty({}, axis, (0, _util.clamp)(0, bounds[maxPosition], scrollContainer[scrollPosition] + distance)),
+              position: _defineProperty({}, axis, (0, _util.clamp)(0, bounds[maxPosition], scrollContainer[scrollPosition] + distance * distanceMultiplier)),
               animate: false
             });
             startRaf(_scrollByHover);
@@ -229,8 +234,8 @@ var HoverToScrollBase = function HoverToScrollBase(props) {
     children: [before ? renderHoverArea('before') : null, after ? renderHoverArea('after') : null]
   });
 };
-HoverToScrollBase.displayName = 'HoverToScrollBase';
-HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.HoverToScrollBase.prototype */{
+_HoverToScrollBase.displayName = 'HoverToScrollBase';
+_HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.HoverToScrollBase.prototype */{
   direction: _propTypes["default"].string,
   scrollContainerHandle: _propTypes["default"].object
 };
@@ -243,23 +248,24 @@ HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.Hover
  * @ui
  * @private
  */
-var HoverToScroll = exports.HoverToScroll = function HoverToScroll(_ref2) {
-  var scrollContainerHandle = _ref2.scrollContainerHandle,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var _HoverToScroll = exports.HoverToScroll = function HoverToScroll(props) {
+  (0, _util.checkPropTypes)(_HoverToScroll, props);
+  var scrollContainerHandle = props.scrollContainerHandle,
+    rest = _objectWithoutProperties(props, _excluded);
   return scrollContainerHandle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HoverToScrollBase, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScrollBase, _objectSpread(_objectSpread({
       scrollContainerHandle: scrollContainerHandle
     }, rest), {}, {
       direction: "horizontal"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(HoverToScrollBase, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScrollBase, _objectSpread(_objectSpread({
       scrollContainerHandle: scrollContainerHandle
     }, rest), {}, {
       direction: "vertical"
     }))]
   }) : null;
 };
-HoverToScroll.displayName = 'HoverToScroll';
-HoverToScroll.propTypes = /** @lends limestone/useScroll.HoverToScroll.prototype */{
+_HoverToScroll.displayName = 'HoverToScroll';
+_HoverToScroll.propTypes = /** @lends limestone/useScroll.HoverToScroll.prototype */{
   scrollContainerHandle: _propTypes["default"].object
 };
-var _default = exports["default"] = HoverToScroll;
+var _default = exports["default"] = _HoverToScroll;

package/useScroll/Scrollbar.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ScrollbarBase = exports.Scrollbar = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("@enact/core/util");
 var _Scrollbar = require("@enact/ui/useScroll/Scrollbar");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -92,20 +93,23 @@ var useThemeScrollbar = function useThemeScrollbar(props) {
  * @ui
  * @private
  */
-var ScrollbarBase = exports.ScrollbarBase = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _ref$css = _ref.css,
-    css = _ref$css === void 0 ? _ScrollbarModule["default"] : _ref$css,
-    _ref$minThumbSize = _ref.minThumbSize,
-    minThumbSize = _ref$minThumbSize === void 0 ? 120 : _ref$minThumbSize,
-    _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? true : _ref$vertical,
-    rest = _objectWithoutProperties(_ref, _excluded3);
-  var props = _objectSpread({
+var ScrollbarBase = exports.ScrollbarBase = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var scrollbarBaseProps = (0, _util.setDefaultProps)(props, {
+    css: _ScrollbarModule["default"],
+    minThumbSize: 120,
+    vertical: true
+  });
+  (0, _util.checkPropTypes)(ScrollbarBase, scrollbarBaseProps);
+  var css = scrollbarBaseProps.css,
+    minThumbSize = scrollbarBaseProps.minThumbSize,
+    vertical = scrollbarBaseProps.vertical,
+    rest = _objectWithoutProperties(scrollbarBaseProps, _excluded3);
+  var propsForHook = _objectSpread({
     css: css,
     minThumbSize: minThumbSize,
     vertical: vertical
   }, rest);
-  var _useThemeScrollbar = useThemeScrollbar(props),
+  var _useThemeScrollbar = useThemeScrollbar(propsForHook),
     restProps = _useThemeScrollbar.restProps,
     scrollbarProps = _useThemeScrollbar.scrollbarProps,
     scrollbarTrackProps = _useThemeScrollbar.scrollbarTrackProps;

package/useScroll/ScrollbarPlaceholder.js

@@ -30,11 +30,9 @@ var ScrollbarPlaceholder = exports.ScrollbarPlaceholder = function ScrollbarPlac
     _useState2 = _slicedToArray(_useState, 2),
     showPlaceholder = _useState2[0],
     setShowPlaceholder = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (showPlaceholder) {
-      setShowPlaceholder(false);
-    }
-  }, [showPlaceholder]);
+  if (showPlaceholder) {
+    setShowPlaceholder(false);
+  }
   var resetFocus = (0, _react.useCallback)(function () {
     setTimeout(function () {
       if (!_spotlight["default"].getPointerMode() && !_spotlight["default"].getCurrent()) {

package/useScroll/ScrollbarTrack.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.ScrollbarTrackBase = exports.ScrollbarTrack = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _keymap = require("@enact/core/keymap");
+var _util = require("@enact/core/util");
 var _Accelerator = _interopRequireDefault(require("@enact/spotlight/Accelerator"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _AnnounceDecorator = require("@enact/ui/AnnounceDecorator");
@@ -43,7 +44,8 @@ var SpottableDiv = (0, _Spottable["default"])('div');
  * @ui
  * @private
  */
-var ScrollbarTrack = exports.ScrollbarTrackBase = exports.ScrollbarTrack = function ScrollbarTrack(props) {
+var _ScrollbarTrack = exports.ScrollbarTrackBase = exports.ScrollbarTrack = function ScrollbarTrack(props) {
+  (0, _util.checkPropTypes)(_ScrollbarTrack, props);
   var ariaLabel = props['aria-label'],
     cbAlertScrollbarTrack = props.cbAlertScrollbarTrack,
     focusableScrollbar = props.focusableScrollbar,
@@ -132,8 +134,8 @@ var ScrollbarTrack = exports.ScrollbarTrackBase = exports.ScrollbarTrack = funct
     }, "announce")]
   }));
 };
-ScrollbarTrack.displayName = 'ScrollbarTrack';
-ScrollbarTrack.propTypes = /** @lends limestone/useScroll.ScrollbarTrack.prototype */{
+_ScrollbarTrack.displayName = 'ScrollbarTrack';
+_ScrollbarTrack.propTypes = /** @lends limestone/useScroll.ScrollbarTrack.prototype */{
   /**
    * The aria label for the component.
    *
@@ -199,11 +201,11 @@ ScrollbarTrack.propTypes = /** @lends limestone/useScroll.ScrollbarTrack.prototy
    */
   vertical: _propTypes["default"].bool
 };
-ScrollbarTrack.defaultProps = {
+_ScrollbarTrack.defaultProps = {
   cbAlertScrollbarTrack: nop,
   focusableScrollbar: false,
   onInteractionForScroll: nop,
   rtl: false,
   vertical: true
 };
-var _default = exports["default"] = ScrollbarTrack;
+var _default = exports["default"] = _ScrollbarTrack;

package/useScroll/ScrollbarTrack.module.css

@@ -1,5 +1,5 @@
 .scrollbarTrack {
-  --scrollbar-track-margin: 0.25rem;
+  --scrollbar-track-margin: var(--primitive-spacing-12);
   --scrollbar-thumb-size-ratio: 1;
   --scrollbar-thumb-progress-ratio: 0;
   --scrollbar-thumb-size: calc(100% * var(--scrollbar-thumb-size-ratio));
@@ -20,7 +20,7 @@
 }
 .scrollbarTrack.focusableScrollbar {
   opacity: 1;
-  --scrollbar-track-margin: 0.5rem;
+  --scrollbar-track-margin: var(--primitive-spacing-24);
 }
 .scrollbarTrack .thumb {
   background: var(--semantic-color-surface-scroll-handle);
@@ -87,12 +87,12 @@
 }
 .scrollbarTrack.vertical .thumb:focus .directionIndicator.backward {
   top: calc(9px - 0.25rem);
-  left: 0.125rem;
+  left: var(--primitive-spacing-6);
 }
 .scrollbarTrack.vertical .thumb:focus .directionIndicator.forward {
   transform: rotate(180deg);
   bottom: calc(9px - 0.25rem);
-  left: 0.125rem;
+  left: var(--primitive-spacing-6);
 }
 .scrollbarTrack:not(.vertical) {
   margin: var(--scrollbar-track-margin) 0;
@@ -113,13 +113,13 @@
 :global(.spotlight-input-mouse) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.backward {
   transform: rotate(-90deg);
   left: calc(9px - 0.25rem);
-  top: calc(0.125rem / 2);
+  top: calc(var(--primitive-spacing-6) / 2);
 }
 :global(.spotlight-input-key) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.forward,
 :global(.spotlight-input-mouse) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.forward {
   transform: rotate(90deg);
   right: calc(9px - 0.25rem);
-  top: calc(0.125rem / 2);
+  top: calc(var(--primitive-spacing-6) / 2);
 }
 :global(.spotlight-input-touch) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):active {
   height: 0.625rem;
@@ -127,10 +127,10 @@
 :global(.spotlight-input-touch) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):active .directionIndicator.backward {
   transform: rotate(-90deg);
   left: calc(9px - 0.25rem);
-  top: calc(0.125rem / 2);
+  top: calc(var(--primitive-spacing-6) / 2);
 }
 :global(.spotlight-input-touch) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):active .directionIndicator.forward {
   transform: rotate(90deg);
   right: calc(9px - 0.25rem);
-  top: calc(0.125rem / 2);
+  top: calc(var(--primitive-spacing-6) / 2);
 }

package/useScroll/useEvent.js

@@ -164,6 +164,12 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
 
   // Functions
 
+  function applyLastInputType(ev) {
+    var keyCode = ev.keyCode;
+    if ((0, _spotlight.getDirection)(keyCode)) {
+      scrollContainerHandle.current.lastInputType = 'arrowKey';
+    }
+  }
   function handleKeyDown(ev) {
     var keyCode = ev.keyCode,
       repeat = ev.repeat,
@@ -188,7 +194,6 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
         }
       } else if ((0, _spotlight.getDirection)(keyCode) && (scrollMode === 'translate' || scrollMode === 'native' && !_spotlight["default"].getPointerMode())) {
         var element = _spotlight["default"].getCurrent();
-        scrollContainerHandle.current.lastInputType = 'arrowKey';
         direction = (0, _spotlight.getDirection)(keyCode);
         if (props.overscrollEffectOn.arrowKey && !(element ? (0, _target.getTargetByDirectionFromElement)(direction, element) : null)) {
           checkAndApplyOverscrollEffectByDirection(direction);
@@ -276,6 +281,7 @@ var useEventKey = exports.useEventKey = function useEventKey(props, instances, c
   // Return
 
   return {
+    applyLastInputType: applyLastInputType,
     handleKeyDown: handleKeyDown,
     lastPointer: lastPointer,
     scrollByPageOnPointerMode: scrollByPageOnPointerMode
@@ -342,10 +348,12 @@ var useEventMonitor = exports.useEventMonitor = function useEventMonitor(props,
       scrollByPageOnPointerMode: scrollByPageOnPointerMode
     }
   });
-  lastPointer = lastPointerProp;
 
   // Hooks
 
+  (0, _react.useEffect)(function () {
+    lastPointer = lastPointerProp;
+  }, [lastPointerProp]);
   (0, _react.useEffect)(function () {
     var setMonitorEventTarget = function setMonitorEventTarget(target) {
       scrollers.set(mutableRef.current.pageKeyHandlerObj, target);
@@ -510,7 +518,10 @@ var useEventVoice = exports.useEventVoice = function useEventVoice(props, instan
           scrollVertically = verticalDirection.includes(scroll),
           direction = directionFactor ? -1 : 1,
           pageDistance = direction * (scrollVertically ? bounds.clientHeight : bounds.clientWidth) * paginationPageMultiplier;
-        scrollContainerHandle.current.lastInputType = 'pageKey';
+        var handleRef = scrollContainerHandle;
+        if (handleRef.current) {
+          handleRef.current.lastInputType = 'pageKey';
+        }
         if (direction !== scrollContainerHandle.current.wheelDirection) {
           scrollContainerHandle.current.isScrollAnimationTargetAccumulated = false;
           scrollContainerHandle.current.wheelDirection = direction;

package/useScroll/useScroll.js

@@ -120,6 +120,7 @@ var useThemeScroll = function useThemeScroll(props, instances) {
       hasFocus: hasFocus,
       isContent: isContent
     }),
+    applyLastInputType = _useEventKey.applyLastInputType,
     handleKeyDown = _useEventKey.handleKeyDown,
     lastPointer = _useEventKey.lastPointer,
     scrollByPageOnPointerMode = _useEventKey.scrollByPageOnPointerMode;
@@ -181,7 +182,10 @@ var useThemeScroll = function useThemeScroll(props, instances) {
       direction = isForward ? 1 : -1,
       pageSize = isVerticalScrollBar ? bounds.clientHeight : bounds.clientWidth,
       distance = pageSize * (isPagination ? paginationPageMultiplier : arrowKeyMultiplier);
-    scrollContainerHandle.current.lastInputType = inputType;
+    var handleRef = scrollContainerHandle;
+    if (handleRef.current) {
+      handleRef.current.lastInputType = inputType;
+    }
     if (direction !== wheelDirection) {
       scrollContainerHandle.current.isScrollAnimationTargetAccumulated = false;
       scrollContainerHandle.current.wheelDirection = direction;
@@ -257,7 +261,10 @@ var useThemeScroll = function useThemeScroll(props, instances) {
     // oddly, Scroller manages scrollContainerHandle.current.bounds so if we don't update it here (it is also
     // updated in calculateAndScrollTo, but we might not have made it to that point), it will be
     // out of date when we land back in this method next time.
-    scrollContainerHandle.current.bounds.scrollHeight = scrollContainerHandle.current.getScrollBounds().scrollHeight;
+    var handleRef = scrollContainerHandle;
+    if (handleRef.current) {
+      handleRef.current.bounds.scrollHeight = scrollContainerHandle.current.getScrollBounds().scrollHeight;
+    }
   }
   function handleResizeWindow() {
     var focusedItem = _spotlight["default"].getCurrent();
@@ -272,6 +279,7 @@ var useThemeScroll = function useThemeScroll(props, instances) {
   function addEventListeners(ref) {
     // `ref` is always `scrollContentRef`.
     (0, _utilEvent["default"])('focusin').addEventListener(ref, handleFocus);
+    (0, _utilEvent["default"])('keydown').addEventListener(document, applyLastInputType);
     if (ref.current) {
       addVoiceEventListener(ref);
     }
@@ -466,6 +474,7 @@ var useScroll = exports.useScroll = function useScroll(props) {
     scrollContentWrapper = _useScrollBase.scrollContentWrapper,
     scrollObserver = _useScrollBase.scrollObserver;
   assignProperties('scrollContainerProps', {
+    // eslint-disable-line react-hooks/refs
     className: [className, _useScrollModule["default"].scroll, _OverscrollEffectModule["default"].scroll, focusableScrollbar ? _useScrollModule["default"].focusableScrollbar : null, focusableScrollbar && isVerticalScrollbarVisible ? _useScrollModule["default"].verticalPadding : null, isVerticalScrollbarVisible && isHorizontalScrollbarVisible ? _useScrollModule["default"].bidirectional : null],
     style: style,
     'data-spotlight-container': spotlightContainer,
@@ -510,6 +519,7 @@ var useScroll = exports.useScroll = function useScroll(props) {
     scrollbarHandle: verticalScrollbarHandle
   }));
   assignProperties('hoverToScrollProps', {
+    // eslint-disable-line react-hooks/refs
     scrollContainerHandle: scrollContainerHandle,
     scrollObserver: scrollObserver
   });

package/useScroll/useScroll.module.css

@@ -17,10 +17,10 @@
 .scroll .verticalScrollbar {
   position: absolute;
   width: var(--scroll-scrollbar-size);
-  height: calc(100% - 2 * 0.25rem);
+  height: calc(100% - 2 * var(--primitive-spacing-12));
   right: 0;
   top: 0;
-  padding: 0.25rem 0;
+  padding: var(--primitive-spacing-12) 0;
 }
 :global(.enact-locale-right-to-left) .scroll .verticalScrollbar {
   left: 0;
@@ -28,17 +28,17 @@
 }
 .scroll .horizontalScrollbar {
   position: absolute;
-  width: calc(100% - 2 * 0.25rem);
+  width: calc(100% - 2 * var(--primitive-spacing-12));
   height: var(--scroll-scrollbar-size);
   left: 0;
   bottom: 0;
-  padding: 0 0.25rem;
+  padding: 0 var(--primitive-spacing-12);
 }
 .scroll.bidirectional .verticalScrollbar {
-  height: calc(100% - 2 * 0.25rem - var(--scroll-scrollbar-size));
+  height: calc(100% - 2 * var(--primitive-spacing-12) - var(--scroll-scrollbar-size));
 }
 .scroll.bidirectional .horizontalScrollbar {
-  width: calc(100% - 2 * 0.25rem - var(--scroll-scrollbar-size));
+  width: calc(100% - 2 * var(--primitive-spacing-12) - var(--scroll-scrollbar-size));
   left: 0;
 }
 :global(.enact-locale-right-to-left) .scroll.bidirectional .horizontalScrollbar {

package/.travis.yml

@@ -1,40 +0,0 @@
-dist: jammy
-language: node_js
-node_js:
-    - lts/*
-    - node
-sudo: false
-before_install:
-    - sudo apt-get update
-    - sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
-install:
-    - npm config set prefer-offline false
-    - npm install -g codecov
-    - git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
-    - pushd ../cli
-    - npm install
-    - npm link
-    - popd
-    - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
-    - pushd ../enact
-    - npm uninstall @enact/ui-test-utils --prefix packages/i18n
-    - npm install
-    - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install
-    - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock link
-    - npm run interlink
-    - popd
-    - rm -fr node_modules/@enact
-    - npm uninstall @enact/ui-test-utils
-    - npm install
-    - enact link
-script:
-    - echo -e "\x1b\x5b35;1m*** Starting tests...\x1b\x5b0m"
-    - npm test -- --runInBand --coverage
-    - codecov -t $CODECOV_TOKEN
-    - echo -e "\x1b\x5b35;1m*** Tests complete\x1b\x5b0m"
-    - echo -e "\x1b\x5b35;1m*** Starting eslint...\x1b\x5b0m"
-    - npm run lint -- -- --report-unused-disable-directives --max-warnings 0 .
-    - echo -e "\x1b\x5b35;1m*** eslint complete\x1b\x5b0m"
-    - echo -e "\x1b\x5b35;1m*** Starting docs validation...\x1b\x5b0m"
-    - npm run validate-docs
-    - echo -e "\x1b\x5b35;1m*** Docs validation complete\x1b\x5b0m"