@react-spectrum/tabs 3.8.13-nightly.4981 → 3.8.13-nightly.5030

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/Tabs.main.js +11 -9
  2. package/dist/Tabs.main.js.map +1 -1
  3. package/dist/Tabs.mjs +11 -9
  4. package/dist/Tabs.module.js +11 -9
  5. package/dist/Tabs.module.js.map +1 -1
  6. package/dist/types.d.ts +1 -1
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +17 -17
  9. package/src/Tabs.tsx +38 -37
package/dist/Tabs.main.js CHANGED
@@ -55,19 +55,20 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
55
55
  props = (0, $31o9C$reactspectrumprovider.useProviderProps)(props);
56
56
  let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
57
57
  let domRef = (0, $31o9C$reactspectrumutils.useDOMRef)(ref);
58
- let tablistRef = (0, $31o9C$react.useRef)(undefined);
59
- let wrapperRef = (0, $31o9C$react.useRef)(undefined);
58
+ let tablistRef = (0, $31o9C$react.useRef)(null);
59
+ let wrapperRef = (0, $31o9C$react.useRef)(null);
60
60
  let { direction: direction } = (0, $31o9C$reactariai18n.useLocale)();
61
61
  let { styleProps: styleProps } = (0, $31o9C$reactspectrumutils.useStyleProps)(otherProps);
62
62
  let [collapsed, setCollapsed] = (0, $31o9C$react.useState)(false);
63
- let [selectedTab, setSelectedTab] = (0, $31o9C$react.useState)();
63
+ let [selectedTab, setSelectedTab] = (0, $31o9C$react.useState)(null);
64
64
  const [tabListState, setTabListState] = (0, $31o9C$react.useState)(null);
65
65
  let [tabPositions, setTabPositions] = (0, $31o9C$react.useState)([]);
66
66
  let prevTabPositions = (0, $31o9C$react.useRef)(tabPositions);
67
67
  (0, $31o9C$react.useEffect)(()=>{
68
68
  if (tablistRef.current) {
69
69
  var _tabListState_selectedKey;
70
- let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString())}"]`);
70
+ var _tabListState_selectedKey_toString;
71
+ let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape((_tabListState_selectedKey_toString = tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString()) !== null && _tabListState_selectedKey_toString !== void 0 ? _tabListState_selectedKey_toString : '')}"]`);
71
72
  if (selectedTab != null) setSelectedTab(selectedTab);
72
73
  }
73
74
  // collapse is in the dep array so selectedTab can be updated for TabLine positioning
@@ -79,8 +80,10 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
79
80
  ]);
