@enact/limestone 1.3.0

package/Scroller/Scroller.js

@@ -0,0 +1,470 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ContentContainerDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _ContentContainerDecorator.ContentContainerDecorator;
+  }
+});
+exports["default"] = exports.ScrollerBase = exports.Scroller = void 0;
+var _util = require("@enact/core/util");
+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 _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _useScroll2 = _interopRequireDefault(require("../useScroll"));
+var _HoverToScroll = _interopRequireDefault(require("../useScroll/HoverToScroll"));
+var _Scrollbar = _interopRequireDefault(require("../useScroll/Scrollbar"));
+var _ScrollbarPlaceholder = _interopRequireDefault(require("../useScroll/ScrollbarPlaceholder"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _ContentContainerDecorator = require("./ContentContainerDecorator");
+var _EditableWrapper = require("./EditableWrapper");
+var _useThemeScroller2 = _interopRequireDefault(require("./useThemeScroller"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["aria-label", "hoverToScroll"],
+  _excluded2 = ["className"];
+/**
+ * Provides Limestone-themed scroller components and behaviors.
+ *
+ * @example
+ * <Scroller>
+ * 	<div style={{height: '300px'}}>
+ * 		<p>San Francisco</p>
+ * 		<p>Seoul</p>
+ * 		<p>Bangalore</p>
+ * 		<p>New York</p>
+ * 		<p>London</p>
+ * 	</div>
+ * </Scroller>
+ *
+ * @module limestone/Scroller
+ * @exports Scroller
+ * @exports ScrollerBase
+ */
+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 nop = function nop() {};
+var SpottableDiv = (0, _Spottable["default"])('div');
+var scrollerId = 0;
+var scrollerDefaultProps = {
+  'data-spotlight-container-disabled': false,
+  cbScrollTo: nop,
+  direction: 'both',
+  fadeOut: false,
+  focusableScrollbar: false,
+  horizontalScrollbar: 'auto',
+  noScrollByDrag: false,
+  noScrollByWheel: false,
+  onScroll: nop,
+  onScrollStart: nop,
+  onScrollStop: nop,
+  overscrollEffectOn: {
+    arrowKey: false,
+    drag: true,
+    pageKey: false,
+    track: false,
+    wheel: true
+  },
+  scrollMode: 'native',
+  verticalScrollbar: 'auto'
+};
+
+/**
+ * A Limestone-styled Scroller, useScroll applied.
+ *
+ * Usage:
+ * ```
+ * <Scroller>Scroll me.</Scroller>
+ * ```
+ *
+ * @class Scroller
+ * @memberof limestone/Scroller
+ * @extends ui/Scroller.ScrollerBasic
+ * @ui
+ * @public
+ */
+var Scroller = exports.Scroller = function Scroller(props) {
+  var scrollerProps = (0, _util.setDefaultProps)(props, scrollerDefaultProps);
+  if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
+    scrollerProps.overscrollEffectOn = {
+      arrowKey: false,
+      drag: false,
+      pageKey: false,
+      track: false,
+      wheel: false
+    };
+  }
+  var ariaLabel = scrollerProps['aria-label'],
+    hoverToScroll = scrollerProps.hoverToScroll,
+    rest = _objectWithoutProperties(scrollerProps, _excluded);
+  var id = "scroller_".concat(++scrollerId, "_content");
+
+  // Hooks
+
+  var _useScroll = (0, _useScroll2["default"])(_objectSpread(_objectSpread({}, rest), {}, {
+      scrollToContentContainerOnFocus: true
+    })),
+    ScrollContentWrapper = _useScroll.scrollContentWrapper,
+    scrollContentHandle = _useScroll.scrollContentHandle,
+    isHorizontalScrollbarVisible = _useScroll.isHorizontalScrollbarVisible,
+    isVerticalScrollbarVisible = _useScroll.isVerticalScrollbarVisible,
+    resizeContextProps = _useScroll.resizeContextProps,
+    scrollContainerProps = _useScroll.scrollContainerProps,
+    scrollContentWrapperProps = _useScroll.scrollContentWrapperProps,
+    scrollContentProps = _useScroll.scrollContentProps,
+    horizontalScrollbarProps = _useScroll.horizontalScrollbarProps,
+    verticalScrollbarProps = _useScroll.verticalScrollbarProps,
+    hoverToScrollProps = _useScroll.hoverToScrollProps;
+  var className = scrollContentWrapperProps.className,
+    scrollContentWrapperRest = _objectWithoutProperties(scrollContentWrapperProps, _excluded2);
+  var _useThemeScroller = (0, _useThemeScroller2["default"])(rest, _objectSpread(_objectSpread({}, scrollContentProps), {}, {
+      className: (0, _classnames["default"])(className, scrollContentProps.className)
+    }), id, isHorizontalScrollbarVisible, isVerticalScrollbarVisible),
+    editableWrapperProps = _useThemeScroller.editableWrapperProps,
+    focusableBodyProps = _useThemeScroller.focusableBodyProps,
+    themeScrollContentProps = _useThemeScroller.themeScrollContentProps;
+  var children = rest.children,
+    direction = rest.direction,
+    editable = rest.editable;
+
+  // To apply spotlight navigableFilter, SpottableDiv should be in scrollContainer.
+  var ScrollBody = rest.focusableScrollbar === 'byEnter' ? SpottableDiv : _react.Fragment;
+
+  // Render
+  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), {}, {
+          "aria-label": ariaLabel,
+          id: id,
+          ref: scrollContentHandle,
+          children: editable && direction === 'horizontal' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableWrapper.EditableWrapper, _objectSpread({}, editableWrapperProps)) : children
+        })), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
+      }))
+    }))
+  }));
+};
+Scroller.displayName = 'Scroller';
+Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
+  /**
+   * The "aria-label" for the Scroller.
+   *
+   * When `aria-label` is set and `focusableScrollbar` is `byEnter`, it will be used
+   * instead to provide an accessibility label for the Scroller.
+   *
+   * @type {String}
+   * @public
+   */
+  'aria-label': _propTypes["default"].string,
+  /**
+   * A callback function that receives a reference to the `scrollTo` feature.
+   *
+   * Once received, the `scrollTo` method can be called as an imperative interface.
+   *
+   * - {position: {x, y}} - Pixel value for x and/or y position
+   * - {align} - Where the scroll area should be aligned. Values are:
+   *   `'left'`, `'right'`, `'top'`, `'bottom'`,
+   *   `'topleft'`, `'topright'`, `'bottomleft'`, and `'bottomright'`.
+   * - {node} - Node to scroll into view
+   * - {animate} - When `true`, scroll occurs with animation. When `false`, no
+   *   animation occurs.
+   * - {focus} - When `true`, attempts to focus item after scroll. Only valid when scrolling
+   *   by `node`.
+   * > Note: Only specify one of: `position`, `align`, `node`
+   *
+   * Example:
+   * ```
+   *	// If you set cbScrollTo prop like below;
+   *	cbScrollTo: (fn) => {this.scrollTo = fn;}
+   *	// You can simply call like below;
+   *	this.scrollTo({align: 'top'}); // scroll to the top
+   * ```
+   *
+   * @type {Function}
+   * @public
+   */
+  cbScrollTo: _propTypes["default"].func,
+  /**
+   * This is set to `true` by SpotlightContainerDecorator
+   *
+   * @type {Boolean}
+   * @private
+   */
+  'data-spotlight-container': _propTypes["default"].bool,
+  /**
+   * `false` if the content of the scroller could get focus
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  'data-spotlight-container-disabled': _propTypes["default"].bool,
+  /**
+   * This is passed onto the wrapped component to allow
+   * it to customize the spotlight container for its use case.
+   *
+   * @type {String}
+   * @private
+   */
+  'data-spotlight-id': _propTypes["default"].string,
+  /**
+   * Disable voice control feature of component.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  'data-webos-voice-disabled': _propTypes["default"].bool,
+  /**
+   * Activates the component for voice control.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  'data-webos-voice-focused': _propTypes["default"].bool,
+  /**
+   * The voice control group label.
+   *
+   * @type {String}
+   * @public
+   */
+  'data-webos-voice-group-label': _propTypes["default"].string,
+  /**
+   * Direction of the scroller.
+   *
+   * @type {('both'|'horizontal'|'vertical')}
+   * @default 'both'
+   * @public
+   */
+  direction: _propTypes["default"].oneOf(['both', 'horizontal', 'vertical']),
+  /**
+   * Enables editing items in the scroller.
+   * You can specify props for editable scroller as an object.
+   * See the details in {@link limestone/Scroller.EditableShape|EditableShape}
+   *
+   * @type {limestone/Scroller.EditableShape}
+   * @public
+   */
+  editable: _EditableWrapper.EditableShape,
+  /**
+   * Adds fade-out effect on the scroller.
+   *
+   * Set this to `true` only if the content has no spottable but text.
+   * > Note: Fade-out effect will not show if the `direction` is set to `both`.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  fadeOut: _propTypes["default"].bool,
+  /**
+   * Allows 5-way navigation to the scroll thumb.
+   *
+   * By default, 5-way will not move focus to the scroll thumb.
+   * If `true`, the scroll thumb will get focus by directional keys.
+   * If `'byEnter'`, scroll thumb will get focus first by directional keys,
+   * then the scroll body will get focus by enter key or back key pressed on scroll thumb.
+   *
+   * @type {Boolean|'byEnter'}
+   * @default false
+   * @public
+   */
+  focusableScrollbar: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['byEnter'])]),
+  /**
+   * Specifies how to show horizontal scrollbar.
+   *
+   * @type {('auto'|'visible'|'hidden')}
+   * @default 'auto'
+   * @public
+   */
+  horizontalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),
+  /**
+   * Sets the hint string read when focusing the scroll thumb in the horizontal scroll bar.
+   *
+   * @type {String}
+   * @default $L('scroll up or down with up down button')
+   * @public
+   */
+  horizontalScrollThumbAriaLabel: _propTypes["default"].string,
+  /**
+   * Enables scroll by hover on edges in scroll direction.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  hoverToScroll: _propTypes["default"].bool,
+  /**
+   * Unique identifier for the component.
+   *
+   * When defined and when the `Scroller` is within a {@link limestone/Panels.Panel|Panel}, the
+   * `Scroller` will store its scroll position and restore that position when returning to the
+   * `Panel`.
+   *
+   * @type {String}
+   * @public
+   */
+  id: _propTypes["default"].string,
+  /**
+   * Prevents scroll by dragging or flicking on the scroller.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  noScrollByDrag: _propTypes["default"].bool,
+  /**
+   * Prevents scroll by wheeling on the scroller.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noScrollByWheel: _propTypes["default"].bool,
+  /**
+   * Called when scrolling.
+   *
+   * Passes `scrollLeft`, `scrollTop`.
+   * It is not recommended to set this prop since it can cause performance degradation.
+   * Use `onScrollStart` or `onScrollStop` instead.
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @public
+   */
+  onScroll: _propTypes["default"].func,
+  /**
+   * Called when scroll starts.
+   *
+   * Passes `scrollLeft` and `scrollTop`.
+   *
+   * Example:
+   * ```
+   * onScrollStart = ({scrollLeft, scrollTop}) => {
+   *     // do something with scrollLeft and scrollTop
+   * }
+   *
+   * render = () => (
+   *     <Scroller
+   *         ...
+   *         onScrollStart={this.onScrollStart}
+   *         ...
+   *     />
+   * )
+   * ```
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @public
+   */
+  onScrollStart: _propTypes["default"].func,
+  /**
+   * Called when scroll stops.
+   *
+   * Passes `scrollLeft` and `scrollTop`.
+   *
+   * Example:
+   * ```
+   * onScrollStop = ({scrollLeft, scrollTop}) => {
+   *     // do something with scrollLeft and scrollTop
+   * }
+   *
+   * render = () => (
+   *     <Scroller
+   *         ...
+   *         onScrollStop={this.onScrollStop}
+   *         ...
+   *     />
+   * )
+   * ```
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @public
+   */
+  onScrollStop: _propTypes["default"].func,
+  /**
+   * Specifies overscroll effects shows on which type of inputs.
+   *
+   * @type {Object}
+   * @default {
+   *	arrowKey: false,
+   *	drag: true,
+   *	pageKey: false,
+   *	track: false,
+   *	wheel: true
+   * }
+   * @private
+   */
+  overscrollEffectOn: _propTypes["default"].shape({
+    arrowKey: _propTypes["default"].bool,
+    drag: _propTypes["default"].bool,
+    pageKey: _propTypes["default"].bool,
+    track: _propTypes["default"].bool,
+    wheel: _propTypes["default"].bool
+  }),
+  /**
+   * 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,
+  /**
+   * Specifies how to scroll.
+   *
+   * @type {('native'|'translate')}
+   * @default 'native'
+   * @public
+   */
+  scrollMode: _propTypes["default"].oneOf(['native', 'translate']),
+  /**
+   * Specifies how to show vertical scrollbar.
+   *
+   * @type {('auto'|'visible'|'hidden')}
+   * @default 'auto'
+   * @public
+   */
+  verticalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),
+  /**
+   * Sets the hint string read when focusing the scroll thumb in the vertical scroll bar.
+   *
+   * @type {String}
+   * @default $L('scroll left or right with left right button')
+   * @public
+   */
+  verticalScrollThumbAriaLabel: _propTypes["default"].string
+};
+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;

