@enact/limestone 1.3.0

package/useScroll/useOverscrollEffect.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverscrollEffect = exports["default"] = void 0;
+var _util = require("@enact/core/util");
+var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
+var _useScroll = require("@enact/ui/useScroll");
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var overscrollTypeDone = _useScroll.constants.overscrollTypeDone,
+  overscrollTypeHold = _useScroll.constants.overscrollTypeHold,
+  overscrollTypeNone = _useScroll.constants.overscrollTypeNone,
+  overscrollTypeOnce = _useScroll.constants.overscrollTypeOnce,
+  overscrollTransitionPrefix = '--scroll-overscroll-transition-',
+  overscrollTranslatePrefix = '--scroll-overscroll-translate-',
+  overscrollTransitionStart = 'transform 300ms cubic-bezier(0.5, 1, 0.89, 1)',
+  overscrollTransitionEnd = 'transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+  overscrollMaxTranslate = _resolution["default"].scale(180),
+  overscrollTimeout = 220;
+var useOverscrollEffect = exports.useOverscrollEffect = function useOverscrollEffect(props, instances) {
+  var scrollContainerHandle = instances.scrollContainerHandle,
+    scrollContentRef = instances.scrollContentRef;
+
+  // Mutable value
+
+  var mutableRef = (0, _react.useRef)({
+    overscrollJobs: {
+      horizontal: {
+        before: null,
+        after: null
+      },
+      vertical: {
+        before: null,
+        after: null
+      }
+    }
+  });
+
+  // Hooks
+
+  var applyOverscrollEffect = (0, _react.useCallback)(function (orientation, edge, type, ratio) {
+    var isHorizontal = orientation === 'horizontal';
+    if (type !== overscrollTypeHold && scrollContentRef.current) {
+      var effectSize = ratio * (edge === 'before' ? 1 : -1) * (isHorizontal && scrollContainerHandle.current.rtl ? -1 : 1) * overscrollMaxTranslate,
+        translate = "translate".concat(isHorizontal ? 'X' : 'Y', "(").concat(effectSize, "px)"),
+        transition = ratio !== 0 ? overscrollTransitionStart : overscrollTransitionEnd;
+      scrollContentRef.current.style.setProperty(overscrollTranslatePrefix + orientation, translate);
+      scrollContentRef.current.style.setProperty(overscrollTransitionPrefix + orientation, transition);
+      if (type === overscrollTypeOnce) {
+        mutableRef.current.overscrollJobs[orientation][edge].start(orientation, edge, overscrollTypeDone, 0);
+      }
+    }
+  }, [scrollContainerHandle, scrollContentRef]);
+  (0, _react.useEffect)(function () {
+    function createOverscrollJob(orientation, edge) {
+      if (!mutableRef.current.overscrollJobs[orientation][edge]) {
+        mutableRef.current.overscrollJobs[orientation][edge] = new _util.Job(applyOverscrollEffect, overscrollTimeout);
+      }
+    }
+    function stopOverscrollJob(orientation, edge) {
+      var job = mutableRef.current.overscrollJobs[orientation][edge];
+      if (job) {
+        job.stop();
+      }
+    }
+    createOverscrollJob('horizontal', 'before');
+    createOverscrollJob('horizontal', 'after');
+    createOverscrollJob('vertical', 'before');
+    createOverscrollJob('vertical', 'after');
+    return function () {
+      stopOverscrollJob('horizontal', 'before');
+      stopOverscrollJob('horizontal', 'after');
+      stopOverscrollJob('vertical', 'before');
+      stopOverscrollJob('vertical', 'after');
+    };
+  }, [applyOverscrollEffect]);
+
+  // Functions
+
+  function clearOverscrollEffect(orientation, edge) {
+    mutableRef.current.overscrollJobs[orientation][edge].startAfter(overscrollTimeout, orientation, edge, overscrollTypeNone, 0);
+    scrollContainerHandle.current.setOverscrollStatus(orientation, edge, overscrollTypeNone, 0);
+  }
+  function checkAndApplyOverscrollEffectByDirection(direction) {
+    var orientation = direction === 'up' || direction === 'down' ? 'vertical' : 'horizontal',
+      bounds = scrollContainerHandle.current.getScrollBounds(),
+      scrollability = orientation === 'vertical' ? scrollContainerHandle.current.canScrollVertically(bounds) : scrollContainerHandle.current.canScrollHorizontally(bounds);
+    if (scrollability) {
+      var isRtl = scrollContainerHandle.current.rtl,
+        edge = direction === 'up' || !isRtl && direction === 'left' || isRtl && direction === 'right' ? 'before' : 'after';
+      scrollContainerHandle.current.checkAndApplyOverscrollEffect(orientation, edge, overscrollTypeOnce);
+    }
+  }
+
+  // Return
+
+  return {
+    applyOverscrollEffect: applyOverscrollEffect,
+    checkAndApplyOverscrollEffectByDirection: checkAndApplyOverscrollEffectByDirection,
+    clearOverscrollEffect: clearOverscrollEffect
+  };
+};
+var _default = exports["default"] = useOverscrollEffect;

