@atlaskit/icon 22.3.2 → 22.4.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/icon
 
+## 22.4.0
+
+### Minor Changes
+
+- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
+  [`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
 ## 22.3.2
 
 ### Patch Changes
@@ -39,7 +48,7 @@
 
 - [#98193](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98193)
   [`d34711ffc0a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d34711ffc0a5) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 22.1.1
 

package/README.md

@@ -10,6 +10,9 @@ yarn add @atlaskit/icon
 
 ## Usage
 
-Icons should be used intentionally to maximize comprehension and reduce cognitive load. Use it to call attention to a particular action, command, or section. If you’re questioning an icon’s use, it probably doesn’t need to be used.
+Icons should be used intentionally to maximize comprehension and reduce cognitive load. Use it to
+call attention to a particular action, command, or section. If you’re questioning an icon’s use, it
+probably doesn’t need to be used.
 
-To search through all the icons we have in our system, have a look at our [icon explorer](https://atlassian.design/components/icon/icon-explorer).
+To search through all the icons we have in our system, have a look at our
+[icon explorer](https://atlassian.design/components/icon/icon-explorer).

package/__perf__/default.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 import Icon from '../src';
 
 const customGlyph = () => (
-  <svg viewBox="0 0 24 24" focusable="false" role="presentation">
-    <g fill="currentColor" fillRule="evenodd">
-      <path d="M20.402 4.215a.414.414 0 0 0-.33-.166.398.398 0 0 0-.19.049c-2.427 1.328-5.24 2.03-8.134 2.03-2.895 0-5.708-.702-8.134-2.03a.397.397 0 0 0-.19-.049.405.405 0 0 0-.254.727 14.296 14.296 0 0 0 8.577 2.854h.001a14.295 14.295 0 0 0 8.579-2.855.405.405 0 0 0 .075-.56m-2.788 3.783a.326.326 0 0 0-.314-.045 15.86 15.86 0 0 1-2.069.625.407.407 0 0 0-.285.248c-.474 1.301-1.687 2.54-2.96 3.837a.329.329 0 0 1-.238.113c-.116 0-.187-.062-.24-.113-1.271-1.297-2.484-2.531-2.959-3.832a.407.407 0 0 0-.285-.249 16.06 16.06 0 0 1-2.07-.631.328.328 0 0 0-.313.045.325.325 0 0 0-.126.287c.108 1.082.535 2.14 1.307 3.247.725 1.042 1.67 2.007 2.585 2.94 1.685 1.718 3.276 3.34 3.416 5.223.012.17.154.301.324.301h1.98a.326.326 0 0 0 .325-.342c-.062-1.258-.536-2.518-1.448-3.851-.19-.28-.396-.552-.61-.818a.236.236 0 0 1 .016-.311l.199-.203c.914-.933 1.86-1.897 2.585-2.939.771-1.108 1.199-2.16 1.306-3.24a.334.334 0 0 0-.126-.292m-7.99 7.935a.301.301 0 0 0-.231-.099.326.326 0 0 0-.27.153c-.832 1.267-1.262 2.463-1.321 3.664a.33.33 0 0 0 .09.242.33.33 0 0 0 .236.101h1.976c.17 0 .314-.133.326-.303.043-.579.223-1.16.552-1.77a.458.458 0 0 0-.04-.493c-.326-.424-.725-.876-1.318-1.495" />
-      <path d="M11.75 8.968c.62 0 .98-.037 1.106-.037a.302.302 0 0 1 .275.421c-.082.22-.457 1.011-1.155 1.69a.319.319 0 0 1-.228.09.318.318 0 0 1-.229-.09c-.698-.679-1.073-1.47-1.155-1.69a.302.302 0 0 1 .275-.421c.127 0 .486.037 1.106.037h.005" />
-    </g>
-  </svg>
+	<svg viewBox="0 0 24 24" focusable="false" role="presentation">
+		<g fill="currentColor" fillRule="evenodd">
+			<path d="M20.402 4.215a.414.414 0 0 0-.33-.166.398.398 0 0 0-.19.049c-2.427 1.328-5.24 2.03-8.134 2.03-2.895 0-5.708-.702-8.134-2.03a.397.397 0 0 0-.19-.049.405.405 0 0 0-.254.727 14.296 14.296 0 0 0 8.577 2.854h.001a14.295 14.295 0 0 0 8.579-2.855.405.405 0 0 0 .075-.56m-2.788 3.783a.326.326 0 0 0-.314-.045 15.86 15.86 0 0 1-2.069.625.407.407 0 0 0-.285.248c-.474 1.301-1.687 2.54-2.96 3.837a.329.329 0 0 1-.238.113c-.116 0-.187-.062-.24-.113-1.271-1.297-2.484-2.531-2.959-3.832a.407.407 0 0 0-.285-.249 16.06 16.06 0 0 1-2.07-.631.328.328 0 0 0-.313.045.325.325 0 0 0-.126.287c.108 1.082.535 2.14 1.307 3.247.725 1.042 1.67 2.007 2.585 2.94 1.685 1.718 3.276 3.34 3.416 5.223.012.17.154.301.324.301h1.98a.326.326 0 0 0 .325-.342c-.062-1.258-.536-2.518-1.448-3.851-.19-.28-.396-.552-.61-.818a.236.236 0 0 1 .016-.311l.199-.203c.914-.933 1.86-1.897 2.585-2.939.771-1.108 1.199-2.16 1.306-3.24a.334.334 0 0 0-.126-.292m-7.99 7.935a.301.301 0 0 0-.231-.099.326.326 0 0 0-.27.153c-.832 1.267-1.262 2.463-1.321 3.664a.33.33 0 0 0 .09.242.33.33 0 0 0 .236.101h1.976c.17 0 .314-.133.326-.303.043-.579.223-1.16.552-1.77a.458.458 0 0 0-.04-.493c-.326-.424-.725-.876-1.318-1.495" />
+			<path d="M11.75 8.968c.62 0 .98-.037 1.106-.037a.302.302 0 0 1 .275.421c-.082.22-.457 1.011-1.155 1.69a.319.319 0 0 1-.228.09.318.318 0 0 1-.229-.09c-.698-.679-1.073-1.47-1.155-1.69a.302.302 0 0 1 .275-.421c.127 0 .486.037 1.106.037h.005" />
+		</g>
+	</svg>
 );
 
-export default () => (
-  <Icon glyph={customGlyph} label="Custom icon" size="xlarge" />
-);
+export default () => <Icon glyph={customGlyph} label="Custom icon" size="xlarge" />;

package/build/index.tsx

@@ -10,7 +10,7 @@ import utilityIconMetadata from '../icons_raw/metadata-utility';
 const root = pkgDir.sync();
 
 if (!root) {
-  throw new Error('Root directory was not found');
+	throw new Error('Root directory was not found');
 }
 
 /**
@@ -41,59 +41,56 @@ if (!root) {
  * The updated icon build process for the new icons under `@atlaskit/icon/core/*`
  */
 const configCore: IconBuildConfig = {
-  srcDir: path.resolve(root, 'icons_raw/core'),
-  processedDir: path.resolve(root, 'icons_optimised/core'),
-  destDir: path.resolve(root, 'core'),
-  maxWidth: 24,
-  maxHeight: 24,
-  glob: '**/*.svg',
-  baseIconEntryPoint: '@atlaskit/icon/UNSAFE_base-new',
-  isUpdatedIconBuildEnabled: true,
-  iconType: 'core',
-  metadata: coreIconMetadata,
+	srcDir: path.resolve(root, 'icons_raw/core'),
+	processedDir: path.resolve(root, 'icons_optimised/core'),
+	destDir: path.resolve(root, 'core'),
+	maxWidth: 24,
+	maxHeight: 24,
+	glob: '**/*.svg',
+	baseIconEntryPoint: '@atlaskit/icon/UNSAFE_base-new',
+	isUpdatedIconBuildEnabled: true,
+	iconType: 'core',
+	metadata: coreIconMetadata,
 };
 
 buildIcons(configCore).then((icons) => {
-  const iconDocs = createIconDocs(
-    icons,
-    '@atlaskit/icon/core',
-    synonyms,
-    ['icon', 'core'],
-    true,
-    coreIconMetadata,
-  );
+	const iconDocs = createIconDocs(
+		icons,
+		'@atlaskit/icon/core',
+		synonyms,
+		['icon', 'core'],
+		true,
+		coreIconMetadata,
+	);
 
-  return fs.outputFile(path.resolve(root, 'src/metadata-core.tsx'), iconDocs);
+	return fs.outputFile(path.resolve(root, 'src/metadata-core.tsx'), iconDocs);
 });
 
 /**
  * The updated icon build process for the new icons under `@atlaskit/icon/utility/*`
  */
 const configUtility: IconBuildConfig = {
-  srcDir: path.resolve(root, 'icons_raw/utility'),
-  processedDir: path.resolve(root, 'icons_optimised/utility'),
-  destDir: path.resolve(root, 'utility'),
-  maxWidth: 12,
-  maxHeight: 12,
-  glob: '**/*.svg',
-  baseIconEntryPoint: '@atlaskit/icon/UNSAFE_base-new',
-  isUpdatedIconBuildEnabled: true,
-  iconType: 'utility',
-  metadata: utilityIconMetadata,
+	srcDir: path.resolve(root, 'icons_raw/utility'),
+	processedDir: path.resolve(root, 'icons_optimised/utility'),
+	destDir: path.resolve(root, 'utility'),
+	maxWidth: 12,
+	maxHeight: 12,
+	glob: '**/*.svg',
+	baseIconEntryPoint: '@atlaskit/icon/UNSAFE_base-new',
+	isUpdatedIconBuildEnabled: true,
+	iconType: 'utility',
+	metadata: utilityIconMetadata,
 };
 
 buildIcons(configUtility).then((icons) => {
-  const iconDocs = createIconDocs(
-    icons,
-    '@atlaskit/icon/utility',
-    synonyms,
-    ['icon', 'utility'],
-    true,
-    utilityIconMetadata,
-  );
+	const iconDocs = createIconDocs(
+		icons,
+		'@atlaskit/icon/utility',
+		synonyms,
+		['icon', 'utility'],
+		true,
+		utilityIconMetadata,
+	);
 
-  return fs.outputFile(
-    path.resolve(root, 'src/metadata-utility.tsx'),
-    iconDocs,
-  );
+	return fs.outputFile(path.resolve(root, 'src/metadata-utility.tsx'), iconDocs);
 });

package/codemods/21.2.0-metadata-entry.tsx

@@ -1,119 +1,111 @@
 import type {
-  default as core,
-  API,
-  FileInfo,
-  ImportSpecifier,
-  ASTPath,
-  ImportDefaultSpecifier,
-  Options,
+	default as core,
+	API,
+	FileInfo,
+	ImportSpecifier,
+	ASTPath,
+	ImportDefaultSpecifier,
+	Options,
 } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
 export const packageName = '@atlaskit/icon';
 
-export default function transformer(
-  file: FileInfo,
-  api: API,
-  options: Options,
-) {
-  const j = api.jscodeshift;
-  const root = j(file.source, { quote: 'auto' });
-  if (hasImportDeclaration(j, root, packageName)) {
-    const imports = root.find(j.ImportSpecifier, {
-      imported: { name: 'metadata' },
-    });
-    imports.forEach((p: ASTPath<ImportSpecifier | ImportDefaultSpecifier>) => {
-      if (p.parentPath.parentPath.node.source.value !== packageName) {
-        return;
-      }
-      if (p.parentPath.node.specifiers.length === 1) {
-        p.node.type = 'ImportDefaultSpecifier';
-        p.parentPath.node.source.value = `${packageName}/metadata`;
-      } else if (p.node.local) {
-        tryCreateImport({
-          j,
-          base: root,
-          packageName: `${packageName}/metadata`,
-          relativeToPackage: packageName,
-        });
-        addToImport({
-          j,
-          base: root,
-          packageName: `${packageName}/metadata`,
-          importSpecifier: j.importDefaultSpecifier(
-            j.identifier(p.node.local.name),
-          ),
-        });
-        p.replace();
-      }
-    });
-    return root.toSource(options.printOptions || { quote: 'single' });
-  }
-  return file.source;
+export default function transformer(file: FileInfo, api: API, options: Options) {
+	const j = api.jscodeshift;
+	const root = j(file.source, { quote: 'auto' });
+	if (hasImportDeclaration(j, root, packageName)) {
+		const imports = root.find(j.ImportSpecifier, {
+			imported: { name: 'metadata' },
+		});
+		imports.forEach((p: ASTPath<ImportSpecifier | ImportDefaultSpecifier>) => {
+			if (p.parentPath.parentPath.node.source.value !== packageName) {
+				return;
+			}
+			if (p.parentPath.node.specifiers.length === 1) {
+				p.node.type = 'ImportDefaultSpecifier';
+				p.parentPath.node.source.value = `${packageName}/metadata`;
+			} else if (p.node.local) {
+				tryCreateImport({
+					j,
+					base: root,
+					packageName: `${packageName}/metadata`,
+					relativeToPackage: packageName,
+				});
+				addToImport({
+					j,
+					base: root,
+					packageName: `${packageName}/metadata`,
+					importSpecifier: j.importDefaultSpecifier(j.identifier(p.node.local.name)),
+				});
+				p.replace();
+			}
+		});
+		return root.toSource(options.printOptions || { quote: 'single' });
+	}
+	return file.source;
 }
 
 function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  importPath: string,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	importPath: string,
 ) {
-  return !!source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === importPath).length;
+	return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
+		.length;
 }
 
 function tryCreateImport({
-  j,
-  base,
-  relativeToPackage,
-  packageName,
+	j,
+	base,
+	relativeToPackage,
+	packageName,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  relativeToPackage: string;
-  packageName: string;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	relativeToPackage: string;
+	packageName: string;
 }) {
-  const exists: boolean =
-    base
-      .find(j.ImportDeclaration)
-      .filter((path) => path.value.source.value === packageName).length > 0;
+	const exists: boolean =
+		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
+			.length > 0;
 
-  if (exists) {
-    return;
-  }
+	if (exists) {
+		return;
+	}
 
-  base
-    .find(j.ImportDeclaration)
-    .filter((path) => path.value.source.value === relativeToPackage)
-    .insertBefore(j.importDeclaration([], j.literal(packageName)));
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === relativeToPackage)
+		.insertBefore(j.importDeclaration([], j.literal(packageName)));
 }
 
 function addToImport({
-  j,
-  base,
-  importSpecifier,
-  packageName,
+	j,
+	base,
+	importSpecifier,
+	packageName,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
-  packageName: string;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
+	packageName: string;
 }) {
-  base
-    .find(j.ImportDeclaration)
-    .filter((path) => path.value.source.value === packageName)
-    .replaceWith((declaration) => {
-      return j.importDeclaration(
-        [
-          // we are appending to the existing specifiers
-          // We are doing a filter hear because sometimes specifiers can be removed
-          // but they hand around in the declaration
-          ...(declaration.value.specifiers || []).filter(
-            (item) => item.type === 'ImportSpecifier' && item.imported != null,
-          ),
-          importSpecifier,
-        ],
-        j.literal(packageName),
-      );
-    });
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === packageName)
+		.replaceWith((declaration) => {
+			return j.importDeclaration(
+				[
+					// we are appending to the existing specifiers
+					// We are doing a filter hear because sometimes specifiers can be removed
+					// but they hand around in the declaration
+					...(declaration.value.specifiers || []).filter(
+						(item) => item.type === 'ImportSpecifier' && item.imported != null,
+					),
+					importSpecifier,
+				],
+				j.literal(packageName),
+			);
+		});
 }

