@atlaskit/tabs 16.1.2 → 16.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/tabs
 
+## 16.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.2.0
+
+### Minor Changes
+
+- [#111016](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111016)
+  [`d131599730792`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d131599730792) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.2
 
 ### Patch Changes
@@ -18,7 +37,7 @@
 
 - [#96791](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96791)
   [`d85b0f65d608`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d85b0f65d608) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 16.0.0
 

package/__perf__/default.tsx

@@ -3,20 +3,20 @@ import React from 'react';
 import Tabs, { Tab, TabList, TabPanel } from '../src';
 
 export default () => (
-  <Tabs id="test">
-    <TabList>
-      <Tab>Tab 1</Tab>
-      <Tab>Tab 2</Tab>
-      <Tab>Tab 3</Tab>
-    </TabList>
-    <TabPanel>
-      <div>One</div>
-    </TabPanel>
-    <TabPanel>
-      <div>Two</div>
-    </TabPanel>
-    <TabPanel>
-      <div>Three</div>
-    </TabPanel>
-  </Tabs>
+	<Tabs id="test">
+		<TabList>
+			<Tab>Tab 1</Tab>
+			<Tab>Tab 2</Tab>
+			<Tab>Tab 3</Tab>
+		</TabList>
+		<TabPanel>
+			<div>One</div>
+		</TabPanel>
+		<TabPanel>
+			<div>Two</div>
+		</TabPanel>
+		<TabPanel>
+			<div>Three</div>
+		</TabPanel>
+	</Tabs>
 );

package/codemods/13.0.0-lite-mode.tsx

@@ -1,10 +1,7 @@
 import { type JSCodeshift } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
-import {
-  createTransformer,
-  hasImportDeclaration,
-} from '@atlaskit/codemod-utils';
+import { createTransformer, hasImportDeclaration } from '@atlaskit/codemod-utils';
 
 import { addIdProp } from './migrations/add-id-prop';
 import { mapTabsProp, removeTabsProp } from './migrations/map-tabs-prop';
@@ -16,20 +13,19 @@ import { removeTypes } from './migrations/remove-types';
 import { renameIsContentPersistedToShouldUnmountTabPanelOnChange } from './migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change';
 
 const transformer = createTransformer(
-  [
-    // Note these first 2 must be done first while there is one JSX element for tabs
-    addIdProp,
-    renameIsContentPersistedToShouldUnmountTabPanelOnChange,
-    migrateOnSelectType,
-    removeTabItemTabContent,
-    mapTabsProp,
-    removeTabsProp,
-    removeComponentsProp,
-    removeIsSelectedTestProp,
-    removeTypes,
-  ],
-  (j: JSCodeshift, source: Collection<Node>) =>
-    hasImportDeclaration(j, source, '@atlaskit/tabs'),
+	[
+		// Note these first 2 must be done first while there is one JSX element for tabs
+		addIdProp,
+		renameIsContentPersistedToShouldUnmountTabPanelOnChange,
+		migrateOnSelectType,
+		removeTabItemTabContent,
+		mapTabsProp,
+		removeTabsProp,
+		removeComponentsProp,
+		removeIsSelectedTestProp,
+		removeTypes,
+	],
+	(j: JSCodeshift, source: Collection<Node>) => hasImportDeclaration(j, source, '@atlaskit/tabs'),
 );
 
 export default transformer;

package/codemods/__tests__/13.0.0-lite-mode.tsx

@@ -3,19 +3,19 @@ import transformer from '../13.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('all transforms should be applied', () => {
-  beforeEach(() => {
-    jest.spyOn(global.Math, 'random').mockReturnValue(0.123456789);
-  });
-
-  afterEach(() => {
-    jest.spyOn(global.Math, 'random').mockRestore();
-  });
-
-  // Note the first 2 are extreme cases, not many usages would have all these use cases
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	beforeEach(() => {
+		jest.spyOn(global.Math, 'random').mockReturnValue(0.123456789);
+	});
+
+	afterEach(() => {
+		jest.spyOn(global.Math, 'random').mockRestore();
+	});
+
+	// Note the first 2 are extreme cases, not many usages would have all these use cases
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useState } from "react";
       import Tabs, { TabItem } from "@atlaskit/tabs";
       import {
@@ -59,7 +59,7 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    `
+		`
       /* TODO: (from codemod) We have added an "id" prop to "Tabs" for accessibility reasons.
       The codemod has added a random ID but you can add one that makes sense for your use case. */
       /* TODO: (from codemod) 
@@ -133,13 +133,13 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    'should change usages',
-  );
+		'should change usages',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useState } from "react";
       import Tabs, { TabItem, TabContent } from "@atlaskit/tabs";
       import {
@@ -177,7 +177,7 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    `
+		`
       /* TODO: (from codemod) We have added an "id" prop to "Tabs" for accessibility reasons.
       The codemod has added a random ID but you can add one that makes sense for your use case. */
       /* TODO: (from codemod) 
@@ -256,13 +256,13 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    'should change usages with different variations of how the props are used',
-  );
+		'should change usages with different variations of how the props are used',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useState } from "react";
       import Tabs from "@atlaskit/tabs";
       import {
@@ -300,7 +300,7 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    `
+		`
       /* TODO: (from codemod) We have added an "id" prop to "Tabs" for accessibility reasons.
       The codemod has added a random ID but you can add one that makes sense for your use case. */
       /* TODO: (from codemod) 
@@ -351,13 +351,13 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    'should change usages when not using components and isSelectedTest',
-  );
+		'should change usages when not using components and isSelectedTest',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useState } from "react";
       import Tabs from "@atlaskit/tabs";
       import {
@@ -386,7 +386,7 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    `
+		`
       /* TODO: (from codemod) We have added an "id" prop to "Tabs" for accessibility reasons.
       The codemod has added a random ID but you can add one that makes sense for your use case. */
       /* TODO: (from codemod) 
@@ -441,13 +441,13 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    'should change usages when spreading props',
-  );
+		'should change usages when spreading props',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import React, { useState } from "react";
       import Tabs, { TabItem, TabContent } from "@atlaskit/tabs";
       import {
@@ -485,7 +485,7 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    `
+		`
       /* TODO: (from codemod) We have added an "id" prop to "Tabs" for accessibility reasons.
       The codemod has added a random ID but you can add one that makes sense for your use case. */
       /* TODO: (from codemod) 
@@ -564,6 +564,6 @@ describe('all transforms should be applied', () => {
         );
       }
       `,
-    'should change usages when onChange is defined in a child',
-  );
+		'should change usages when onChange is defined in a child',
+	);
 });

package/codemods/__tests__/add-id-prop.tsx

@@ -7,18 +7,18 @@ const transformer = createTransformer([addIdProp]);
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('add id prop', () => {
-  beforeEach(() => {
-    jest.spyOn(global.Math, 'random').mockReturnValue(0.123456789);
-  });
+	beforeEach(() => {
+		jest.spyOn(global.Math, 'random').mockReturnValue(0.123456789);
+	});
 
-  afterEach(() => {
-    jest.spyOn(global.Math, 'random').mockRestore();
-  });
+	afterEach(() => {
+		jest.spyOn(global.Math, 'random').mockRestore();
+	});
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
 
     import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
@@ -44,7 +44,7 @@ describe('add id prop', () => {
       );
     }
     `,
-    `
+		`
     /* TODO: (from codemod) We have added an "id" prop to "Tabs" for accessibility reasons.
     The codemod has added a random ID but you can add one that makes sense for your use case. */
     import React from 'react';
@@ -72,6 +72,6 @@ describe('add id prop', () => {
       );
     }
     `,
-    'should add an id prop',
-  );
+		'should add an id prop',
+	);
 });

package/codemods/__tests__/map-tabs-prop.tsx

@@ -7,10 +7,10 @@ const transformer = createTransformer([mapTabsProp, removeTabsProp]);
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('map tabs prop to components', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import Tabs from "@atlaskit/tabs";
 
@@ -27,7 +27,7 @@ describe('map tabs prop to components', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
 
@@ -48,13 +48,13 @@ describe('map tabs prop to components', () => {
     );
 
     `,
-    'should map tabs correctly',
-  );
+		'should map tabs correctly',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import Tabs from "@atlaskit/tabs";
 
@@ -69,7 +69,7 @@ describe('map tabs prop to components', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
 
@@ -93,13 +93,13 @@ describe('map tabs prop to components', () => {
     );
 
     `,
-    'should map tabs correctly if defined inline',
-  );
+		'should map tabs correctly if defined inline',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import Tabs from "@atlaskit/tabs";
 
@@ -119,7 +119,7 @@ describe('map tabs prop to components', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import Tabs, { Tab as AtlaskitTab, TabList as AtlaskitTabList, TabPanel } from "@atlaskit/tabs";
 
@@ -145,13 +145,13 @@ describe('map tabs prop to components', () => {
     );
 
     `,
-    'should map tabs correctly - with alias',
-  );
+		'should map tabs correctly - with alias',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import Tabs from "@atlaskit/tabs";
 
@@ -172,7 +172,7 @@ describe('map tabs prop to components', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import Tabs, {
       Tab as AtlaskitTab,
@@ -205,13 +205,13 @@ describe('map tabs prop to components', () => {
     );
 
     `,
-    'should map tabs correctly - with all clashed',
-  );
+		'should map tabs correctly - with all clashed',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import Tabs from "@atlaskit/tabs";
 
@@ -230,7 +230,7 @@ describe('map tabs prop to components', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
 
@@ -253,13 +253,13 @@ describe('map tabs prop to components', () => {
     );
 
     `,
-    'should map tabs correctly if defined inline',
-  );
+		'should map tabs correctly if defined inline',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import Tabs from "@atlaskit/tabs";
 
@@ -269,7 +269,7 @@ describe('map tabs prop to components', () => {
       />
     );
     `,
-    `
+		`
     /* TODO: (from codemod) 
     This file is spreading props on the Tabs component.
 
@@ -294,6 +294,6 @@ describe('map tabs prop to components', () => {
     );
 
     `,
-    'should map tabs correctly if spread is used',
-  );
+		'should map tabs correctly if spread is used',
+	);
 });