- {/* render the portaled contents */}
- {renderedTabs}
-
-
- {/* renderedTabs portals the tab title into this element */}
-
-
-
{inlineChildren}
+
+
+
+
+
+ {renderedTabPanels}
+
-
- {/* renderedTabs portals the contents into this element */}
-
-
+
+
);
-}
+};
Tabs.displayName = 'Tabs';
diff --git a/packages/tabs/src/context/TabDescendantsContext.ts b/packages/tabs/src/context/TabDescendantsContext.ts
new file mode 100644
index 0000000000..13599feead
--- /dev/null
+++ b/packages/tabs/src/context/TabDescendantsContext.ts
@@ -0,0 +1,17 @@
+import {
+ createDescendantsContext,
+ useDescendantsContext,
+} from '@leafygreen-ui/descendants';
+
+export const TabDescendantsContext = createDescendantsContext
(
+ 'TabDescendantsContext',
+);
+
+/**
+ * Access list of tab descendants
+ */
+export function useTabDescendantsContext() {
+ const { descendants } = useDescendantsContext(TabDescendantsContext);
+
+ return { tabDescendants: descendants };
+}
diff --git a/packages/tabs/src/context/TabPanelDescendantsContext.ts b/packages/tabs/src/context/TabPanelDescendantsContext.ts
new file mode 100644
index 0000000000..1983a3bd69
--- /dev/null
+++ b/packages/tabs/src/context/TabPanelDescendantsContext.ts
@@ -0,0 +1,16 @@
+import {
+ createDescendantsContext,
+ useDescendantsContext,
+} from '@leafygreen-ui/descendants';
+
+export const TabPanelDescendantsContext =
+ createDescendantsContext('TabPanelsDescendantsContext');
+
+/**
+ * Access list of tab panel descendants
+ */
+export function useTabPanelDescendantsContext() {
+ const { descendants } = useDescendantsContext(TabPanelDescendantsContext);
+
+ return { tabPanelDescendants: descendants };
+}
diff --git a/packages/tabs/src/context/index.ts b/packages/tabs/src/context/index.ts
new file mode 100644
index 0000000000..8b3ee5c7ef
--- /dev/null
+++ b/packages/tabs/src/context/index.ts
@@ -0,0 +1,8 @@
+export {
+ TabDescendantsContext,
+ useTabDescendantsContext,
+} from './TabDescendantsContext';
+export {
+ TabPanelDescendantsContext,
+ useTabPanelDescendantsContext,
+} from './TabPanelDescendantsContext';
diff --git a/packages/tabs/src/utils/getActiveAndEnabledIndices/getActiveAndEnabledIndices.spec.tsx b/packages/tabs/src/utils/getActiveAndEnabledIndices/getActiveAndEnabledIndices.spec.tsx
new file mode 100644
index 0000000000..cb4a864c20
--- /dev/null
+++ b/packages/tabs/src/utils/getActiveAndEnabledIndices/getActiveAndEnabledIndices.spec.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Tab, Tabs } from '../..';
+import { getTestUtils } from '..';
+
+import { getActiveAndEnabledIndices } from './getActiveAndEnabledIndices';
+
+const renderTabs = (
+ tabsProps = {},
+ { disableFirst = false, disableSecond = false, disableThird = false },
+) => {
+ const renderUtils = render(
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+ ,
+ );
+
+ const testUtils = getTestUtils();
+
+ return {
+ ...renderUtils,
+ ...testUtils,
+ };
+};
+
+describe('getActiveAndEnabledIndices', () => {
+ test('should return correct activeIndex and enabledIndices for enabled tabs', () => {
+ const selected = 2;
+ const { getAllTabsInTabList } = renderTabs(
+ { selected },
+ { disableSecond: true },
+ );
+ const tabTitleElements = getAllTabsInTabList();
+
+ const { activeIndex, enabledIndices } = getActiveAndEnabledIndices(
+ tabTitleElements,
+ selected,
+ );
+
+ expect(activeIndex).toBe(1);
+ expect(enabledIndices).toEqual([0, 2]);
+ });
+
+ test('should return correct activeIndex and enabledIndices when all tabs are enabled', () => {
+ const selected = 1;
+ const { getAllTabsInTabList } = renderTabs({ selected }, {});
+ const tabTitleElements = getAllTabsInTabList();
+
+ const { activeIndex, enabledIndices } = getActiveAndEnabledIndices(
+ tabTitleElements,
+ selected,
+ );
+
+ expect(activeIndex).toBe(1);
+ expect(enabledIndices).toEqual([0, 1, 2]);
+ });
+
+ test('should return correct activeIndex and enabledIndices when no tabs are enabled', () => {
+ const selected = 2;
+ const { getAllTabsInTabList } = renderTabs(
+ { selected },
+ { disableFirst: true, disableSecond: true, disableThird: true },
+ );
+ const tabTitleElements = getAllTabsInTabList();
+
+ const { activeIndex, enabledIndices } = getActiveAndEnabledIndices(
+ tabTitleElements,
+ selected,
+ );
+
+ expect(activeIndex).toBe(-1);
+ expect(enabledIndices).toEqual([]);
+ });
+});
diff --git a/packages/tabs/src/utils/getActiveAndEnabledIndices/getActiveAndEnabledIndices.ts b/packages/tabs/src/utils/getActiveAndEnabledIndices/getActiveAndEnabledIndices.ts
new file mode 100644
index 0000000000..d3fce8a07b
--- /dev/null
+++ b/packages/tabs/src/utils/getActiveAndEnabledIndices/getActiveAndEnabledIndices.ts
@@ -0,0 +1,12 @@
+export function getActiveAndEnabledIndices(
+ tabTitleElements: Array,
+ selected: number,
+) {
+ const enabledIndices = tabTitleElements
+ .filter(tabTitleEl => !tabTitleEl.hasAttribute('disabled'))
+ .map(tabTitleEl => tabTitleElements.indexOf(tabTitleEl));
+
+ const activeIndex = enabledIndices.indexOf(selected);
+
+ return { activeIndex, enabledIndices };
+}
diff --git a/packages/tabs/src/utils/getActiveAndEnabledIndices/index.ts b/packages/tabs/src/utils/getActiveAndEnabledIndices/index.ts
new file mode 100644
index 0000000000..037cdd3f1d
--- /dev/null
+++ b/packages/tabs/src/utils/getActiveAndEnabledIndices/index.ts
@@ -0,0 +1 @@
+export { getActiveAndEnabledIndices } from './getActiveAndEnabledIndices';
diff --git a/packages/tabs/src/utils/index.ts b/packages/tabs/src/utils/index.ts
index baf91cfc9f..947711c11a 100644
--- a/packages/tabs/src/utils/index.ts
+++ b/packages/tabs/src/utils/index.ts
@@ -1 +1,2 @@
+export { getActiveAndEnabledIndices } from './getActiveAndEnabledIndices';
export { getTestUtils } from './getTestUtils/getTestUtils';
diff --git a/packages/tabs/tsconfig.json b/packages/tabs/tsconfig.json
index 7f54c6801c..32c26fe98e 100644
--- a/packages/tabs/tsconfig.json
+++ b/packages/tabs/tsconfig.json
@@ -21,6 +21,9 @@
{
"path": "../box"
},
+ {
+ "path": "../descendants"
+ },
{
"path": "../emotion"
},
@@ -33,9 +36,6 @@
{
"path": "../palette"
},
- {
- "path": "../portal"
- },
{
"path": "../tokens"
},
diff --git a/yarn.lock b/yarn.lock
index 510a609fa4..aa1632eee5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7453,9 +7453,9 @@ camelcase@^7.0.0:
integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001585, caniuse-lite@^1.0.30001587:
- version "1.0.30001614"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz#f894b4209376a0bf923d67d9c361d96b1dfebe39"
- integrity sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==
+ version "1.0.30001620"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz#78bb6f35b8fe315b96b8590597094145d0b146b4"
+ integrity sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==
case-sensitive-paths-webpack-plugin@^2.4.0:
version "2.4.0"