package/Scroller/Scroller.module.css

@@ -0,0 +1,41 @@
+.focusableBody {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: inherit;
+}
+.focusableBody::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 0.25rem;
+  opacity: 0;
+}
+:global(.spotlight-input-key):global(.spotlight-input-key) .focusableBody:global(.spottable):focus::before,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .focusableBody:global(.spottable):focus::before {
+  background-color: color(from var(--semantic-color-surface-default-focused) srgb r g b / 0.1);
+  opacity: 1;
+}
+:global(.spotlight-input-key):global(.spotlight-input-touch) .focusableBody:global(.spottable):active::before {
+  background-color: color(from var(--semantic-color-surface-default-focused) srgb r g b / 0.1);
+  opacity: 1;
+}
+.verticalFadeout {
+  padding: 1rem 0;
+  mask-image: linear-gradient(transparent, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
+}
+.focusableBody .verticalFadeout {
+  padding: 1.5rem 1rem 1.5rem 1.875rem;
+  mask-image: linear-gradient(transparent 0.5rem, #000 calc(0.5rem + 1rem), #000 calc(100% - 1rem - 0.5rem), transparent calc(100% - 0.5rem));
+}
+:global(.enact-locale-right-to-left) .focusableBody .verticalFadeout {
+  padding: 1.5rem 1.875rem 1.5rem 1rem;
+}
+.horizontalFadeout {
+  padding: 0 1rem;
+  mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
+}

package/Scroller/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "Scroller.js"
+}

package/Scroller/tests/ContentContainerDecorator-specs.js

@@ -0,0 +1,20 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _container = require("@enact/spotlight/src/container");
+var _react = require("@testing-library/react");
+var _Scroller = require("../Scroller");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('ContentContainerDecorator', function () {
+  test('should set \'positionTargetOnFocus\' container config to true', function () {
+    var Container = (0, _Scroller.ContentContainerDecorator)('div');
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      "data-testid": "container-id"
+    }));
+    var containerId = (0, _container.getContainerId)(_react.screen.getByTestId('container-id'));
+    var containerConfig = (0, _container.getContainerConfig)(containerId);
+    var actual = containerConfig.positionTargetOnFocus;
+    var expected = true;
+    expect(actual).toBe(expected);
+  });
+});

