@atlaskit/code 15.6.8 → 15.6.10

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- Updated dependencies
+
 ## 15.6.8
 
 ### Patch Changes

package/dist/cjs/bidi-warning/ui/styled.js

@@ -33,8 +33,10 @@ var decoration = (0, _react2.css)({
     background: "var(--ds-background-warning, ".concat(_colors.Y75, ")"),
     color: "var(--ds-text-warning, #7F5F01)",
     content: '"<"attr(data-bidi-character-code)">"',
-    fontSize: '14px',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     fontStyle: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '18px',
     /**
      * Ensures the decoration receives pointer events when it occurs with

package/dist/cjs/code.js

@@ -39,6 +39,7 @@ var styles = (0, _react2.css)({
   boxDecorationBreak: 'clone',
   color: "var(--ds-text, #172B4D)",
   font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'inherit',
   overflow: 'auto',
   overflowWrap: 'break-word',

package/dist/cjs/internal/theme/get-theme.js

@@ -21,6 +21,7 @@ var Y1100 = '#7A5D1A';
 var getBaseTheme = exports.getBaseTheme = function getBaseTheme() {
   return {
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontFamilyItalic: "SFMono-MediumItalic, ".concat((0, _tokens.getTokenValue)('font.family.code')),
     backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
     textColor: "var(--ds-text, ".concat(colors.N800, ")"),

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,9 +195,10 @@ 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
     fontFamily: theme.fontFamily,
     fontWeight: "var(--ds-font-weight-regular, 400)",
     backgroundColor: "var(".concat(_constants.VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
@@ -223,6 +224,7 @@ var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyle
         tabSize: 4
       },
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       lineHeight: _constants.CODE_LINE_HEIGHT,
       overflowX: 'auto',
       whiteSpace: 'pre',
@@ -309,6 +311,7 @@ var getCodeStyles = exports.getCodeStyles = function getCodeStyles() {
     display: 'inline',
     padding: '2px 0.5ch',
     boxDecorationBreak: 'clone',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '0.875em',
     overflow: 'auto',
     overflowWrap: 'break-word',

package/dist/es2019/bidi-warning/ui/styled.js

@@ -25,8 +25,10 @@ const decoration = css({
     background: `var(--ds-background-warning, ${Y75})`,
     color: "var(--ds-text-warning, #7F5F01)",
     content: '"<"attr(data-bidi-character-code)">"',
-    fontSize: '14px',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     fontStyle: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '18px',
     /**
      * Ensures the decoration receives pointer events when it occurs with

package/dist/es2019/code.js

@@ -21,6 +21,7 @@ const styles = css({
   boxDecorationBreak: 'clone',
   color: "var(--ds-text, #172B4D)",
   font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'inherit',
   overflow: 'auto',
   overflowWrap: 'break-word',

package/dist/es2019/internal/theme/get-theme.js

@@ -7,6 +7,7 @@ const T800 = '#067384';
 const Y1100 = '#7A5D1A';
 export const getBaseTheme = () => ({
   fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontFamilyItalic: `SFMono-MediumItalic, ${getTokenValue('font.family.code')}`,
   backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
   textColor: `var(--ds-text, ${colors.N800})`,

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

@@ -183,8 +183,9 @@ 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,
   fontWeight: "var(--ds-font-weight-regular, 400)",
   backgroundColor: `var(${VAR_CODE_BG_COLOR},${theme.backgroundColor})`,
@@ -207,6 +208,7 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
     tabSize: 4
   },
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: CODE_LINE_HEIGHT,
   overflowX: 'auto',
   whiteSpace: 'pre',
@@ -294,6 +296,7 @@ export const getCodeStyles = () => {
     display: 'inline',
     padding: '2px 0.5ch',
     boxDecorationBreak: 'clone',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '0.875em',
     overflow: 'auto',
     overflowWrap: 'break-word',

package/dist/esm/bidi-warning/ui/styled.js

@@ -25,8 +25,10 @@ var decoration = css({
     background: "var(--ds-background-warning, ".concat(Y75, ")"),
     color: "var(--ds-text-warning, #7F5F01)",
     content: '"<"attr(data-bidi-character-code)">"',
-    fontSize: '14px',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     fontStyle: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '18px',
     /**
      * Ensures the decoration receives pointer events when it occurs with

package/dist/esm/code.js

@@ -24,6 +24,7 @@ var styles = css({
   boxDecorationBreak: 'clone',
   color: "var(--ds-text, #172B4D)",
   font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'inherit',
   overflow: 'auto',
   overflowWrap: 'break-word',

package/dist/esm/internal/theme/get-theme.js

@@ -11,6 +11,7 @@ var Y1100 = '#7A5D1A';
 export var getBaseTheme = function getBaseTheme() {
   return {
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontFamilyItalic: "SFMono-MediumItalic, ".concat(getTokenValue('font.family.code')),
     backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
     textColor: "var(--ds-text, ".concat(colors.N800, ")"),

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

@@ -190,9 +190,10 @@ 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
     fontFamily: theme.fontFamily,
     fontWeight: "var(--ds-font-weight-regular, 400)",
     backgroundColor: "var(".concat(VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
@@ -218,6 +219,7 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
         tabSize: 4
       },
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       lineHeight: CODE_LINE_HEIGHT,
       overflowX: 'auto',
       whiteSpace: 'pre',
@@ -304,6 +306,7 @@ export var getCodeStyles = function getCodeStyles() {
     display: 'inline',
     padding: '2px 0.5ch',
     boxDecorationBreak: 'clone',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '0.875em',
     overflow: 'auto',
     overflowWrap: 'break-word',

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.8",
+	"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": "^2.4.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": "^13.4.0",
-		"@atlaskit/visual-regression": "*",
+		"@atlaskit/toggle": "^14.0.0",
+		"@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;`;