80
81
  let checkShouldCollapse = (0, $31o9C$react.useCallback)(()=>{
81
82
  if (wrapperRef.current && orientation !== 'vertical') {
83
+ var _tablistRef_current;
82
84
  let tabsComponent = wrapperRef.current;
83
- let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
85
+ var _tablistRef_current_querySelectorAll;
86
+ let tabs = (_tablistRef_current_querySelectorAll = (_tablistRef_current = tablistRef.current) === null || _tablistRef_current === void 0 ? void 0 : _tablistRef_current.querySelectorAll('[role="tab"]')) !== null && _tablistRef_current_querySelectorAll !== void 0 ? _tablistRef_current_querySelectorAll : new NodeList();
84
87
  let tabDimensions = [
85
88
  ...tabs
86
89
  ].map((tab)=>tab.getBoundingClientRect());
@@ -313,7 +316,7 @@ function $e8d58e7e32285ba6$export$5dae8d435677f210(props) {
313
316
  }, factory, {
314
317
  suppressTextValueWarning: true
315
318
  });
316
- const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
319
+ const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;
317
320
  return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabPanel, {
318
321
  ...props,
319
322
  key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
@@ -323,7 +326,7 @@ function $e8d58e7e32285ba6$export$5dae8d435677f210(props) {
323
326
  function $e8d58e7e32285ba6$var$TabPanel(props) {
324
327
  const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $31o9C$react.useContext)($e8d58e7e32285ba6$var$TabContext);
325
328
  const { tabListState: tabListState } = tabState;
326
- let ref = (0, $31o9C$react.useRef)(undefined);
329
+ let ref = (0, $31o9C$react.useRef)(null);
327
330
  const { tabPanelProps: tabPanelProps } = (0, $31o9C$reactariatabs.useTabPanel)(props, tabListState, ref);
328
331
  let { styleProps: styleProps } = (0, $31o9C$reactspectrumutils.useStyleProps)(props);
329
332
  if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
@@ -338,7 +341,7 @@ function $e8d58e7e32285ba6$var$TabPanel(props) {
338
341
  }
339
342
  function $e8d58e7e32285ba6$var$TabPicker(props) {
340
343
  let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
341
- let ref = (0, $31o9C$react.useRef)(undefined);
344
+ let ref = (0, $31o9C$react.useRef)(null);
342
345
  let [pickerNode, setPickerNode] = (0, $31o9C$react.useState)(null);
343
346
  (0, $31o9C$react.useEffect)(()=>{
344
347
  let node = (0, $31o9C$reactspectrumutils.unwrapDOMRef)(ref);
@@ -357,7 +360,6 @@ function $e8d58e7e32285ba6$var$TabPicker(props) {
357
360
  visibility: 'hidden',
358
361
  position: 'absolute'
359
362
  };
360
- // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
361
363
  return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
362
364
  className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
363
365
  'spectrum-Tabs--quiet': isQuiet,
package/dist/Tabs.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AA+CD,MAAM,iDAAa,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAmB;AAEzD,SAAS,2BAAuB,KAA2B,EAAE,GAA2B;IACtF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,eACF,cAAc,uBACd,UAAU,qBACV,QAAQ,EACR,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IACxC,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IAExC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO;IAC3C,MAAM,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAmB;IAClE,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAE,EAAE;IACjD,IAAI,mBAAmB,CAAA,GAAA,mBAAK,EAAE;IAE9B,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,WAAW,OAAO,EAAE;gBACmE;YAAzF,IAAI,cAA2B,WAAW,OAAO,CAAC,aAAa,CAAC,CAAC,WAAW,EAAE,IAAI,MAAM,CAAC,yBAAA,oCAAA,4BAAA,aAAc,WAAW,cAAzB,gDAAA,0BAA2B,QAAQ,IAAI,EAAE,CAAC;YAEnI,IAAI,eAAe,MACjB,eAAe;QAEnB;IACA,qFAAqF;IACvF,GAAG;QAAC;QAAU,yBAAA,mCAAA,aAAc,WAAW;QAAE;QAAW;KAAW;IAE/D,IAAI,sBAAsB,CAAA,GAAA,wBAAU,EAAE;QACpC,IAAI,WAAW,OAAO,IAAI,gBAAgB,YAAY;YACpD,IAAI,gBAAgB,WAAW,OAAO;YACtC,IAAI,OAAO,WAAW,OAAO,CAAC,gBAAgB,CAAC;YAC/C,IAAI,gBAAgB;mBAAI;aAAK,CAAC,GAAG,CAAC,CAAA,MAAO,IAAI,qBAAqB;YAElE,IAAI,MAAM,cAAc,QAAQ,SAAS;YACzC,IAAI,iBAAiB,cAAc,qBAAqB,EAAE,CAAC,IAAI;YAC/D,IAAI,iBAAiB,aAAa,CAAC,cAAc,MAAM,GAAG,EAAE,CAAC,IAAI;YACjE,IAAI,iBAAiB,cAAc,QAAQ,iBAAiB,iBAAiB,iBAAiB;YAC9F,aAAa;YACb,IAAI,cAAc,MAAM,KAAK,iBAAiB,OAAO,CAAC,MAAM,IAAI,cAAc,IAAI,CAAC,CAAC,KAAK;oBAAwB,iCAAwD;uBAAtE,CAAA,gBAAA,0BAAA,IAAK,IAAI,QAAK,kCAAA,iBAAiB,OAAO,CAAC,MAAM,cAA/B,sDAAA,gCAAiC,IAAI,KAAI,CAAA,gBAAA,0BAAA,IAAK,KAAK,QAAK,mCAAA,iBAAiB,OAAO,CAAC,MAAM,cAA/B,uDAAA,iCAAiC,KAAK;gBAAG;gBAChN,gBAAgB;gBAChB,iBAAiB,OAAO,GAAG;YAC7B;QACF;IACF,GAAG;QAAC;QAAY;QAAY;QAAW;QAAa;QAAc;QAAkB;KAAgB;IAEpG,CAAA,GAAA,sBAAQ,EAAE;QACR;IACF,GAAG;QAAC;QAAU;KAAoB;IAElC,CAAA,GAAA,uCAAgB,EAAE;QAAC,KAAK;QAAY,UAAU;IAAmB;IAEjE,IAAI,gBAAgB;QAClB,mBAAmB;IACrB;IAEA,6FAA6F;IAC7F,IAAI,uBAAuB,CAAA,GAAA,2BAAI;IAC/B,IAAI,aAAa,gBAAgB,YAC/B,aAAa,CAAC,kBAAkB,GAAG;IAErC,qBACE,0DAAC,iCAAW,QAAQ;QAClB,OAAO;YACL,UAAU;gBAAC,GAAG,KAAK;6BAAE;yBAAa;YAAO;YACzC,UAAU;8BAAC;iCAAc;6BAAiB;2BAAa;YAAS;YAChE,MAAM;4BAAC;4BAAY;YAAU;2BAC7B;YACA,cAAc;QAChB;qBACA,0DAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC7B,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA,CAAC,oBAAoB,EAAE,YAAY,CAAC,EACpC,WAAW,SAAS;OAErB,MAAM,QAAQ;AAIvB;AASA,WAAW;AACX,SAAS,0BAAO,KAAkB;IAChC,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,OAAC,GAAG,YAAE,QAAQ,EAAC,GAAG;IAEtB,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAO;IACtB,IAAI,YAAC,QAAQ,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,2BAAK,EAAE;aAAC;IAAG,GAAG,OAAO;IAE9D,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QACrC,GAAG,KAAK;IACV;IACA,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAE7D,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,UAAU,WAAW;QACpC,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,eAAe;YACf,eAAe;YACf,cAAc;QAChB;qBAEF,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;YACA,MAAM;gBACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC,OAAO,aAAa,yBACjB,0DAAC,CAAA,GAAA,6BAAG,SAAG,YACP;AAKd;AAQA,WAAW;AACX,SAAS,8BAAQ,KAAmB;IAClC,IAAI,eACF,WAAW,eACX,wEAAwE;IACxE,WAAW,eACX,4HAA4H;IAC5H,WAAW,EACZ,GAAG;IAEJ,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,wCAAU;IACxB,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAEhC,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,qBAAO,EAAE;QAC/B,OAAO;QACP,QAAQ;IACV;IAEA,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE;QACzB,IAAI,aAAa;gBAG2B;YAF1C,IAAI,WAAW;gBAAC,WAAW;gBAAW,OAAO;gBAAW,QAAQ;YAAS;YACzE,8JAA8J;YAC9J,IAAI,SAAS,cAAc,QAAQ,KAAM,CAAA,EAAC,4BAAA,YAAY,YAAY,cAAxB,gDAAD,AAAC,0BAA0C,WAAW,IAAG,YAAY,WAAW,GAAG,YAAY,UAAU,AAAD,IAAK,YAAY,UAAU;YAC5K,SAAS,SAAS,GAAG,gBAAgB,aACjC,CAAC,WAAW,EAAE,YAAY,SAAS,CAAC,GAAG,CAAC,GACxC,CAAC,WAAW,EAAE,OAAO,GAAG,CAAC;YAE7B,IAAI,gBAAgB,cAClB,SAAS,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW,CAAC,EAAE,CAAC;iBAE/C,SAAS,MAAM,GAAG,CAAC,EAAE,YAAY,YAAY,CAAC,EAAE,CAAC;YAEnD,SAAS;QACX;IACF,GAAG;QAAC;QAAW;QAAU;QAAa;KAAY;IAElD,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;QAAU;QAAO;QAAa;KAAa;IAE/C,qBAAO,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAqC,MAAK;QAAe,OAAO;;AAC5G;AAMO,SAAS,0CAAW,KAA8B;IACvD,MAAM,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC9B,MAAM,QAAC,IAAI,YAAE,QAAQ,YAAE,QAAQ,iBAAE,aAAa,EAAC,GAAG;IAClD,MAAM,WAAC,OAAO,WAAE,OAAO,gBAAE,YAAY,eAAE,WAAW,EAAC,GAAG;IACtD,MAAM,eAAC,WAAW,aAAE,SAAS,mBAAE,eAAe,EAAC,GAAG;IAClD,MAAM,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG;IACjC,0EAA0E;IAC1E,MAAM,QAAQ,CAAA,GAAA,uCAAc,EAAE;QAAC,GAAG,QAAQ;QAAE,UAAU,MAAM,QAAQ;IAAA;IAEpE,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,MAAM,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,+BAAS,EAAE;QAAC,GAAG,QAAQ;QAAE,GAAG,KAAK;IAAA,GAAG,OAAO;IAElE,CAAA,GAAA,sBAAQ,EAAE;QACR,6DAA6D;QAC7D,gBAAgB;IAChB,uDAAuD;IACzD,GAAG;QAAC,MAAM,YAAY;QAAE,MAAM,YAAY;QAAE,MAAM,WAAW;QAAE,MAAM,QAAQ;KAAC;IAE9E,IAAI,gBAAsC,aAAa,gBAAgB,aAAa;QAAC,UAAU;QAAoB,UAAU;QAAU,YAAY;QAAU,UAAU;IAAU,IAAI;QAAC,UAAU;IAAkB;IAClN,IAAI,kBAAkB,gBAAgB,aAAa,aAAa;QAAC,OAAO;IAAa;IAErF,IAAI,aAAa,gBAAgB,YAC/B,YAAY,CAAC,cAAc,GAAG;IAGhC,IAAI,mBAAmB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;IAE1C,MAAM,2BACJ,0DAAC;QACE,GAAG,eAAe;QAClB,GAAG,YAAY;QAChB,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,iBACA,CAAC,eAAe,EAAE,YAAY,CAAC,EAC/B,kBACA;YACE,wBAAwB;YACxB,6BAA6B;YAC7B,CAAC,yBAAyB,EAAE,YAAY;QAC1C,GACA,gBAAgB,cAAc,WAAW,SAAS;OAGnD;WAAI,MAAM,UAAU;KAAC,CAAC,GAAG,CAAC,CAAC,qBAC1B,0DAAC;YAAI,KAAK,KAAK,GAAG;YAAE,MAAM;YAAM,OAAO;YAAO,aAAa;2BAE7D,0DAAC;QAAQ,aAAa;QAAa,aAAa;;IAKpD,IAAI,gBAAgB,YAClB,OAAO;SAEP,qBACE,0DAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sCACA,WAAW,SAAS;qBAEtB,0DAAC;QAAW,GAAG,KAAK;QAAG,GAAG,QAAQ;QAAE,SAAS;QAAW,IAAI,aAAa,CAAC,kBAAkB;QAAE,OAAO;QAAO,WAAW;QACtH;AAIT;AAMO,SAAS,0CAAa,KAAgC;IAC3D,MAAM,YAAC,QAAQ,YAAE,QAAQ,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACxC,MAAM,gBAAC,YAAY,EAAC,GAAG;IAEvB,MAAM,UAAU,CAAA,GAAA,wBAAU,EAAE,CAAA,QAAS,IAAI,CAAA,GAAA,sCAAa,EAAE,QAAQ,EAAE;IAClE,MAAM,aAAa,CAAA,GAAA,4CAAY,EAAE;QAAC,OAAO,SAAS,KAAK;QAAE,GAAG,KAAK;IAAA,GAAG,SAAS;QAAC,0BAA0B;IAAI;IAC5G,MAAM,eAAe,eAAe,WAAW,OAAO,CAAC,aAAa,WAAW,IAAI;IAEnF,qBACE,0DAAC;QAAU,GAAG,KAAK;QAAE,GAAG,EAAE,yBAAA,mCAAA,aAAc,WAAW;OAChD,gBAAgB,aAAa,KAAK,CAAC,QAAQ;AAGlD;AAMA,WAAW;AACX,SAAS,+BAAS,KAAoB;IACpC,MAAM,YAAC,QAAQ,EAAE,eAAe,gBAAgB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAC/D,MAAM,gBAAC,YAAY,EAAC,GAAG;IACvB,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,MAAM,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,gCAAU,EAAE,OAAO,cAAc;IACzD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,gBAAgB,CAAC,kBAAkB,EACrC,aAAa,CAAC,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB;IAGxE,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QAAK,GAAG,UAAU;QAAG,GAAG,aAAa;QAAE,KAAK;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,+BAA+B,WAAW,SAAS;OAChI,MAAM,QAAQ;AAIvB;AAUA,SAAS,gCAAa,KAAwB;IAC5C,IAAI,cACF,UAAU,gBACV,YAAY,WACZ,OAAO,SACP,KAAK,EACL,mBAAmB,aAAa,EAChC,cAAc,SAAS,WACvB,OAAO,aACP,SAAS,MACT,EAAE,WACF,OAAO,EACR,GAAG;IAEJ,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE;IAE3C,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,OAAO,CAAA,GAAA,sCAAW,EAAE;QACxB,cAAc,KAAK,OAAO;IAC5B,GAAG;QAAC;KAAI;IAER,IAAI,QAAQ;WAAI,MAAM,UAAU;KAAC;IACjC,IAAI,cAAc;QAChB,mBAAmB;QACnB,cAAc;IAChB;IAEA,MAAM,QAA8B,UAAU,CAAC,IAAI;QAAC,YAAY;QAAU,UAAU;IAAU;IAE9F,iFAAiF;IACjF,qBACE,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,iBACA,6BACA,8BACA;YACE,wBAAwB;YACxB,CAAC,yBAAyB,EAAE,YAAY;YACxC,6BAA6B;QAC/B,GACA;QAEF,OAAO;QACP,eAAa,UAAU,YAAY;qBACnC,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;YACA,QAAQ;gBACN,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACrC;QACF;qBACA,0DAAC,CAAA,GAAA,iCAAK;QACH,GAAG,WAAW;QACf,IAAI;QACJ,OAAO;QACP,KAAK;QACL,SAAA;QACA,YAAY,CAAC,WAAW;QACxB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,mBAAmB,MAAM,cAAc;QACvC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACpC,CAAA,qBAAQ,0DAAC,CAAA,GAAA,+BAAG,GAAM,KAAK,KAAK,EAAG,KAAK,QAAQ,IAE9C,4BAAc,0DAAC;QAAQ,aAAY;QAAa,aAAa;QAAY,aAAa,MAAM,WAAW;;AAIhH;AAEA;;CAEC,GACD,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAQ,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/tabs/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Key, Node, Orientation, StyleProps} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport React, {\n MutableRefObject,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from '@react-stately/tabs';\nimport {Text} from '@react-spectrum/text';\nimport {useCollection} from '@react-stately/collections';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useTab, useTabList, useTabPanel} from '@react-aria/tabs';\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>,\n tabState: {\n tabListState: TabListState<T>,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement,\n collapsed: boolean\n },\n refs: {\n wrapperRef: MutableRefObject<HTMLDivElement>,\n tablistRef: MutableRefObject<HTMLDivElement>\n },\n tabPanelProps: {\n 'aria-labelledby': string\n },\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any>>(null);\n\nfunction Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(undefined);\n let wrapperRef = useRef<HTMLDivElement>(undefined);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement>();\n const [tabListState, setTabListState] = useState<TabListState<T>>(null);\n let [tabPositions, setTabPositions] = useState([]);\n let prevTabPositions = useRef(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString())}\"]`);\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs = tablistRef.current.querySelectorAll('[role=\"tab\"]');\n let tabDimensions = [...tabs].map(tab => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);\n\n useEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>,\n state: TabListState<T>,\n isDisabled?: boolean,\n orientation?: Orientation\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Tabs-item',\n {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n }\n )}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation,\n selectedTab?: HTMLElement,\n selectedKey?: Key\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext);\n\n let [style, setStyle] = useState({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role=\"presentation\" style={style} />;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>) {\n const tabContext = useContext(TabContext);\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )\n }>\n {[...state.collection].map((item) => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel-collapseWrapper',\n styleProps.className\n )}>\n <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />\n {tabContent}\n </div>\n );\n }\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab.\n * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {\n const {tabState, tabProps} = useContext(TabContext);\n const {tabListState} = tabState;\n\n const factory = useCallback(nodes => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);\n const {tabListState} = tabState;\n let ref = useRef(undefined);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef(undefined);\n let [pickerNode, setPickerNode] = useState(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={state.setSelectedKey}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && <TabLine orientation=\"horizontal\" selectedTab={pickerNode} selectedKey={state.selectedKey} />}\n </SlotProvider>\n </div>\n );\n}\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Tabs = React.forwardRef(Tabs) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Tabs as Tabs};\n"],"names":[],"version":3,"file":"Tabs.main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/tabs/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from '@react-stately/tabs';\nimport {Text} from '@react-spectrum/text';\nimport {useCollection} from '@react-stately/collections';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useTab, useTabList, useTabPanel} from '@react-aria/tabs';\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>,\n tabState: {\n tabListState: TabListState<T> | null,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement | null,\n collapsed: boolean\n },\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>,\n tablistRef: RefObject<HTMLDivElement | null>\n },\n tabPanelProps: HTMLAttributes<HTMLElement>,\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\nfunction Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(`[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`);\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> = tablistRef.current?.querySelectorAll('[role=\"tab\"]') ?? new NodeList() as NodeListOf<Element>;\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (tabDimensions.length !== prevTabPositions.current.length\n || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);\n\n useEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>,\n state: TabListState<T>,\n isDisabled?: boolean,\n orientation?: Orientation\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Tabs-item',\n {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n }\n )}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation,\n selectedTab?: HTMLElement | null,\n selectedKey?: Key | null\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset = direction === 'rtl' ?\n -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) :\n selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role=\"presentation\" style={style} />;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>) {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )\n }>\n {[...state.collection].map((item) => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel-collapseWrapper',\n styleProps.className\n )}>\n <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />\n {tabContent}\n </div>\n );\n }\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab.\n * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>) {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={state.setSelectedKey}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && <TabLine orientation=\"horizontal\" selectedTab={pickerNode} selectedKey={state.selectedKey} />}\n </SlotProvider>\n </div>\n );\n}\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Tabs = React.forwardRef(Tabs) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Tabs as Tabs};\n"],"names":[],"version":3,"file":"Tabs.main.js.map"}
package/dist/Tabs.mjs CHANGED
@@ -47,19 +47,20 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
47
47
  props = (0, $14nVg$useProviderProps)(props);
48
48
  let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
49
49
  let domRef = (0, $14nVg$useDOMRef)(ref);
50
- let tablistRef = (0, $14nVg$useRef)(undefined);
51
- let wrapperRef = (0, $14nVg$useRef)(undefined);
50
+ let tablistRef = (0, $14nVg$useRef)(null);
51
+ let wrapperRef = (0, $14nVg$useRef)(null);
52
52
  let { direction: direction } = (0, $14nVg$useLocale)();
53
53
  let { styleProps: styleProps } = (0, $14nVg$useStyleProps)(otherProps);
54
54
  let [collapsed, setCollapsed] = (0, $14nVg$useState)(false);
55
- let [selectedTab, setSelectedTab] = (0, $14nVg$useState)();
55
+ let [selectedTab, setSelectedTab] = (0, $14nVg$useState)(null);
56
56
  const [tabListState, setTabListState] = (0, $14nVg$useState)(null);
57
57
  let [tabPositions, setTabPositions] = (0, $14nVg$useState)([]);
58
58
  let prevTabPositions = (0, $14nVg$useRef)(tabPositions);
59
59
  (0, $14nVg$useEffect)(()=>{
60
60
  if (tablistRef.current) {
61
61
  var _tabListState_selectedKey;
62
- let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString())}"]`);
62
+ var _tabListState_selectedKey_toString;
63
+ let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape((_tabListState_selectedKey_toString = tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString()) !== null && _tabListState_selectedKey_toString !== void 0 ? _tabListState_selectedKey_toString : '')}"]`);
63
64
  if (selectedTab != null) setSelectedTab(selectedTab);
64
65
  }
65
66
  // collapse is in the dep array so selectedTab can be updated for TabLine positioning
@@ -71,8 +72,10 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
71
72
  ]);