package/codemods/__tests__/21.2.0-metadata-entry.test.tsx

@@ -5,122 +5,122 @@ import transformer, { packageName } from '../21.2.0-metadata-entry';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Update imports', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { metadata } from '${packageName}';
       console.log(metadata);
     `,
-    `
+		`
       import metadata from '${packageName}/metadata';
       console.log(metadata);
     `,
-    'should replace named metadata import from main entry point with default import from dedicated entry point',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should replace named metadata import from main entry point with default import from dedicated entry point',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { metadata as data } from '${packageName}';
       console.log(data);
     `,
-    `
+		`
       import data from '${packageName}/metadata';
       console.log(data);
     `,
-    'should preserve renaming when converting from named import to default import',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should preserve renaming when converting from named import to default import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { a, metadata, b } from '${packageName}';
       console.log(metadata);
     `,
-    `
+		`
       import metadata from '${packageName}/metadata';
       import { a, b } from '${packageName}';
       console.log(metadata);
     `,
-    'should preserve other named imports',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should preserve other named imports',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { a, metadata as data, b } from '${packageName}';
       console.log(data);
     `,
-    `
+		`
       import data from '${packageName}/metadata';
       import { a, b } from '${packageName}';
       console.log(data);
     `,
-    'should preserve other named imports, as well as metadata renaming',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should preserve other named imports, as well as metadata renaming',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import Icon, { a, metadata as data, b } from '${packageName}';
       console.log(a, data, b);
     `,
-    `
+		`
       import data from '${packageName}/metadata';
       import Icon, { a, b } from '${packageName}';
       console.log(a, data, b);
     `,
