@enact/limestone 1.3.0

package/useScroll/HoverToScroll.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HoverToScroll = void 0;
+var _keymap = require("@enact/core/keymap");
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
+var _pointer = require("@enact/spotlight/src/pointer");
+var _useScroll = require("@enact/ui/useScroll");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _HoverToScrollModule = _interopRequireDefault(require("./HoverToScroll.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["scrollContainerHandle"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 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 _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 _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); }
+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; }
+var epsilon = _useScroll.constants.epsilon;
+var nop = function nop() {};
+var getBoundsPropertyNames = function getBoundsPropertyNames(direction) {
+  return direction === 'vertical' ? {
+    axis: 'y',
+    canScrollFunc: 'canScrollVertically',
+    clientSize: 'clientHeight',
+    maxPosition: 'maxTop',
+    scrollPosition: 'scrollTop'
+  } : {
+    axis: 'x',
+    canScrollFunc: 'canScrollHorizontally',
+    clientSize: 'clientWidth',
+    maxPosition: 'maxLeft',
+    scrollPosition: 'scrollLeft'
+  };
+};
+var hoverToScrollMultiplier = {
+  horizontal: 0.015,
+  vertical: 0.04
+};
+var directionToFocus = {
+  horizontal: {
+    before: 'right',
+    after: 'left'
+  },
+  vertical: {
+    before: 'down',
+    after: 'up'
+  }
+};
+
+/**
+ * A hover area to scroll for a single direction.
+ *
+ * @class HoverToScrollBase
+ * @memberof limestone/useScroll.HoverToScroll
+ * @ui
+ * @private
+ */
+var HoverToScrollBase = function HoverToScrollBase(props) {
+  var direction = props.direction,
+    scrollContainer = props.scrollContainerHandle.current,
+    _props$scrollObserver = props.scrollObserver,
+    addObserverOnScroll = _props$scrollObserver.addObserverOnScroll,
+    removeObserverOnScroll = _props$scrollObserver.removeObserverOnScroll;
+
+  // Mutable value
+
+  var mutableRef = (0, _react.useRef)({
+    hoveredPosition: null,
+    hoverToScrollRafId: null,
+    stopScrollByHover: false
+  });
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    after = _useState2[0],
+    setAfter = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    before = _useState4[0],
+    setBefore = _useState4[1];
+
+  // Functions
+
+  var handleGlobalKeyDown = (0, _react.useCallback)(function (_ref) {
+    var keyCode = _ref.keyCode;
+    var position = mutableRef.current.hoveredPosition;
+    if (scrollContainer.rtl && direction === 'horizontal') {
+      position = position === 'after' ? 'before' : 'after';
+    }
+    if ((0, _spotlight.getDirection)(keyCode) || (0, _keymap.is)('enter', keyCode)) {
+      _spotlight["default"].focusNextFromPoint(directionToFocus[direction][position], (0, _pointer.getLastPointerPosition)());
+      scrollContainer.stop();
+    } else if ((0, _keymap.is)('pointerHide', keyCode)) {
+      mutableRef.current.stopScrollByHover = true;
+    }
+  }, [direction, scrollContainer]);
+  var startRaf = (0, _react.useCallback)(function (job) {
+    scrollContainer.isHoveringToScroll = true;
+    if (typeof window === 'object' && mutableRef.current.hoveredPosition) {
+      mutableRef.current.hoverToScrollRafId = window.requestAnimationFrame(job);
+      if (typeof document === 'object') {
+        document.addEventListener('keydown', handleGlobalKeyDown, {
+          capture: true
+        });
+      }
+    }
+  }, [handleGlobalKeyDown, scrollContainer]);
+  var stopRaf = (0, _react.useCallback)(function () {
+    scrollContainer.isHoveringToScroll = false;
+    if (typeof window === 'object' && mutableRef.current.hoverToScrollRafId !== null) {
+      window.cancelAnimationFrame(mutableRef.current.hoverToScrollRafId);
+      mutableRef.current.hoverToScrollRafId = null;
+      mutableRef.current.hoveredPosition = null;
+      mutableRef.current.stopScrollByHover = false;
+      if (typeof document === 'object') {
+        document.removeEventListener('keydown', handleGlobalKeyDown, {
+          capture: true
+        });
+      }
+    }
+  }, [handleGlobalKeyDown, scrollContainer]);
+  var getPointerEnterHandler = (0, _react.useCallback)(function (position) {
+    if (typeof window === 'object') {
+      var _getBoundsPropertyNam = getBoundsPropertyNames(direction),
+        axis = _getBoundsPropertyNam.axis,
+        clientSize = _getBoundsPropertyNam.clientSize,
+        maxPosition = _getBoundsPropertyNam.maxPosition,
+        scrollPosition = _getBoundsPropertyNam.scrollPosition;
+      var bounds = scrollContainer.getScrollBounds();
+      return function () {
+        var distance = (position === 'before' ? -1 : 1) *
+        // scroll direction
+        bounds[clientSize] *
+        // scroll page size
+        hoverToScrollMultiplier[direction]; // a scrolling speed factor
+
+        mutableRef.current.hoveredPosition = position;
+        mutableRef.current.stopScrollByHover = false;
+        var _scrollByHover = function scrollByHover() {
+          if (!mutableRef.current.stopScrollByHover) {
+            scrollContainer.scrollTo({
+              position: _defineProperty({}, axis, (0, _util.clamp)(0, bounds[maxPosition], scrollContainer[scrollPosition] + distance)),
+              animate: false
+            });
+            startRaf(_scrollByHover);
+          } else {
+            stopRaf(); // for other type input during hovering
+          }
+        };
+        startRaf(_scrollByHover);
+      };
+    } else {
+      return nop;
+    }
+  }, [direction, scrollContainer, startRaf, stopRaf]);
+  var update = (0, _react.useCallback)(function () {
+    var _getBoundsPropertyNam2 = getBoundsPropertyNames(direction),
+      canScrollFunc = _getBoundsPropertyNam2.canScrollFunc,
+      maxPosition = _getBoundsPropertyNam2.maxPosition,
+      scrollPosition = _getBoundsPropertyNam2.scrollPosition;
+    var canScroll = scrollContainer[canScrollFunc],
+      getScrollBounds = scrollContainer.getScrollBounds,
+      currentPosition = scrollContainer[scrollPosition];
+    var bounds = getScrollBounds();
+    var position = mutableRef.current.hoveredPosition;
+    var curAfter = false,
+      curBefore = false;
+    if (canScroll(bounds)) {
+      curAfter = currentPosition < bounds[maxPosition] - epsilon;
+      curBefore = currentPosition > 0;
+    }
+    if (after !== curAfter && position === 'after' || before !== curBefore && position === 'before') {
+      stopRaf();
+    }
+    setAfter(curAfter);
+    setBefore(curBefore);
+  }, [direction, after, before, scrollContainer, stopRaf]);
+
+  // Hooks
+
+  (0, _react.useLayoutEffect)(function () {
+    addObserverOnScroll(update);
+    return function () {
+      removeObserverOnScroll(update);
+    };
+  }, [update, addObserverOnScroll, removeObserverOnScroll]);
+  (0, _react.useLayoutEffect)(function () {
+    if (scrollContainer) {
+      var canScroll = scrollContainer[getBoundsPropertyNames(direction).canScrollFunc],
+        getScrollBounds = scrollContainer.getScrollBounds;
+      if (canScroll && getScrollBounds) {
+        update();
+      } else {
+        setAfter(null);
+        setBefore(null);
+      }
+    }
+  }, [update, direction, scrollContainer, props]);
+  (0, _react.useLayoutEffect)(function () {
+    return function () {
+      stopRaf(); // for hoverToScroll prop change during hovering
+    };
+  }, [stopRaf]);
+
+  // Render
+
+  var renderHoverArea = (0, _react.useCallback)(function (position) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(_HoverToScrollModule["default"].hoverToScroll, _HoverToScrollModule["default"][direction], _HoverToScrollModule["default"][position]),
+      onPointerEnter: getPointerEnterHandler(position),
+      onPointerLeave: stopRaf
+    }, 'hover' + direction + position);
+  }, [direction, getPointerEnterHandler, stopRaf]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [before ? renderHoverArea('before') : null, after ? renderHoverArea('after') : null]
+  });
+};
+HoverToScrollBase.displayName = 'HoverToScrollBase';
+HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.HoverToScrollBase.prototype */{
+  direction: _propTypes["default"].string,
+  scrollContainerHandle: _propTypes["default"].object
+};
+
+/**
+ * A hover area to scroll.
+ *
+ * @class HoverToScroll
+ * @memberof limestone/useScroll
+ * @ui
+ * @private
+ */
+var HoverToScroll = exports.HoverToScroll = function HoverToScroll(_ref2) {
+  var scrollContainerHandle = _ref2.scrollContainerHandle,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  return scrollContainerHandle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HoverToScrollBase, _objectSpread(_objectSpread({
+      scrollContainerHandle: scrollContainerHandle
+    }, rest), {}, {
+      direction: "horizontal"
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(HoverToScrollBase, _objectSpread(_objectSpread({
+      scrollContainerHandle: scrollContainerHandle
+    }, rest), {}, {
+      direction: "vertical"
+    }))]
+  }) : null;
+};
+HoverToScroll.displayName = 'HoverToScroll';
+HoverToScroll.propTypes = /** @lends limestone/useScroll.HoverToScroll.prototype */{
+  scrollContainerHandle: _propTypes["default"].object
+};
+var _default = exports["default"] = HoverToScroll;

