@atlaskit/code 17.1.2 → 17.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/code
 
+## 17.2.0
+
+### Minor Changes
+
+- [#153642](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153642)
+  [`dca85557e83b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dca85557e83b9) -
+  Adds a label prop for when code block is scrollable. Fixes the code block scrollablity bug.
+
 ## 17.1.2
 
 ### Patch Changes

package/dist/cjs/code-block.js

@@ -1,6 +1,4 @@
 /* code-block.tsx generated by @compiled/babel-plugin v0.36.1 */
-/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
-/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -13,12 +11,17 @@ require("./code-block.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _bindEventListener = require("bind-event-listener");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _useHighlight = require("./internal/hooks/use-highlight");
 var _styles = require("./internal/theme/styles");
 var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
 var _syntaxHighlighter = _interopRequireDefault(require("./syntax-highlighter"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 var getCodeBlockStyles = {
   root: "_2rkoglpi _1dqoglyw _1wyb1crf _k48pi7a9 _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _ect41odn _1ozdn7od _7xinn7od _t7aun7od _1v15u2gc _ilvcu2gc _m29uu2gc _17wyu2gc _pn28u2gc _gz9fu2gc _1hmyegat _vblregat _vbulegat _wozj1dyw _1agb1dyw _lkm81dyw _tv41hkgb _1hmimyb0 _1ra01n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _j1w0ww7y _13cdh2mm _15ba126e _zvy9f705 _qcxof705 _14y71a66 _j0l11wug _1weckb7n _1na21hna _1xx2grf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _jeky1l04 _1gec1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _1552u2gc _12afu2gc _28ddu2gc _1i8zu2gc _12tu1a66 _zu0j1a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
   showLineNumbers: "_17071olh _1i3h1txw _1huoidpf _1a9lidpf _20bqidpf _1oggidpf _bympidpf _9nnjidpf",
@@ -57,9 +60,31 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
     _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
-    shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
+    shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Scrollable content' : _ref$label;
+  var scrollableRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showContentFocus = _useState2[0],
+    setShowContentFocus = _useState2[1];
   var numLines = (text || '').split('\n').length + (firstLineNumber > 0 ? firstLineNumber : 1) - 1;
   var lineNumberWidth = numLines ? (0, _styles.getLineNumWidth)(numLines) : 0;
+
+  // Schedule a content focus on the target element
+  // WARNING: In theory, `target` may not be available when `rafSchedule` hits in concurrent rendering
+  (0, _react.useEffect)(function () {
+    var schedule = (0, _rafSchd.default)(function () {
+      var target = scrollableRef.current;
+      target && setShowContentFocus(target.scrollWidth > target.clientWidth);
+    });
+    schedule();
+    var unbindWindowEvent = (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: schedule
+    });
+    return unbindWindowEvent;
+  }, [scrollableRef]);
   var _useHighlightLines = (0, _useHighlight.useHighlightLines)({
       highlight: highlight,
       testId: testId
@@ -98,8 +123,11 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     text: text,
+    tabIndex: showContentFocus ? '0' : undefined,
+    "aria-label": showContentFocus ? label : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    scrollRef: scrollableRef,
     className: (0, _runtime.ax)([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, showLineNumbers ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
-CodeBlock.displayName = 'CodeBlock';
 var _default = exports.default = CodeBlock;

package/dist/cjs/syntax-highlighter/lib/highlight.js

@@ -52,9 +52,13 @@ var Highlight = /*#__PURE__*/(0, _react.memo)(function Highlight(_ref) {
   var code = text;
   var generatorClassName = 'prismjs';
   var containerProps = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: rest.scrollRef,
     'data-testid': testId,
     className: rest.className ? "".concat(generatorClassName, " ").concat(rest.className) : generatorClassName
   });
+  if (containerProps.hasOwnProperty('scrollRef')) {
+    delete containerProps['scrollRef'];
+  }
   if (shouldWrapLongLines) {
     codeTagProps.style = {
       whiteSpace: 'pre-wrap',

package/dist/es2019/code-block.js

@@ -4,7 +4,9 @@
 import "./code-block.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getLineNumWidth } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
@@ -38,10 +40,28 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   codeBidiWarnings = true,
   codeBidiWarningLabel,
   codeBidiWarningTooltipEnabled = true,
-  shouldWrapLongLines = false
+  shouldWrapLongLines = false,
+  label = 'Scrollable content'
 }) {
+  const scrollableRef = useRef(null);
+  const [showContentFocus, setShowContentFocus] = useState(false);
   const numLines = (text || '').split('\n').length + (firstLineNumber > 0 ? firstLineNumber : 1) - 1;
   const lineNumberWidth = numLines ? getLineNumWidth(numLines) : 0;
+
+  // Schedule a content focus on the target element
+  // WARNING: In theory, `target` may not be available when `rafSchedule` hits in concurrent rendering
+  useEffect(() => {
+    const schedule = rafSchedule(() => {
+      const target = scrollableRef.current;
+      target && setShowContentFocus(target.scrollWidth > target.clientWidth);
+    });
+    schedule();
+    const unbindWindowEvent = bind(window, {
+      type: 'resize',
+      listener: schedule
+    });
+    return unbindWindowEvent;
+  }, [scrollableRef]);
   const {
     getHighlightStyles,
     highlightedLines
@@ -77,8 +97,11 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     text: text,
+    tabIndex: showContentFocus ? '0' : undefined,
+    "aria-label": showContentFocus ? label : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    scrollRef: scrollableRef,
     className: ax([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, showLineNumbers ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
-CodeBlock.displayName = 'CodeBlock';
 export default CodeBlock;

package/dist/es2019/syntax-highlighter/lib/highlight.js

@@ -34,9 +34,13 @@ const Highlight = /*#__PURE__*/memo(function Highlight({
   const generatorClassName = 'prismjs';
   const containerProps = {
     ...rest,
+    ref: rest.scrollRef,
     'data-testid': testId,
     className: rest.className ? `${generatorClassName} ${rest.className}` : generatorClassName
   };
+  if (containerProps.hasOwnProperty('scrollRef')) {
+    delete containerProps['scrollRef'];
+  }
   if (shouldWrapLongLines) {
     codeTagProps.style = {
       whiteSpace: 'pre-wrap',

package/dist/esm/code-block.js

@@ -1,10 +1,14 @@
 /* code-block.tsx generated by @compiled/babel-plugin v0.36.1 */
-/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
-/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./code-block.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { memo, useCallback, useMemo } from 'react';
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getLineNumWidth } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
@@ -47,9 +51,31 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
     _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
-    shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
+    shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Scrollable content' : _ref$label;
+  var scrollableRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showContentFocus = _useState2[0],
+    setShowContentFocus = _useState2[1];
   var numLines = (text || '').split('\n').length + (firstLineNumber > 0 ? firstLineNumber : 1) - 1;
   var lineNumberWidth = numLines ? getLineNumWidth(numLines) : 0;
+
+  // Schedule a content focus on the target element
+  // WARNING: In theory, `target` may not be available when `rafSchedule` hits in concurrent rendering
+  useEffect(function () {
+    var schedule = rafSchedule(function () {
+      var target = scrollableRef.current;
+      target && setShowContentFocus(target.scrollWidth > target.clientWidth);
+    });
+    schedule();
+    var unbindWindowEvent = bind(window, {
+      type: 'resize',
+      listener: schedule
+    });
+    return unbindWindowEvent;
+  }, [scrollableRef]);
   var _useHighlightLines = useHighlightLines({
       highlight: highlight,
       testId: testId
@@ -88,8 +114,11 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     text: text,
+    tabIndex: showContentFocus ? '0' : undefined,
+    "aria-label": showContentFocus ? label : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    scrollRef: scrollableRef,
     className: ax([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, showLineNumbers ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
-CodeBlock.displayName = 'CodeBlock';
 export default CodeBlock;

package/dist/esm/syntax-highlighter/lib/highlight.js

@@ -46,9 +46,13 @@ var Highlight = /*#__PURE__*/memo(function Highlight(_ref) {
   var code = text;
   var generatorClassName = 'prismjs';
   var containerProps = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: rest.scrollRef,
     'data-testid': testId,
     className: rest.className ? "".concat(generatorClassName, " ").concat(rest.className) : generatorClassName
   });
+  if (containerProps.hasOwnProperty('scrollRef')) {
+    delete containerProps['scrollRef'];
+  }
   if (shouldWrapLongLines) {
     codeTagProps.style = {
       whiteSpace: 'pre-wrap',

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

@@ -70,6 +70,11 @@ export interface CodeBlockProps {
      * @default false
      */
     shouldWrapLongLines?: boolean;
+    /**
+     * Text used to describe that the content of the code block is scrollable.
+     * Set only if the code block is scrollable. Defaults to 'Scrollable content'.
+     */
+    label?: string;
 }
 export type { SupportedLanguages, LanguageAlias, Language } from '../constants';
 export type { CodeBlockTheme, CodeTheme } from './theme/types';

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

@@ -70,6 +70,11 @@ export interface CodeBlockProps {
      * @default false
      */
     shouldWrapLongLines?: boolean;
+    /**
+     * Text used to describe that the content of the code block is scrollable.
+     * Set only if the code block is scrollable. Defaults to 'Scrollable content'.
+     */
+    label?: string;
 }
 export type { SupportedLanguages, LanguageAlias, Language } from '../constants';
 export type { CodeBlockTheme, CodeTheme } from './theme/types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/code",
-	"version": "17.1.2",
+	"version": "17.2.0",
 	"description": "Code highlights short strings of code snippets inline with body text.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,9 @@
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
+		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0",
+		"raf-schd": "^4.0.3",
 		"refractor": "^3.6.0"
 	},
 	"peerDependencies": {