@enact/limestone 1.3.0

package/internal/Panels/NavigationButton.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavigationButton = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _Button = _interopRequireDefault(require("../../Button"));
+var _NavigationButtonModule = _interopRequireDefault(require("./NavigationButton.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["component", "focusEffectIconOnly", "visible"];
+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 NavigationButton = exports.NavigationButton = (0, _kind["default"])({
+  name: 'NavigationButton',
+  propTypes: {
+    component: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].element, _propTypes["default"].func]),
+    focusEffectIconOnly: _propTypes["default"].bool,
+    onClick: _propTypes["default"].func,
+    visible: _propTypes["default"].bool
+  },
+  render: function render(_ref) {
+    var component = _ref.component,
+      focusEffectIconOnly = _ref.focusEffectIconOnly,
+      visible = _ref.visible,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    if (/*#__PURE__*/(0, _react.isValidElement)(component)) {
+      (0, _util.extractAriaProps)(rest);
+      Object.keys(component.props).forEach(function (key) {
+        // Using the provided prop values as defaults for any component.props value that is
+        // strictly undefined. This follows React's convention for default props in which a
+        // default is used when a prop is either explicitly undefined or omitted and
+        // therefore implicitly undefined.
+        if (typeof component.props[key] !== 'undefined') {
+          rest[key] = component.props[key];
+        }
+      });
+      var Type = component.type;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread({
+        css: focusEffectIconOnly ? _NavigationButtonModule["default"] : null
+      }, rest));
+    } else if (
+    // Explicitly disabled via false/null or visible is set to false
+    component === false || component === null ||
+    // Using the default config and hidden at this time
+    typeof component === 'undefined' && !visible) {
+      return null;
+    }
+    var Component = typeof component === 'function' ? component : _Button["default"];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
+      css: focusEffectIconOnly ? _NavigationButtonModule["default"] : null
+    }, rest));
+  }
+});
+var _default = exports["default"] = NavigationButton;

package/internal/Panels/NavigationButton.module.css

