@enact/limestone 1.9.3 → 1.10.0

package/internal/Panels/PanelsRouter.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.PanelsRouter = exports.PanelsContext = void 0;
-var _react = require("react");
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _util = require("@enact/core/util");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _useAutoFocus = _interopRequireDefault(require("./useAutoFocus"));
 var _useFocusOnTransition2 = _interopRequireDefault(require("./useFocusOnTransition"));
 var _useToggleRole2 = _interopRequireDefault(require("./useToggleRole"));
@@ -36,18 +37,20 @@ var PanelsContext = exports.PanelsContext = /*#__PURE__*/(0, _react.createContex
 function useReverseTransition() {
   var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
   var rtl = arguments.length > 1 ? arguments[1] : undefined;
-  var prevIndex = (0, _react.useRef)(index);
-  var reverse = (0, _react.useRef)(rtl);
+  var prevIndex = (0, _util.usePrevious)(index);
+
   // If the index was changed, the panel transition occurs on the next cycle by `Panel`
-  var prev = {
-    reverseTransition: reverse.current,
-    prevIndex: prevIndex.current
-  };
-  if (prevIndex.current !== index) {
-    reverse.current = rtl ? index > prevIndex.current : index < prevIndex.current;
-    prevIndex.current = index;
+  if (prevIndex !== index) {
+    var reverse = rtl ? index > prevIndex : index < prevIndex;
+    return {
+      reverseTransition: reverse,
+      prevIndex: index
+    };
   }
-  return prev;
+  return {
+    reverseTransition: rtl,
+    prevIndex: index
+  };
 }
 var defaultConfig = {
   type: 'wizard'
@@ -66,22 +69,25 @@ var defaultConfig = {
  * @private
  */
 var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
-  var PanelsProvider = function PanelsProvider(_ref) {
-    var _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? 'default-element' : _ref$autoFocus,
-      children = _ref.children,
-      componentRef = _ref.componentRef,
-      spotlightId = _ref['data-spotlight-id'],
-      _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 0 : _ref$index,
-      onTransition = _ref.onTransition,
-      onWillTransition = _ref.onWillTransition,
-      rtl = _ref.rtl,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  var _PanelsProvider = function PanelsProvider(props) {
+    var panelsProviderProps = (0, _util.setDefaultProps)(props, {
+      autoFocus: 'default-element',
+      index: 0,
+      subtitle: '',
+      title: ''
+    });
+    (0, _util.checkPropTypes)(_PanelsProvider, panelsProviderProps);
+    var autoFocus = panelsProviderProps.autoFocus,
+      children = panelsProviderProps.children,
+      componentRef = panelsProviderProps.componentRef,
+      spotlightId = panelsProviderProps['data-spotlight-id'],
+      index = panelsProviderProps.index,
+      onTransition = panelsProviderProps.onTransition,
+      onWillTransition = panelsProviderProps.onWillTransition,
+      rtl = panelsProviderProps.rtl,
+      subtitle = panelsProviderProps.subtitle,
+      title = panelsProviderProps.title,
+      rest = _objectWithoutProperties(panelsProviderProps, _excluded);
     var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
       panel = _useState2[0],
@@ -140,7 +146,7 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
       }))]
     });
   };
-  PanelsProvider.propTypes = /** @lends limestone/internal/Panels.PanelsRouter.prototype */{
+  _PanelsProvider.propTypes = /** @lends limestone/internal/Panels.PanelsRouter.prototype */{
     /**
      * Sets the strategy used to automatically focus an element within the Panels upon render.
      * When set to 'none', focus is not set only on the first render.
@@ -229,6 +235,6 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
     */
     title: _propTypes2["default"].string
   };
-  return PanelsProvider;
+  return _PanelsProvider;
 });
 var _default = exports["default"] = PanelsRouter;

package/internal/Panels/useAutoFocus.js

@@ -8,6 +8,7 @@ exports.useAutoFocus = useAutoFocus;
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -69,12 +70,15 @@ function useAutoFocus(_ref) {
 }
 var AutoFocusDecorator = exports.AutoFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   // eslint-disable-next-line no-shadow
