@atlaskit/code 15.6.9 → 15.6.10

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/code
 
+## 15.6.10
+
+### Patch Changes
+
+- [#105601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105601)
+  [`948a599bf836d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/948a599bf836d) -
+  Update dependencies and remove unused internal exports.
+- Updated dependencies
+
 ## 15.6.9
 
 ### Patch Changes

package/dist/cjs/internal/theme/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLineNumWidth = exports.getCodeStyles = exports.getCodeBlockTheme = exports.getCodeBlockStyles = exports.getBaseCodeStyles = void 0;
+exports.getLineNumWidth = exports.getCodeStyles = exports.getCodeBlockTheme = exports.getCodeBlockStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("./constants");
 var _getTheme = require("./get-theme");
@@ -195,7 +195,7 @@ var syntaxKeywordColors = function syntaxKeywordColors(theme) {
 /**
  * Styles applied at the root element level, common across code/codeblock
  */
-var getBaseCodeStyles = exports.getBaseCodeStyles = function getBaseCodeStyles(theme) {
+var getBaseCodeStyles = function getBaseCodeStyles(theme) {
   return {
     fontSize: _constants.CODE_FONT_SIZE,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography

package/dist/es2019/internal/theme/styles.js

@@ -183,7 +183,7 @@ const syntaxKeywordColors = theme => ({
 /**
  * Styles applied at the root element level, common across code/codeblock
  */
-export const getBaseCodeStyles = theme => ({
+const getBaseCodeStyles = theme => ({
   fontSize: CODE_FONT_SIZE,
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontFamily: theme.fontFamily,

package/dist/esm/internal/theme/styles.js

@@ -190,7 +190,7 @@ var syntaxKeywordColors = function syntaxKeywordColors(theme) {
 /**
  * Styles applied at the root element level, common across code/codeblock
  */
-export var getBaseCodeStyles = function getBaseCodeStyles(theme) {
+var getBaseCodeStyles = function getBaseCodeStyles(theme) {
   return {
     fontSize: CODE_FONT_SIZE,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography

package/dist/types/constants.d.ts

@@ -326,5 +326,5 @@ export declare const SUPPORTED_LANGUAGES: readonly [{
 export { CODE_BLOCK_SELECTOR } from './internal/theme/constants';
 export type Language = (typeof SUPPORTED_LANGUAGES)[number];
 export type LanguageAlias = (typeof SUPPORTED_LANGUAGES)[number]['alias'][number];
-export type LanguageName = (typeof SUPPORTED_LANGUAGES)[number]['name'];
+type LanguageName = (typeof SUPPORTED_LANGUAGES)[number]['name'];
 export type SupportedLanguages = LanguageName | LanguageAlias;

package/dist/types/internal/theme/styles.d.ts

@@ -1,18 +1,6 @@
 import type { CSSObject } from '@emotion/react';
-import type { CodeBlockTheme, CodeTheme } from './types';
+import type { CodeBlockTheme } from './types';
 export declare const getLineNumWidth: (numLines: number) => string;
-/**
- * Styles applied at the root element level, common across code/codeblock
- */
-export declare const getBaseCodeStyles: (theme: CodeTheme) => {
-    fontSize: number;
-    fontFamily: string | undefined;
-    fontWeight: "var(--ds-font-weight-regular)";
-    backgroundColor: string;
-    color: string | undefined;
-    borderStyle: string;
-    borderRadius: "var(--ds-border-radius)";
-};
 /**
  * Takes an implemented CodeBlock theme, and returns styles required for
  * react-syntax-highlighter.

package/dist/types-ts4.5/constants.d.ts

@@ -652,5 +652,5 @@ export declare const SUPPORTED_LANGUAGES: readonly [
 export { CODE_BLOCK_SELECTOR } from './internal/theme/constants';
 export type Language = (typeof SUPPORTED_LANGUAGES)[number];
 export type LanguageAlias = (typeof SUPPORTED_LANGUAGES)[number]['alias'][number];
-export type LanguageName = (typeof SUPPORTED_LANGUAGES)[number]['name'];
+type LanguageName = (typeof SUPPORTED_LANGUAGES)[number]['name'];
 export type SupportedLanguages = LanguageName | LanguageAlias;

package/dist/types-ts4.5/internal/theme/styles.d.ts

@@ -1,18 +1,6 @@
 import type { CSSObject } from '@emotion/react';
-import type { CodeBlockTheme, CodeTheme } from './types';
+import type { CodeBlockTheme } from './types';
 export declare const getLineNumWidth: (numLines: number) => string;
-/**
- * Styles applied at the root element level, common across code/codeblock
- */
-export declare const getBaseCodeStyles: (theme: CodeTheme) => {
-    fontSize: number;
-    fontFamily: string | undefined;
-    fontWeight: "var(--ds-font-weight-regular)";
-    backgroundColor: string;
-    color: string | undefined;
-    borderStyle: string;
-    borderRadius: "var(--ds-border-radius)";
-};
 /**
  * Takes an implemented CodeBlock theme, and returns styles required for
  * react-syntax-highlighter.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/code",
-	"version": "15.6.9",
+	"version": "15.6.10",
 	"description": "Code highlights short strings of code snippets inline with body text.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -45,17 +45,25 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
+		"@atlaskit/button": "^20.3.10",
+		"@atlaskit/docs": "*",
 		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/form": "^11.0.2",
+		"@atlaskit/link": "*",
+		"@atlaskit/primitives": "^13.3.8",
+		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^14.0.0",
-		"@atlaskit/visual-regression": "*",
+		"@compiled/react": "^0.18.1",
 		"@testing-library/react": "^12.1.5",
 		"@types/jscodeshift": "^0.11.0",
 		"@types/refractor": "^3.0.2",
 		"color-contrast-checker": "^1.5.0",
+		"css-loader": "^2.0.0",
 		"jscodeshift": "^0.13.0",
 		"prismjs": "^1.25.0",
 		"react-dom": "^16.8.0",
+		"style-loader": "^0.16.1",
 		"typescript": "~5.4.2"
 	},
 	"keywords": [

package/__perf__/code-block-100-lines.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from '../src';
-
-import { hundredLineExample } from './source-code-examples/100-line-example';
-
-export default () => <CodeBlock text={hundredLineExample} language="tsx" />;

package/__perf__/code-block-1000-lines.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from '../src';
-
-import { thousandLineExample } from './source-code-examples/1000-line-example';
-
-export default () => <CodeBlock text={thousandLineExample} language="tsx" />;

package/__perf__/code-block-4458-lines.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from '../src';
-
-import { hugeFileExample } from './source-code-examples/4458-line-example';
-
-export default () => <CodeBlock text={hugeFileExample} language="javascript" />;

package/__perf__/code-block-500-lines.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from '../src';
-
-import { fiveHundredLineExample } from './source-code-examples/500-line-example';
-
-export default () => <CodeBlock text={fiveHundredLineExample} language="tsx" />;

package/__perf__/code-block-no-syntax-highlighting.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from '../src';
-
-import { text } from './code-block-syntax-highlighting';
-
-export default () => <CodeBlock text={text} />;

package/__perf__/code-block-syntax-highlighting.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from '../src';
-
-export const text = `/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import styled from '@emotion/styled';
-import { jsx } from '@emotion/react';
-import { N800 } from '@atlaskit/theme/colors';
-
-// TODO refactor
-const Content = styled.div\`
-  color: \${N800};
-  margin-top: 8px !important;
-\`
-
-class HelloMessage extends React.Component {
-  render() {
-    return (
-      <Content css={{ background: "green" }}>Hello {this.props.name}</Content>
-    );
-  }
-}
-
-ReactDOM.render(<HelloMessage name="Taylor" />, document.body);`;
-
-export default () => <CodeBlock text={text} language="jsx" />;

package/__perf__/inline-code.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Code } from '../src';
-
-export default () => <Code>yarn changeset</Code>;

package/__perf__/source-code-examples/100-line-example.tsx

@@ -1,113 +0,0 @@
-// eslint-disable-file
-export const hundredLineExample = `/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { CSSProperties, forwardRef } from 'react';
-
-import { css, jsx } from '@emotion/react';
-
-import { BackgroundColor, Box, Inline, xcss } from '@atlaskit/primitives';
-import { N0, N500, N700, R400, Y300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-
-const CSS_VAR_TEXT_COLOR = '--banner-text-color';
-
-const textStyles = css({
-  color: \`var(\${CSS_VAR_TEXT_COLOR})\`,
-	font: token('font.body'),
-  fontWeight: token('font.weight.medium', '500'),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  'a, a:visited, a:hover, a:focus, a:active': {
-    color: 'currentColor',
-    textDecoration: 'underline',
-  },
-});
-
-const backgroundColors: Record<Appearance, BackgroundColor> = {
-  warning: 'color.background.warning.bold',
-  error: 'color.background.danger.bold',
-  announcement: 'color.background.neutral.bold',
-};
-
-const tokenBackgroundColors: Record<Appearance, string> = {
-  warning: token('color.background.warning.bold', Y300),
-  error: token('color.background.danger.bold', R400),
-  announcement: token('color.background.neutral.bold', N500),
-};
-
-const tokenTextColors: Record<Appearance, string> = {
-  warning: token('color.text.warning.inverse', N700),
-  error: token('color.text.inverse', N0),
-  announcement: token('color.text.inverse', N0),
-};
-
-type Appearance = 'warning' | 'error' | 'announcement';
-
-const containerStyles = xcss({
-  overflow: 'hidden',
-  maxHeight: 'size.500',
-});
-
-const iconWrapperStyles = xcss({
-  display: 'block',
-  width: 'size.200',
-  height: 'size.200', // This matches Icon's "medium" size, without this the (line-)height is greater than that of the Icon
-  flexShrink: '0',
-});
-
-export interface BannerProps {
-  appearance?: Appearance;
-  children?: React.ReactNode;
-  icon?: React.ReactElement;
-  testId?: string;
-}
-
-const Banner = forwardRef<HTMLDivElement, BannerProps>(
-  ({ appearance = 'warning', children, icon, testId }, ref) => {
-    const appearanceType =
-      appearance in backgroundColors ? appearance : 'warning';
-
-    return (
-      <Box
-        xcss={containerStyles}
-        backgroundColor={backgroundColors[appearanceType]}
-        padding="space.150"
-        testId={testId}
-        ref={ref}
-        role="alert"
-      >
-        <Inline space="space.050" alignBlock="center" alignInline="start">
-          {icon ? (
-            <Box
-              as="span"
-              xcss={iconWrapperStyles}
-              style={{
-                fill: tokenBackgroundColors[appearanceType],
-                color: tokenTextColors[appearanceType],
-              }}
-            >
-              {icon}
-            </Box>
-          ) : null}
-          <span
-            style={
-              {
-                [CSS_VAR_TEXT_COLOR]: tokenTextColors[appearanceType],
-              } as CSSProperties
-            }
-            css={textStyles}
-          >
-            {children}
-          </span>
-        </Inline>
-      </Box>
-    );
-  },
-);
-
-export default Banner;`;