@enact/limestone 1.3.0 → 1.9.4

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',
@@ -147,13 +148,15 @@ 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() {
+        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);

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

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;
@@ -272,6 +273,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);
     }

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"