package/Scroller/tests/EditableWrapper-specs.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Button = _interopRequireDefault(require("../../Button"));
+var _IconItem = _interopRequireDefault(require("../../IconItem"));
+var _Scroller = _interopRequireDefault(require("../Scroller"));
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+var keyDownUp = function keyDownUp(keyCode) {
+  return function (elm) {
+    _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode
+    });
+    return _react.fireEvent.keyUp(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var pressEnterKey = keyDownUp(13);
+var populateItems = function populateItems(_ref) {
+  var index = _ref.index;
+  var iconItemProps = {
+    background: '#ffffff',
+    bordered: true,
+    disabled: false,
+    label: "Icon ".concat(index)
+  };
+  return {
+    index: index,
+    iconItemProps: iconItemProps
+  };
+};
+var ContainerDivWithLeaveForConfig = (0, _SpotlightContainerDecorator["default"])({
+  leaveFor: {
+    left: '',
+    right: ''
+  }
+}, 'div');
+describe('Editable Scroller', function () {
+  var items;
+  var editableScrollerContents;
+  beforeEach(function () {
+    items = [];
+    for (var i = 0; i < 20; i++) {
+      items.push(populateItems({
+        index: i
+      }));
+    }
+    editableScrollerContents = items.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        "aria-label": "Icon ".concat(item.index),
+        "data-index": item.index,
+        style: {
+          order: index + 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContainerDivWithLeaveForConfig, {
+          children: [item.disabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            "aria-label": "Delete",
+            icon: "trash"
+          }), item.disabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            "aria-label": "Hide",
+            icon: "minus"
+          }), item.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            "aria-label": "Show",
+            icon: "plus"
+          }) : null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem["default"], _objectSpread(_objectSpread({}, item.iconItemProps), {}, {
+          disabled: item.iconItemProps['disabled'] || item.hidden
+        }))]
+      }, item.index);
+    });
+  });
+  afterEach(function () {
+    items = null;
+    editableScrollerContents = null;
+  });
+  describe('Select Item', function () {
+    test('should have selected class and custom selected class when item is selected', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+        direction: "horizontal",
+        editable: {
+          css: {
+            'selected': 'customSelected'
+          },
+          onComplete: jest.fn(),
+          removeItemFuncRef: jest.fn(),
+          hideItemFuncRef: jest.fn(),
+          showItemFuncRef: jest.fn(),
+          focusItemFuncRef: jest.fn(),
+          selectItemBy: 'press'
+        },
+        children: editableScrollerContents
+      }));
+      var item = _react.screen.getByLabelText('Icon 0');
+      pressEnterKey(item);
+      expect(item).toHaveClass('selected');
+      expect(item).toHaveClass('customSelected');
+    });
+    test('should not have selected class and custom selected class and should have custom focused class when item is unselected', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+        direction: "horizontal",
+        editable: {
+          css: {
+            'selected': 'customSelected',
+            'focused': 'customFocused'
+          },
+          onComplete: jest.fn(),
+          removeItemFuncRef: jest.fn(),
+          hideItemFuncRef: jest.fn(),
+          showItemFuncRef: jest.fn(),
+          focusItemFuncRef: jest.fn(),
+          selectItemBy: 'press'
+        },
+        children: editableScrollerContents
+      }));
+      _spotlight["default"].setPointerMode(false);
+      var item = _react.screen.getByLabelText('Icon 0');
+      pressEnterKey(item);
+      pressEnterKey(item);
+      expect(item).not.toHaveClass('selected');
+      expect(item).not.toHaveClass('customSelected');
+      expect(item).toHaveClass('customFocused');
+    });
+  });
+});