-  function AutoFocusDecorator(_ref2) {
-    var _ref2$autoFocus = _ref2.autoFocus,
-      autoFocus = _ref2$autoFocus === void 0 ? 'last-focused' : _ref2$autoFocus,
-      componentRef = _ref2.componentRef,
-      hideChildren = _ref2.hideChildren,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  function AutoFocusDecorator(props) {
+    var autoFocusDecoratorProps = (0, _util.setDefaultProps)(props, {
+      autoFocus: 'last-focused'
+    });
+    (0, _util.checkPropTypes)(AutoFocusDecorator, autoFocusDecoratorProps);
+    var autoFocus = autoFocusDecoratorProps.autoFocus,
+      componentRef = autoFocusDecoratorProps.componentRef,
+      hideChildren = autoFocusDecoratorProps.hideChildren,
+      rest = _objectWithoutProperties(autoFocusDecoratorProps, _excluded);
     var hook = useAutoFocus({
       autoFocus: autoFocus,
       hideChildren: hideChildren

package/internal/Panels/useFocusOnTransition.js

@@ -33,10 +33,11 @@ var transitionHandlers = {
   })
 };
 function useFocusOnTransition(config) {
-  var _useRef = (0, _react.useRef)({
+  var current = (0, _react.useMemo)(function () {
+    return {
       timerId: null
-    }),
-    current = _useRef.current;
+    };
+  }, []);
   var handlers = (0, _useHandlers["default"])(transitionHandlers, config, {
     current: current
   });

package/internal/Picker/Picker.js

@@ -63,14 +63,15 @@ var isEnter = (0, _keymap.is)('enter');
 var isLeft = (0, _keymap.is)('left');
 var isRight = (0, _keymap.is)('right');
 var isUp = (0, _keymap.is)('up');
-var DivComponent = function DivComponent(_ref) {
-  var ref = _ref.ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var _DivComponent = function DivComponent(props) {
+  (0, _util.checkPropTypes)(_DivComponent, props);
+  var ref = props.ref,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
     ref: ref
   }, rest));
 };
-DivComponent.propTypes = {
+_DivComponent.propTypes = {
   /**
    * Called with the reference to the current node.
    *
@@ -79,7 +80,7 @@ DivComponent.propTypes = {
    */
   ref: _propTypes["default"].ref
 };
-var Div = (0, _Touchable["default"])(DivComponent);
+var Div = (0, _Touchable["default"])(_DivComponent);
 var SpottableDiv = (0, _Touchable["default"])((0, _ForwardRef["default"])({
   prop: 'containerRef'
 }, _SpottablePicker["default"]));
@@ -118,6 +119,7 @@ var allowedClassNames = ['picker', 'valueWrapper', 'joined', 'horizontal', 'vert
  * @private
  */
 var _PickerBase = function PickerBase(props) {
+  (0, _util.checkPropTypes)(_PickerBase, props);
   // Set to `true` onFocus and `false` onBlur to prevent setting aria-valuetext (which
   // will notify the user) when the component does not have focus
   var _useState = (0, _react.useState)(false),

package/internal/Picker/SpottablePicker.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.SpottablePicker = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
@@ -19,17 +20,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 DivComponent = function DivComponent(_ref) {
-  var innerRef = _ref.innerRef,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var _DivComponent = function DivComponent(props) {
+  (0, _util.checkPropTypes)(_DivComponent, props);
+  var innerRef = props.innerRef,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
     ref: innerRef
   }));
 };
-DivComponent.propTypes = {
+_DivComponent.propTypes = {
   innerRef: _propTypes["default"].ref
 };
-var Div = (0, _Spottable["default"])(DivComponent);
+var Div = (0, _Spottable["default"])(_DivComponent);
 var SpottablePicker = exports.SpottablePicker = (0, _kind["default"])({
   name: 'SpottablePicker',
   propTypes: {
@@ -39,18 +41,18 @@ var SpottablePicker = exports.SpottablePicker = (0, _kind["default"])({
     pickerOrientation: _propTypes2["default"].string
   },
   computed: {
-    selectionKeys: function selectionKeys(_ref2) {
-      var changedBy = _ref2.changedBy,
-        disabled = _ref2.disabled,
-        pickerOrientation = _ref2.pickerOrientation;
+    selectionKeys: function selectionKeys(_ref) {
+      var changedBy = _ref.changedBy,
+        disabled = _ref.disabled,
+        pickerOrientation = _ref.pickerOrientation;
       if (disabled || pickerOrientation === 'horizontal' && changedBy === 'enter') return;
       return pickerOrientation === 'horizontal' ? [37, 39] : [38, 40];
     }
   },
-  render: function render(_ref3) {
-    var containerRef = _ref3.containerRef,
-      selectionKeys = _ref3.selectionKeys,
-      rest = _objectWithoutProperties(_ref3, _excluded2);
+  render: function render(_ref2) {
+    var containerRef = _ref2.containerRef,
+      selectionKeys = _ref2.selectionKeys,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
     delete rest.changedBy;
     delete rest.pickerOrientation;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({

package/internal/SharedStateDecorator/SharedStateDecorator.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.SharedStateDecorator = exports.SharedState = void 0;
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -60,7 +61,8 @@ var SharedStateDecorator = exports.SharedStateDecorator = (0, _hoc["default"])(d
     updateOnMount = config.updateOnMount;
 
   // eslint-disable-next-line no-shadow
-  var SharedStateDecorator = function SharedStateDecorator(props) {
+  var _SharedStateDecorator = function SharedStateDecorator(props) {
+    (0, _util.checkPropTypes)(_SharedStateDecorator, props);
     var context = (0, _react.useContext)(SharedState);
     var data = (0, _react.useRef)({});
     var _useState = (0, _react.useState)(false),
@@ -128,8 +130,8 @@ var SharedStateDecorator = exports.SharedStateDecorator = (0, _hoc["default"])(d
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, wrappedComponentProps))
     });
   };
-  SharedStateDecorator.displayName = 'SharedStateDecorator';
-  SharedStateDecorator.propTypes = {
+  _SharedStateDecorator.displayName = 'SharedStateDecorator';
+  _SharedStateDecorator.propTypes = {
     /**
      * Prevents the component from setting or restoring any framework shared state.
      *
@@ -139,6 +141,6 @@ var SharedStateDecorator = exports.SharedStateDecorator = (0, _hoc["default"])(d
      */
     noSharedState: _propTypes["default"].bool
   };
-  return SharedStateDecorator;
+  return _SharedStateDecorator;
 });
 var _default = exports["default"] = SharedStateDecorator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/limestone",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "repository": {
     "type": "git",
@@ -39,20 +39,20 @@
     "screenTypes": "ThemeDecorator/screenTypes.json"
   },
   "dependencies": {
-    "@enact/core": "^5.4.3",
-    "@enact/i18n": "^5.4.3",
-    "@enact/spotlight": "^5.4.3",
-    "@enact/ui": "^5.4.3",
-    "@enact/webos": "^5.4.3",
-    "@enovaui/core-tokens": "^0.14.0",
-    "@enovaui/webos-tokens": "^0.14.0",
+    "@enact/core": "^5.5.0",
+    "@enact/i18n": "^5.5.0",
+    "@enact/spotlight": "^5.5.0",
+    "@enact/ui": "^5.5.0",
+    "@enact/webos": "^5.5.0",
+    "@enovaui/core-tokens": "^0.15.0",
+    "@enovaui/webos-tokens": "^0.15.0",
     "classnames": "^2.5.1",
     "ilib": "^14.21.3",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "ramda": "^0.32.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -60,7 +60,10 @@
   },
   "overrides": {
     "autolinker": "^4.0.0",
-    "vue-template-compiler": "@vue/compiler-sfc@3.4.31"
+    "vue-template-compiler": "@vue/compiler-sfc@3.4.31",
+    "prop-types": {
+      "react-is": "^19.2.3"
+    }
   },
   "devDependencies": {
     "@enact/docs-utils": "^0.4.17",

package/styles/colors.less

@@ -374,6 +374,7 @@
 @lime-slider-track-active-color: var(--semantic-color-surface-accent);
 @lime-slider-track-active-focused-color: var(--semantic-color-surface-accent);
 @lime-slider-handle-color: var(--semantic-color-surface-default-handle);
+@lime-slider-handle-colorPicker-focused-color: var(--semantic-color-surface-white);
 @lime-slider-handle-border-color: transparent;
 @lime-slider-handle-focused-border-color: @lime-slider-handle-border-color;
 @lime-slider-handle-focused-color: var(--semantic-color-surface-default-focused);

package/styles/variables.less

@@ -335,6 +335,7 @@
 @lime-alert-overlay-body-padding: 0 var(--primitive-spacing-84);
 @lime-alert-overlay-image-padding: 0 var(--primitive-spacing-84);
 @lime-alert-overlay-width: 1128px;
+@lime-alert-overlay-max-width: calc(100vw - 2 * @lime-popup-position-corner-margin);
 
 // AlertImage
 // ---------------------------------------
@@ -1054,7 +1055,6 @@
 @lime-slider-knob-height: @lime-slider-knob-width;
 @lime-slider-knob-height-large: @lime-slider-knob-height;
 @lime-slider-tooltip-offset: (@lime-slider-knob-height / 2);
-@lime-slider-knob-resting-state-scale: 1;
 @lime-slider-min-max-margin-top: var(--primitive-spacing-24);
 @lime-slider-min-max-font-size: var(--primitive-font-size-48);
 @lime-slider-min-max-font-weight: var(--primitive-font-weight-regular);

package/useScroll/HoverToScroll.js

@@ -71,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,
@@ -150,7 +151,8 @@ var HoverToScrollBase = function HoverToScrollBase(props) {
         hoverToScrollMultiplier[direction]; // a scrolling speed factor
         var startTime = (0, _util.perfNow)();
         mutableRef.current.hoveredPosition = position;
-        mutableRef.current.stopScrollByHover = false;
+        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;
@@ -232,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
 };
@@ -246,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/useEvent.js

@@ -348,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);
@@ -516,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

@@ -182,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;
@@ -258,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();
@@ -468,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,
@@ -512,6 +519,7 @@ var useScroll = exports.useScroll = function useScroll(props) {
     scrollbarHandle: verticalScrollbarHandle
   }));
   assignProperties('hoverToScrollProps', {
+    // eslint-disable-line react-hooks/refs
     scrollContainerHandle: scrollContainerHandle,
     scrollObserver: scrollObserver
   });