@atlaskit/code 14.3.9 → 14.4.0

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

@@ -0,0 +1,27 @@
+import type { CSSObject } from '@emotion/react';
+import type { Theme } from '@atlaskit/theme/types';
+import type { CodeBlockTheme, CodeTheme } 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: string;
+    backgroundColor: string;
+    color: string | undefined;
+    borderStyle: string;
+    borderRadius: string;
+};
+/**
+ * Takes an implemented CodeBlock theme, and returns styles required for
+ * react-syntax-highlighter.
+ *
+ * @param theme
+ */
+export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, hasLineNumbers?: boolean | undefined) => CSSObject;
+export declare const getCodeStyles: (globalTheme: Theme | {
+    theme: Theme;
+}) => CSSObject;
+export declare const getCodeBlockTheme: (globalTheme: Theme, maxLines?: number | undefined) => CodeBlockTheme;

package/dist/types-ts4.0/internal/theme/types.d.ts

@@ -0,0 +1,57 @@
+export interface CodeTheme {
+    backgroundColor?: string;
+    textColor?: string;
+    fontFamilyItalic?: string;
+    fontFamily?: string;
+    lineNumberColor?: string;
+    lineNumberBgColor?: string;
+}
+export interface CodeBlockTheme extends CodeTheme {
+    substringColor?: string;
+    keywordColor?: string;
+    attributeColor?: string;
+    selectorTagColor?: string;
+    docTagColor?: string;
+    nameColor?: string;
+    builtInColor?: string;
+    literalColor?: string;
+    bulletColor?: string;
+    codeColor?: string;
+    additionColor?: string;
+    regexpColor?: string;
+    symbolColor?: string;
+    variableColor?: string;
+    templateVariableColor?: string;
+    linkColor?: string;
+    selectorAttributeColor?: string;
+    selectorPseudoColor?: string;
+    typeColor?: string;
+    stringColor?: string;
+    selectorIdColor?: string;
+    selectorClassColor?: string;
+    quoteColor?: string;
+    templateTagColor?: string;
+    deletionColor?: string;
+    titleColor?: string;
+    sectionColor?: string;
+    commentColor?: string;
+    metaKeywordColor?: string;
+    metaColor?: string;
+    functionColor?: string;
+    numberColor?: string;
+    prologColor?: string;
+    cdataColor?: string;
+    punctuationColor?: string;
+    propertyColor?: string;
+    constantColor?: string;
+    deletedColor?: string;
+    booleanColor?: string;
+    charColor?: string;
+    insertedColor?: string;
+    operatorColor?: string;
+    atruleColor?: string;
+    importantColor?: string;
+    highlightedLineBgColor?: string;
+    highlightedLineBorderColor?: string;
+    lineNumberWidth?: string | number;
+}

package/dist/types-ts4.0/internal/types.d.ts

@@ -0,0 +1,57 @@
+import type { SupportedLanguages } from '../constants';
+export interface CodeBlockProps {
+    /**
+     * The code to be formatted
+     */
+    text: string;
+    /**
+     * A unique string that appears as a data attribute `data-testid`
+     * in the rendered code. Serves as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Whether to showLineNumbers or not, defaults to true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * The language in which the code is written
+     */
+    language?: SupportedLanguages;
+    /**
+     * Lines to highlight comma delimited.
+     * Example uses:
+     * - To highlight one line `highlight="3"`
+     * - To highlight a group of lines `highlight="1-5"`
+     * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
+     */
+    highlight?: string;
+    /**
+     * Screen reader text for the start of a highlighted line
+     */
+    highlightedStartText?: string;
+    /**
+     * Screen reader text for the end of a highlighted line
+     */
+    highlightedEndText?: string;
+    /**
+     * When false, disables decorating code with bidi warnings
+     *
+     * defaults to true
+     */
+    codeBidiWarnings?: boolean;
+    /**
+     * Labels for the previous and next buttons used in pagination.
+     * Defaults to `Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.`.
+     */
+    codeBidiWarningLabel?: string;
+    /**
+     * Defaults to enabled (true)
+     *
+     * Intended to be disabled when used in a mobile view, such as in the editor
+     * via mobile bridge, where the tooltip could end up being cut off of otherwise
+     * not work as expected.
+     */
+    codeBidiWarningTooltipEnabled?: boolean;
+}
+export type { SupportedLanguages, LanguageAlias, Language } from '../constants';
+export type { CodeBlockTheme, CodeTheme } from './theme/types';

package/dist/types-ts4.0/internal/utils/get-normalized-language.d.ts

@@ -0,0 +1,2 @@
+import { SupportedLanguages } from '../types';
+export declare const normalizeLanguage: import("memoize-one").MemoizedFn<(language?: SupportedLanguages | undefined) => string>;

package/dist/types-ts4.0/react-syntax-highlighter-bidi-warning-renderer.d.ts