package/useScroll/HoverToScroll.module.css

@@ -0,0 +1,38 @@
+.hoverToScroll {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+}
+:global(.spotlight-input-mouse) .hoverToScroll {
+  pointer-events: auto;
+}
+:global(.spotlight-input-touch) .hoverToScroll {
+  pointer-events: var(--scroller-hover-to-scroll-by-touch, none);
+}
+.hoverToScroll.vertical {
+  width: 100%;
+  height: 2.5rem;
+}
+.hoverToScroll.vertical.after {
+  bottom: 0;
+}
+.hoverToScroll.horizontal {
+  width: 2.5rem;
+  height: 100%;
+}
+.hoverToScroll.horizontal.before {
+  left: 0;
+  right: auto;
+}
+:global(.enact-locale-right-to-left) .hoverToScroll.horizontal.before {
+  left: auto;
+  right: 0;
+}
+.hoverToScroll.horizontal.after {
+  left: auto;
+  right: 0;
+}
+:global(.enact-locale-right-to-left) .hoverToScroll.horizontal.after {
+  left: 0;
+  right: auto;
+}

package/useScroll/OverscrollEffect.module.css

@@ -0,0 +1,14 @@
+.scroll {
+  --scroll-overscroll-translate-horizontal: none;
+  --scroll-overscroll-transition-horizontal: transform 0 unset;
+  --scroll-overscroll-translate-vertical: none;
+  --scroll-overscroll-transition-vertical: transform 0 unset;
+}
+.horizontal {
+  transform: var(--scroll-overscroll-translate-horizontal);
+  transition: var(--scroll-overscroll-transition-horizontal);
+}
+.vertical {
+  transform: var(--scroll-overscroll-translate-vertical);
+  transition: var(--scroll-overscroll-transition-vertical);
+}

