@enact/limestone 1.3.0

package/internal/DateTime/tests/DateTimeDecorator-specs.js

@@ -0,0 +1,33 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('DateTimeDecorator', function () {
+  test('should accept an updated JavaScript Date for its value prop', function () {
+    var Picker = (0, _.DateTimeDecorator)({}, function PickerBase(_ref) {
+      var title = _ref.title,
+        value = _ref.value;
+      var minuteValue = value.getMinutes();
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        title: title,
+        children: minuteValue
+      });
+    });
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+        title: "Date",
+        value: new Date(2000, 0, 1, 12, 30),
+        locale: "en-US"
+      })),
+      rerender = _render.rerender;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+      title: "Date",
+      value: new Date(2000, 0, 1, 12, 45),
+      locale: "en-US"
+    }));
+    var expected = '45';
+    var actual = _react.screen.getByTitle('Date').textContent;
+    expect(actual).toBe(expected);
+  });
+});

package/internal/DebounceDecorator/DebounceDecorator.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DebounceDecorator = 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");
+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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } /**
+ * Exports the {@link limestone/internal/DebounceDecorator.DebounceDecorator} higher-order component
+ *
+ * @module limestone/internal/DebounceDecorator
+ * @private
+ */ /**
+ * Default config for {@link limestone/internal/DebounceDecorator.DebounceDecorator}.
+ *
+ * @memberof limestone/internal/DebounceDecorator.DebounceDecorator
+ * @hocconfig
+ */
+var defaultConfig = {
+  /**
+   * Event name to cancel an active debounce
+   *
+   * @type {String}
+   * @default null
+   * @memberof limestone/internal/DebounceDecorator.DebounceDecorator.defaultConfig
+   */
+  cancel: null,
+  /**
+   * Event name to debounce
+   *
+   * @type {String}
+   * @default 'onChange'
+   * @memberof limestone/internal/DebounceDecorator.DebounceDecorator.defaultConfig
+   */
+  debounce: 'onChange',
+  /**
+   * Time, in milliseconds, to wait before emitting the event
+   *
+   * @type {Number}
+   * @default 500
+   * @memberof limestone/internal/DebounceDecorator.DebounceDecorator.defaultConfig
+   */
+  delay: 500
+};
+
+/**
+ * Provides common means of delaying an event response, like throttling
+ *
+ * This is useful if events are flooding in too quickly to efficiently handle. This lets you ignore
+ * events occurring after `delay` of milliseconds.
+ *
+ * @class DebounceDecorator
+ * @memberof limestone/internal/DebounceDecorator
+ * @hoc
+ * @private
+ */
+var DebounceDecorator = exports.DebounceDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  var _Class;
+  var cancel = config.cancel,
+    debounce = config.debounce,
+    delay = config.delay;
+  return _Class = /*#__PURE__*/function (_Component) {
+    function _Class(props) {
+      var _this;
+      _classCallCheck(this, _Class);
+      _this = _callSuper(this, _Class, [props]);
+      _this.handleEvent = function (ev) {
+        _this.job.start(ev);
+      };
+      _this.handleCancel = function (ev) {
+        if (_this.props[cancel]) {
+          _this.props[cancel](ev);
+        }
+        _this.job.stop();
+      };
+      _this.job = new _util.Job(_this.emitEvent.bind(_this), delay);
+      return _this;
+    }
+    _inherits(_Class, _Component);
+    return _createClass(_Class, [{
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.job.stop();
+      }
+    }, {
+      key: "emitEvent",
+      value: function emitEvent(ev) {
+        if (this.props[debounce]) {
+          this.props[debounce](ev);
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var props = this.props;
+        if (debounce || cancel) {
+          props = _objectSpread({}, props);
+          if (debounce) props[debounce] = this.handleEvent;
+          if (cancel) props[cancel] = this.handleCancel;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
+      }
+    }]);
+  }(_react.Component), _Class.displayName = 'DebounceDecorator', _Class.propTypes = /** @lends limestone/internal/DebounceDecorator.DebounceDecorator.prototype */_defineProperty({}, debounce, _propTypes["default"].func), _Class;
+});
+var _default = exports["default"] = DebounceDecorator;

package/internal/DebounceDecorator/package.json

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