@@ -0,0 +1,9 @@
+declare type CodeBidiWarningConfig = {
+    codeBidiWarningLabel?: string;
+    codeBidiWarningTooltipEnabled: boolean;
+};
+export declare function createBidiWarningRenderer(codeBidiWarningConfig: CodeBidiWarningConfig): ({ rows, stylesheet, useInlineStyles, }: any) => any;
+export declare function createStyleObject(classNames: any, elementStyle: {} | undefined, stylesheet: any): any;
+export declare function createClassNameString(classNames: any): any;
+export declare function createChildren(stylesheet: any, useInlineStyles: any, codeBidiWarningConfig: any): (children: any) => any;
+export {};

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLProps, ReactNode } from 'react';
+export type { SupportedLanguages, Language, LanguageAlias, CodeBlockProps, } from './internal/types';
+export interface CodeProps extends HTMLProps<HTMLElement> {
+    /**
+     * A unique string that appears as a data attribute `data-testid`
+     * in the rendered code. Serves as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Content to be rendered in the inline code block
+     */
+    children?: ReactNode;
+    /**
+     * When false, disables decorating code with bidi warnings
+     *
+     * defaults to true
+     */
+    codeBidiWarnings?: boolean;
+    /**
+     * Labels for the previous and next buttons used in pagination.
+     * Defaults to `Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.`.
+     */
+    codeBidiWarningLabel?: string;
+    /**
+     * Defaults to enabled (true)
+     *
+     * Intended to be disabled when used in a mobile view, such as in the editor
+     * via mobile bridge, where the tooltip could end up being cut off of otherwise
+     * not work as expected.
+     */
+    codeBidiWarningTooltipEnabled?: boolean;
+}

package/inline/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/inline.js",
   "module:es2019": "../dist/es2019/entry-points/inline.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/inline.d.ts"
+  "types": "../dist/types/entry-points/inline.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/inline.d.ts"
+      ]
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/code",
-  "version": "14.3.9",
+  "version": "14.4.0",
   "description": "Code highlights short strings of code snippets inline with body text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -27,11 +34,11 @@
   },
   "dependencies": {
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0",
     "react-syntax-highlighter": "^15.4.3"
   },
@@ -42,18 +49,19 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
     "@types/react-syntax-highlighter": "^13.5.0",
     "color-contrast-checker": "^1.5.0",
     "jscodeshift": "^0.13.0",
     "prismjs": "^1.25.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "keywords": [
     "atlaskit",

package/report.api.md

@@ -1,145 +1,75 @@
-## API Report File for "@atlaskit/code"
+## API Report File for "@atlaskit/code".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
-import type { CSSObject } from '@emotion/core';
+import type { CSSObject } from '@emotion/react';
 import type { HTMLProps } from 'react';
 import { NamedExoticComponent } from 'react';
 import { default as React_2 } from 'react';
 import type { ReactNode } from 'react';
 import type { Theme } from '@atlaskit/theme/types';
 
+/**
+ * __Code__
+ *
+ * Code highlights short strings of code snippets inline with body text.
+ *
+ * - [Examples](https://atlassian.design/components/code/examples)
+ * - [Code](https://atlassian.design/components/code/code)
+ * - [Usage](https://atlassian.design/components/code/usage)
+ */
 export declare const Code: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
   Pick<
     CodeProps,
     | 'as'
-    | 'css'
     | 'name'
+    | 'testId'
+    | 'codeBidiWarnings'
+    | 'codeBidiWarningLabel'
+    | 'codeBidiWarningTooltipEnabled'
+    | 'list'
+    | 'step'
     | 'color'
     | 'content'
     | 'height'
     | 'width'
     | 'start'
-    | 'children'
-    | 'testId'
+    | 'hidden'
+    | 'size'
+    | 'style'
     | 'default'
+    | 'wrap'
+    | 'open'
+    | 'multiple'
+    | 'disabled'
+    | 'children'
     | 'cite'
     | 'data'
     | 'form'
     | 'label'
     | 'span'
-    | 'style'
     | 'summary'
     | 'title'
     | 'pattern'
-    | 'accept'
-    | 'acceptCharset'
-    | 'action'
-    | 'allowFullScreen'
-    | 'allowTransparency'
-    | 'alt'
-    | 'async'
-    | 'autoComplete'
-    | 'autoFocus'
-    | 'autoPlay'
-    | 'capture'
-    | 'cellPadding'
-    | 'cellSpacing'
-    | 'charSet'
-    | 'challenge'
-    | 'checked'
-    | 'classID'
-    | 'cols'
-    | 'colSpan'
-    | 'controls'
-    | 'coords'
-    | 'crossOrigin'
-    | 'dateTime'
-    | 'defer'
-    | 'disabled'
-    | 'download'
-    | 'encType'
-    | 'formAction'
-    | 'formEncType'
-    | 'formMethod'
-    | 'formNoValidate'
-    | 'formTarget'
-    | 'frameBorder'
-    | 'headers'
-    | 'high'
-    | 'href'
-    | 'hrefLang'
-    | 'htmlFor'
-    | 'httpEquiv'
-    | 'integrity'
-    | 'keyParams'
-    | 'keyType'
-    | 'kind'
-    | 'list'
-    | 'loop'
-    | 'low'
-    | 'manifest'
-    | 'marginHeight'
-    | 'marginWidth'
-    | 'max'
-    | 'maxLength'
-    | 'media'
-    | 'mediaGroup'
-    | 'method'
-    | 'min'
-    | 'minLength'
-    | 'multiple'
-    | 'muted'
-    | 'nonce'
-    | 'noValidate'
-    | 'open'
-    | 'optimum'
-    | 'placeholder'
-    | 'playsInline'
-    | 'poster'
-    | 'preload'
-    | 'readOnly'
-    | 'rel'
-    | 'required'
-    | 'reversed'
-    | 'rows'
-    | 'rowSpan'
-    | 'sandbox'
-    | 'scope'
-    | 'scoped'
-    | 'scrolling'
-    | 'seamless'
-    | 'selected'
-    | 'shape'
-    | 'size'
-    | 'sizes'
-    | 'src'
-    | 'srcDoc'
-    | 'srcLang'
-    | 'srcSet'
-    | 'step'
-    | 'target'
-    | 'type'
-    | 'useMap'
-    | 'value'
-    | 'wmode'
-    | 'wrap'
+    | 'className'
+    | 'key'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
     | 'suppressHydrationWarning'
     | 'accessKey'