-    'should preserve other named imports and default import, as well as metadata renaming',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should preserve other named imports and default import, as well as metadata renaming',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import metadata from '${packageName}/metadata';
       console.log(metadata);
     `,
-    `
+		`
       import metadata from '${packageName}/metadata';
       console.log(metadata);
     `,
-    'should not affect existing good imports',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should not affect existing good imports',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { metadata } from 'not-${packageName}';
     `,
-    `
+		`
       import { metadata } from 'not-${packageName}';
     `,
-    'should not affect other packages',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should not affect other packages',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { metadata } from '${packageName}/foo';
     `,
-    `
+		`
       import { metadata } from '${packageName}/foo';
     `,
-    'should not affect other entrypoints',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should not affect other entrypoints',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
       import { metadata } from '@atlaskit/icon';
       import { metadata as objectIconMetadata } from '@atlaskit/icon-object';
       import { metadata as fileTypeIconMetadata } from '@atlaskit/icon-file-type';
     `,
-    `
+		`
       import metadata from '@atlaskit/icon/metadata';
       import { metadata as objectIconMetadata } from '@atlaskit/icon-object';
       import { metadata as fileTypeIconMetadata } from '@atlaskit/icon-file-type';
     `,
-    'should work as expected on a real-world case',
-  );
+		'should work as expected on a real-world case',
+	);
 });

package/dist/cjs/components/icon-new.js

@@ -7,8 +7,13 @@ exports.default = exports.Icon = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * We are hiding this props from consumers as it's reserved
  * for use by Icon Tile.
@@ -22,7 +27,7 @@ var commonSVGStyles = (0, _react2.css)({
    * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
    * rule) and then override it with currentColor for the color changes to be picked up.
    */
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   stop: {
     stopColor: 'currentColor'
   }

package/dist/cjs/components/icon-tile.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconTile;
 var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var sizeMap = {
   '16': (0, _react.css)({
     width: '16px',