@enact/limestone 1.3.0

package/PopupTabLayout/PopupTabLayout.js

@@ -0,0 +1,605 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopupTabLayoutDecorator = exports.PopupTabLayoutBase = exports.PopupTabLayout = void 0;
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _TabLayout.Tab;
+  }
+});
+exports["default"] = exports.TabPanelsBase = exports.TabPanels = exports.TabPanel = void 0;
+var _handle = require("@enact/core/handle");
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
+var _util = require("@enact/core/util");
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
+var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _container = require("@enact/spotlight/src/container");
+var _target = require("@enact/spotlight/src/target");
+var _IdProvider = require("@enact/ui/internal/IdProvider");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Panels = _interopRequireWildcard(require("../Panels"));
+var _TabLayout = _interopRequireWildcard(require("../TabLayout"));
+var _Popup = _interopRequireDefault(require("../Popup"));
+var _PopupTabLayoutModule = _interopRequireDefault(require("./PopupTabLayout.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "css", "optimized", "PopupComponent"],
+  _excluded2 = ["rtl"],
+  _excluded3 = ["spotlightId"];
+/**
+ * Provides a floating component suitable for grouping collections of managed views.
+ *
+ * @module limestone/PopupTabLayout
+ * @exports PopupTabLayout
+ * @exports Tab
+ * @exports TabPanels
+ * @exports TabPanelsBase
+ * @exports TabPanel
+ */
+// List all the props from PopupTabLayout that we want to move from this component's root onto PopupTabLayout.
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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 _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); }
+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', 'id', 'className', 'style', 'noAnimation', 'onClose'];
+var OptimizedContainer = (0, _SpotlightContainerDecorator["default"])({
+  enterTo: 'default-element',
+  preserveId: true
+}, 'div');
+
+/**
+ * Tabbed Layout component in a floating Popup.
+ *
+ * @class PopupTabLayoutBase
+ * @memberof limestone/PopupTabLayout
+ * @extends limestone/Popup.Popup
+ * @extends limestone/TabLayout.TabLayout
+ * @ui
+ * @public
+ */
+var PopupTabLayoutBase = exports.PopupTabLayoutBase = (0, _kind["default"])({
+  name: 'PopupTabLayout',
+  propTypes: /** @lends limestone/PopupTabLayout.PopupTabLayoutBase.prototype */{
+    /**
+     * Collection of {@link limestone/PopupTabLayout.Tab|Tabs} to render.
+     *
+     * @type {Node}
+     * @public
+     */
+    children: _propTypes["default"].node,
+    /**
+     * Collapses the vertical tab list into icons only.
+     *
+     * Only applies to `orientation="vertical"`.  If the tabs do not include icons, a single
+     * collapsed icon will be shown.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    collapsed: _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.
+     *
+     * @type {Object}
+     * @private
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Specify dimensions for the layout areas.
+     *
+     * All 4 combinations must be supplied: each of the elements, tabs and content in both
+     * collapsed and expanded state.
+     *
+     * @type {{tabs: {collapsed: Number, normal: Number}, content: {expanded: number, normal: number}}}
+     * @default {
+     * 	tabs: {
+     * 		collapsed: 236,
+     * 		normal: 660
+     * 	},
+     * 	content: {
+     * 		expanded: 1320,
+     * 		normal: 1320
+     * 	}
+     * }
+     * @private
+     */
+    dimensions: _propTypes["default"].shape({
+      content: _propTypes["default"].shape({
+        expanded: _propTypes["default"].number.isRequired,
+        normal: _propTypes["default"].number.isRequired
+      }).isRequired,
+      tabs: _propTypes["default"].shape({
+        collapsed: _propTypes["default"].number.isRequired,
+        normal: _propTypes["default"].number.isRequired
+      }).isRequired
+    }),
+    /**
+     * The currently selected tab.
+     *
+     * @type {Number}
+     * @public
+     */
+    index: _propTypes["default"].number,
+    /**
+     * Disables transition animation.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noAnimation: _propTypes["default"].bool,
+    /**
+     * Called when the tabs are collapsed.
+     *
+     * @type {Function}
+     * @public
+     */
+    onCollapse: _propTypes["default"].func,
+    /**
+     * Called when the tabs are expanded.
+     *
+     * @type {Function}
+     * @public
+     */
+    onExpand: _propTypes["default"].func,
+    /**
+     * Called after the popup's "hide" transition finishes.
+     *
+     * @type {Function}
+     * @public
+     */
+    onHide: _propTypes["default"].func,
+    /**
+     * Called when a tab is selected
+     *
+     * @type {Function}
+     * @public
+    */
+    onSelect: _propTypes["default"].func,
+    /**
+     * Called after the popup's "show" transition finishes.
+     *
+     * @type {Function}
+     * @public
+     */
+    onShow: _propTypes["default"].func,
+    /**
+     * Called when the tab collapse or expand animation completes.
+     *
+     * Event payload includes:
+     * * `type` - Always set to "onTabAnimationEnd"
+     * * `collapsed` - `true` when the tabs are collapsed
+     *
+     * @type {Function}
+     * @public
+     */
+    onTabAnimationEnd: _propTypes["default"].func,
+    /**
+     * Controls the visibility of the Popup.
+     *
+     * By default, the Popup and its contents are not rendered until `open`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    open: _propTypes["default"].bool,
+    /**
+     * Optimizes PopupTabLayout without Popup when true.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    optimized: _propTypes["default"].bool,
+    /**
+     * Orientation of the tabs.
+     *
+     * @type {('vertical')}
+     * @private
+     */
+    orientation: _propTypes["default"].oneOf(['vertical']),
+    /**
+     * Position of the Popup on the screen.
+     *
+     * @type {'left'}
+     * @default 'left'
+     * @private
+     */
+    position: _propTypes["default"].oneOf(['left']),
+    /**
+     * Scrim type.
+     *
+     * * Values: `'transparent'`, `'translucent'`, or `'none'`.
+     *
+     * `'none'` is not compatible with `spotlightRestrict` of `'self-only'`, use a transparent scrim
+     * to prevent mouse focus when using popup.
+     *
+     * @type {('transparent'|'translucent'|'none')}
+     * @default 'translucent'
+     * @public
+     */
+    scrimType: _propTypes["default"].oneOf(['transparent', 'translucent', 'none']),
+    /**
+     * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
+     *
+     * @type {String}
+     * @public
+     */
+    spotlightId: _propTypes["default"].string,
+    /**
+     * Restricts or prioritizes navigation when focus attempts to leave the popup.
+     *
+     * It can be either `'none'`, `'self-first'`, or `'self-only'`.
+     *
+     * Note: The ready-to-use {@link limestone/Popup.Popup|Popup} component only supports
+     * `'self-first'` and `'self-only'`.
+     *
+     * @type {('none'|'self-first'|'self-only')}
+     * @public
+     */
+    spotlightRestrict: _propTypes["default"].oneOf(['none', 'self-first', 'self-only'])
+  },
+  defaultProps: {
+    dimensions: {
+      tabs: {
+        collapsed: 216,
+        normal: 660
+      },
+      content: {
+        expanded: 1320,
+        normal: 1320
+      }
+    },
+    orientation: 'vertical',
+    position: 'left',
+    scrimType: 'translucent'
+  },
+  styles: {
+    css: _PopupTabLayoutModule["default"],
+    className: 'popupTabLayout',
+    publicClassNames: ['bg', 'button', 'collapsed', 'content', 'panels', 'popupTabLayout', 'scrimTranslucent', 'selected', 'tab', 'tabGroup', 'tabLayout', 'tabs', 'tabsExpanded', 'vertical']
+  },
+  computed: {
+    className: function className(_ref) {
+      var collapsed = _ref.collapsed,
+        optimized = _ref.optimized,
+        scrimType = _ref.scrimType,
+        styler = _ref.styler;
+      return styler.append({
+        collapsed: collapsed,
+        optimized: optimized
+      }, "scrim".concat((0, _util.cap)(scrimType)));
+    },
+    noAnimation: function noAnimation(_ref2) {
+      var _noAnimation = _ref2.noAnimation;
+      return typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION || _noAnimation;
+    },
+    PopupComponent: function PopupComponent(_ref3) {
+      var optimized = _ref3.optimized;
+      return optimized ? OptimizedContainer : _Popup["default"];
+    }
+  },
+  render: function render(_ref4) {
+    var children = _ref4.children,
+      css = _ref4.css,
+      optimized = _ref4.optimized,
+      PopupComponent = _ref4.PopupComponent,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+    // Extract all relevant popup props
+    var popupProps = {};
+    for (var prop in rest) {
+      if (popupPropList.indexOf(prop) >= 0) {
+        popupProps[prop] = rest[prop];
+        delete rest[prop];
+      }
+    }
+    if (!optimized) {
+      popupProps.noAlertRole = true;
+      popupProps.noOutline = true;
+      popupProps.css = css;
+    } else {
+      delete popupProps.noAnimation;
+      delete popupProps.noAutoDismiss;
+      delete popupProps.onHide;
+      delete popupProps.onShow;
+      delete popupProps.scrimType;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupComponent, _objectSpread(_objectSpread({}, popupProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        css: css,
+        align: "start",
+        anchorTo: "left",
+        type: "popup",
+        children: children
+      }))
+    }));
+  }
+});
+var OptimizedFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
+  var _Class;
+  return _Class = /*#__PURE__*/function (_Component) {
+    function _Class(props) {
+      var _this;
+      _classCallCheck(this, _Class);
+      _this = _callSuper(this, _Class, [props]);
+      if (props.optimized) {
+        _this.paused = new _Pause["default"]('PopupTabLayout');
+        if (props.open) {
+          _this.paused.pause();
+        }
+      }
+      return _this;
+    }
+    _inherits(_Class, _Component);
+    return _createClass(_Class, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        if (this.props.optimized && this.props.open) {
+          this.paused.resume();
+          _spotlight["default"].focus(this.props.spotlightId);
+        }
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (this.props.optimized && this.props.open !== prevProps.open) {
+          if (this.props.open) {
+            _spotlight["default"].focus(this.props.spotlightId);
+          }
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        if (this.props.optimized) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, this.props), {}, {
+            style: !this.props.open ? {
+              display: 'none'
+            } : null
+          }));
+        } else {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, this.props));
+        }
+      }
+    }]);
+  }(_react.Component), _Class.displayName = 'OptimizedFocusDecorator', _Class.propTypes = /** @lends sandstone/PopupTabLayout.OptimizedFocusDecorator.prototype */{
+    /**
+     * Controls the visibility of the PopupTabLayout.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    open: _propTypes["default"].bool,
+    /**
+     * Optimizes PopupTabLayout without Popup when true.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    optimized: _propTypes["default"].bool,
+    /**
+     * The container id.
+     *
+     * @type {String}
+     * @private
+     */
+    spotlightId: _propTypes["default"].string
+  }, _Class;
+});
+
+/**
+ * Add behaviors to PopupTabLayout.
+ *
+ * @class PopupTabLayoutDecorator
+ * @memberof limestone/PopupTabLayout
+ * @mixes limestone/Skinnable.Skinnable
+ * @hoc
+ * @public
+ */
+var PopupTabLayoutDecorator = exports.PopupTabLayoutDecorator = (0, _compose["default"])((0, _IdProvider.IdProvider)({
+  idProp: 'spotlightId',
+  prefix: 'lime-popuptablayout-',
+  generateProp: null
+}), OptimizedFocusDecorator, _Skinnable["default"]);
+
+/**
+ * An instance of {@link limestone/Popup.Popup|Popup} which restricts the `TabLayout` content to
+ * the left side of the screen. The content of `TabLayout` can flex vertically, but not horizontally
+ * (fixed width). This is typically used to switch between several collections of managed views
+ * (`TabPanels` and `TabPanel`, also exported from this module).
+ *
+ * Example:
+ *
+ * ```jsx
+ * 	<PopupTabLayout>
+ * 		<Tab title="Tab One">
+ * 			<TabPanels>
+ * 				<TabPanel>
+ * 					<Header title="First Panel" type="compact" />
+ * 					<Item>Item 1 in Panel 1</Item>
+ * 					<Item>Item 2 in Panel 1</Item>
+ * 				</TabPanel>
+ * 				<TabPanel>
+ * 					<Header title="Second Panel" type="compact" />
+ * 					<Item>Item 1 in Panel 2</Item>
+ * 					<Item>Item 2 in Panel 2</Item>
+ * 				</TabPanel>
+ * 			</TabPanels>
+ * 		</Tab>
+ * 		<Tab title="Tab Two">
+ * 			<Item>Goodbye</Item>
+ * 		</Tab>
+ * 	</PopupTabLayout>
+ * ```
+ *
+ * @class PopupTabLayout
+ * @memberof limestone/PopupTabLayout
+ * @ui
+ * @public
+ */
+var PopupTabLayout = exports.PopupTabLayout = PopupTabLayoutDecorator(PopupTabLayoutBase);
+
+/**
+ * A shortcut to access {@link limestone/PopupTabLayout.Tab}
+ *
+ * @name Tab
+ * @type {limestone/PopupTabLayout.Tab}
+ * @memberof limestone/PopupTabLayout.PopupTabLayout
+ * @extends limestone/TabLayout.Tab
+ */
+PopupTabLayout.Tab = _TabLayout.Tab;
+
+/**
+ * A Tab for use inside this component.
+ *
+ * @class Tab
+ * @memberof limestone/PopupTabLayout
+ * @extends limestone/TabLayout.Tab
+ * @ui
+ */
+
+var tabPanelsHandlers = {
+  onTransition: (0, _handle.handle)((0, _handle.forward)('onTransition'), function (ev, props, _ref5) {
+    var onTransition = _ref5.onTransition;
+    onTransition(ev);
+  }),
+  onKeyDown: (0, _handle.handle)((0, _handle.forward)('onKeyDown'), function (_ref6) {
+    var target = _ref6.target;
+    return target.tagName !== 'INPUT';
+  }, (0, _handle.forProp)('rtl', false), (0, _handle.forKey)('left'), function (ev, _ref7) {
+    var index = _ref7.index;
+    return index > 0;
+  }, function (_ref8) {
+    var target = _ref8.target;
+    var next = (0, _target.getTargetByDirectionFromElement)('left', target);
+    if (next === null || next && !(0, _container.getContainerNode)((0, _container.getContainersForNode)(target).pop()).contains(next)) {
+      return true;
+    }
+    return false;
+  }, function (ev) {
+    if ((0, _container.getContainerNode)((0, _container.getContainersForNode)(ev.target).pop()).tagName === 'HEADER') {
+      ev.stopPropagation();
+      return false;
+    }
+    return document.querySelector("section.".concat(_PopupTabLayoutModule["default"].body)).contains(ev.target);
+  }, (0, _handle.forwardCustom)('onBack'), function () {
+    _spotlight["default"].setPointerMode(false);
+    return true;
+  }, _handle.preventDefault, _handle.stop)
+};
+
+/**
+ * A base component for {@link limestone/PopupTabLayout.TabPanels|TabPanels} which has
+ * left key handler to navigate panels.
+ *
+ * @class TabPanelsBase
+ * @memberof limestone/PopupTabLayout
+ * @extends limestone/Panels.Panels
+ * @ui
+ * @public
+ */
+var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
+  var rtl = _ref9.rtl,
+    rest = _objectWithoutProperties(_ref9, _excluded2);
+  var onTransition = (0, _react.use)(_TabLayout.TabLayoutContext);
+  var handlers = (0, _useHandlers["default"])(tabPanelsHandlers, _objectSpread({
+    rtl: rtl
+  }, rest), {
+    onTransition: onTransition
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], _objectSpread(_objectSpread({
+    noCloseButton: true
+  }, rest), {}, {
+    css: _PopupTabLayoutModule["default"]
+  }, handlers));
+};
+TabPanelsBase.propTypes = {
+  rtl: _propTypes["default"].bool
+};
+
+/**
+ * A customized version of Panels for use inside this component.
+ *
+ * @class TabPanels
+ * @memberof limestone/PopupTabLayout
+ * @extends limestone/PopupTabLayout.TabPanelsBase
+ * @ui
+ * @public
+ */
+var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}, TabPanelsBase);
+
+/**
+ * Omits the close button.
+ *
+ * Unlike most components, this prop defaults to `true`. To show the close button, the prop must
+ * explicitly set it to `false`:
+ *
+ * ```
+ * <TabPanels noCloseButton={false} />
+ * ```
+ *
+ * @name noCloseButton
+ * @memberof limestone/PopupTabLayout.TabPanels.prototype
+ * @type {Boolean}
+ * @default true
+ * @public
+ */
+
+/**
+ * A customized version of Panel for use inside this component.
+ *
+ * @class TabPanel
+ * @memberof limestone/PopupTabLayout
+ * @extends limestone/Panels.Panel
+ * @ui
+ * @public
+ */
+var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
+  var spotlightId = _ref0.spotlightId,
+    rest = _objectWithoutProperties(_ref0, _excluded3);
+  (0, _react.useEffect)(function () {
+    _spotlight["default"].set(spotlightId, {
+      partition: true
+    });
+  }, [spotlightId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.Panel, _objectSpread(_objectSpread({}, rest), {}, {
+    css: _PopupTabLayoutModule["default"],
+    hideChildren: false,
+    spotlightId: spotlightId
+  }));
+};
+TabPanel.propTypes = {
+  /**
+   * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
+   *
+   * @type {String}
+   * @private
+   */
+  spotlightId: _propTypes["default"].string
+};
+var _default = exports["default"] = PopupTabLayout;