72
73
  let checkShouldCollapse = (0, $14nVg$useCallback)(()=>{
73
74
  if (wrapperRef.current && orientation !== 'vertical') {
75
+ var _tablistRef_current;
74
76
  let tabsComponent = wrapperRef.current;
75
- let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
77
+ var _tablistRef_current_querySelectorAll;
78
+ let tabs = (_tablistRef_current_querySelectorAll = (_tablistRef_current = tablistRef.current) === null || _tablistRef_current === void 0 ? void 0 : _tablistRef_current.querySelectorAll('[role="tab"]')) !== null && _tablistRef_current_querySelectorAll !== void 0 ? _tablistRef_current_querySelectorAll : new NodeList();
76
79
  let tabDimensions = [
77
80
  ...tabs
78
81
  ].map((tab)=>tab.getBoundingClientRect());
@@ -305,7 +308,7 @@ function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
305
308
  }, factory, {
306
309
  suppressTextValueWarning: true
307
310
  });
308
- const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
311
+ const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;
309
312
  return /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabPanel, {
310
313
  ...props,
311
314
  key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
@@ -315,7 +318,7 @@ function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
315
318
  function $65ab70ddbed1564b$var$TabPanel(props) {
316
319
  const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $14nVg$useContext)($65ab70ddbed1564b$var$TabContext);
317
320
  const { tabListState: tabListState } = tabState;
318
- let ref = (0, $14nVg$useRef)(undefined);
321
+ let ref = (0, $14nVg$useRef)(null);
319
322
  const { tabPanelProps: tabPanelProps } = (0, $14nVg$useTabPanel)(props, tabListState, ref);
320
323
  let { styleProps: styleProps } = (0, $14nVg$useStyleProps)(props);
321
324
  if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
@@ -330,7 +333,7 @@ function $65ab70ddbed1564b$var$TabPanel(props) {
330
333
  }
331
334
  function $65ab70ddbed1564b$var$TabPicker(props) {
332
335
  let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
333
- let ref = (0, $14nVg$useRef)(undefined);
336
+ let ref = (0, $14nVg$useRef)(null);
334
337
  let [pickerNode, setPickerNode] = (0, $14nVg$useState)(null);
335
338
  (0, $14nVg$useEffect)(()=>{
336
339
  let node = (0, $14nVg$unwrapDOMRef)(ref);
@@ -349,7 +352,6 @@ function $65ab70ddbed1564b$var$TabPicker(props) {
349
352
  visibility: 'hidden',
350
353
  position: 'absolute'
351
354
  };
352
- // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
353
355
  return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
354
356
  className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
355
357
  'spectrum-Tabs--quiet': isQuiet,
package/dist/Tabs.module.js CHANGED
@@ -47,19 +47,20 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
47
47
  props = (0, $14nVg$useProviderProps)(props);
48
48
  let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
49
49
  let domRef = (0, $14nVg$useDOMRef)(ref);
50
- let tablistRef = (0, $14nVg$useRef)(undefined);
51
- let wrapperRef = (0, $14nVg$useRef)(undefined);
50
+ let tablistRef = (0, $14nVg$useRef)(null);
51
+ let wrapperRef = (0, $14nVg$useRef)(null);
52
52
  let { direction: direction } = (0, $14nVg$useLocale)();
53
53
  let { styleProps: styleProps } = (0, $14nVg$useStyleProps)(otherProps);
54
54
  let [collapsed, setCollapsed] = (0, $14nVg$useState)(false);
55
- let [selectedTab, setSelectedTab] = (0, $14nVg$useState)();
55
+ let [selectedTab, setSelectedTab] = (0, $14nVg$useState)(null);
56
56
  const [tabListState, setTabListState] = (0, $14nVg$useState)(null);
57
57
  let [tabPositions, setTabPositions] = (0, $14nVg$useState)([]);
58
58
  let prevTabPositions = (0, $14nVg$useRef)(tabPositions);
59
59
  (0, $14nVg$useEffect)(()=>{
60
60
  if (tablistRef.current) {
61
61
  var _tabListState_selectedKey;
62
- let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString())}"]`);
62
+ var _tabListState_selectedKey_toString;
63
+ let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape((_tabListState_selectedKey_toString = tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString()) !== null && _tabListState_selectedKey_toString !== void 0 ? _tabListState_selectedKey_toString : '')}"]`);
63
64
  if (selectedTab != null) setSelectedTab(selectedTab);
64
65
  }
65
66
  // collapse is in the dep array so selectedTab can be updated for TabLine positioning
@@ -71,8 +72,10 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
71
72
  ]);
72
73
  let checkShouldCollapse = (0, $14nVg$useCallback)(()=>{
73
74
  if (wrapperRef.current && orientation !== 'vertical') {
75
+ var _tablistRef_current;
74
76
  let tabsComponent = wrapperRef.current;
75
- let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
77
+ var _tablistRef_current_querySelectorAll;
78
+ let tabs = (_tablistRef_current_querySelectorAll = (_tablistRef_current = tablistRef.current) === null || _tablistRef_current === void 0 ? void 0 : _tablistRef_current.querySelectorAll('[role="tab"]')) !== null && _tablistRef_current_querySelectorAll !== void 0 ? _tablistRef_current_querySelectorAll : new NodeList();
76
79
  let tabDimensions = [
77
80
  ...tabs
78
81
  ].map((tab)=>tab.getBoundingClientRect());
@@ -305,7 +308,7 @@ function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
305
308
  }, factory, {
306
309
  suppressTextValueWarning: true
307
310
  });
308
- const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
311
+ const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;
309
312
  return /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabPanel, {
310
313
  ...props,
311
314
  key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
@@ -315,7 +318,7 @@ function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
315
318
  function $65ab70ddbed1564b$var$TabPanel(props) {
316
319
  const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $14nVg$useContext)($65ab70ddbed1564b$var$TabContext);
317
320
  const { tabListState: tabListState } = tabState;
318
- let ref = (0, $14nVg$useRef)(undefined);
321
+ let ref = (0, $14nVg$useRef)(null);
319
322
  const { tabPanelProps: tabPanelProps } = (0, $14nVg$useTabPanel)(props, tabListState, ref);
320
323
  let { styleProps: styleProps } = (0, $14nVg$useStyleProps)(props);
321
324
  if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
@@ -330,7 +333,7 @@ function $65ab70ddbed1564b$var$TabPanel(props) {
330
333
  }
331
334
  function $65ab70ddbed1564b$var$TabPicker(props) {
332
335
  let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
333
- let ref = (0, $14nVg$useRef)(undefined);
336
+ let ref = (0, $14nVg$useRef)(null);
334
337
  let [pickerNode, setPickerNode] = (0, $14nVg$useState)(null);
335
338
  (0, $14nVg$useEffect)(()=>{
336
339
  let node = (0, $14nVg$unwrapDOMRef)(ref);
@@ -349,7 +352,6 @@ function $65ab70ddbed1564b$var$TabPicker(props) {
349
352
  visibility: 'hidden',
350
353
  position: 'absolute'
351
354
  };
352
- // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
353
355
  return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
354
356
  className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
355
357
  'spectrum-Tabs--quiet': isQuiet,
package/dist/Tabs.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/tabs/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Key, Node, Orientation, StyleProps} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport React, {\n MutableRefObject,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from '@react-stately/tabs';\nimport {Text} from '@react-spectrum/text';\nimport {useCollection} from '@react-stately/collections';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useTab, useTabList, useTabPanel} from '@react-aria/tabs';\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>,\n tabState: {\n tabListState: TabListState<T>,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement,\n collapsed: boolean\n },\n refs: {\n wrapperRef: MutableRefObject<HTMLDivElement>,\n tablistRef: MutableRefObject<HTMLDivElement>\n },\n tabPanelProps: {\n 'aria-labelledby': string\n },\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any>>(null);\n\nfunction Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(undefined);\n let wrapperRef = useRef<HTMLDivElement>(undefined);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement>();\n const [tabListState, setTabListState] = useState<TabListState<T>>(null);\n let [tabPositions, setTabPositions] = useState([]);\n let prevTabPositions = useRef(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString())}\"]`);\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs = tablistRef.current.querySelectorAll('[role=\"tab\"]');\n let tabDimensions = [...tabs].map(tab => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);\n\n useEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>,\n state: TabListState<T>,\n isDisabled?: boolean,\n orientation?: Orientation\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Tabs-item',\n {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n }\n )}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation,\n selectedTab?: HTMLElement,\n selectedKey?: Key\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext);\n\n let [style, setStyle] = useState({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role=\"presentation\" style={style} />;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>) {\n const tabContext = useContext(TabContext);\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )\n }>\n {[...state.collection].map((item) => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel-collapseWrapper',\n styleProps.className\n )}>\n <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />\n {tabContent}\n </div>\n );\n }\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab.\n * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {\n const {tabState, tabProps} = useContext(TabContext);\n const {tabListState} = tabState;\n\n const factory = useCallback(nodes => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);\n const {tabListState} = tabState;\n let ref = useRef(undefined);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef(undefined);\n let [pickerNode, setPickerNode] = useState(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={state.setSelectedKey}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && <TabLine orientation=\"horizontal\" selectedTab={pickerNode} selectedKey={state.selectedKey} />}\n </SlotProvider>\n </div>\n );\n}\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Tabs = React.forwardRef(Tabs) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Tabs as Tabs};\n"],"names":[],"version":3,"file":"Tabs.module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/tabs/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport React, {\n CSSProperties,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from '@react-stately/tabs';\nimport {Text} from '@react-spectrum/text';\nimport {useCollection} from '@react-stately/collections';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useTab, useTabList, useTabPanel} from '@react-aria/tabs';\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>,\n tabState: {\n tabListState: TabListState<T> | null,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement | null,\n collapsed: boolean\n },\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>,\n tablistRef: RefObject<HTMLDivElement | null>\n },\n tabPanelProps: HTMLAttributes<HTMLElement>,\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\n\nfunction Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(`[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`);\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs: NodeListOf<Element> = tablistRef.current?.querySelectorAll('[role=\"tab\"]') ?? new NodeList() as NodeListOf<Element>;\n let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (tabDimensions.length !== prevTabPositions.current.length\n || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);\n\n useEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>,\n state: TabListState<T>,\n isDisabled?: boolean,\n orientation?: Orientation\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>(undefined);\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Tabs-item',\n {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n }\n )}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation,\n selectedTab?: HTMLElement | null,\n selectedKey?: Key | null\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext)!;\n\n let [style, setStyle] = useState<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset = direction === 'rtl' ?\n -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) :\n selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, scale, selectedKey, tabLineState]);\n\n return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role=\"presentation\" style={style} />;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>) {\n const tabContext = useContext(TabContext)!;\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )\n }>\n {[...state.collection].map((item) => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel-collapseWrapper',\n styleProps.className\n )}>\n <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />\n {tabContent}\n </div>\n );\n }\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab.\n * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>) {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n let ref = useRef<HTMLDivElement | null>(null);\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={state.setSelectedKey}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && <TabLine orientation=\"horizontal\" selectedTab={pickerNode} selectedKey={state.selectedKey} />}\n </SlotProvider>\n </div>\n );\n}\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Tabs = React.forwardRef(Tabs) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Tabs as Tabs};\n"],"names":[],"version":3,"file":"Tabs.module.js.map"}
package/dist/types.d.ts CHANGED
@@ -10,7 +10,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>): React.JSX.Element;
10
10
  * TabPanels is used within Tabs as a container for the content of each tab.
11
11
  * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.
12
12
  */
13
- export function TabPanels<T>(props: SpectrumTabPanelsProps<T>): React.JSX.Element;
13
+ export function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>): React.JSX.Element;
14
14
  /**
15
15
  * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
16
16
  */
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;AA4PA;;;GAGG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,qBAsExD;AAED;;;GAGG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,qBAa5D;AA+GD;;GAEG;AAGH,OAAA,MAAM,MAAkC,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC9b1H,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/Tabs.tsx","packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/index.ts","packages/@react-spectrum/tabs/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TabList, TabPanels, Tabs} from './Tabs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AA8PA;;;GAGG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,qBAsExD;AAED;;;GAGG;AACH,0BAA0B,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,qBAa3E;AA8GD;;GAEG;AAGH,OAAA,MAAM,MAAkC,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC/b1H,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/Tabs.tsx","packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/index.ts","packages/@react-spectrum/tabs/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TabList, TabPanels, Tabs} from './Tabs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/tabs",
3
- "version": "3.8.13-nightly.4981+f56a78746",
3
+ "version": "3.8.13-nightly.5030+32574f874",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,24 +36,24 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/focus": "3.0.0-nightly.3053+f56a78746",
40
- "@react-aria/i18n": "3.0.0-nightly.3053+f56a78746",
41
- "@react-aria/interactions": "3.0.0-nightly.3053+f56a78746",
42
- "@react-aria/tabs": "3.9.4-nightly.4981+f56a78746",
43
- "@react-aria/utils": "3.0.0-nightly.3053+f56a78746",
44
- "@react-spectrum/picker": "3.15.2-nightly.4981+f56a78746",
45
- "@react-spectrum/text": "3.5.8-nightly.4981+f56a78746",
46
- "@react-spectrum/utils": "3.0.0-nightly.3053+f56a78746",
47
- "@react-stately/collections": "3.0.0-nightly.3053+f56a78746",
48
- "@react-stately/list": "3.10.8-nightly.4981+f56a78746",
49
- "@react-stately/tabs": "3.0.0-nightly.3053+f56a78746",
50
- "@react-types/select": "3.9.7-nightly.4981+f56a78746",
51
- "@react-types/shared": "3.0.0-nightly.3053+f56a78746",
52
- "@react-types/tabs": "3.3.10-nightly.4981+f56a78746",
39
+ "@react-aria/focus": "3.0.0-nightly.3102+32574f874",
40
+ "@react-aria/i18n": "3.0.0-nightly.3102+32574f874",
41
+ "@react-aria/interactions": "3.0.0-nightly.3102+32574f874",
42
+ "@react-aria/tabs": "3.9.6-nightly.5030+32574f874",
43
+ "@react-aria/utils": "3.0.0-nightly.3102+32574f874",
44
+ "@react-spectrum/picker": "3.15.2-nightly.5030+32574f874",
45
+ "@react-spectrum/text": "3.5.8-nightly.5030+32574f874",
46
+ "@react-spectrum/utils": "3.0.0-nightly.3102+32574f874",
47
+ "@react-stately/collections": "3.0.0-nightly.3102+32574f874",
48
+ "@react-stately/list": "3.10.9-nightly.5030+32574f874",
49
+ "@react-stately/tabs": "3.0.0-nightly.3102+32574f874",
50
+ "@react-types/select": "3.9.7-nightly.5030+32574f874",
51
+ "@react-types/shared": "3.0.0-nightly.3102+32574f874",
52
+ "@react-types/tabs": "3.3.10-nightly.5030+32574f874",
53
53
  "@swc/helpers": "^0.5.0"