-    | 'className'
     | 'contentEditable'
     | 'contextMenu'
     | 'dir'
     | 'draggable'
-    | 'hidden'
     | 'id'
     | 'lang'
+    | 'placeholder'
     | 'slot'
     | 'spellCheck'
     | 'tabIndex'
@@ -375,14 +305,103 @@ export declare const Code: React_2.MemoExoticComponent<React_2.ForwardRefExoticC
     | 'onAnimationIterationCapture'
     | 'onTransitionEnd'
     | 'onTransitionEndCapture'
-    | 'key'
-    | 'codeBidiWarnings'
-    | 'codeBidiWarningLabel'
-    | 'codeBidiWarningTooltipEnabled'
+    | 'accept'
+    | 'acceptCharset'
+    | 'action'
+    | 'allowFullScreen'
+    | 'allowTransparency'
+    | 'alt'
+    | 'async'
+    | 'autoComplete'
+    | 'autoFocus'
+    | 'autoPlay'
+    | 'capture'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'charSet'
+    | 'challenge'
+    | 'checked'
+    | 'classID'
+    | 'cols'
+    | 'colSpan'
+    | 'controls'
+    | 'coords'
+    | 'crossOrigin'
+    | 'dateTime'
+    | 'defer'
+    | 'download'
+    | 'encType'
+    | 'formAction'
+    | 'formEncType'
+    | 'formMethod'
+    | 'formNoValidate'
+    | 'formTarget'
+    | 'frameBorder'
+    | 'headers'
+    | 'high'
+    | 'href'
+    | 'hrefLang'
+    | 'htmlFor'
+    | 'httpEquiv'
+    | 'integrity'
+    | 'keyParams'
+    | 'keyType'
+    | 'kind'
+    | 'loop'
+    | 'low'
+    | 'manifest'
+    | 'marginHeight'
+    | 'marginWidth'
+    | 'max'
+    | 'maxLength'
+    | 'media'
+    | 'mediaGroup'
+    | 'method'
+    | 'min'
+    | 'minLength'
+    | 'muted'
+    | 'nonce'
+    | 'noValidate'
+    | 'optimum'
+    | 'playsInline'
+    | 'poster'
+    | 'preload'
+    | 'readOnly'
+    | 'rel'
+    | 'required'
+    | 'reversed'
+    | 'rows'
+    | 'rowSpan'
+    | 'sandbox'
+    | 'scope'
+    | 'scoped'
+    | 'scrolling'
+    | 'seamless'
+    | 'selected'
+    | 'shape'
+    | 'sizes'
+    | 'src'
+    | 'srcDoc'
+    | 'srcLang'
+    | 'srcSet'
+    | 'target'
+    | 'type'
+    | 'useMap'
+    | 'value'
+    | 'wmode'
   > &
     React_2.RefAttributes<HTMLElement>
 >>;
 
+/**
+ * __Code block__
+ *
+ * A code block highlights an entire block of code and keeps the formatting.
+ *
+ * - [Examples](https://atlassian.design/components/code/code-block/examples)
+ * - [Code](https://atlassian.design/components/code/code-block/code)
+ * - [Usage](https://atlassian.design/components/code/code-block/usage)
+ */
 export declare const CodeBlock: NamedExoticComponent<CodeBlockProps>;
 
 export declare interface CodeBlockProps {
@@ -404,13 +423,12 @@ export declare interface CodeBlockProps {
    */
   language?: SupportedLanguages;
   /**
-     * Lines to highlight comma delimited.
-     * Example uses:
-
-     * - To highlight one line `highlight="3"`
-     * - To highlight a group of lines `highlight="1-5"`
-     * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
-     */
+   * Lines to highlight comma delimited.
+   * Example uses:
+   * - To highlight one line `highlight="3"`
+   * - To highlight a group of lines `highlight="1-5"`
+   * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
+   */
   highlight?: string;
   /**
    * Screen reader text for the start of a highlighted line

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/types.d.ts"
+  "types": "../dist/types/entry-points/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/types.d.ts"
+      ]
+    }
+  }
 }