package/useScroll/useScroll.js

@@ -0,0 +1,523 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScroll = exports["default"] = exports.dataIndexAttribute = exports.affordanceSize = void 0;
+var _handle = require("@enact/core/handle");
+var _platform = _interopRequireDefault(require("@enact/core/platform"));
+var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
+var _Spottable = require("@enact/spotlight/Spottable");
+var _container = require("@enact/spotlight/src/container");
+var _target = require("@enact/spotlight/src/target");
+var _utils = require("@enact/spotlight/src/utils");
+var _useScroll = require("@enact/ui/useScroll");
+var _utilDOM = _interopRequireDefault(require("@enact/ui/useScroll/utilDOM"));
+var _utilEvent = _interopRequireDefault(require("@enact/ui/useScroll/utilEvent"));
+var _react = require("react");
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _SharedStateDecorator = require("../internal/SharedStateDecorator");
+var _useThemeScrollContentHandle = require("./useThemeScrollContentHandle");
+var _useEvent = require("./useEvent");
+var _useOverscrollEffect2 = _interopRequireDefault(require("./useOverscrollEffect"));
+var _useSpotlight = require("./useSpotlight");
+var _OverscrollEffectModule = _interopRequireDefault(require("./OverscrollEffect.module.css"));
+var _useScrollModule = _interopRequireDefault(require("./useScroll.module.css"));
+var _excluded = ["className", "data-spotlight-container", "data-spotlight-container-disabled", "data-spotlight-id", "data-webos-voice-disabled", "data-webos-voice-focused", "data-webos-voice-group-label", "editable", "focusableScrollbar", "fadeOut", "horizontalScrollThumbAriaLabel", "noAffordance", "scrollMode", "snapToCenter", "style", "verticalScrollThumbAriaLabel"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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; }
+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); } /**
+ * Limestone-themed scrollable hook and behaviors.
+ *
+ * @module limestone/useScroll
+ * @exports affordanceSize
+ * @exports dataIndexAttribute
+ * @exports useScroll
+ * @private
+ */
+var arrowKeyMultiplier = 0.2,
+  affordanceSize = exports.affordanceSize = 48,
+  paginationPageMultiplier = _useScroll.constants.paginationPageMultiplier,
+  reverseDirections = {
+    down: 'up',
+    up: 'down'
+  };
+
+/**
+ * The name of a custom attribute which indicates the index of an item in
+ * {@link limestone/VirtualList.VirtualList|VirtualList} or
+ * {@link limestone/VirtualList.VirtualGridList|VirtualGridList}.
+ *
+ * @constant dataIndexAttribute
+ * @memberof limestone/useScroll
+ * @type {String}
+ * @private
+ */
+var dataIndexAttribute = exports.dataIndexAttribute = 'data-index';
+var isIntersecting = function isIntersecting(elem, container) {
+  return elem && (0, _utils.intersects)((0, _utils.getRect)(container), (0, _utils.getRect)(elem));
+};
+var getIntersectingElement = function getIntersectingElement(elem, container) {
+  return isIntersecting(elem, container) && elem;
+};
+var getTargetInViewByDirectionFromPosition = function getTargetInViewByDirectionFromPosition(direction, position, container) {
+  var target = (0, _target.getTargetByDirectionFromPosition)(direction, position, (0, _container.getContainerId)(container));
+  return getIntersectingElement(target, container);
+};
+var useThemeScroll = function useThemeScroll(props, instances) {
+  var scrollbarTrackCss = props.scrollbarTrackCss,
+    scrollMode = props.scrollMode;
+  var themeScrollContentHandle = instances.themeScrollContentHandle,
+    scrollContentRef = instances.scrollContentRef,
+    scrollContainerHandle = instances.scrollContainerHandle,
+    scrollContainerRef = instances.scrollContainerRef;
+  var contextSharedState = (0, _react.use)(_SharedStateDecorator.SharedState);
+
+  // Mutable value
+
+  var mutableRef = (0, _react.useRef)({
+    animateOnFocus: true,
+    indexToFocus: null,
+    isWheeling: false,
+    lastScrollPositionOnFocus: null,
+    nodeToFocus: null,
+    pointToFocus: null
+  });
+
+  // Hooks
+
+  (0, _useSpotlight.useSpotlightRestore)(props, instances);
+  var _useOverscrollEffect = (0, _useOverscrollEffect2["default"])({}, instances),
+    applyOverscrollEffect = _useOverscrollEffect.applyOverscrollEffect,
+    checkAndApplyOverscrollEffectByDirection = _useOverscrollEffect.checkAndApplyOverscrollEffectByDirection,
+    clearOverscrollEffect = _useOverscrollEffect.clearOverscrollEffect;
+  var _useEventWheel = (0, _useEvent.useEventWheel)(props, _objectSpread(_objectSpread({}, instances), {}, {
+      spottable: mutableRef
+    })),
+    handleWheel = _useEventWheel.handleWheel;
+  var _useEventFocus = (0, _useEvent.useEventFocus)(props, _objectSpread(_objectSpread({}, instances), {}, {
+      spottable: mutableRef
+    })),
+    calculateAndScrollTo = _useEventFocus.calculateAndScrollTo,
+    handleFocus = _useEventFocus.handleFocus,
+    hasFocus = _useEventFocus.hasFocus;
+  var _useEventKey = (0, _useEvent.useEventKey)(props, _objectSpread(_objectSpread({}, instances), {}, {
+      spottable: mutableRef
+    }), {
+      checkAndApplyOverscrollEffectByDirection: checkAndApplyOverscrollEffectByDirection,
+      hasFocus: hasFocus,
+      isContent: isContent
+    }),
+    handleKeyDown = _useEventKey.handleKeyDown,
+    lastPointer = _useEventKey.lastPointer,
+    scrollByPageOnPointerMode = _useEventKey.scrollByPageOnPointerMode;
+  (0, _useEvent.useEventMonitor)({}, instances, {
+    lastPointer: lastPointer,
+    scrollByPageOnPointerMode: scrollByPageOnPointerMode
+  });
+  var _useEventMouse = (0, _useEvent.useEventMouse)({}, instances),
+    handleFlick = _useEventMouse.handleFlick,
+    handleMouseDown = _useEventMouse.handleMouseDown;
+  var _useEventTouch = (0, _useEvent.useEventTouch)(),
+    handleTouchStart = _useEventTouch.handleTouchStart;
+  var _useEventVoice = (0, _useEvent.useEventVoice)(props, instances),
+    addVoiceEventListener = _useEventVoice.addVoiceEventListener,
+    removeVoiceEventListener = _useEventVoice.removeVoiceEventListener,
+    stopVoice = _useEventVoice.stopVoice;
+  var scrollbarProps = {
+    cbAlertScrollbarTrack: alertScrollbarTrack,
+    onInteractionForScroll: onInteractionForScroll,
+    scrollbarTrackCss: scrollbarTrackCss
+  };
+
+  // Functions
+
+  function isContent(element) {
+    return element && _utilDOM["default"].containsDangerously(scrollContentRef, element);
+  }
+  function scrollTo(opt) {
+    mutableRef.current.indexToFocus = opt.focus && typeof opt.index === 'number' ? opt.index : null;
+    mutableRef.current.nodeToFocus = opt.focus && opt.node instanceof Object && opt.node.nodeType === 1 ? opt.node : null;
+  }
+  function start(animate) {
+    if (scrollMode === 'native' && !animate) {
+      focusOnItem();
+    }
+  }
+  function stop() {
+    if (!props['data-spotlight-container-disabled']) {
+      themeScrollContentHandle.current.setContainerDisabled(false);
+    }
+    if (themeScrollContentHandle.current.pauseSpotlight) {
+      themeScrollContentHandle.current.pauseSpotlight(false);
+    }
+    focusOnItem();
+    mutableRef.current.lastScrollPositionOnFocus = null;
+    mutableRef.current.isWheeling = false;
+    stopVoice();
+  }
+  function scrollStopOnScroll() {
+    stop();
+  }
+  function onInteractionForScroll(_ref) {
+    var inputType = _ref.inputType,
+      isForward = _ref.isForward,
+      isPagination = _ref.isPagination,
+      isVerticalScrollBar = _ref.isVerticalScrollBar;
+    var wheelDirection = scrollContainerHandle.current.wheelDirection,
+      bounds = scrollContainerHandle.current.getScrollBounds(),
+      direction = isForward ? 1 : -1,
+      pageSize = isVerticalScrollBar ? bounds.clientHeight : bounds.clientWidth,
+      distance = pageSize * (isPagination ? paginationPageMultiplier : arrowKeyMultiplier);
+    scrollContainerHandle.current.lastInputType = inputType;
+    if (direction !== wheelDirection) {
+      scrollContainerHandle.current.isScrollAnimationTargetAccumulated = false;
+      scrollContainerHandle.current.wheelDirection = direction;
+    }
+    scrollContainerHandle.current.scrollToAccumulatedTarget(direction * distance, isVerticalScrollBar, props.overscrollEffectOn[inputType]);
+  }
+  function alertScrollbarTrack() {
+    var bounds = scrollContainerHandle.current.getScrollBounds();
+    scrollContainerHandle.current.showScrollbarTrack(bounds);
+    scrollContainerHandle.current.startHidingScrollbarTrack();
+  }
+  function focusOnItem() {
+    var isItemFocused = false;
+    if (mutableRef.current.indexToFocus !== null && typeof themeScrollContentHandle.current.focusByIndex === 'function') {
+      themeScrollContentHandle.current.focusByIndex(mutableRef.current.indexToFocus);
+      mutableRef.current.indexToFocus = null;
+      isItemFocused = true;
+    }
+    if (mutableRef.current.nodeToFocus !== null && typeof themeScrollContentHandle.current.focusOnNode === 'function') {
+      themeScrollContentHandle.current.focusOnNode(mutableRef.current.nodeToFocus);
+      mutableRef.current.nodeToFocus = null;
+      isItemFocused = true;
+    }
+    if (mutableRef.current.pointToFocus !== null) {
+      // no need to focus on pointer mode
+      if (!_spotlight["default"].getPointerMode()) {
+        var _mutableRef$current$p = mutableRef.current.pointToFocus,
+          direction = _mutableRef$current$p.direction,
+          x = _mutableRef$current$p.x,
+          y = _mutableRef$current$p.y,
+          position = {
+            x: x,
+            y: y
+          },
+          elemFromPoint = document.elementFromPoint(x, y),
+          target = elemFromPoint && elemFromPoint.closest && getIntersectingElement(elemFromPoint.closest(".".concat(_Spottable.spottableClass)), scrollContainerRef.current) || getTargetInViewByDirectionFromPosition(direction, position, scrollContainerRef.current) || getTargetInViewByDirectionFromPosition(reverseDirections[direction], position, scrollContainerRef.current);
+        if (target) {
+          _spotlight["default"].focus(target);
+          isItemFocused = true;
+        }
+      }
+      mutableRef.current.pointToFocus = null;
+    }
+    if (_spotlight["default"].getPointerMode() && !isItemFocused) {
+      _spotlight["default"].focus(scrollContainerRef.current, {
+        enterTo: 'topmost'
+      });
+    }
+  }
+  function handleScroll(ev) {
+    var x = ev.scrollLeft,
+      y = ev.scrollTop,
+      id = props.id;
+    (0, _handle.forward)('onScroll', ev, props);
+    if (id && contextSharedState && contextSharedState.set) {
+      contextSharedState.set(ev, props);
+      contextSharedState.set("".concat(id, ".scrollPosition"), {
+        x: x,
+        y: y
+      });
+    }
+  }
+
+  // Callback for scroller updates; calculate and, if needed, scroll to new position based on focused item.
+  function handleScrollerUpdate() {
+    if (scrollContainerHandle.current.scrollToInfo === null) {
+      var scrollHeight = scrollContainerHandle.current.getScrollBounds().scrollHeight;
+      if (scrollHeight !== scrollContainerHandle.current.bounds.scrollHeight) {
+        calculateAndScrollTo();
+      }
+    }
+
+    // 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;
+  }
+  function handleResizeWindow() {
+    var focusedItem = _spotlight["default"].getCurrent();
+    if (focusedItem) {
+      focusedItem.scrollIntoView(true);
+      return false;
+    }
+    return true;
+  }
+
+  // FIXME setting event handlers directly to work on the V8 snapshot.
+  function addEventListeners(ref) {
+    // `ref` is always `scrollContentRef`.
+    (0, _utilEvent["default"])('focusin').addEventListener(ref, handleFocus);
+    if (ref.current) {
+      addVoiceEventListener(ref);
+    }
+  }
+
+  // FIXME setting event handlers directly to work on the V8 snapshot.
+  function removeEventListeners(ref) {
+    // `ref` is always `scrollContentRef`.
+    (0, _utilEvent["default"])('focusin').removeEventListener(ref, handleFocus);
+    if (ref.current) {
+      removeVoiceEventListener(ref);
+    }
+  }
+  function preventScroll(ev) {
+    if (_spotlight["default"].isPaused() && _spotlight["default"].getPausedInstance() === 'Popup' && (0, _spotlight.getDirection)(ev.keyCode)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
+  }
+
+  // Return
+
+  return {
+    addEventListeners: addEventListeners,
+    applyOverscrollEffect: applyOverscrollEffect,
+    clearOverscrollEffect: clearOverscrollEffect,
+    handleFlick: handleFlick,
+    handleKeyDown: handleKeyDown,
+    handleMouseDown: handleMouseDown,
+    handleResizeWindow: handleResizeWindow,
+    handleScroll: handleScroll,
+    handleScrollerUpdate: handleScrollerUpdate,
+    handleTouchStart: handleTouchStart,
+    handleWheel: handleWheel,
+    removeEventListeners: removeEventListeners,
+    preventScroll: preventScroll,
+    scrollbarProps: scrollbarProps,
+    scrollStopOnScroll: scrollStopOnScroll,
+    scrollTo: scrollTo,
+    start: start,
+    stop: stop
+  };
+};
+
+/**
+ * A custom hook that passes Limestone-themed scrollable behavior information as its render prop.
+ *
+ * @class
+ * @memberof limestone/useScroll
+ * @ui
+ * @private
+ */
+var useScroll = exports.useScroll = function useScroll(props) {
+  var className = props.className,
+    spotlightContainer = props['data-spotlight-container'],
+    spotlightContainerDisabled = props['data-spotlight-container-disabled'],
+    spotlightId = props['data-spotlight-id'],
+    voiceDisabled = props['data-webos-voice-disabled'],
+    voiceFocused = props['data-webos-voice-focused'],
+    voiceGroupLabel = props['data-webos-voice-group-label'],
+    editable = props.editable,
+    focusableScrollbar = props.focusableScrollbar,
+    fadeOut = props.fadeOut,
+    horizontalScrollThumbAriaLabel = props.horizontalScrollThumbAriaLabel,
+    noAffordance = props.noAffordance,
+    scrollMode = props.scrollMode,
+    snapToCenter = props.snapToCenter,
+    style = props.style,
+    verticalScrollThumbAriaLabel = props.verticalScrollThumbAriaLabel,
+    rest = _objectWithoutProperties(props, _excluded);
+  delete rest.scrollbarTrackCss;
+  delete rest.scrollToContentContainerOnFocus;
+
+  // Mutable value
+
+  var scrollContainerRef = (0, _react.useRef)();
+  var scrollContentHandle = (0, _react.useRef)();
+  var scrollContentRef = (0, _react.useRef)();
+  var itemRefs = (0, _react.useRef)([]);
+  var horizontalScrollbarHandle = (0, _react.useRef)();
+  var verticalScrollbarHandle = (0, _react.useRef)();
+
+  // Handles
+
+  var _useThemeScrollConten = (0, _useThemeScrollContentHandle.useThemeScrollContentHandle)(),
+    _useThemeScrollConten2 = _slicedToArray(_useThemeScrollConten, 2),
+    themeScrollContentHandle = _useThemeScrollConten2[0],
+    setThemeScrollContentHandle = _useThemeScrollConten2[1];
+  var scrollContainerHandle = (0, _react.useRef)({}); // To prevent referencing errors before calling `setScrollContainerHandle`, an empty object is provided as a default.
+  /* Properties in `scrollContainerHandle` provided by `setScrollContainerHandle`
+  	animator
+  	applyOverscrollEffect
+  	bounds
+  	calculateDistanceByWheel
+  	canScrollHorizontally
+  	canScrollVertically
+  	checkAndApplyOverscrollEffect
+  	getScrollBounds
+  	isDragging
+  	isScrollAnimationTargetAccumulated
+  	lastInputType
+  	rtl
+  	scrollBounds
+  	scrollHeight
+  	scrolling
+  	scrollLeft
+  	scrollTo
+  	scrollToAccumulatedTarget
+  	scrollToInfo
+  	scrollTop
+  	setOverscrollStatus
+  	showScrollbarTrack
+  	start
+  	startHidingScrollbarTrack
+  	stop
+  	wheelDirection
+  */
+
+  var setScrollContainerHandle = function setScrollContainerHandle(handle) {
+    scrollContainerHandle.current = handle;
+  };
+
+  // Hooks
+
+  var instance = {
+    // Ref
+    scrollContainerRef: scrollContainerRef,
+    scrollContentRef: scrollContentRef,
+    // Adapter
+    themeScrollContentHandle: themeScrollContentHandle,
+    scrollContainerHandle: scrollContainerHandle,
+    scrollContentHandle: scrollContentHandle
+  };
+  var collectionOfProperties = {},
+    assignProperties = (0, _useScroll.assignPropertiesOf)(collectionOfProperties),
+    scrollProps = {};
+  var _useThemeScroll = useThemeScroll(props, instance),
+    addEventListeners = _useThemeScroll.addEventListeners,
+    applyOverscrollEffect = _useThemeScroll.applyOverscrollEffect,
+    clearOverscrollEffect = _useThemeScroll.clearOverscrollEffect,
+    handleFlick = _useThemeScroll.handleFlick,
+    handleKeyDown = _useThemeScroll.handleKeyDown,
+    handleMouseDown = _useThemeScroll.handleMouseDown,
+    handleResizeWindow = _useThemeScroll.handleResizeWindow,
+    handleScroll = _useThemeScroll.handleScroll,
+    handleScrollerUpdate = _useThemeScroll.handleScrollerUpdate,
+    handleTouchStart = _useThemeScroll.handleTouchStart,
+    handleWheel = _useThemeScroll.handleWheel,
+    removeEventListeners = _useThemeScroll.removeEventListeners,
+    preventScroll = _useThemeScroll.preventScroll,
+    scrollbarProps = _useThemeScroll.scrollbarProps,
+    scrollStopOnScroll = _useThemeScroll.scrollStopOnScroll,
+    scrollTo = _useThemeScroll.scrollTo,
+    start = _useThemeScroll.start,
+    stop = _useThemeScroll.stop;
+
+  // Render
+
+  if (scrollMode === 'translate') {
+    scrollProps.stop = stop;
+  } else {
+    scrollProps.preventScroll = preventScroll;
+    scrollProps.scrollStopOnScroll = scrollStopOnScroll;
+    scrollProps.start = start;
+  }
+  var _useScrollBase = (0, _useScroll.useScrollBase)(_objectSpread(_objectSpread(_objectSpread({}, rest), scrollProps), {}, {
+      assignProperties: assignProperties,
+      noScrollByDrag: !_platform["default"].touchScreen,
+      addEventListeners: addEventListeners,
+      applyOverscrollEffect: applyOverscrollEffect,
+      clearOverscrollEffect: clearOverscrollEffect,
+      handleResizeWindow: handleResizeWindow,
+      horizontalScrollbarHandle: horizontalScrollbarHandle,
+      onFlick: handleFlick,
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      onScroll: handleScroll,
+      onWheel: handleWheel,
+      removeEventListeners: removeEventListeners,
+      scrollTo: scrollTo,
+      setScrollContainerHandle: setScrollContainerHandle,
+      scrollMode: scrollMode,
+      scrollContentHandle: scrollContentHandle,
+      scrollContentRef: scrollContentRef,
+      scrollContainerRef: scrollContainerRef,
+      snapToCenter: snapToCenter,
+      spotlightContainerDisabled: spotlightContainerDisabled,
+      verticalScrollbarHandle: verticalScrollbarHandle
+    })),
+    isHorizontalScrollbarVisible = _useScrollBase.isHorizontalScrollbarVisible,
+    isVerticalScrollbarVisible = _useScrollBase.isVerticalScrollbarVisible,
+    scrollContentWrapper = _useScrollBase.scrollContentWrapper,
+    scrollObserver = _useScrollBase.scrollObserver;
+  assignProperties('scrollContainerProps', {
+    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,
+    'data-spotlight-container-disabled': spotlightContainerDisabled,
+    'data-spotlight-id': spotlightId,
+    onTouchStart: handleTouchStart,
+    ref: scrollContainerRef
+  });
+  var voiceProps = {
+    'data-webos-voice-disabled': voiceDisabled,
+    'data-webos-voice-focused': voiceFocused,
+    'data-webos-voice-group-label': voiceGroupLabel
+  };
+  assignProperties('scrollContentProps', _objectSpread(_objectSpread(_objectSpread({}, props.itemRenderer ? {
+    itemRefs: itemRefs,
+    noAffordance: noAffordance,
+    snapToCenter: snapToCenter
+  } : {
+    editable: editable,
+    fadeOut: fadeOut
+  }), voiceProps), {}, {
+    className: [props.direction === 'both' || props.direction === 'vertical' ? _OverscrollEffectModule["default"].vertical : _OverscrollEffectModule["default"].horizontal, _useScrollModule["default"].scrollContent],
+    onUpdate: handleScrollerUpdate,
+    scrollContainerRef: scrollContainerRef,
+    setThemeScrollContentHandle: setThemeScrollContentHandle,
+    spotlightId: spotlightId,
+    scrollContainerHandle: scrollContainerHandle,
+    scrollContentHandle: scrollContentHandle,
+    scrollContentRef: scrollContentRef
+  }));
+  var scrollThumbAriaLabelForByEnter = focusableScrollbar === 'byEnter' ? ' ' + (0, _$L["default"])('press ok button to read text') : '';
+  assignProperties('horizontalScrollbarProps', _objectSpread(_objectSpread({}, scrollbarProps), {}, {
+    'aria-label': horizontalScrollThumbAriaLabel == null ? (0, _$L["default"])('scroll left or right with left right button') + scrollThumbAriaLabelForByEnter : horizontalScrollThumbAriaLabel,
+    className: [_useScrollModule["default"].horizontalScrollbar],
+    focusableScrollbar: focusableScrollbar,
+    scrollbarHandle: horizontalScrollbarHandle
+  }));
+  assignProperties('verticalScrollbarProps', _objectSpread(_objectSpread({}, scrollbarProps), {}, {
+    'aria-label': verticalScrollThumbAriaLabel == null ? (0, _$L["default"])('scroll up or down with up down button') + scrollThumbAriaLabelForByEnter : verticalScrollThumbAriaLabel,
+    className: [_useScrollModule["default"].verticalScrollbar],
+    focusableScrollbar: focusableScrollbar,
+    scrollbarHandle: verticalScrollbarHandle
+  }));
+  assignProperties('hoverToScrollProps', {
+    scrollContainerHandle: scrollContainerHandle,
+    scrollObserver: scrollObserver
+  });
+  return _objectSpread(_objectSpread({}, collectionOfProperties), {}, {
+    scrollContentWrapper: scrollContentWrapper,
+    scrollContentHandle: scrollContentHandle,
+    isHorizontalScrollbarVisible: isHorizontalScrollbarVisible,
+    isVerticalScrollbarVisible: isVerticalScrollbarVisible
+  });
+};
+var _default = exports["default"] = useScroll;

package/useScroll/useScroll.module.css

@@ -0,0 +1,49 @@
+.verticalPadding {
+  padding-left: 0;
+  padding-right: 0.5rem;
+}
+:global(.enact-locale-right-to-left) .verticalPadding {
+  padding-left: 0.5rem;
+  padding-right: 0;
+}
+.scroll {
+  --scroll-scrollbar-size: 0.75rem;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.scroll.focusableScrollbar {
+  --scroll-scrollbar-size: 1.25rem;
+}
+.scroll .verticalScrollbar {
+  position: absolute;
+  width: var(--scroll-scrollbar-size);
+  height: calc(100% - 2 * 0.25rem);
+  right: 0;
+  top: 0;
+  padding: 0.25rem 0;
+}
+:global(.enact-locale-right-to-left) .scroll .verticalScrollbar {
+  left: 0;
+  right: initial;
+}
+.scroll .horizontalScrollbar {
+  position: absolute;
+  width: calc(100% - 2 * 0.25rem);
+  height: var(--scroll-scrollbar-size);
+  left: 0;
+  bottom: 0;
+  padding: 0 0.25rem;
+}
+.scroll.bidirectional .verticalScrollbar {
+  height: calc(100% - 2 * 0.25rem - var(--scroll-scrollbar-size));
+}
+.scroll.bidirectional .horizontalScrollbar {
+  width: calc(100% - 2 * 0.25rem - var(--scroll-scrollbar-size));
+  left: 0;
+}
+:global(.enact-locale-right-to-left) .scroll.bidirectional .horizontalScrollbar {
+  left: var(--scroll-scrollbar-size);
+}
+.scroll .scrollContent {
+  box-sizing: border-box;
+}