package/internal/DebounceDecorator/tests/DebounceDecorator-specs.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = require("react");
+var _ = _interopRequireDefault(require("../"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+describe('DebounceDecorator', function () {
+  beforeEach(function () {
+    jest.useFakeTimers();
+  });
+  afterEach(function () {
+    jest.useRealTimers();
+  });
+  test('should emit the event after the delay', function (done) {
+    var Component = (0, _["default"])({
+      debounce: 'onChange',
+      delay: 100
+    }, function Base(_ref) {
+      var onChange = _ref.onChange;
+      var ref = (0, _react2.useRef)(null);
+      (0, _react2.useEffect)(function () {
+        var current = ref.current;
+        current.addEventListener('onChange', onChange);
+        return function () {
+          current.removeEventListener('onChange', onChange);
+        };
+      }, [onChange]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref,
+        children: "Test"
+      });
+    });
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      onChange: spy
+    }));
+    var elem = _react.screen.getByText('Test');
+    (0, _react.fireEvent)(elem, (0, _react.createEvent)('onChange', elem));
+    expect(spy).not.toHaveBeenCalled();
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(150);
+    });
+    expect(spy).toHaveBeenCalled();
+    done();
+  });
+  test('should restart the delay if another event occurs before timeout', function (done) {
+    var Component = (0, _["default"])({
+      debounce: 'onChange',
+      delay: 100
+    }, function Base(_ref2) {
+      var onChange = _ref2.onChange;
+      var ref = (0, _react2.useRef)(null);
+      (0, _react2.useEffect)(function () {
+        var current = ref.current;
+        current.addEventListener('onChange', onChange);
+        return function () {
+          current.removeEventListener('onChange', onChange);
+        };
+      }, [onChange]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref,
+        children: "Test"
+      });
+    });
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      onChange: spy
+    }));
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(50);
+    });
+    expect(spy).not.toHaveBeenCalled();
+    var elem = _react.screen.getByText('Test');
+    (0, _react.fireEvent)(elem, (0, _react.createEvent)('onChange', elem));
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(75);
+    });
+    expect(spy).not.toHaveBeenCalled();
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(75);
+    });
+    expect(spy).toHaveBeenCalled();
+    done();
+  });
+  test('should not emit the event if the cancel event occurs before the delay', function (done) {
+    var Component = (0, _["default"])({
+      cancel: 'onCancel',
+      debounce: 'onChange',
+      delay: 100
+    }, function Base(_ref3) {
+      var onCancel = _ref3.onCancel,
+        onChange = _ref3.onChange;
+      var ref = (0, _react2.useRef)(null);
+      (0, _react2.useEffect)(function () {
+        var current = ref.current;
+        current.addEventListener('onChange', onChange);
+        current.addEventListener('onCancel', onCancel);
+        return function () {
+          current.removeEventListener('onChange', onChange);
+          current.removeEventListener('onCancel', onCancel);
+        };
+      }, [onCancel, onChange]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref,
+        children: "Test"
+      });
+    });
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      onChange: spy
+    }));
+    var elem = _react.screen.getByText('Test');
+    (0, _react.fireEvent)(elem, (0, _react.createEvent)('onChange', elem));
+    (0, _react.fireEvent)(elem, (0, _react.createEvent)('onCancel', elem));
+    expect(spy).not.toHaveBeenCalled();
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(150);
+    });
+    expect(spy).not.toHaveBeenCalled();
+    done();
+  });
+  test('should emit the onCancel event immediately', function () {
+    var Component = (0, _["default"])({
+      cancel: 'onCancel',
+      debounce: 'onChange',
+      delay: 100
+    }, function Base(_ref4) {
+      var onCancel = _ref4.onCancel;
+      var ref = (0, _react2.useRef)(null);
+      (0, _react2.useEffect)(function () {
+        var current = ref.current;
+        current.addEventListener('onCancel', onCancel);
+        return function () {
+          current.removeEventListener('onCancel', onCancel);
+        };
+      }, [onCancel]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref,
+        children: "Test"
+      });
+    });
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      onCancel: spy
+    }));
+    var elem = _react.screen.getByText('Test');
+    (0, _react.fireEvent)(elem, (0, _react.createEvent)('onCancel', elem));
+    expect(spy).toHaveBeenCalled();
+  });
+});