package/useScroll/Scrollbar.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ScrollbarBase = exports.Scrollbar = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Scrollbar = require("@enact/ui/useScroll/Scrollbar");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _ScrollbarTrack = _interopRequireDefault(require("./ScrollbarTrack"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _ScrollbarModule = _interopRequireDefault(require("./Scrollbar.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className"],
+  _excluded2 = ["aria-label", "cbAlertScrollbarTrack", "focusableScrollbar", "onInteractionForScroll", "rtl", "scrollbarTrackCss"],
+  _excluded3 = ["css", "minThumbSize", "vertical"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
+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; }
+var useThemeScrollbar = function useThemeScrollbar(props) {
+  var _useScrollbarBase = (0, _Scrollbar.useScrollbar)(props),
+    restProps = _useScrollbarBase.restProps,
+    _useScrollbarBase$scr = _useScrollbarBase.scrollbarProps,
+    scrollbarClassName = _useScrollbarBase$scr.className,
+    restScrollbarProps = _objectWithoutProperties(_useScrollbarBase$scr, _excluded),
+    scrollbarTrackProps = _useScrollbarBase.scrollbarTrackProps;
+  var ariaLabel = restProps['aria-label'],
+    cbAlertScrollbarTrack = restProps.cbAlertScrollbarTrack,
+    focusableScrollbar = restProps.focusableScrollbar,
+    onInteractionForScroll = restProps.onInteractionForScroll,
+    rtl = restProps.rtl,
+    scrollbarTrackCss = restProps.scrollbarTrackCss,
+    rest = _objectWithoutProperties(restProps, _excluded2);
+  var scrollbarContainerRef = restScrollbarProps.ref,
+    scrollbarTrackRef = scrollbarTrackProps.ref,
+    vertical = props.vertical;
+  var onClick = (0, _react.useCallback)(function (ev) {
+    // Click on bodyText scrollbar.
+    var nativeEvent = ev.nativeEvent,
+      target = ev.target;
+    if (!focusableScrollbar || !scrollbarTrackRef.current) {
+      return;
+    }
+
+    // Click the scrollbar area. If user click the thumb, do nothing.
+    if (target === scrollbarContainerRef.current || target === scrollbarTrackRef.current) {
+      var clickPoint = nativeEvent[vertical ? 'offsetY' : 'offsetX'],
+        thumb = scrollbarTrackRef.current.children[0],
+        thumbPosition = thumb[vertical ? 'offsetTop' : 'offsetLeft'],
+        thumbSize = thumb[vertical ? 'offsetHeight' : 'offsetWidth'],
+        clickThumb = clickPoint > thumbPosition && clickPoint < thumbPosition + thumbSize;
+      if (!clickThumb) {
+        ev.preventDefault();
+        ev.nativeEvent.stopImmediatePropagation();
+        onInteractionForScroll({
+          inputType: 'track',
+          isForward: clickPoint > thumbPosition,
+          isPagination: true,
+          isVerticalScrollBar: vertical
+        });
+      }
+    }
+  }, [focusableScrollbar, onInteractionForScroll, scrollbarContainerRef, scrollbarTrackRef, vertical]);
+  return {
+    restProps: rest,
+    scrollbarProps: _objectSpread(_objectSpread({}, restScrollbarProps), {}, {
+      className: (0, _classnames["default"])(scrollbarClassName, _defineProperty({}, _ScrollbarModule["default"].focusableScrollbar, focusableScrollbar)),
+      onClick: onClick
+    }),
+    scrollbarTrackProps: _objectSpread(_objectSpread({}, scrollbarTrackProps), {}, {
+      'aria-label': ariaLabel,
+      cbAlertScrollbarTrack: cbAlertScrollbarTrack,
+      focusableScrollbar: focusableScrollbar,
+      onInteractionForScroll: onInteractionForScroll,
+      rtl: rtl,
+      scrollbarTrackCss: scrollbarTrackCss
+    })
+  };
+};
+
+/**
+ * A Limestone-styled scrollbar base component.
+ *
+ * @class ScrollbarBase
+ * @memberof limestone/useScroll
+ * @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({
+    css: css,
+    minThumbSize: minThumbSize,
+    vertical: vertical
+  }, rest);
+  var _useThemeScrollbar = useThemeScrollbar(props),
+    restProps = _useThemeScrollbar.restProps,
+    scrollbarProps = _useThemeScrollbar.scrollbarProps,
+    scrollbarTrackProps = _useThemeScrollbar.scrollbarTrackProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread(_objectSpread({}, restProps), scrollbarProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarTrack["default"], _objectSpread({}, scrollbarTrackProps))
+  }));
+});
+ScrollbarBase.displayName = 'ScrollbarBase';
+ScrollbarBase.propTypes = /** @lends limestone/useScroll.Scrollbar.prototype */{
+  /**
+   * Customizes the component by mapping the supplied collection of CSS class names to the
+   * corresponding internal elements and states of this component.
+   *
+   * The following classes are supported:
+   *
+   * * `scrollbar` - The scrollbar component class
+   *
+   * @type {Object}
+   * @public
+   */
+  css: _propTypes["default"].object,
+  /**
+   * The minimum size of the thumb.
+   * This value will be applied ri.scale.
+   *
+   * @type {number}
+   * @public
+   */
+  minThumbSize: _propTypes["default"].number,
+  /**
+   * Customizes the component by mapping the supplied collection of CSS class names to the
+   * corresponding internal elements and states of this component.
+   *
+   * The following classes are supported:
+   *
+   * * `scrollbarTrack` - The scrollbarTrack component class
+   * * `thumb` - The scrollbar thumb component class
+   *
+   * @type {Object}
+   * @public
+   */
+  scrollbarTrackCss: _propTypes["default"].object,
+  /**
+   * The scrollbar will be oriented vertically.
+   *
+   * @type {Boolean}
+   * @default true
+   * @public
+   */
+  vertical: _propTypes["default"].bool
+};
+
+/**
+ * A Limestone-styled scroll bar.
+ *
+ * @class Scrollbar
+ * @memberof limestone/useScroll
+ * @ui
+ * @private
+ */
+var Scrollbar = exports.Scrollbar = (0, _Skinnable["default"])(ScrollbarBase);
+Scrollbar.displayName = 'Scrollbar';
+var _default = exports["default"] = Scrollbar;

package/useScroll/Scrollbar.module.css

@@ -0,0 +1,19 @@
+.scrollbar {
+  background: none;
+  border-color: transparent;
+  opacity: 1;
+  pointer-events: none;
+  transition: opacity 100ms ease-out;
+  will-change: opacity;
+  /* ScrollbarTrack */
+}
+:global(.enact-locale-right-to-left) .scrollbar.horizontal {
+  direction: ltr;
+  transform: scaleX(-1);
+}
+.scrollbar.focusableScrollbar {
+  pointer-events: auto;
+}
+.scrollbar .scrollbarTrackShown {
+  opacity: 1;
+}

package/useScroll/ScrollbarPlaceholder.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ScrollbarPlaceholder = void 0;
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+var SpotlightPlaceholder = (0, _Spottable["default"])('div');
+
+/**
+ * ScrollbarPlaceholder component.
+ *
+ * @class ScrollbarPlaceholder
+ * @memberof limestone/useScroll
+ * @ui
+ * @private
+ */
+var ScrollbarPlaceholder = exports.ScrollbarPlaceholder = function ScrollbarPlaceholder() {
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPlaceholder = _useState2[0],
+    setShowPlaceholder = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (showPlaceholder) {
+      setShowPlaceholder(false);
+    }
+  }, [showPlaceholder]);
+  var resetFocus = (0, _react.useCallback)(function () {
+    setTimeout(function () {
+      if (!_spotlight["default"].getPointerMode() && !_spotlight["default"].getCurrent()) {
+        if (!_spotlight["default"].isPaused()) {
+          _spotlight["default"].focus(_spotlight["default"].getActiveContainer(), {
+            toOuterContainer: true
+          });
+        } else {
+          setTimeout(function () {
+            if (!_spotlight["default"].getPointerMode() && !_spotlight["default"].getCurrent() && !_spotlight["default"].isPaused()) {
+              _spotlight["default"].focus(_spotlight["default"].getActiveContainer(), {
+                toOuterContainer: true
+              });
+            }
+          }, 400); // Wait again for finishing animation (ex. panel transition).
+        }
+      }
+    }, 0); // Wait for unmounting placeholder node.
+  }, []);
+  return showPlaceholder ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SpotlightPlaceholder, {
+    "aria-hidden": true,
+    onSpotlightDisappear: resetFocus,
+    "data-spotlight-ignore-restore": true
+  }) : null;
+};
+ScrollbarPlaceholder.displayName = 'ScrollbarPlaceholder';
+var _default = exports["default"] = ScrollbarPlaceholder;