@@ -0,0 +1,69 @@
+.button.hasIcon.small {
+  min-width: 2.25rem;
+  padding: 0 0.375rem;
+}
+.button.hasIcon.small .bg {
+  width: 2.25rem;
+}
+.button.hasIcon.large {
+  min-width: 2.75rem;
+  padding: 0 0.5rem;
+}
+.button.hasIcon.large .bg {
+  width: 2.75rem;
+}
+.button.hasIcon.iconAfter .bg {
+  left: auto;
+  right: 0;
+}
+:global(.enact-locale-right-to-left) .button.hasIcon.iconAfter .bg {
+  left: 0;
+  right: auto;
+}
+.button.hasIcon.iconAfter .icon {
+  margin-left: var(--primitive-spacing-36);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .button.hasIcon.iconAfter .icon {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-36);
+}
+.button.hasIcon.iconBefore .icon {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-36);
+}
+:global(.enact-locale-right-to-left) .button.hasIcon.iconBefore .icon {
+  margin-left: var(--primitive-spacing-36);
+  margin-right: 0;
+}
+.button.hasIcon:global(.neutral) .client :not(.icon) {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .button.hasIcon:global(.neutral):global(.highContrast) .client :not(.icon) {
+  color: var(--semantic-color-on-background-main);
+}
+.button.hasIcon:global(.light) .client :not(.icon) {
+  color: var(--semantic-color-on-background-main);
+}
+.button.hasIcon:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.button.hasIcon:global(.game) .client :not(.icon) {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) .button.hasIcon:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .button.hasIcon:global(.game) .client :not(.icon) {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .button.hasIcon:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .button.hasIcon:global(.game) .client :not(.icon) {
+  color: var(--semantic-color-on-background-main);
+}

package/internal/Panels/PanelsRouter.js

@@ -0,0 +1,223 @@
+"use strict";
+
+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 _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _useAutoFocus = _interopRequireDefault(require("./useAutoFocus"));
+var _useFocusOnTransition2 = _interopRequireDefault(require("./useFocusOnTransition"));
+var _useToggleRole2 = _interopRequireDefault(require("./useToggleRole"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "componentRef", "data-spotlight-id", "index", "onTransition", "onWillTransition", "rtl", "subtitle", "title"],
+  _excluded2 = ["onWillTransition"];
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 PanelsContext = exports.PanelsContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+// single-index ViewManagers need some help knowing when the transition direction needs to change
+// because the index is always 0 from its perspective.
+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);
+  // 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;
+  }
+  return prev;
+}
+var defaultConfig = {
+  type: 'wizard'
+};
+
+/**
+ * PanelsRouter passes the children, footer, subtitle, and title from
+ * {@link limestone/WizardPanels.Panel|WizardPanel} to
+ * {@link limestone/WizardPanels.WizardPanelsBase|WizardPanelsBase} and passes the children from
+ * {@link limestone/QuickGuidePanels.Panel|QuickGuidePanel} to
+ * {@link limestone/QuickGuidePanels.QuickGuidePanelsBase|QuickGuidePanelsBase}.
+ *
+ * @class PanelsRouter
+ * @memberof limestone/internal/Panels
+ * @hoc
+ * @private
+ */
+var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  var PanelsProvider = function PanelsProvider(_ref) {
+    var 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 _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      panel = _useState2[0],
+      setPanel = _useState2[1];
+    var _useToggleRole = (0, _useToggleRole2["default"])(),
+      a11yRef = _useToggleRole.ref,
+      a11yOnWillTransition = _useToggleRole.onWillTransition;
+    var autoFocus = (0, _useAutoFocus["default"])({
+      autoFocus: 'default-element',
+      hideChildren: panel == null
+    });
+    var ref = (0, _useChainRefs["default"])(autoFocus, a11yRef, componentRef);
+    var _useReverseTransition = useReverseTransition(index, rtl),
+      reverseTransition = _useReverseTransition.reverseTransition,
+      prevIndex = _useReverseTransition.prevIndex;
+    var _useFocusOnTransition = (0, _useFocusOnTransition2["default"])({
+        onTransition: onTransition,
+        onWillTransition: onWillTransition,
+        spotlightId: spotlightId
+      }),
+      focusOnWillTransition = _useFocusOnTransition.onWillTransition,
+      transition = _objectWithoutProperties(_useFocusOnTransition, _excluded2);
+    var handleWillTransition = (0, _react.useCallback)(function (ev) {
+      focusOnWillTransition(ev);
+      a11yOnWillTransition(ev);
+    }, [a11yOnWillTransition, focusOnWillTransition]);
+    var totalPanels = panel ? _react.Children.count(children) : 0;
+    var currentTitle = panel && panel.title ? panel.title : title;
+    var currentSubTitle = panel && panel.subtitle ? panel.subtitle : subtitle;
+    delete rest.onBack;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PanelsContext, {
+      value: setPanel,
+      children: [_react.Children.toArray(children)[index], config.type === 'wizard' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), panel), transition), {}, {
+        componentRef: ref,
+        "data-spotlight-id": spotlightId,
+        index: index,
+        onWillTransition: handleWillTransition,
+        title: currentTitle,
+        subtitle: currentSubTitle,
+        totalPanels: totalPanels,
+        reverseTransition: reverseTransition,
+        children: panel && panel.children ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "enact-fit",
+          children: panel.children
+        }, "panel".concat(prevIndex)) : null
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), panel), transition), {}, {
+        componentRef: ref,
+        "data-spotlight-id": spotlightId,
+        index: index,
+        onWillTransition: handleWillTransition,
+        totalPanels: totalPanels,
+        children: panel && panel.children ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "enact-fit",
+          children: panel.children
+        }, "panel".concat(prevIndex)) : null
+      }))]
+    });
+  };
+  PanelsProvider.propTypes = /** @lends limestone/internal/Panels.PanelsRouter.prototype */{
+    /**
+     * Obtains a reference to the root node.
+     *
+     * @type {Function|Object}
+     * @private
+     */
+    componentRef: _propTypes["default"].ref,
+    /**
+    * The spotlight id for the panel
+    *
+    * @type {String}
+    * @private
+    */
+    'data-spotlight-id': _propTypes2["default"].string,
+    /**
+    * The currently selected step.
+    *
+    * @type {Number}
+    * @default 0
+    * @private
+    */
+    index: _propTypes2["default"].number,
+    /**
+     * Disables panel transitions.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noAnimation: _propTypes2["default"].bool,
+    /**
+    * Called when a transition completes
+    *
+    * @type {Function}
+    * @private
+    */
+    onTransition: _propTypes2["default"].func,
+    /**
+    * Called when a transition begins
+    *
+    * @type {Function}
+    * @private
+    */
+    onWillTransition: _propTypes2["default"].func,
+    /**
+     * Used to determine the transition direction
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes2["default"].bool,
+    /**
+    * The "default" subtitle for WizardPanels if subtitle isn't explicitly set in
+    * {@link limestone/WizardPanels.Panel|Panel}.
+    * @example
+    * 	<WizardPanels subtitle="Subtitle">
+    *		<WizardPanels.Panel>
+    *			lorem ipsum ...
+    *		</WizardPanels.Panel>
+    *	</WizardPanels>
+    *
+    * @type {String}
+    * @private
+    */
+    subtitle: _propTypes2["default"].string,
+    /**
+    * The "default" title for WizardPanels if title isn't explicitly set in
+    * {@link limestone/WizardPanels.Panel|Panel}.
+    * @example
+    * 	<WizardPanels title="Title">
+    *		<WizardPanels.Panel>
+    *			lorem ipsum ...
+    *		</WizardPanels.Panel>
+    *	</WizardPanels>
+    *
+    * @type {String}
+    * @private
+    */
+    title: _propTypes2["default"].string
+  };
+  return PanelsProvider;
+});
+var _default = exports["default"] = PanelsRouter;