package/internal/Panels/Arrangers.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FadeAndSlideArranger = exports.CrossFadeArranger = exports.BasicArranger = void 0;
+var _ViewManager = require("@enact/ui/ViewManager");
+var _excluded = ["duration", "reverse"];
+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 _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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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 quadInOut = 'cubic-bezier(0.455, 0.030, 0.515, 0.955)';
+var animationOptions = {
+  easing: quadInOut
+};
+
+// Batches animations together so that all views start/end at the same time
+var callbacks = [];
+var idle = function idle(callback) {
+  callbacks.push(callback);
+  if (callbacks.length === 1) {
+    var idleCallback = function idleCallback() {
+      callbacks.forEach(function (fn) {
+        return fn();
+      });
+      callbacks.length = 0;
+    };
+    if (typeof window !== 'undefined' && typeof window.requestIdleCallback === 'function') {
+      window.requestIdleCallback(idleCallback, {
+        timeout: 400
+      });
+    } else {
+      setTimeout(idleCallback);
+    }
+  }
+};
+var AnimateOnIdle = /*#__PURE__*/function () {
+  function AnimateOnIdle(node, keyframes, _ref) {
+    var _this = this;
+    var duration = _ref.duration,
+      reverse = _ref.reverse,
+      options = _objectWithoutProperties(_ref, _excluded);
+    _classCallCheck(this, AnimateOnIdle);
+    this.animation = null;
+
+    // used to "fill" when the animation completes
+    this.keyframes = [keyframes[reverse ? keyframes.length - 1 : 0], keyframes[reverse ? 0 : keyframes.length - 1]];
+    this._onfinish = null;
+    this._oncancel = null;
+    this._reverse = false;
+    this._playState = 'idle';
+    this.fill(node, this.keyframes[0]);
+    this.handleFinish = function () {
+      _this._playState = 'finished';
+      _this.fill(node, _this.keyframes[1]);
+      if (_this._onfinish) _this._onfinish();
+    };
+    this.handleCancel = function () {
+      _this._playState = 'finished';
+      _this.fill(node, _this.keyframes[0]);
+      if (_this._oncancel) _this._oncancel();
+    };
+    idle(function () {
+      // if the animation was finished/cancelled before the idle callback occurs, bail out
+      if (_this._playState === 'finished') return;
+      _this.animation = node.animate(keyframes, _objectSpread({
+        duration: duration,
+        direction: reverse ? 'reverse' : 'normal',
+        fill: 'none'
+      }, options));
+      _this.animation.onfinish = _this.handleFinish;
+      _this.animation.oncancel = _this.handleCancel;
+      if (_this._reverse) {
+        _this.animation.reverse();
+      }
+    });
+  }
+  return _createClass(AnimateOnIdle, [{
+    key: "fill",
+    value: function fill(node, keyframe) {
+      // NOTE: this is naive atm to only address transform. We can extend it later.
+      node.style.transform = keyframe.transform;
+    }
+  }, {
+    key: "playState",
+    get: function get() {
+      return this.animation ? this.animation.playState : this._playState;
+    }
+  }, {
+    key: "onfinish",
+    set: function set(value) {
+      this._onfinish = value;
+    }
+  }, {
+    key: "oncancel",
+    set: function set(value) {
+      this._oncancel = value;
+    }
+  }, {
+    key: "finish",
+    value: function finish() {
+      if (this.animation) {
+        this.animation.finish();
+      } else {
+        this.handleFinish();
+      }
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      if (this.animation) {
+        this.animation.cancel();
+      } else {
+        this.handleCancel();
+      }
+    }
+  }, {
+    key: "reverse",
+    value: function reverse() {
+      // swap the first/last keyframe so we fill the correct frame
+      this.keyframes.reverse();
+      if (this.animation) {
+        this.animation.reverse();
+      } else {
+        // do we need to account for re-reversing? seems unlikely but a possibility perhaps
+        this._reverse = true;
+      }
+    }
+  }]);
+}();
+var deferArrange = function deferArrange(config, keyframes, options) {
+  var node = config.node,
+    duration = config.duration,
+    reverse = config.reverse;
+  return new AnimateOnIdle(node, keyframes, _objectSpread({
+    duration: duration,
+    reverse: reverse
+  }, options));
+};
+
+/**
+ * Arranger that slides panels in from the right and out to the left.
+ *
+ * This arranger is visually the same as {@link ui/ViewManager.SlideLeftArranger} when transition
+ * but prevents skipping transition animations under system load.
+ * Because BasicArranger is an improved version of {@link ui/ViewManager.SlideLeftArranger},
+ * {@link ui/ViewManager.SlideLeftArranger} can be written in documentation instead of BasicArranger in unavoidable case.
+ *
+ * @type {Arranger}
+ * @private
+ */
+var BasicArranger = exports.BasicArranger = {
+  enter: function enter(config) {
+    return deferArrange(config, [{
+      transform: "translateX(".concat(config.rtl ? '-' : '', "100%)"),
+      offset: 0
+    }, {
+      transform: 'none',
+      offset: 1
+    }], animationOptions);
+  },
+  leave: function leave(config) {
+    return deferArrange(config, [{
+      transform: 'none',
+      offset: 0
+    }, {
+      transform: "translateX(".concat(config.rtl ? '' : '-', "100%)"),
+      offset: 1
+    }], animationOptions);
+  }
+};
+
+/**
+ * Arranger that slides panels in from the right and out to the left.
+ *
+ * @type {Arranger}
+ * @private
+ */
+var FadeAndSlideArranger = exports.FadeAndSlideArranger = {
+  enter: function enter(config) {
+    return (0, _ViewManager.arrange)(config, [{
+      transform: "translateX(".concat(config.rtl ? '-' : '', "100%)"),
+      opacity: 0,
+      offset: 0
+    }, {
+      opacity: 0,
+      offset: 0.5
+    }, {
+      transform: 'none',
+      opacity: 1,
+      offset: 1
+    }], animationOptions);
+  },
+  leave: function leave(config) {
+    return (0, _ViewManager.arrange)(config, [{
+      transform: 'none',
+      opacity: 1,
+      offset: 0
+    }, {
+      opacity: 0,
+      offset: 0.5
+    }, {
+      transform: "translateX(".concat(config.rtl ? '' : '-', "100%)"),
+      opacity: 0,
+      offset: 1
+    }], animationOptions);
+  }
+};
+
+/**
+ * Arranger that cross-fade between panels.
+ *
+ * @type {Arranger}
+ * @private
+ */
+var CrossFadeArranger = exports.CrossFadeArranger = {
+  enter: function enter(config) {
+    return (0, _ViewManager.arrange)(config, [{
+      opacity: 0,
+      offset: 0
+    }, {
+      opacity: 0,
+      offset: 0.5
+    }, {
+      opacity: 1,
+      offset: 1
+    }], animationOptions);
+  },
+  leave: function leave(config) {
+    return (0, _ViewManager.arrange)(config, [{
+      opacity: 1,
+      offset: 0
+    }, {
+      opacity: 0,
+      offset: 0.5
+    }, {
+      opacity: 0,
+      offset: 1
+    }], animationOptions);
+  }
+};

