@atlaskit/code 14.4.2 → 14.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/code
 
+## 14.4.3
+
+### Patch Changes
+
+- [`f1765efdca6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f1765efdca6) - [ux] Fix bug that caused misalignment of Code Block content which contain a mixture of spaces and tabs
+
 ## 14.4.2
 
 ### Patch Changes

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

@@ -235,12 +235,14 @@ var getCodeBlockStyles = function getCodeBlockStyles(theme) {
       display: 'flex',
       lineHeight: _constants2.CODE_LINE_HEIGHT,
       overflowX: 'auto',
-      whiteSpace: 'pre'
+      whiteSpace: 'pre',
+      direction: 'ltr'
     }, getBaseCodeStyles(theme)), syntaxKeywordColors(theme)), {}, {
       // this is to account for SSR spacing issue once loaded in browser
       '& .linenumber, .react-syntax-highlighter-line-number': lineNumberStyle(theme),
       '& .linenumber': {
-        display: 'inline-block !important'
+        display: 'inline-block !important',
+        float: 'left'
       },
       // these styles are for line highlighting
       '& [data-ds--code--row]': {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/code",
-	"version": "14.4.2",
+	"version": "14.4.3",
 	"sideEffects": false
 }

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

@@ -205,12 +205,14 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
   lineHeight: CODE_LINE_HEIGHT,
   overflowX: 'auto',
   whiteSpace: 'pre',
+  direction: 'ltr',
   ...getBaseCodeStyles(theme),
   ...syntaxKeywordColors(theme),
   // this is to account for SSR spacing issue once loaded in browser
   '& .linenumber, .react-syntax-highlighter-line-number': lineNumberStyle(theme),
   '& .linenumber': {
-    display: 'inline-block !important'
+    display: 'inline-block !important',
+    float: 'left'
   },
   // these styles are for line highlighting
   '& [data-ds--code--row]': {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/code",
-	"version": "14.4.2",
+	"version": "14.4.3",
 	"sideEffects": false
 }

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

@@ -218,12 +218,14 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
       display: 'flex',
       lineHeight: CODE_LINE_HEIGHT,
       overflowX: 'auto',
-      whiteSpace: 'pre'
+      whiteSpace: 'pre',
+      direction: 'ltr'
     }, getBaseCodeStyles(theme)), syntaxKeywordColors(theme)), {}, {
       // this is to account for SSR spacing issue once loaded in browser
       '& .linenumber, .react-syntax-highlighter-line-number': lineNumberStyle(theme),
       '& .linenumber': {
-        display: 'inline-block !important'
+        display: 'inline-block !important',
+        float: 'left'
       },
       // these styles are for line highlighting
       '& [data-ds--code--row]': {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/code",
-	"version": "14.4.2",
+	"version": "14.4.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/code",
-  "version": "14.4.2",
+  "version": "14.4.3",
   "description": "Code highlights short strings of code snippets inline with body text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/section-message": "^6.3.0",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## 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 using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -23,76 +28,14 @@ export const Code: React_2.MemoExoticComponent<
   React_2.ForwardRefExoticComponent<
     Pick<
       CodeProps,
-      | 'as'
-      | 'name'
-      | 'testId'
-      | 'codeBidiWarnings'
-      | 'codeBidiWarningLabel'
-      | 'codeBidiWarningTooltipEnabled'
-      | 'list'
-      | 'step'
-      | 'color'
-      | 'content'
-      | 'height'
-      | 'width'
-      | 'start'
-      | 'hidden'
-      | 'size'
-      | 'style'
-      | 'default'
-      | 'wrap'
-      | 'open'
-      | 'multiple'
-      | 'disabled'
-      | 'children'
-      | 'cite'
-      | 'data'
-      | 'form'
-      | 'label'
-      | 'span'
-      | 'summary'
-      | 'title'
-      | 'pattern'
-      | 'className'
-      | 'key'
-      | 'defaultChecked'
-      | 'defaultValue'
-      | 'suppressContentEditableWarning'
-      | 'suppressHydrationWarning'
-      | 'accessKey'
-      | 'contentEditable'
-      | 'contextMenu'
-      | 'dir'
-      | 'draggable'
-      | 'id'
-      | 'lang'
-      | 'placeholder'
-      | 'slot'
-      | 'spellCheck'
-      | 'tabIndex'
-      | 'inputMode'
-      | 'is'
-      | 'radioGroup'
-      | 'role'
       | 'about'
-      | 'datatype'
-      | 'inlist'
-      | 'prefix'
-      | 'property'
-      | 'resource'
-      | 'typeof'
-      | 'vocab'
-      | 'autoCapitalize'
-      | 'autoCorrect'
-      | 'autoSave'
-      | 'itemProp'
-      | 'itemScope'
-      | 'itemType'
-      | 'itemID'
-      | 'itemRef'
-      | 'results'
-      | 'security'
-      | 'unselectable'
+      | 'accept'
+      | 'acceptCharset'
+      | 'accessKey'
+      | 'action'
+      | 'allowFullScreen'
+      | 'allowTransparency'
+      | 'alt'
       | 'aria-activedescendant'
       | 'aria-atomic'
       | 'aria-autocomplete'
@@ -141,95 +84,132 @@ export const Code: React_2.MemoExoticComponent<
       | 'aria-valuemin'
       | 'aria-valuenow'
       | 'aria-valuetext'
+      | 'as'
+      | 'async'
+      | 'autoCapitalize'
+      | 'autoComplete'
+      | 'autoCorrect'
+      | 'autoFocus'
+      | 'autoPlay'
+      | 'autoSave'
+      | 'capture'
+      | 'cellPadding'
+      | 'cellSpacing'
+      | 'challenge'
+      | 'charSet'
+      | 'checked'
+      | 'children'
+      | 'cite'
+      | 'classID'
+      | 'className'
+      | 'codeBidiWarningLabel'
+      | 'codeBidiWarningTooltipEnabled'
+      | 'codeBidiWarnings'
+      | 'colSpan'
+      | 'color'
+      | 'cols'
+      | 'content'
+      | 'contentEditable'
+      | 'contextMenu'
+      | 'controls'
+      | 'coords'
+      | 'crossOrigin'
       | 'dangerouslySetInnerHTML'
-      | 'onCopy'
-      | 'onCopyCapture'
-      | 'onCut'
-      | 'onCutCapture'
-      | 'onPaste'
-      | 'onPasteCapture'
-      | 'onCompositionEnd'
-      | 'onCompositionEndCapture'
-      | 'onCompositionStart'
-      | 'onCompositionStartCapture'
-      | 'onCompositionUpdate'
-      | 'onCompositionUpdateCapture'
-      | 'onFocus'
-      | 'onFocusCapture'
-      | 'onBlur'
-      | 'onBlurCapture'
-      | 'onChange'
-      | 'onChangeCapture'
-      | 'onBeforeInput'
-      | 'onBeforeInputCapture'
-      | 'onInput'
-      | 'onInputCapture'
-      | 'onReset'
-      | 'onResetCapture'
-      | 'onSubmit'
-      | 'onSubmitCapture'
-      | 'onInvalid'
-      | 'onInvalidCapture'
-      | 'onLoad'
-      | 'onLoadCapture'
-      | 'onError'
-      | 'onErrorCapture'
-      | 'onKeyDown'
-      | 'onKeyDownCapture'
-      | 'onKeyPress'
-      | 'onKeyPressCapture'
-      | 'onKeyUp'
-      | 'onKeyUpCapture'
+      | 'data'
+      | 'datatype'
+      | 'dateTime'
+      | 'default'
+      | 'defaultChecked'
+      | 'defaultValue'
+      | 'defer'
+      | 'dir'
+      | 'disabled'
+      | 'download'
+      | 'draggable'
+      | 'encType'
+      | 'form'
+      | 'formAction'
+      | 'formEncType'
+      | 'formMethod'
+      | 'formNoValidate'
+      | 'formTarget'
+      | 'frameBorder'
+      | 'headers'
+      | 'height'
+      | 'hidden'
+      | 'high'
+      | 'href'
+      | 'hrefLang'
+      | 'htmlFor'
+      | 'httpEquiv'
+      | 'id'
+      | 'inlist'
+      | 'inputMode'
+      | 'integrity'
+      | 'is'
+      | 'itemID'
+      | 'itemProp'
+      | 'itemRef'
+      | 'itemScope'
+      | 'itemType'
+      | 'key'
+      | 'keyParams'
+      | 'keyType'
+      | 'kind'
+      | 'label'
+      | 'lang'
+      | 'list'
+      | 'loop'
+      | 'low'
+      | 'manifest'
+      | 'marginHeight'
+      | 'marginWidth'
+      | 'max'
+      | 'maxLength'
+      | 'media'
+      | 'mediaGroup'
+      | 'method'
+      | 'min'
+      | 'minLength'
+      | 'multiple'
+      | 'muted'
+      | 'name'
+      | 'noValidate'
+      | 'nonce'
       | 'onAbort'
       | 'onAbortCapture'
+      | 'onAnimationEnd'
+      | 'onAnimationEndCapture'
+      | 'onAnimationIteration'
+      | 'onAnimationIterationCapture'
+      | 'onAnimationStart'
+      | 'onAnimationStartCapture'
+      | 'onAuxClick'
+      | 'onAuxClickCapture'
+      | 'onBeforeInput'
+      | 'onBeforeInputCapture'
+      | 'onBlur'
+      | 'onBlurCapture'
       | 'onCanPlay'
       | 'onCanPlayCapture'
       | 'onCanPlayThrough'
       | 'onCanPlayThroughCapture'
-      | 'onDurationChange'
-      | 'onDurationChangeCapture'
-      | 'onEmptied'
-      | 'onEmptiedCapture'
-      | 'onEncrypted'
-      | 'onEncryptedCapture'
-      | 'onEnded'
-      | 'onEndedCapture'
-      | 'onLoadedData'
-      | 'onLoadedDataCapture'
-      | 'onLoadedMetadata'
-      | 'onLoadedMetadataCapture'
-      | 'onLoadStart'
-      | 'onLoadStartCapture'
-      | 'onPause'
-      | 'onPauseCapture'
-      | 'onPlay'
-      | 'onPlayCapture'
-      | 'onPlaying'
-      | 'onPlayingCapture'
-      | 'onProgress'
-      | 'onProgressCapture'
-      | 'onRateChange'
-      | 'onRateChangeCapture'
-      | 'onSeeked'
-      | 'onSeekedCapture'
-      | 'onSeeking'
-      | 'onSeekingCapture'
-      | 'onStalled'
-      | 'onStalledCapture'
-      | 'onSuspend'
-      | 'onSuspendCapture'
-      | 'onTimeUpdate'
-      | 'onTimeUpdateCapture'
-      | 'onVolumeChange'
-      | 'onVolumeChangeCapture'
-      | 'onWaiting'
-      | 'onWaitingCapture'
-      | 'onAuxClick'
-      | 'onAuxClickCapture'
+      | 'onChange'
+      | 'onChangeCapture'
       | 'onClick'
       | 'onClickCapture'
+      | 'onCompositionEnd'
+      | 'onCompositionEndCapture'
+      | 'onCompositionStart'
+      | 'onCompositionStartCapture'
+      | 'onCompositionUpdate'
+      | 'onCompositionUpdateCapture'
       | 'onContextMenu'
       | 'onContextMenuCapture'
+      | 'onCopy'
+      | 'onCopyCapture'
+      | 'onCut'
+      | 'onCutCapture'
       | 'onDoubleClick'
       | 'onDoubleClickCapture'
       | 'onDrag'
@@ -248,6 +228,40 @@ export const Code: React_2.MemoExoticComponent<
       | 'onDragStartCapture'
       | 'onDrop'
       | 'onDropCapture'
+      | 'onDurationChange'
+      | 'onDurationChangeCapture'
+      | 'onEmptied'
+      | 'onEmptiedCapture'
+      | 'onEncrypted'
+      | 'onEncryptedCapture'
+      | 'onEnded'
+      | 'onEndedCapture'
+      | 'onError'
+      | 'onErrorCapture'
+      | 'onFocus'
+      | 'onFocusCapture'
+      | 'onGotPointerCapture'
+      | 'onGotPointerCaptureCapture'
+      | 'onInput'
+      | 'onInputCapture'
+      | 'onInvalid'
+      | 'onInvalidCapture'
+      | 'onKeyDown'
+      | 'onKeyDownCapture'
+      | 'onKeyPress'
+      | 'onKeyPressCapture'
+      | 'onKeyUp'
+      | 'onKeyUpCapture'
+      | 'onLoad'
+      | 'onLoadCapture'
+      | 'onLoadStart'
+      | 'onLoadStartCapture'
+      | 'onLoadedData'
+      | 'onLoadedDataCapture'
+      | 'onLoadedMetadata'
+      | 'onLoadedMetadataCapture'
+      | 'onLostPointerCapture'
+      | 'onLostPointerCaptureCapture'
       | 'onMouseDown'
       | 'onMouseDownCapture'
       | 'onMouseEnter'
@@ -260,132 +274,123 @@ export const Code: React_2.MemoExoticComponent<
       | 'onMouseOverCapture'
       | 'onMouseUp'
       | 'onMouseUpCapture'
-      | 'onSelect'
-      | 'onSelectCapture'
-      | 'onTouchCancel'
-      | 'onTouchCancelCapture'
-      | 'onTouchEnd'
-      | 'onTouchEndCapture'
-      | 'onTouchMove'
-      | 'onTouchMoveCapture'
-      | 'onTouchStart'
-      | 'onTouchStartCapture'
-      | 'onPointerDown'
-      | 'onPointerDownCapture'
-      | 'onPointerMove'
-      | 'onPointerMoveCapture'
-      | 'onPointerUp'
-      | 'onPointerUpCapture'
+      | 'onPaste'
+      | 'onPasteCapture'
+      | 'onPause'
+      | 'onPauseCapture'
+      | 'onPlay'
+      | 'onPlayCapture'
+      | 'onPlaying'
+      | 'onPlayingCapture'
       | 'onPointerCancel'
       | 'onPointerCancelCapture'
+      | 'onPointerDown'
+      | 'onPointerDownCapture'
       | 'onPointerEnter'
       | 'onPointerEnterCapture'
       | 'onPointerLeave'
       | 'onPointerLeaveCapture'
-      | 'onPointerOver'
-      | 'onPointerOverCapture'
+      | 'onPointerMove'
+      | 'onPointerMoveCapture'
       | 'onPointerOut'
       | 'onPointerOutCapture'
-      | 'onGotPointerCapture'
-      | 'onGotPointerCaptureCapture'
-      | 'onLostPointerCapture'
-      | 'onLostPointerCaptureCapture'
+      | 'onPointerOver'
+      | 'onPointerOverCapture'
+      | 'onPointerUp'
+      | 'onPointerUpCapture'
+      | 'onProgress'
+      | 'onProgressCapture'
+      | 'onRateChange'
+      | 'onRateChangeCapture'
+      | 'onReset'
+      | 'onResetCapture'
       | 'onScroll'
       | 'onScrollCapture'
-      | 'onWheel'
-      | 'onWheelCapture'
-      | 'onAnimationStart'
-      | 'onAnimationStartCapture'
-      | 'onAnimationEnd'
-      | 'onAnimationEndCapture'
-      | 'onAnimationIteration'
-      | 'onAnimationIterationCapture'
+      | 'onSeeked'
+      | 'onSeekedCapture'
+      | 'onSeeking'
+      | 'onSeekingCapture'
+      | 'onSelect'
+      | 'onSelectCapture'
+      | 'onStalled'
+      | 'onStalledCapture'
+      | 'onSubmit'
+      | 'onSubmitCapture'
+      | 'onSuspend'
+      | 'onSuspendCapture'
+      | 'onTimeUpdate'
+      | 'onTimeUpdateCapture'
+      | 'onTouchCancel'
+      | 'onTouchCancelCapture'
+      | 'onTouchEnd'
+      | 'onTouchEndCapture'
+      | 'onTouchMove'
+      | 'onTouchMoveCapture'
+      | 'onTouchStart'
+      | 'onTouchStartCapture'
       | 'onTransitionEnd'
       | 'onTransitionEndCapture'
-      | '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'
+      | 'onVolumeChange'
+      | 'onVolumeChangeCapture'
+      | 'onWaiting'
+      | 'onWaitingCapture'
+      | 'onWheel'
+      | 'onWheelCapture'
+      | 'open'
       | 'optimum'
+      | 'pattern'
+      | 'placeholder'
       | 'playsInline'
       | 'poster'
+      | 'prefix'
       | 'preload'
+      | 'property'
+      | 'radioGroup'
       | 'readOnly'
       | 'rel'
       | 'required'
+      | 'resource'
+      | 'results'
       | 'reversed'
-      | 'rows'
+      | 'role'
       | 'rowSpan'
+      | 'rows'
       | 'sandbox'
       | 'scope'
       | 'scoped'
       | 'scrolling'
       | 'seamless'
+      | 'security'
       | 'selected'
       | 'shape'
+      | 'size'
       | 'sizes'
+      | 'slot'
+      | 'span'
+      | 'spellCheck'
       | 'src'
       | 'srcDoc'
       | 'srcLang'
       | 'srcSet'
+      | 'start'
+      | 'step'
+      | 'style'
+      | 'summary'
+      | 'suppressContentEditableWarning'
+      | 'suppressHydrationWarning'
+      | 'tabIndex'
       | 'target'
+      | 'testId'
+      | 'title'
       | 'type'
+      | 'typeof'
+      | 'unselectable'
       | 'useMap'
       | 'value'
+      | 'vocab'
+      | 'width'
       | 'wmode'
+      | 'wrap'
     > &
       React_2.RefAttributes<HTMLElement>
   >
@@ -837,7 +842,9 @@ export const SUPPORTED_LANGUAGES: readonly [
 ];
 
 // @public (undocumented)
-export type SupportedLanguages = LanguageName | LanguageAlias;
+export type SupportedLanguages = LanguageAlias | LanguageName;
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->