@enact/limestone 1.9.3 → 1.10.0

package/PageViews/PageViewsRouter.js

@@ -7,12 +7,13 @@ exports.PageViewsRouter = PageViewsRouter;
 exports["default"] = void 0;
 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");
 var _Panels = require("../internal/Panels");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["autoFocus", "children", "componentRef", "data-spotlight-id", "index", "onTransition", "onWillTransition", "rtl"],
+var _excluded = ["autoFocus", "bannerMode", "children", "componentRef", "data-spotlight-id", "index", "onFooterCloseClick", "onFooterNextClick", "onNextClick", "onPrevClick", "onTransition", "onWillTransition", "rtl", "showFooterButtons"],
   _excluded2 = ["onWillTransition"]; // single-index ViewManagers need some help knowing when the transition direction needs to change
 // because the index is always 0 from its perspective.
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -24,36 +25,44 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var 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 useReverseTransition(index, rtl) {
-  var prevIndex = (0, _react.useRef)(index);
+  var prevIndex = (0, _util.usePrevious)(index);
   var reverse = false;
-  if (prevIndex.current !== index) {
-    reverse = rtl ? index > prevIndex.current : index < prevIndex.current;
+  if (prevIndex !== index) {
+    reverse = rtl ? index > prevIndex : index < prevIndex;
   }
-  prevIndex.current = index;
   return {
     reverseTransition: reverse
   };
 }
 
 /**
- * PageViewsRouter passes children, index and transition handlers
+ * PageViewsRouter passes children, index and transition handlers.
  *
  * @class PageViewsRouter
  * @memberof limestone/PageViews
  * @private
  */
 function PageViewsRouter(Wrapped) {
-  var PageViewsProvider = function PageViewsProvider(_ref) {
-    var autoFocus = _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,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  var _PageViewsProvider = function PageViewsProvider(props) {
+    var pageViewsProviderProps = (0, _util.setDefaultProps)(props, {
+      index: 0
+    });
+    (0, _util.checkPropTypes)(_PageViewsProvider, pageViewsProviderProps);
+    var autoFocus = pageViewsProviderProps.autoFocus,
+      bannerMode = pageViewsProviderProps.bannerMode,
+      children = pageViewsProviderProps.children,
+      componentRef = pageViewsProviderProps.componentRef,
+      spotlightId = pageViewsProviderProps['data-spotlight-id'],
+      index = pageViewsProviderProps.index,
+      onFooterCloseClick = pageViewsProviderProps.onFooterCloseClick,
+      onFooterNextClick = pageViewsProviderProps.onFooterNextClick,
+      onNextClick = pageViewsProviderProps.onNextClick,
+      onPrevClick = pageViewsProviderProps.onPrevClick,
+      onTransition = pageViewsProviderProps.onTransition,
+      onWillTransition = pageViewsProviderProps.onWillTransition,
+      rtl = pageViewsProviderProps.rtl,
+      showFooterButtons = pageViewsProviderProps.showFooterButtons,
+      rest = _objectWithoutProperties(pageViewsProviderProps, _excluded);
     var uniqueId = (0, _react.useId)();
     var totalIndex = _react.Children.count(children);
     var _useToggleRole = (0, _Panels.useToggleRole)(),
@@ -65,8 +74,42 @@ function PageViewsRouter(Wrapped) {
     var ref = (0, _useChainRefs["default"])(autoFocusRef, a11yRef, componentRef);
     var _useReverseTransition = useReverseTransition(index, rtl),
       reverseTransition = _useReverseTransition.reverseTransition;
+    var navigationSource = (0, _react.useRef)(null); // 'internal-next' | 'internal-prev' | 'footer' | null
+
+    (0, _react.useEffect)(function () {
+      if (showFooterButtons && !bannerMode) {
+        _spotlight["default"].focus(spotlightId, {
+          enterTo: 'default-element'
+        });
+      }
+    }, [bannerMode, showFooterButtons, spotlightId]);
+    var handleNextClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'internal-next';
+      onNextClick === null || onNextClick === void 0 || onNextClick(ev);
+    }, [onNextClick]);
+    var handlePrevClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'internal-prev';
+      onPrevClick === null || onPrevClick === void 0 || onPrevClick(ev);
+    }, [onPrevClick]);
+    var handleFooterNextClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'footer';
+      onFooterNextClick === null || onFooterNextClick === void 0 || onFooterNextClick(ev);
+    }, [onFooterNextClick]);
+    var handleTransition = (0, _react.useCallback)(function (ev) {
+      if (showFooterButtons && !bannerMode) {
+        var source = navigationSource.current;
+        var newIndex = ev.index;
+        if (source === 'footer' || source === 'internal-next' && newIndex === totalIndex - 1 || source === 'internal-prev' && newIndex === 0) {
+          _spotlight["default"].focus(spotlightId, {
+            enterTo: 'default-element'
+          });
+        }
+      }
+      navigationSource.current = null;
+      onTransition === null || onTransition === void 0 || onTransition(ev);
+    }, [bannerMode, onTransition, showFooterButtons, spotlightId, totalIndex]);
     var _useFocusOnTransition = (0, _Panels.useFocusOnTransition)({
-        onTransition: onTransition,
+        onTransition: handleTransition,
         onWillTransition: onWillTransition,
         spotlightId: spotlightId
       }),