package/internal/Panels/CancelDecorator.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CancelDecorator = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _Cancelable = _interopRequireDefault(require("@enact/ui/Cancelable"));
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _ViewportModule = _interopRequireDefault(require("./Viewport.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var defaultConfig = {
+  cancel: null,
+  shouldCancel: null
+};
+var CancelDecorator = exports.CancelDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  var cancel = config.cancel,
+    shouldCancel = config.shouldCancel;
+  function handleCancel(ev, props) {
+    var index = props.index,
+      handler = props[cancel];
+    if (shouldCancel && !shouldCancel(ev, props)) {
+      return;
+    }
+    if (index > 0 && handler && !document.querySelector(".".concat(_ViewportModule["default"].transitioning))) {
+      // clear Spotlight focus
+      var current = _spotlight["default"].getCurrent();
+      if (current) {
+        current.blur();
+      }
+      handler({
+        type: cancel,
+        index: index - 1
+      });
+      ev.stopPropagation();
+    }
+  }
+  return (0, _Cancelable["default"])({
+    modal: true,
+    onCancel: handleCancel
+  }, Wrapped);
+});
+var _default = exports["default"] = CancelDecorator;

package/internal/Panels/FloatingLayerIdProvider.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FloatingLayerIdProvider = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+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 defaultConfig = {};
+var FloatingLayerIdProvider = exports.FloatingLayerIdProvider = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  // eslint-disable-next-line no-shadow
+  return function FloatingLayerIdProvider(props) {
+    var _useFloatingLayer = (0, _FloatingLayer.useFloatingLayer)(),
+      floatingLayerId = _useFloatingLayer.floatingLayerId;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, props), {}, {
+      floatingLayerId: floatingLayerId
+    }));
+  };
+});
+var _default = exports["default"] = FloatingLayerIdProvider;