@enact/limestone 1.3.0

package/TabLayout/TabLayout.js

@@ -0,0 +1,661 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _Tab["default"];
+  }
+});
+exports["default"] = exports.TabLayoutDecorator = exports.TabLayoutContext = exports.TabLayoutBase = exports.TabLayout = void 0;
+var _handle = require("@enact/core/handle");
+var _keymap = require("@enact/core/keymap");
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
+var _target = require("@enact/spotlight/src/target");
+var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _Changeable = require("@enact/ui/Changeable");
+var _Layout = require("@enact/ui/Layout");
+var _resolution = _interopRequireWildcard(require("@enact/ui/resolution"));
+var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
+var _ViewManager = _interopRequireDefault(require("@enact/ui/ViewManager"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
+var _ThemeDecorator = require("../ThemeDecorator");
+var _RefocusDecorator = _interopRequireWildcard(require("./RefocusDecorator"));
+var _TabGroup = _interopRequireDefault(require("./TabGroup"));
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _TabLayoutModule = _interopRequireDefault(require("./TabLayout.module.css"));
+var _PopupTabLayoutModule = _interopRequireDefault(require("../PopupTabLayout/PopupTabLayout.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "collapsed", "css", "data-spotlight-id", "primaryIndex", "dimensions", "handleClick", "handleEnter", "handleFlick", "handleFocus", "handleTabsTransitionEnd", "index", "onCollapse", "onScrollStop", "onSelect", "orientation", "scrollable", "scrollPosition", "size", "tabOrientation", "tabs", "type"];
+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 _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 _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
+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); } /**
+ * Provides a Limestone-themed TabLayout.
+ *
+ * @module limestone/TabLayout
+ * @exports TabLayout
+ * @exports TabLayoutBase
+ * @exports TabLayoutContext
+ * @exports TabLayoutDecorator
+ * @exports Tab
+ */
+var MAX_TABS_BEFORE_VERTICAL_SCROLLING = 8;
+var TAB_SPACING = 48;
+var TabLayoutContext = exports.TabLayoutContext = /*#__PURE__*/(0, _react.createContext)(null);
+var TouchableCell = (0, _Touchable["default"])(_Layout.Cell);
+var isTouchMode = function isTouchMode() {
+  return (0, _ThemeDecorator.getLastInputType)() === 'touch';
+};
+var getHorizontalTabWidth = function getHorizontalTabWidth(dataSize, size, tabSize) {
+  var widths;
+  if (tabSize) {
+    return tabSize;
+  }
+  if (size === 'small') {
+    widths = [540, 420, 420];
+  } else {
+    widths = [852, 672, 552];
+  }
+  if (dataSize < 5) {
+    return widths[0];
+  } else if (dataSize < 6) {
+    return widths[1];
+  } else {
+    return widths[2];
+  }
+};
+var isHorizontalScrollableTabs = function isHorizontalScrollableTabs(dataSize, offset, size, tabSize) {
+  var _window;
+  var totalTabsWidth = dataSize * getHorizontalTabWidth(dataSize, size, tabSize) + TAB_SPACING * (dataSize - 1) + 2 * offset;
+  return typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.innerWidth ? window.innerWidth < _resolution["default"].scale(totalTabsWidth) : false;
+};
+
+/**
+ * Tabbed Layout component.
+ *
+ * Example:
+ *
+ * ```jsx
+ * 	<TabLayout>
+ * 		<Tab title="Tab One">
+ * 			<Item>Hello</Item>
+ * 		</Tab>
+ * 		<Tab title="Tab Two">
+ * 			<Item>Goodbye</Item>
+ * 		</Tab>
+ * 	</TabLayout>
+ * ```
+ *
+ * @class TabLayout
+ * @memberof limestone/TabLayout
+ * @ui
+ * @public
+ */
+var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
+  name: 'TabLayout',
+  propTypes: /** @lends limestone/TabLayout.TabLayout.prototype */{
+    /**
+     * Sets where this component should attach its tabs and animations.
+     *
+     * "left" and "right" represent true screen left and screen right, while "start" represents
+     * screen left in LTR and screen right in RTL. "end" is the reverse: screen right for LTR
+     * and screen left for RTL.
+     *
+     * @type {('left'|'right'|'start'|'end')}
+     * @default 'start'
+     * @private
+     */
+    anchorTo: _propTypes["default"].oneOf(['left', 'right', 'start', 'end']),
+    /**
+     * Prevents the tab list from automatically collapsing when the screen orientation changes to portrait mode.
+     *
+     * Only applies to `orientation="vertical".
+     *
+     * @type {Boolean}
+     * @public
+     */
+    blockCollapseOnPortrait: _propTypes["default"].bool,
+    /**
+     * Collection of {@link limestone/TabLayout.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.
+     *
+     * The following classes are supported:
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    'data-spotlight-id': _propTypes["default"].string,
+    /**
+     * 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: 228,
+     * 		normal: 882
+     * 	},
+     * 	content: {
+     * 		expanded: null,
+     * 		normal: null
+     * 	}
+     * }
+     * @private
+     */
+    dimensions: _propTypes["default"].shape({
+      content: _propTypes["default"].shape({
+        expanded: _propTypes["default"].number,
+        normal: _propTypes["default"].number
+      }).isRequired,
+      tabs: _propTypes["default"].shape({
+        collapsed: _propTypes["default"].number,
+        normal: _propTypes["default"].number
+      }).isRequired
+    }),
+    /**
+     * The currently selected tab.
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    index: _propTypes["default"].number,
+    /**
+     * The offset of the tabs area from the left and right edges of the screen.
+     * This option is only applicable when `orientation` is set to `horizontal`.
+     * The default value set to `36` to have the right position of the tabs in the normal panel.
+     * If the tabs are supposed to scroll, this value should be set to `132` and the panel should have no padding.
+     *
+     * @type {Number}
+     * @default 36
+     * @public
+     */
+    offset: _propTypes["default"].number,
+    /**
+     * 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 when a tab is selected
+     *
+     * @type {Function}
+     * @public
+    */
+    onSelect: _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,
+    /**
+     * Orientation of the tabs.
+     *
+     * @type {('horizontal'|'vertical')}
+     * @default 'vertical'
+     * @public
+     */
+    orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
+    /**
+     * The index of the primary tab.
+     * When this prop is set, the initial focus will be on the primary tab when rendered.
+     * Also, when pressing the back key from other tabs, the focus will be moved to the primary tab.
+     * If the `primaryIndex` is not provided, the initial focus will default to the first tab during the initial render.
+     *
+     * @type {Number}
+     * @default null
+     * @public
+     */
+    primaryIndex: _propTypes["default"].number,
+    /**
+     * Indicates the content's text direction is right-to-left.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes["default"].bool,
+    /**
+     * The scroll position of the tab list.
+     * This property maintains the vertical scroll position of the tabs when they are scrollable and collapsed.
+     *
+     * @type {{x: number, y: number}}
+     * @default {x: 0, y: 0}
+     * @private
+     */
+    scrollPosition: _propTypes["default"].object,
+    /**
+     * The size of the horizontal tab.
+     *
+     * @type {('small'|'large')}
+     * @default 'large'
+     * @public
+     */
+    size: _propTypes["default"].oneOf(['small', 'large']),
+    /**
+     * Assign a custom size to horizontal tabs.
+     *
+     * Tabs in the horizontal orientation automatically stretch to fill the available width.
+     * Leave this prop blank to use the default auto-sizing behavior.
+     * Tabs may also be set to a finite width using this property. This accepts numeric pixel
+     * values. Be mindful of the value you provide as values that are too wide will run off the
+     * edge of the screen.
+     *
+     * Only applies to `orientation="horizontal"` at this time.
+     *
+     * @type {Number}
+     * @public
+     */
+    tabSize: _propTypes["default"].number,
+    /**
+     * Type of TabLayout.
+     *
+     * @type {('normal'|'popup')}
+     * @default 'normal'
+     * @private
+     */
+    type: _propTypes["default"].oneOf(['normal', 'popup'])
+  },
+  defaultProps: {
+    anchorTo: 'start',
+    dimensions: {
+      tabs: {
+        collapsed: 216,
+        normal: 888
+      },
+      content: {
+        expanded: null,
+        normal: null
+      }
+    },
+    index: null,
+    primaryIndex: null,
+    offset: 36,
+    orientation: 'vertical',
+    scrollPosition: {
+      x: 0,
+      y: 0
+    },
+    size: 'large',
+    type: 'normal'
+  },
+  styles: {
+    css: _TabLayoutModule["default"],
+    className: 'tabLayout',
+    publicClassNames: ['bg', 'button', 'client', 'collapsed', 'content', 'selected', 'tab', 'tabGroup', 'tabLayout', 'tabs', 'tabsExpanded', 'vertical']
+  },
+  handlers: {
+    onKeyDown: function onKeyDown(ev, props) {
+      var keyCode = ev.keyCode,
+        target = ev.target;
+      var collapsed = props.collapsed,
+        orientation = props.orientation,
+        spotlightId = props['data-spotlight-id'];
+      var direction = (0, _spotlight.getDirection)(keyCode);
+      if ((0, _handle.forwardWithPrevent)('onKeyDown', ev, props) && direction && collapsed && orientation === 'vertical' && document.querySelector("[data-spotlight-id='".concat(spotlightId, "']")).contains(target) && target.tagName !== 'INPUT') {
+        _spotlight["default"].setPointerMode(false);
+        ev.preventDefault();
+        _spotlight["default"].set(spotlightId, {
+          navigableFilter: null
+        });
+        var nextTarget = (0, _target.getTargetByDirectionFromElement)(direction, target);
+        var isNextTargetInTabs = nextTarget && document.querySelector(".".concat(_TabLayoutModule["default"].tabs)).contains(nextTarget);
+        _spotlight["default"].set(spotlightId, {
+          navigableFilter: (0, _RefocusDecorator.getNavigableFilter)(spotlightId, collapsed)
+        });
+        if (!isNextTargetInTabs && _spotlight["default"].move(direction)) {
+          ev.stopPropagation();
+        } else if (isNextTargetInTabs && document.querySelector("[data-spotlight-id='".concat(spotlightId, "'] .").concat(_TabLayoutModule["default"].content)).contains(target)) {
+          (0, _handle.forward)('onExpand', ev, props);
+        }
+      } else if ((0, _keymap.is)('enter')(keyCode) && !collapsed && document.querySelector("[data-spotlight-id='".concat(spotlightId, "-tabs-expanded']")).contains(target) && target.tagName !== 'INPUT') {
+        ev.stopPropagation();
+      }
+    },
+    onKeyUp: function onKeyUp(ev, props) {
+      var keyCode = ev.keyCode,
+        target = ev.target;
+      var anchorTo = props.anchorTo,
+        collapsed = props.collapsed,
+        orientation = props.orientation,
+        primaryIndex = props.primaryIndex,
+        spotlightId = props['data-spotlight-id'],
+        rtl = props.rtl,
+        type = props.type;
+      var popupPanelRef = document.querySelector("[data-spotlight-id='".concat(spotlightId, "'] .").concat(_PopupTabLayoutModule["default"].panel));
+      var tabLayoutContentRef = document.querySelector("[data-spotlight-id='".concat(spotlightId, "'] .").concat(_TabLayoutModule["default"].content));
+      var tabsExpandedSpotlightId = "".concat(spotlightId, "-tabs-expanded");
+      if ((0, _handle.forwardWithPrevent)('onKeyUp', ev, props) && (0, _keymap.is)('cancel')(keyCode)) {
+        if (type === 'popup' && popupPanelRef !== null && popupPanelRef !== void 0 && popupPanelRef.contains(target) && (popupPanelRef === null || popupPanelRef === void 0 ? void 0 : popupPanelRef.dataset.index) === '0' || type === 'normal' && !_spotlight["default"].getPointerMode() && tabLayoutContentRef !== null && tabLayoutContentRef !== void 0 && tabLayoutContentRef.contains(target)) {
+          if (collapsed) {
+            (0, _handle.forward)('onExpand', ev, props);
+          }
+          _spotlight["default"].focus("[data-spotlight-id='".concat(tabsExpandedSpotlightId, "']"));
+          ev.stopPropagation();
+        } else if (primaryIndex !== null) {
+          _spotlight["default"].focus("[data-spotlight-id='".concat(tabsExpandedSpotlightId, "-primary-tab']"));
+          ev.stopPropagation();
+        }
+      } else if ((0, _keymap.is)('enter')(keyCode) && !collapsed && document.querySelector("[data-spotlight-id='".concat(tabsExpandedSpotlightId, "']")).contains(target) && target.tagName !== 'INPUT') {
+        _spotlight["default"].setPointerMode(false);
+        var moveTo;
+        if (orientation === 'vertical') {
+          if (anchorTo === 'left') {
+            moveTo = 'right';
+          } else if (anchorTo === 'right') {
+            moveTo = 'left';
+          } else if (anchorTo === 'start') {
+            if (rtl) {
+              moveTo = 'left';
+            } else {
+              moveTo = 'right';
+            }
+          } else if (anchorTo === 'end') {
+            if (!rtl) {
+              moveTo = 'left';
+            } else {
+              moveTo = 'right';
+            }
+          }
+        } else {
+          moveTo = 'down';
+        }
+        _spotlight["default"].move(moveTo);
+      }
+    },
+    onScrollStop: (0, _handle.handle)((0, _handle.forProp)('collapsed', false), (0, _handle.forProp)('orientation', 'vertical'), (0, _handle.forwardCustom)('onScrollStop', function (_ref) {
+      var scrollLeft = _ref.scrollLeft,
+        scrollTop = _ref.scrollTop;
+      return {
+        scrollPosition: {
+          x: scrollLeft,
+          y: scrollTop
+        }
+      };
+    })),
+    onSelect: (0, _handle.handle)((0, _handle.forwardCustom)('onSelect', function (_ref2) {
+      var selected = _ref2.selected;
+      return {
+        index: selected
+      };
+    })),
+    handleTabsTransitionEnd: (0, _handle.handle)((0, _handle.forward)('onTransitionEnd'), (0, _handle.forProp)('orientation', 'vertical'),
+    // Validate the transition is from the root node
+    function (ev) {
+      return ev.target.classList.contains(_TabLayoutModule["default"].tabs);
+    }, (0, _handle.forwardCustom)('onTabAnimationEnd', function (ev, _ref3) {
+      var collapsed = _ref3.collapsed;
+      return {
+        collapsed: Boolean(collapsed)
+      };
+    })),
+    handleFlick: function handleFlick(_ref4, _ref5) {
+      var direction = _ref4.direction,
+        velocityX = _ref4.velocityX;
+      var collapsed = _ref5.collapsed,
+        onCollapse = _ref5.onCollapse,
+        onExpand = _ref5.onExpand;
+      // See the global class 'spotlight-input-touch' to check the input type is touch
+      if (isTouchMode() && direction === 'horizontal') {
+        if (!collapsed && velocityX < 0) {
+          onCollapse();
+        } else if (collapsed && velocityX > 0) {
+          onExpand();
+        }
+      }
+    },
+    handleClick: (0, _handle.handle)(isTouchMode, (0, _handle.forward)('onExpand')),
+    handleFocus: (0, _handle.handle)((0, _handle.not)(isTouchMode), (0, _handle.forward)('onExpand')),
+    handleEnter: function handleEnter(ev, props) {
+      var index = ev.index,
+        previousIndex = ev.previousIndex;
+      if (index > previousIndex) {
+        (0, _handle.forward)('onCollapse', ev, props);
+      }
+    }
+  },
+  computed: {
+    children: function children(_ref6) {
+      var _children = _ref6.children;
+      return (0, _util.mapAndFilterChildren)(_children, function (child) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: child.props.children
+        });
+      });
+    },
+    className: function className(_ref7) {
+      var collapsed = _ref7.collapsed,
+        anchorTo = _ref7.anchorTo,
+        orientation = _ref7.orientation,
+        styler = _ref7.styler;
+      return styler.append({
+        collapsed: orientation === 'vertical' && collapsed
+      }, "anchor".concat((0, _util.cap)(anchorTo)), orientation);
+    },
+    scrollable: function scrollable(_ref8) {
+      var children = _ref8.children,
+        offset = _ref8.offset,
+        orientation = _ref8.orientation,
+        size = _ref8.size,
+        tabSize = _ref8.tabSize;
+      var isVertical = orientation === 'vertical';
+      return isVertical ? children.length > MAX_TABS_BEFORE_VERTICAL_SCROLLING : isHorizontalScrollableTabs(children.length, offset, size, tabSize);
+    },
+    style: function style(_ref9) {
+      var children = _ref9.children,
+        dimensions = _ref9.dimensions,
+        offset = _ref9.offset,
+        orientation = _ref9.orientation,
+        size = _ref9.size,
+        _style = _ref9.style,
+        tabSize = _ref9.tabSize;
+      var isVertical = orientation === 'vertical';
+      var scrollable = isVertical ? children.length > MAX_TABS_BEFORE_VERTICAL_SCROLLING : isHorizontalScrollableTabs(children.length, offset, size, tabSize);
+      var tabSizeValue = !isVertical ? getHorizontalTabWidth(children.length, size, tabSize) : null;
+      var totalTabsWidth = _resolution["default"].scaleToRem(tabSizeValue * children.length + TAB_SPACING * (children.length - 1));
+      return _objectSpread(_objectSpread({}, _style), {}, {
+        '--offset': (0, _resolution.scaleToRem)(offset),
+        '--scrollable': scrollable ? '1' : '0',
+        '--tabs-width': !isVertical ? totalTabsWidth : '100%',
+        '--tab-width': (0, _resolution.scaleToRem)(tabSizeValue),
+        '--tablayout-expand-collapse-diff': orientation === 'vertical' ? (0, _resolution.scaleToRem)(dimensions.tabs.normal - dimensions.tabs.collapsed) : 0
+      });
+    },
+    index: function index(_ref0) {
+      var _ref1;
+      var _index = _ref0.index,
+        primaryIndex = _ref0.primaryIndex;
+      // If `index` is not provided, it defaults to `primaryIndex` or 0.
+      return (_ref1 = _index !== null && _index !== void 0 ? _index : primaryIndex) !== null && _ref1 !== void 0 ? _ref1 : 0;
+    },
+    tabOrientation: function tabOrientation(_ref10) {
+      var orientation = _ref10.orientation;
+      return orientation === 'vertical' ? 'horizontal' : 'vertical';
+    },
+    tabs: function tabs(_ref11) {
+      var children = _ref11.children;
+      var tabs = (0, _util.mapAndFilterChildren)(children, function (child) {
+        return Object.keys(child.props).filter(function (prop) {
+          return prop !== 'children' && prop !== 'id';
+        }).reduce(function (obj, key) {
+          return _objectSpread(_objectSpread({}, obj), {}, _defineProperty({}, key, child.props[key]));
+        }, {});
+      });
+      return tabs;
+    }
+  },
+  render: function render(_ref12) {
+    var children = _ref12.children,
+      collapsed = _ref12.collapsed,
+      css = _ref12.css,
+      spotlightId = _ref12['data-spotlight-id'],
+      primaryIndex = _ref12.primaryIndex,
+      dimensions = _ref12.dimensions,
+      handleClick = _ref12.handleClick,
+      handleEnter = _ref12.handleEnter,
+      handleFlick = _ref12.handleFlick,
+      handleFocus = _ref12.handleFocus,
+      handleTabsTransitionEnd = _ref12.handleTabsTransitionEnd,
+      index = _ref12.index,
+      onCollapse = _ref12.onCollapse,
+      onScrollStop = _ref12.onScrollStop,
+      onSelect = _ref12.onSelect,
+      orientation = _ref12.orientation,
+      scrollable = _ref12.scrollable,
+      scrollPosition = _ref12.scrollPosition,
+      size = _ref12.size,
+      tabOrientation = _ref12.tabOrientation,
+      tabs = _ref12.tabs,
+      type = _ref12.type,
+      rest = _objectWithoutProperties(_ref12, _excluded);
+    delete rest.anchorTo;
+    delete rest.blockCollapseOnPortrait;
+    delete rest.onExpand;
+    delete rest.offset;
+    delete rest.onTabAnimationEnd;
+    delete rest.rtl;
+    delete rest.tabSize;
+    var contentSize = collapsed ? dimensions.content.expanded : dimensions.content.normal;
+    var isVertical = orientation === 'vertical';
+    var ContentCell = isVertical ? TouchableCell : _Layout.Cell;
+    var contentCellProps = isVertical ? {
+      onFlick: handleFlick
+    } : null;
+
+    // Props that are shared between both of the rendered TabGroup components
+    var tabGroupProps = {
+      css: css,
+      primaryIndex: primaryIndex,
+      onClick: collapsed ? handleClick : null,
+      onFocus: collapsed ? handleFocus : null,
+      onFocusTab: onSelect,
+      onSelect: onSelect,
+      orientation: orientation,
+      selectedIndex: index,
+      tabs: tabs
+    };
+
+    // In vertical orientation, render two sets of tabs, one just icons, one with icons and text.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabLayoutContext, {
+      value: handleEnter,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Layout, _objectSpread(_objectSpread({}, rest), {}, {
+        orientation: tabOrientation,
+        "data-spotlight-id": spotlightId,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          className: css.tabs,
+          shrink: true,
+          onTransitionEnd: handleTabsTransitionEnd,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], _objectSpread(_objectSpread({}, tabGroupProps), {}, {
+            collapsed: isVertical,
+            scrollPosition: scrollPosition,
+            scrollable: scrollable,
+            size: size,
+            spotlightDisabled: !collapsed && isVertical,
+            spotlightId: (0, _RefocusDecorator.getTabsSpotlightId)(spotlightId, isVertical)
+          }))
+        }), isVertical ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          className: css.tabs + ' ' + css.tabsExpanded,
+          size: dimensions.tabs.normal,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], _objectSpread(_objectSpread({}, tabGroupProps), {}, {
+            onScrollStop: onScrollStop,
+            scrollable: scrollable,
+            spotlightDisabled: collapsed,
+            spotlightId: (0, _RefocusDecorator.getTabsSpotlightId)(spotlightId, false)
+          }))
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentCell, _objectSpread(_objectSpread({
+          size: isVertical ? contentSize : null,
+          className: css.content,
+          component: _ViewManager["default"],
+          index: index,
+          noAnimation: true,
+          onFocus: type === 'normal' && !collapsed ? onCollapse : null,
+          orientation: orientation
+        }, contentCellProps), {}, {
+          children: children
+        }))]
+      }))
+    });
+  }
+});
+var TabLayoutDecorator = exports.TabLayoutDecorator = (0, _compose["default"])((0, _Toggleable["default"])({
+  prop: 'collapsed',
+  activate: 'onCollapse',
+  deactivate: 'onExpand'
+}), (0, _Changeable.Changeable)({
+  prop: 'index',
+  change: 'onSelect'
+}), (0, _Changeable.Changeable)({
+  prop: 'scrollPosition',
+  change: 'onScrollStop'
+}), _RefocusDecorator["default"], (0, _SpotlightContainerDecorator["default"])({
+  // using last-focused so we return to the last focused if it exists but fall through to
+  // default element if no focus has occurred yet (e.g. on mount)
+  enterTo: 'last-focused',
+  // favor the content when collapsed and the tabs otherwise
+  defaultElement: [".".concat(_TabLayoutModule["default"].horizontal, " .").concat(_TabLayoutModule["default"].tabs, " *"), ".".concat(_TabLayoutModule["default"].collapsed, " .").concat(_TabLayoutModule["default"].content, " *"), ".".concat(_TabLayoutModule["default"].tabsExpanded, " *")]
+}), (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}));
+
+// Currently not documenting the base output since it's not exported
+var TabLayout = exports.TabLayout = TabLayoutDecorator(TabLayoutBase);
+
+/**
+ * A shortcut to access {@link limestone/TabLayout.Tab}
+ *
+ * @name Tab
+ * @type {limestone/TabLayout.Tab}
+ * @static
+ * @memberof limestone/TabLayout.TabLayout
+ */
+TabLayout.Tab = _Tab["default"];
+var _default = exports["default"] = TabLayout;