54
54
  },
55
55
  "devDependencies": {
56
- "@adobe/spectrum-css-temp": "3.0.0-nightly.3053+f56a78746"
56
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.3102+32574f874"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "@react-spectrum/provider": "^3.0.0",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "f56a78746d0fd804267cb5ab17e2675f33f13e5e"
66
+ "gitHead": "32574f874fd8a8b667a409938457819ac33f8e84"
67
67
  }
package/src/Tabs.tsx CHANGED
@@ -12,13 +12,14 @@
12
12
 
13
13
  import {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';
14
14
  import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';
15
- import {DOMProps, DOMRef, Key, Node, Orientation, StyleProps} from '@react-types/shared';
15
+ import {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared';
16
16
  import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
17
17
  import {FocusRing} from '@react-aria/focus';
18
18
  import {Item, Picker} from '@react-spectrum/picker';
19
19
  import {ListCollection} from '@react-stately/list';
20
20
  import React, {
21
- MutableRefObject,
21
+ CSSProperties,
22
+ HTMLAttributes,
22
23
  ReactElement,
23
24
  ReactNode,
24
25
  useCallback,
@@ -40,22 +41,20 @@ import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
40
41
  interface TabsContext<T> {
41
42
  tabProps: SpectrumTabsProps<T>,
42
43
  tabState: {
43
- tabListState: TabListState<T>,
44
+ tabListState: TabListState<T> | null,
44
45
  setTabListState: (state: TabListState<T>) => void,
45
- selectedTab: HTMLElement,
46
+ selectedTab: HTMLElement | null,
46
47
  collapsed: boolean
47
48
  },
48
49
  refs: {
49
- wrapperRef: MutableRefObject<HTMLDivElement>,
50
- tablistRef: MutableRefObject<HTMLDivElement>
51
- },
52
- tabPanelProps: {
53
- 'aria-labelledby': string
50
+ wrapperRef: RefObject<HTMLDivElement | null>,
51
+ tablistRef: RefObject<HTMLDivElement | null>
54
52
  },
53
+ tabPanelProps: HTMLAttributes<HTMLElement>,
55
54
  tabLineState: Array<DOMRect>
56
55
  }
57
56
 
58
- const TabContext = React.createContext<TabsContext<any>>(null);
57
+ const TabContext = React.createContext<TabsContext<any> | null>(null);
59
58
 
60
59
  function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {
61
60
  props = useProviderProps(props);
@@ -67,20 +66,20 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
67
66
  } = props;
68
67
 
69
68
  let domRef = useDOMRef(ref);
70
- let tablistRef = useRef<HTMLDivElement>(undefined);
71
- let wrapperRef = useRef<HTMLDivElement>(undefined);
69
+ let tablistRef = useRef<HTMLDivElement>(null);
70
+ let wrapperRef = useRef<HTMLDivElement>(null);
72
71
 
73
72
  let {direction} = useLocale();
74
73
  let {styleProps} = useStyleProps(otherProps);
75
74
  let [collapsed, setCollapsed] = useState(false);
76
- let [selectedTab, setSelectedTab] = useState<HTMLElement>();
77
- const [tabListState, setTabListState] = useState<TabListState<T>>(null);
78
- let [tabPositions, setTabPositions] = useState([]);
79
- let prevTabPositions = useRef(tabPositions);
75
+ let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);
76
+ const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);
77
+ let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);
78
+ let prevTabPositions = useRef<DOMRect[]>(tabPositions);
80
79
 