@@ -82,18 +125,24 @@ function PageViewsRouter(Wrapped) {
       };
     }, []);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread({}, rest), transition), {}, {
+      bannerMode: bannerMode,
       componentRef: ref,
       "data-spotlight-id": spotlightId,
       index: index,
-      totalIndex: totalIndex,
+      onFooterCloseClick: onFooterCloseClick,
+      onFooterNextClick: handleFooterNextClick,
+      onNextClick: handleNextClick,
+      onPrevClick: handlePrevClick,
       onWillTransition: handleWillTransition,
       reverseTransition: reverseTransition,
       rtl: rtl,
+      showFooterButtons: showFooterButtons,
+      totalIndex: totalIndex,
       uniqueId: uniqueId,
       children: children
     }));
   };
-  PageViewsProvider.propTypes = /** @lends limestone/PageViews.PageViewsRouter.prototype */{
+  _PageViewsProvider.propTypes = /** @lends limestone/PageViews.PageViewsRouter.prototype */{
     /**
      * Sets the strategy used to automatically focus an element within the PageViews upon render.
      * When set to 'none', focus is not set only on the first render.
@@ -111,19 +160,19 @@ function PageViewsRouter(Wrapped) {
      */
     componentRef: _propTypes["default"].ref,
     /**
-    * The spotlight id for the panel.
-    *
-    * @type {String}
-    * @private
-    */
+     * The spotlight id for the panel.
+     *
+     * @type {String}
+     * @private
+     */
     'data-spotlight-id': _propTypes2["default"].string,
     /**
-    * The currently selected step.
-    *
-    * @type {Number}
-    * @default 0
-    * @private
-    */
+     * The currently selected step.
+     *
+     * @type {Number}
+     * @default 0
+     * @private
+     */
     index: _propTypes2["default"].number,
     /**
      * Disables panel transitions.
@@ -133,18 +182,18 @@ function PageViewsRouter(Wrapped) {
      */
     noAnimation: _propTypes2["default"].bool,
     /**
-    * Called when a transition completes.
-    *
-    * @type {Function}
-    * @private
-    */
+     * Called when a transition completes.
+     *
+     * @type {Function}
+     * @private
+     */
     onTransition: _propTypes2["default"].func,
     /**
-    * Called when a transition begins.
-    *
-    * @type {Function}
-    * @private
-    */
+     * Called when a transition begins.
+     *
+     * @type {Function}
+     * @private
+     */
     onWillTransition: _propTypes2["default"].func,
     /**
      * Used to determine the transition direction.
@@ -154,6 +203,6 @@ function PageViewsRouter(Wrapped) {
      */
     rtl: _propTypes2["default"].bool
   };
-  return PageViewsProvider;
+  return _PageViewsProvider;
 }
 var _default = exports["default"] = PageViewsRouter;

package/PageViews/tests/PageViews-specs.js

@@ -273,4 +273,91 @@ describe('PageViews Specs', function () {
       });
     });
   }));