package/internal/Panels/PopupDecorator.js

@@ -0,0 +1,287 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PopupDecorator = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _Skinnable = _interopRequireDefault(require("../../Skinnable"));
+var _Popup = _interopRequireDefault(require("../../Popup"));
+var _CancelDecorator = _interopRequireDefault(require("./CancelDecorator"));
+var _TransitionDecorator = _interopRequireDefault(require("./TransitionDecorator"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "className", "generateId", "id", "index", "noAnimation", "onBack", "onClose"]; // List all the props from Popup that we want to move from this component's root onto Popup.
+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 popupPropList = ['noAutoDismiss', 'onHide', 'onKeyDown', 'onShow', 'open', 'position', 'scrimType', 'spotlightId', 'spotlightRestrict'];
+
+// TODO: Figure out how to document private sub-module members
+
+/**
+ * Default config for {@link limestone/Panels.PopupDecorator}
+ * @hocconfig
+ * @memberof limestone/Panels.PopupDecorator
+ * @private
+ */
+var defaultConfig = {
+  /**
+   * Classes to be added to the root node
+   *
+   * @type {String}
+   * @default null
+   * @memberof limestone/Panels.PopupDecorator.defaultConfig
+   */
+  className: null,
+  /**
+   * Class name module map
+   *
+   * @type {Object}
+   * @default null
+   * @memberof limestone/Panels.PopupDecorator.defaultConfig
+   */
+  css: null,
+  /**
+   * Support accessibility options.
+   *
+   * If true, the aria-live and role in Popup are `null`.
+   *
+   * @type {Boolean}
+   * @default false
+   * @memberof limestone/Panels.PopupDecorator.defaultConfig
+   */
+  noAlertRole: false,
+  /**
+   * Disables the outline in high contrast mode.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  noOutline: false,
+  /**
+   * Arranger for Panels
+   *
+   * @type {Object}
+   * @default null
+   * @memberof limestone/Panels.PopupDecorator.defaultConfig
+   */
+  panelArranger: null
+};
+
+/**
+ * A higher-order component that puts a Panels component into a Popup.
+ *
+ * @class PopupDecorator
+ * @type {Function}
+ * @hoc
+ * @private
+ * @memberof limestone/Panels
+ */
+var PopupDecorator = exports.PopupDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  var cfgClassName = config.className,
+    css = config.css,
+    noAlertRole = config.noAlertRole,
+    noOutline = config.noOutline,
+    panelArranger = config.panelArranger,
+    panelType = config.panelType;
+  var CancelableWrapped = (0, _CancelDecorator["default"])({
+    cancel: 'onBack'
+  }, Wrapped);
+  var Decorator = (0, _kind["default"])({
+    name: 'PopupDecorator',
+    propTypes: /** @lends limestone/Panels.PopupDecorator.prototype */{
+      /**
+       * An object containing properties to be passed to each child.
+       *
+       * @type {Object}
+       * @public
+       */
+      childProps: _propTypes["default"].object,
+      /**
+       * Panels to be rendered
+       *
+       * @type {Node}
+       */
+      children: _propTypes["default"].node,
+      /**
+       * Instructs the Popup to fill the entire height of the screen.
+       *
+       * Normally, the popup will flex in height to match the size of the content until the
+       * screen bounds are met. Use this if you require a full-height popup but don't have
+       * enough content to fill the space, or you want a component to stretch to the edges.
+       *
+       * @type {Boolean}
+       * @public
+       */
+      fullHeight: _propTypes["default"].bool,
+      /**
+       * Function that generates unique identifiers for Panel instances
+       *
+       * @type {Function}
+       * @required
+       * @private
+       */
+      generateId: _propTypes["default"].func,
+      /**
+       * Unique identifier for the Panels instance
+       *
+       * @type {String}
+       * @public
+       */
+      id: _propTypes["default"].string,
+      /**
+       * Index of the active panel
+       *
+       * @type {Number}
+       * @default 0
+       * @public
+       */
+      index: _propTypes["default"].number,
+      /**
+       * Disable transitions.
+       *
+       * @type {Boolean}
+       * @default false
+       * @public
+       */
+      noAnimation: _propTypes["default"].bool,
+      /**
+       * Called with cancel/back key events.
+       *
+       * @type {Function}
+       * @public
+       */
+      onBack: _propTypes["default"].func,
+      /**
+       * Called when closing this Panels instance.
+       *
+       * @type {Function}
+       * @public
+       */
+      onClose: _propTypes["default"].func,
+      /**
+       * Position of the Popup on the screen.
+       *
+       * @type {('left'|'right')}
+       * @default 'right'
+       * @public
+       */
+      // Intentionally excluded 'bottom', 'center', 'fullscreen', and 'top' as those aren't configured for this component at this time.
+      position: _propTypes["default"].oneOf(['left', 'right']),
+      /**
+       * Scrim type.
+       *
+       * @type {('transparent'|'translucent'|'none')}
+       * @default 'translucent'
+       * @public
+       */
+      scrimType: _propTypes["default"].oneOf(['transparent', 'translucent', 'none']),
+      /**
+       * Restricts or prioritizes navigation when focus attempts to leave the popup.
+       *
+       * @type {('self-first'|'self-only')}
+       * @default 'self-only'
+       * @public
+       */
+      spotlightRestrict: _propTypes["default"].oneOf(['self-first', 'self-only']),
+      /**
+       * Size of the popup.
+       *
+       * @type {('narrow'|'half')}
+       * @default 'narrow'
+       * @private
+       */
+      width: _propTypes["default"].oneOf(['narrow', 'half'])
+    },
+    defaultProps: {
+      fullHeight: false,
+      index: 0,
+      noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION,
+      position: 'right',
+      scrimType: 'translucent',
+      spotlightRestrict: 'self-only',
+      width: 'narrow'
+    },
+    styles: {
+      css: css,
+      className: cfgClassName
+    },
+    computed: {
+      className: function className(_ref) {
+        var fullHeight = _ref.fullHeight,
+          scrimType = _ref.scrimType,
+          width = _ref.width,
+          styler = _ref.styler;
+        return styler.append("scrim".concat((0, _util.cap)(scrimType)), width, {
+          fullHeight: fullHeight
+        });
+      },
+      spotlightRestrict: function spotlightRestrict(_ref2) {
+        var scrimType = _ref2.scrimType,
+          _spotlightRestrict = _ref2.spotlightRestrict;
+        return scrimType !== 'none' ? 'self-only' : _spotlightRestrict;
+      }
+    },
+    render: function render(_ref3) {
+      var children = _ref3.children,
+        className = _ref3.className,
+        generateId = _ref3.generateId,
+        id = _ref3.id,
+        index = _ref3.index,
+        noAnimation = _ref3.noAnimation,
+        onBack = _ref3.onBack,
+        onClose = _ref3.onClose,
+        rest = _objectWithoutProperties(_ref3, _excluded);
+      var count = _react.Children.count(children);
+      !(index === 0 && count === 0 || index < count) ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, "Panels index, ".concat(index, ", is invalid for number of children, ").concat(count)) : (0, _invariant["default"])(false) : void 0;
+
+      // Extract all popup props
+      var popupProps = {};
+      for (var prop in rest) {
+        if (popupPropList.indexOf(prop) >= 0) {
+          popupProps[prop] = rest[prop];
+          delete rest[prop];
+        }
+      }
+      delete rest.fullHeight;
+      delete rest.width;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup["default"], _objectSpread(_objectSpread({}, popupProps), {}, {
+        className: className,
+        "data-index": index,
+        id: id,
+        css: css,
+        no5WayClose: true,
+        noAlertRole: noAlertRole,
+        noAnimation: noAnimation,
+        noOutline: noOutline,
+        onClose: onClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelableWrapped, _objectSpread(_objectSpread({}, rest), {}, {
+          arranger: panelArranger,
+          className: css.viewport,
+          generateId: generateId,
+          id: "".concat(id, "_panels"),
+          index: index,
+          noAnimation: noAnimation,
+          onBack: onBack,
+          onClose: onClose,
+          type: panelType,
+          children: children
+        }))
+      }));
+    }
+  });
+  return (0, _TransitionDecorator["default"])((0, _IdProvider["default"])((0, _Skinnable["default"])(Decorator)));
+});
+var _default = exports["default"] = PopupDecorator;