81
80
  useEffect(() => {
82
81
  if (tablistRef.current) {
83
- let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState?.selectedKey?.toString())}"]`);
82
+ let selectedTab: HTMLElement | null = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}"]`);
84
83
 
85
84
  if (selectedTab != null) {
86
85
  setSelectedTab(selectedTab);
@@ -92,15 +91,16 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
92
91
  let checkShouldCollapse = useCallback(() => {
93
92
  if (wrapperRef.current && orientation !== 'vertical') {
94
93
  let tabsComponent = wrapperRef.current;
95
- let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
96
- let tabDimensions = [...tabs].map(tab => tab.getBoundingClientRect());
94
+ let tabs: NodeListOf<Element> = tablistRef.current?.querySelectorAll('[role="tab"]') ?? new NodeList() as NodeListOf<Element>;
95
+ let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());
97
96
 
98
97
  let end = direction === 'rtl' ? 'left' : 'right';
99
98
  let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
100
99
  let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
101
100
  let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
102
101
  setCollapsed(shouldCollapse);
103
- if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {
102
+ if (tabDimensions.length !== prevTabPositions.current.length
103
+ || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {
104
104
  setTabPositions(tabDimensions);
105
105
  prevTabPositions.current = tabDimensions;
106
106
  }
@@ -113,7 +113,7 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
113
113
 
114
114
  useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});
115
115
 
116
- let tabPanelProps = {
116
+ let tabPanelProps: HTMLAttributes<HTMLElement> = {
117
117
  'aria-labelledby': undefined
118
118
  };
119
119
 
@@ -202,8 +202,8 @@ function Tab<T>(props: TabProps<T>) {
202
202
 
203
203
  interface TabLineProps {
204
204
  orientation?: Orientation,
205
- selectedTab?: HTMLElement,
206
- selectedKey?: Key
205
+ selectedTab?: HTMLElement | null,
206
+ selectedKey?: Key | null
207
207
  }
208
208
 
209
209
  // @private
@@ -218,18 +218,20 @@ function TabLine(props: TabLineProps) {
218
218
 
219
219
  let {direction} = useLocale();
220
220
  let {scale} = useProvider();
221
- let {tabLineState} = useContext(TabContext);
221
+ let {tabLineState} = useContext(TabContext)!;
222
222
 
223
- let [style, setStyle] = useState({
223
+ let [style, setStyle] = useState<CSSProperties>({
224
224
  width: undefined,
225
225
  height: undefined
226
226
  });
227
227
 
228
228
  let onResize = useCallback(() => {
229
229
  if (selectedTab) {
230
- let styleObj = {transform: undefined, width: undefined, height: undefined};
230
+ let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};
231
231
  // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes
232
- let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;
232
+ let offset = direction === 'rtl' ?
233
+ -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) :
234
+ selectedTab.offsetLeft;
233
235
  styleObj.transform = orientation === 'vertical'
234
236
  ? `translateY(${selectedTab.offsetTop}px)`
235
237
  : `translateX(${offset}px)`;
@@ -255,7 +257,7 @@ function TabLine(props: TabLineProps) {
255
257
  * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
256
258
  */
257
259
  export function TabList<T>(props: SpectrumTabListProps<T>) {
258
- const tabContext = useContext(TabContext);
260
+ const tabContext = useContext(TabContext)!;
259
261
  const {refs, tabState, tabProps, tabPanelProps} = tabContext;
260
262
  const {isQuiet, density, isEmphasized, orientation} = tabProps;
261
263
  const {selectedTab, collapsed, setTabListState} = tabState;
@@ -330,13 +332,13 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
330
332
  * TabPanels is used within Tabs as a container for the content of each tab.
331
333
  * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.
332
334
  */
333
- export function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {
334
- const {tabState, tabProps} = useContext(TabContext);
335
+ export function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>) {
336
+ const {tabState, tabProps} = useContext(TabContext)!;
335
337
  const {tabListState} = tabState;
336
338
 
337
- const factory = useCallback(nodes => new ListCollection(nodes), []);
339
+ const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);
338
340
  const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});
339
- const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
341
+ const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;
340
342
 
341
343
  return (
342
344
  <TabPanel {...props} key={tabListState?.selectedKey}>
@@ -351,9 +353,9 @@ interface TabPanelProps extends AriaTabPanelProps, StyleProps {
351
353
 
352
354
  // @private
353
355
  function TabPanel(props: TabPanelProps) {
354
- const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);
356
+ const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;
355
357
  const {tabListState} = tabState;
356
- let ref = useRef(undefined);
358
+ let ref = useRef<HTMLDivElement | null>(null);
357
359
  const {tabPanelProps} = useTabPanel(props, tabListState, ref);
358
360
  let {styleProps} = useStyleProps(props);
359
361
 
@@ -392,8 +394,8 @@ function TabPicker<T>(props: TabPickerProps<T>) {
392
394
  visible
393
395
  } = props;
394
396
 
395
- let ref = useRef(undefined);
396
- let [pickerNode, setPickerNode] = useState(null);
397
+ let ref = useRef<DOMRefValue<HTMLDivElement>>(null);
398
+ let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);
397
399
 
398
400
  useEffect(() => {
399
401
  let node = unwrapDOMRef(ref);
@@ -408,7 +410,6 @@ function TabPicker<T>(props: TabPickerProps<T>) {
408
410
 
409
411
  const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};
410
412
 
411
- // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
412
413
  return (
413
414
  <div
414
415
  className={classNames(