+  test('should render footer Close and Next buttons when `showFooterButtons` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.getByText('Close')).toBeInTheDocument();
+    expect(_react.screen.getByText('Next')).toBeInTheDocument();
+  });
+  test('should not render footer Next button on the last page', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.getByText('Close')).toBeInTheDocument();
+    expect(_react.screen.queryByText('Next')).toBeNull();
+  });
+  test('should not render footer buttons when `bannerMode` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      bannerMode: true,
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.queryByText('Close')).toBeNull();
+  });
+  test('should fire `onFooterNextClick`, `onChange`, and `onTransition` when footer Next button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleFooterNextClick = jest.fn();
+    var spy = jest.fn();
+    var user = _userEvent["default"].setup();
+    var index = 0;
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+        showFooterButtons: true,
+        index: index,
+        onChange: handleChange,
+        onFooterNextClick: handleFooterNextClick,
+        onTransition: spy,
+        noAnimation: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+      })),
+      rerender = _render3.rerender;
+    yield user.click(_react.screen.getByText('Next'));
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleFooterNextClick).toHaveBeenCalled();
+    });
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: index,
+      onChange: handleChange,
+      onFooterNextClick: handleFooterNextClick,
+      onTransition: spy,
+      noAnimation: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var expected = {
+      index: index,
+      type: 'onTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onFooterCloseClick` when footer Close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleFooterCloseClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 0,
+      onFooterCloseClick: handleFooterCloseClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    yield user.click(_react.screen.getByText('Close'));
+    yield (0, _react.waitFor)(function () {
+      expect(handleFooterCloseClick).toHaveBeenCalled();
+    });
+  }));
 });

package/Panels/Header.js

@@ -7,7 +7,8 @@ exports["default"] = exports.HeaderBase = exports.Header = void 0;
 var _handle = require("@enact/core/handle");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
-var _util = require("@enact/i18n/util");
+var _util = require("@enact/core/util");
+var _util2 = require("@enact/i18n/util");
 var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
 var _Layout = require("@enact/ui/Layout");
 var _resolution = require("@enact/ui/resolution");
@@ -20,7 +21,7 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Panels = require("../internal/Panels");
-var _util2 = require("../internal/Panels/util");
+var _util3 = require("../internal/Panels/util");
 var _PopupTabLayoutStateContext = require("../PopupTabLayout/PopupTabLayoutStateContext");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _HeaderModule = _interopRequireDefault(require("./Header.module.css"));
@@ -375,7 +376,7 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
         title = _ref2.title,
         titleId = _ref2.titleId,
         type = _ref2.type;
-      var direction = (0, _util.isRtlText)(title) || (0, _util.isRtlText)(subtitle) ? 'rtl' : 'ltr';
+      var direction = (0, _util2.isRtlText)(title) || (0, _util2.isRtlText)(subtitle) ? 'rtl' : 'ltr';
       var titleHeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], _objectSpread(_objectSpread({}, centered ? {
         slotSize: slotSize
       } : {}), {}, {
@@ -530,7 +531,8 @@ var ContextAsDefaultsHeader = function ContextAsDefaultsHeader(Wrapped) {
   // eslint-disable-next-line no-shadow
   function ContextAsDefaultsHeader(props) {
     var _ref4;
-    var _useContextAsDefaults = (0, _util2.useContextAsDefaults)(props),
+    (0, _util.checkPropTypes)(ContextAsDefaultsHeader, props);
+    var _useContextAsDefaults = (0, _util3.useContextAsDefaults)(props),
       contextProps = _useContextAsDefaults.contextProps,
       provideContextAsDefaults = _useContextAsDefaults.provideContextAsDefaults;
     var _use = (0, _react.use)(_Panels.PanelsStateContext),

package/Popup/Popup.js

@@ -320,7 +320,8 @@ var popupDefaultProps = {
  * @ui
  * @public
  */
-var Popup = exports.Popup = function Popup(props) {
+var _Popup = exports.Popup = function Popup(props) {
+  (0, _util.checkPropTypes)(_Popup, props);
   var componentProps = (0, _util.setDefaultProps)(props, popupDefaultProps);
   var noAnimation = componentProps.noAnimation,
     noAutoDismiss = componentProps.noAutoDismiss,
@@ -564,8 +565,8 @@ var Popup = exports.Popup = function Popup(props) {
     }))
   });
 };
-Popup.displayName = 'Popup';
-Popup.propTypes = /** @lends limestone/Popup.Popup.prototype */{
+_Popup.displayName = 'Popup';
+_Popup.propTypes = /** @lends limestone/Popup.Popup.prototype */{
   /**
    * Prevents closing the popup via 5-way navigation out of the content.
    *
@@ -689,4 +690,4 @@ Popup.propTypes = /** @lends limestone/Popup.Popup.prototype */{
    */
   spotlightRestrict: _propTypes["default"].oneOf(['self-first', 'self-only'])
 };
-var _default = exports["default"] = Popup;
+var _default = exports["default"] = _Popup;

package/PopupTabLayout/PopupTabLayout.js

@@ -527,9 +527,10 @@ var tabPanelsHandlers = {
  * @ui
  * @public
  */
-var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
-  var rtl = _ref9.rtl,
-    rest = _objectWithoutProperties(_ref9, _excluded2);
+var _TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(props) {
+  (0, _util.checkPropTypes)(_TabPanelsBase, props);
+  var rtl = props.rtl,
+    rest = _objectWithoutProperties(props, _excluded2);
   var onTransition = (0, _react.use)(_TabLayout.TabLayoutContext);
   var handlers = (0, _useHandlers["default"])(tabPanelsHandlers, _objectSpread({
     rtl: rtl
@@ -542,7 +543,7 @@ var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
     css: _PopupTabLayoutModule["default"]
   }, handlers));
 };
-TabPanelsBase.propTypes = {
+_TabPanelsBase.propTypes = {
   rtl: _propTypes["default"].bool
 };
 
@@ -557,7 +558,7 @@ TabPanelsBase.propTypes = {
  */
 var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}, TabPanelsBase);
+}, _TabPanelsBase);
 
 /**
  * Omits the close button.
@@ -585,9 +586,10 @@ var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
  * @ui
  * @public
  */
-var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
-  var spotlightId = _ref0.spotlightId,
-    rest = _objectWithoutProperties(_ref0, _excluded3);
+var _TabPanel = exports.TabPanel = function TabPanel(props) {
+  (0, _util.checkPropTypes)(_TabPanel, props);
+  var spotlightId = props.spotlightId,
+    rest = _objectWithoutProperties(props, _excluded3);
   (0, _react.useEffect)(function () {
     _spotlight["default"].set(spotlightId, {
       partition: true
@@ -599,7 +601,7 @@ var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
     spotlightId: spotlightId
   }));
 };
-TabPanel.propTypes = {
+_TabPanel.propTypes = {
   /**
    * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
    *

package/RadioItem/RadioItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.RadioItemGroup = exports.RadioItemDecorator = exports.RadioItemBase = exports.RadioItem = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _Group = _interopRequireDefault(require("@enact/ui/Group"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
@@ -161,16 +162,13 @@ var RadioItem = exports.RadioItem = (0, _Pure["default"])(RadioItemDecorator(Rad
  * @public
  */
 var _RadioItemGroup = exports.RadioItemGroup = function RadioItemGroup(props) {
+  (0, _util.checkPropTypes)(_RadioItemGroup, props);
   var children = props.children,
     groupId = props.groupId,
     itemProps = props.itemProps,
     rest = _objectWithoutProperties(props, _excluded2);
-  _RadioItemGroup.propTypes = {
-    groupId: _propTypes["default"].string,
-    itemProps: _propTypes["default"].object
-  };
   if (typeof children[0] === 'string') {
-    // The case of multiple radio items are represented by string array instead of `RadioItem` compoenents using `ui/Group`
+    // The case of multiple radio items are represented by string array instead of `RadioItem` components using `ui/Group`
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "region",
       "aria-labelledby": groupId || "radioItemGroup",
@@ -208,4 +206,8 @@ var _RadioItemGroup = exports.RadioItemGroup = function RadioItemGroup(props) {
     });
   }
 };
+_RadioItemGroup.propTypes = {
+  groupId: _propTypes["default"].string,
+  itemProps: _propTypes["default"].object
+};
 var _default = exports["default"] = RadioItem;

package/Scroller/EditableWrapper.js

@@ -8,6 +8,7 @@ var _handle = require("@enact/core/handle");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _keymap = require("@enact/core/keymap");
 var _usePublicClassNames = require("@enact/core/usePublicClassNames");
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
 var _container = require("@enact/spotlight/src/container");
 var _target = require("@enact/spotlight/src/target");
@@ -89,21 +90,22 @@ var holdConfig = {
  * @ui
  * @public
  */
-var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props) {
+var _EditableWrapper = exports.EditableWrapper = function EditableWrapper(props) {
   var _editable$hideIndex;
+  (0, _util.checkPropTypes)(_EditableWrapper, props);
   var children = props.children,
     editable = props.editable,
     scrollContainerHandle = props.scrollContainerHandle,
     scrollContainerRef = props.scrollContainerRef,
     scrollContentRef = props.scrollContentRef;
-  var centered = (editable === null || editable === void 0 ? void 0 : editable.centered) != null ? editable.centered : true;
-  var selectItemBy = (editable === null || editable === void 0 ? void 0 : editable.selectItemBy) || 'longPress';
-  var customCss = (editable === null || editable === void 0 ? void 0 : editable.css) || {};
   var removeItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.removeItemFuncRef;
   var hideItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.hideItemFuncRef;
   var showItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.showItemFuncRef;
   var focusItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.focusItemFuncRef;
   var blurItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.blurItemFuncRef;
+  var centered = (editable === null || editable === void 0 ? void 0 : editable.centered) != null ? editable.centered : true;
+  var selectItemBy = (editable === null || editable === void 0 ? void 0 : editable.selectItemBy) || 'longPress';
+  var customCss = (editable === null || editable === void 0 ? void 0 : editable.css) || {};
   var mergedCss = (0, _usePublicClassNames.usePublicClassNames)({
     componentCss: _EditableWrapperModule["default"],
     customCss: customCss,
@@ -126,7 +128,7 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     // Indices
     fromIndex: null,
     prevToIndex: null,
-    hideIndex: null,
+    hideIndex: (_editable$hideIndex = editable === null || editable === void 0 ? void 0 : editable.hideIndex) !== null && _editable$hideIndex !== void 0 ? _editable$hideIndex : dataSize,
     // Position for restoring focus after removing item
     nextSpotlightRect: null,
     // Move direction from the starting position to the current position
@@ -146,7 +148,6 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     initialSelected: editable === null || editable === void 0 ? void 0 : editable.initialSelected
   });
   var announceRef = (0, _react.useRef)({});
-  mutableRef.current.hideIndex = (_editable$hideIndex = editable === null || editable === void 0 ? void 0 : editable.hideIndex) !== null && _editable$hideIndex !== void 0 ? _editable$hideIndex : dataSize;
 
   // Functions
 
@@ -886,27 +887,27 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
   }, [handleMouseLeave, handleTouchMove, scrollContainerRef]);
   (0, _react.useLayoutEffect)(function () {
     if (removeItemFuncRef) {
-      removeItemFuncRef.current = removeItem;
+      removeItemFuncRef.current = removeItem; // eslint-disable-line react-hooks/immutability
     }
   }, [removeItem, removeItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (hideItemFuncRef) {
-      hideItemFuncRef.current = hideItem;
+      hideItemFuncRef.current = hideItem; // eslint-disable-line react-hooks/immutability
     }
   }, [hideItem, hideItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (showItemFuncRef) {
-      showItemFuncRef.current = showItem;
+      showItemFuncRef.current = showItem; // eslint-disable-line react-hooks/immutability
     }
   }, [showItem, showItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (focusItemFuncRef) {
-      focusItemFuncRef.current = focusItem;
+      focusItemFuncRef.current = focusItem; // eslint-disable-line react-hooks/immutability
     }
   }, [focusItem, focusItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (blurItemFuncRef) {
-      blurItemFuncRef.current = blurItem;
+      blurItemFuncRef.current = blurItem; // eslint-disable-line react-hooks/immutability
     }
   }, [blurItem, blurItemFuncRef]);
   (0, _react.useEffect)(function () {
@@ -981,6 +982,8 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
 
   // We set 'data-is-hiding' for all hidden items at component mount
   (0, _react.useEffect)(function () {
+    var _editable$hideIndex2;
+    mutableRef.current.hideIndex = (_editable$hideIndex2 = editable === null || editable === void 0 ? void 0 : editable.hideIndex) !== null && _editable$hideIndex2 !== void 0 ? _editable$hideIndex2 : dataSize;
     children.map(function (child, index) {
       if (index >= mutableRef.current.hideIndex) {
         var hiddenElement = document.querySelector('[aria-label="' + child.props['aria-label'] + '"]');
@@ -1007,8 +1010,8 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     }, "editable-wrapper-announce")]
   });
 };
-EditableWrapper.displayName = 'EditableWrapper';
-EditableWrapper.propTypes = /** @lends limestone/Scroller.EditableWrapper.prototype */{
+_EditableWrapper.displayName = 'EditableWrapper';
+_EditableWrapper.propTypes = /** @lends limestone/Scroller.EditableWrapper.prototype */{
   /**
    * Enables editing items in the scroller.
    * You can specify props for editable scroller as an object.
@@ -1040,4 +1043,4 @@ EditableWrapper.propTypes = /** @lends limestone/Scroller.EditableWrapper.protot
    */
   scrollContentRef: _propTypes["default"].ref
 };
-var _default = exports["default"] = EditableWrapper;
+var _default = exports["default"] = _EditableWrapper;

package/Scroller/Scroller.js

@@ -15,7 +15,7 @@ var _I18nDecorator = require("@enact/i18n/I18nDecorator");
 var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Resizable = require("@enact/ui/Resizable");
-var _Scroller = require("@enact/ui/Scroller");
+var _Scroller2 = require("@enact/ui/Scroller");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -97,8 +97,9 @@ var scrollerDefaultProps = {
  * @ui
  * @public
  */
-var Scroller = exports.Scroller = function Scroller(props) {
+var _Scroller = exports.Scroller = function Scroller(props) {
   var scrollerProps = (0, _util.setDefaultProps)(props, scrollerDefaultProps);
+  (0, _util.checkPropTypes)(_Scroller, scrollerProps);
   if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
     scrollerProps.overscrollEffectOn = {
       arrowKey: false,
@@ -146,7 +147,7 @@ var Scroller = exports.Scroller = function Scroller(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, scrollContainerProps), scrollContentWrapperRest), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollBody, _objectSpread(_objectSpread({}, focusableBodyProps), {}, {
-        children: [rest.focusableScrollbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarPlaceholder["default"], {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller.ScrollerBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
+        children: [rest.focusableScrollbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarPlaceholder["default"], {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller2.ScrollerBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
           "aria-label": ariaLabel,
           id: id,
           ref: scrollContentHandle,
@@ -156,8 +157,8 @@ var Scroller = exports.Scroller = function Scroller(props) {
     }))
   }));
 };
-Scroller.displayName = 'Scroller';
-Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
+_Scroller.displayName = 'Scroller';
+_Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
   /**
    * The "aria-label" for the Scroller.
    *
@@ -464,13 +465,13 @@ Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
    */
   verticalScrollThumbAriaLabel: _propTypes["default"].string
 };
-var ScrollerBase = exports.ScrollerBase = Scroller;
-exports.Scroller = Scroller = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
+var ScrollerBase = exports.ScrollerBase = _Scroller;
+exports.Scroller = _Scroller = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
   overflow: true,
   preserveId: true,
   restrict: 'self-first'
 }, (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}, Scroller)));
-Scroller.defaultPropValues = scrollerDefaultProps;
-var _default = exports["default"] = Scroller;
+}, _Scroller)));
+_Scroller.defaultPropValues = scrollerDefaultProps;
+var _default = exports["default"] = _Scroller;

package/Scroller/useThemeScroller.js

@@ -128,12 +128,12 @@ var useSpottable = function useSpottable(props, instances) {
   var _useEventKey = (0, _useEvent.useEventKey)(),
     addGlobalKeyDownEventListener = _useEventKey.addGlobalKeyDownEventListener,
     removeGlobalKeyDownEventListener = _useEventKey.removeGlobalKeyDownEventListener;
-  var setContainerDisabled = (0, _react.useCallback)(function (bool) {
+  var setContainerDisabled = (0, _react.useCallback)(function self(bool) {
     if (scrollContainerRef.current) {
       scrollContainerRef.current.dataset.spotlightContainerDisabled = bool;
       if (bool) {
         addGlobalKeyDownEventListener(function () {
-          setContainerDisabled(false);
+          self(false);
         });
       } else {
         removeGlobalKeyDownEventListener();
@@ -384,7 +384,7 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
         filterTarget: 'body'
       });
     }
-  }, [props.focusableScrollbar, scrollContainerRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [props.focusableScrollbar, scrollContainerRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
   scrollContentProps.setThemeScrollContentHandle({
     calculatePositionOnFocus: calculatePositionOnFocus,