@atlaskit/code 14.1.2 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/code
 
+## 14.2.0
+
+### Minor Changes
+
+- [`c80c71b537d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c80c71b537d) - [ux] ED-13860 add bidi warning decorations to code components
+
+## 14.1.5
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
+## 14.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.1.3
+
+### Patch Changes
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
 ## 14.1.2
 
 ### Patch Changes

package/bidi-warning/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/code/bidi-warning",
+  "main": "../dist/cjs/bidi-warning/index.js",
+  "module": "../dist/esm/bidi-warning/index.js",
+  "module:es2019": "../dist/es2019/bidi-warning/index.js",
+  "types": "../dist/types/bidi-warning/index.d.ts"
+}

package/bidi-warning-decorator/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/code/bidi-warning-decorator",
+  "main": "../dist/cjs/bidi-warning/bidi-warning-decorator.js",
+  "module": "../dist/esm/bidi-warning/bidi-warning-decorator.js",
+  "module:es2019": "../dist/es2019/bidi-warning/bidi-warning-decorator.js",
+  "types": "../dist/types/bidi-warning/bidi-warning-decorator.d.ts"
+}

package/dist/cjs/bidi-warning/bidi-warning-decorator.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = codeBidiWarningDecorator;
+exports.bidiCharacterRegex = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
+exports.bidiCharacterRegex = bidiCharacterRegex;
+
+function codeBidiWarningDecorator(originalText, decorate) {
+  var matches = (0, _toConsumableArray2.default)(originalText.matchAll(bidiCharacterRegex));
+
+  if (matches.length === 0) {
+    // No matches encountered, so we return the originalText value
+    return originalText;
+  }
+
+  var children = [];
+  var mappedTo = 0;
+
+  var _iterator = _createForOfIteratorHelper(matches),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var match = _step.value;
+
+      if (mappedTo !== match.index) {
+        // There were unmatched characters prior to this match which haven't been
+        // mapped to the children.
+        // Add them as plain text.
+        children.push(originalText.substring(mappedTo, match.index));
+      }
+
+      children.push(decorate({
+        bidiCharacter: match[0],
+        index: match.index
+      })); // While index is guaranteed to be present, it needs to be asserted due
+      // to a limitation of typescripts regex handling
+      //
+      // https://github.com/microsoft/TypeScript/issues/36788
+      // Decorate bidi character
+
+      mappedTo = match.index + match[0].length;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (mappedTo !== originalText.length) {
+    // There is text following the final match, which needs to be mapped
+    // to the children.
+    // Added as plain text.
+    children.push(originalText.substring(mappedTo, originalText.length));
+  } // return the mapped children with decorated bidi characters
+
+
+  return children;
+}

package/dist/cjs/bidi-warning/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ui.default;
+  }
+});
+
+var _ui = _interopRequireDefault(require("./ui"));

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BidiWarning;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _styled = require("./styled");
+
+function BidiWarning(_ref) {
+  var testId = _ref.testId,
+      bidiCharacter = _ref.bidiCharacter,
+      skipChildren = _ref.skipChildren,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.' : _ref$label;
+  return (
+    /*#__PURE__*/
+    // Following patches, this should be updated to use the render props signature which will provide aria attributes.
+    // Note: this should be tested, as initial testing did not see attributes work with current tooltip implementation.
+    _react.default.createElement(_tooltip.default, {
+      content: label,
+      tag: CustomizedTagWithRef
+    }, /*#__PURE__*/_react.default.createElement(_styled.Decorator, {
+      testId: testId,
+      bidiCharacter: bidiCharacter
+    }, skipChildren ? null : bidiCharacter))
+  );
+}
+
+var CustomizedTagWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, ["children"]);
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+    ref: ref
+  }), children);
+});

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Decorator = Decorator;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var decoration = (0, _core.css)({
+  // Required as otherwise the following bidi characters cause the span
+  // to not receive hover events.
+  //
+  // U+2066 LEFT-TO-RIGHT ISOLATE (when using pseudo element before)
+  // U+202E RIGHT-TO-LEFT OVERRIDE' (when using pseudo element after)
+  position: 'relative',
+  ':before': {
+    /* layout */
+    display: 'inline-flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '0 4px',
+    fontSize: '14px',
+    lineHeight: '18px',
+    background: _colors.Y75,
+
+    /**
+     * Ensures the decoration receives pointer events when it occurs with
+     * an ancestor that disables them.
+     */
+    pointerEvents: 'auto',
+
+    /* contents */
+    content: '"<"attr(data-bidi-character-code)">"',
+    // This color is Y800 which is not yet rolled out
+    // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
+    color: '#7F5F01',
+    fontStyle: 'normal'
+  },
+  ':hover:before': {
+    color: '#533F04'
+  }
+});
+
+function Decorator(_ref) {
+  var bidiCharacter = _ref.bidiCharacter,
+      children = _ref.children,
+      testId = _ref.testId;
+  var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
+  return (0, _core.jsx)("span", {
+    "aria-label": bidiCharacterCode
+  }, (0, _core.jsx)("span", {
+    css: decoration,
+    "data-testid": testId,
+    "data-bidi-character-code": bidiCharacterCode // This is set to true so that the content is not read out by
+    // screen readers as the content includes angle brackets for
+    // visual decoration purposes.
+    // We use a span with the aria-label set to the bidi character  code
+    // above this span for screen readers.
+    ,
+    "aria-hidden": "true"
+  }, children));
+}
+
+function getBidiCharacterCode(bidiCharacter) {
+  var _bidiCharacter$codePo;
+
+  var bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
+  return "U+".concat(bidiCharacterCode);
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/code-block.js

@@ -19,6 +19,8 @@ var _styles = require("./internal/theme/styles");
 
 var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
 
+var _reactSyntaxHighlighterBidiWarningRenderer = require("./react-syntax-highlighter-bidi-warning-renderer");
+
 /** @jsx jsx */
 var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
   var _ref$showLineNumbers = _ref.showLineNumbers,
@@ -32,7 +34,10 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
       _ref$highlightedEndTe = _ref.highlightedEndText,
       highlightedEndText = _ref$highlightedEndTe === void 0 ? 'Highlight end' : _ref$highlightedEndTe,
       testId = _ref.testId,
-      text = _ref.text;
+      text = _ref.text,
+      _ref$codeBidiWarnings = _ref.codeBidiWarnings,
+      codeBidiWarnings = _ref$codeBidiWarnings === void 0 ? true : _ref$codeBidiWarnings,
+      codeBidiWarningLabel = _ref.codeBidiWarningLabel;
   var numLines = (text || '').split('\n').length;
   var globalTheme = (0, _components.useGlobalTheme)();
   var theme = (0, _react.useMemo)(function () {
@@ -60,6 +65,7 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
   }, [providedLanguage]); // https://product-fabric.atlassian.net/browse/DST-2472
 
   var languageToUse = text ? language : 'text';
+  var renderer = codeBidiWarnings ? (0, _reactSyntaxHighlighterBidiWarningRenderer.createBidiWarningRenderer)(codeBidiWarningLabel) : undefined;
   return (0, _core.jsx)(_reactSyntaxHighlighter.PrismAsync, {
     "data-testid": testId,
     "data-code-lang": language,
@@ -71,7 +77,8 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     ,
     wrapLines: highlight.length > 0 || !!testId,
     lineProps: getLineProps,
-    useInlineStyles: false
+    useInlineStyles: false,
+    renderer: renderer
   }, text);
 });
 CodeBlock.displayName = 'CodeBlock';

package/dist/cjs/code.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,14 +19,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
 var _components = require("@atlaskit/theme/components");
 
+var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
+
+var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
+
 var _styles = require("./internal/theme/styles");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /** @jsx jsx */
 var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Code(_ref, ref) {
   var testId = _ref.testId,
@@ -33,12 +43,59 @@ var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
   var styles = (0, _react.useMemo)(function () {
     return (0, _styles.getCodeStyles)(theme);
   }, [theme]);
+  var children = props.children,
+      _props$codeBidiWarnin = props.codeBidiWarnings,
+      codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,
+      codeBidiWarningLabel = props.codeBidiWarningLabel,
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["children", "codeBidiWarnings", "codeBidiWarningLabel"]);
+  var decoratedChildren = codeBidiWarnings ? (0, _core.jsx)(RenderCodeChildrenWithBidiWarnings, {
+    codeBidiWarningLabel: codeBidiWarningLabel
+  }, children) : children;
   return (0, _core.jsx)("code", (0, _extends2.default)({
     ref: ref,
     "data-testid": testId,
     css: styles
-  }, props));
+  }, otherProps), decoratedChildren);
 }));
+
+function RenderCodeChildrenWithBidiWarnings(_ref2) {
+  var children = _ref2.children,
+      codeBidiWarningLabel = _ref2.codeBidiWarningLabel;
+
+  var replacedChildren = _react.default.Children.map(children, function (childNode) {
+    if (typeof childNode === 'string') {
+      var decorated = (0, _bidiWarningDecorator.default)(childNode, function (_ref3) {
+        var bidiCharacter = _ref3.bidiCharacter,
+            index = _ref3.index;
+        return (0, _core.jsx)(_bidiWarning.default, {
+          bidiCharacter: bidiCharacter,
+          key: index,
+          label: codeBidiWarningLabel
+        });
+      });
+      return decorated;
+    }
+
+    if (isReactElement(childNode) && childNode.props.children) {
+      var newChildNode = /*#__PURE__*/_react.default.cloneElement(childNode, {
+        children: (0, _core.jsx)(RenderCodeChildrenWithBidiWarnings, {
+          codeBidiWarningLabel: codeBidiWarningLabel
+        }, childNode.props.children)
+      });
+
+      return newChildNode;
+    }
+
+    return childNode;
+  });
+
+  return (0, _core.jsx)(_react.default.Fragment, null, replacedChildren);
+}
+
+function isReactElement(child) {
+  return !!child.type;
+}
+
 Code.displayName = 'Code';
 var _default = Code;
 exports.default = _default;

package/dist/cjs/internal/hooks/use-highlight.js

@@ -40,8 +40,7 @@ var useHighlightLines = function useHighlightLines(_ref) {
       if (num.indexOf('-') > 0) {
         // We found a line group, e.g. 1-3
         var _num$split$map$sort = num.split('-').map(Number) // Sort by lowest value first, highest value last.
-        . // Sort by lowest value first, highest value last.
-        sort(function (a, b) {
+        .sort(function (a, b) {
           return a - b;
         }),
             _num$split$map$sort2 = (0, _slicedToArray2.default)(_num$split$map$sort, 2),

package/dist/cjs/react-syntax-highlighter-bidi-warning-renderer.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBidiWarningRenderer = createBidiWarningRenderer;
+exports.createStyleObject = createStyleObject;
+exports.createClassNameString = createClassNameString;
+exports.createChildren = createChildren;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
+
+var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+// File mostly vendored from react-syntax-highlighter
+//
+// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/highlight.js#L272-L281
+// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/create-element.js
+//
+// Patching react syntax-highlighter with a decoration feature is likely preferable
+function createBidiWarningRenderer(codeBidiWarningLabel) {
+  return function bidiWarningRenderer(_ref) {
+    var rows = _ref.rows,
+        stylesheet = _ref.stylesheet,
+        useInlineStyles = _ref.useInlineStyles;
+    return rows.map(function (node, i) {
+      return createElement({
+        node: node,
+        stylesheet: stylesheet,
+        useInlineStyles: useInlineStyles,
+        codeBidiWarningLabel: codeBidiWarningLabel,
+        key: "code-segement".concat(i)
+      });
+    });
+  };
+} // Get all possible permutations of all power sets
+//
+// Super simple, non-algorithmic solution since the
+// number of class names will not be greater than 4
+
+
+function powerSetPermutations(arr) {
+  var arrLength = arr.length;
+
+  if (arrLength === 0 || arrLength === 1) {
+    return arr;
+  }
+
+  if (arrLength === 2) {
+    // prettier-ignore
+    return [arr[0], arr[1], "".concat(arr[0], ".").concat(arr[1]), "".concat(arr[1], ".").concat(arr[0])];
+  }
+
+  if (arrLength === 3) {
+    return [arr[0], arr[1], arr[2], "".concat(arr[0], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[2]), "".concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[0])];
+  }
+
+  if (arrLength >= 4) {
+    // Currently does not support more than 4 extra
+    // class names (after `.token` has been removed)
+    return [arr[0], arr[1], arr[2], arr[3], "".concat(arr[0], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[3]), "".concat(arr[3], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[1], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[1], ".").concat(arr[0])];
+  }
+}
+
+var classNameCombinations = {};
+
+function getClassNameCombinations(classNames) {
+  if (classNames.length === 0 || classNames.length === 1) {
+    return classNames;
+  }
+
+  var key = classNames.join('.');
+
+  if (!classNameCombinations[key]) {
+    classNameCombinations[key] = powerSetPermutations(classNames);
+  }
+
+  return classNameCombinations[key];
+}
+
+function createStyleObject(classNames) {
+  var elementStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var stylesheet = arguments.length > 2 ? arguments[2] : undefined;
+  var nonTokenClassNames = classNames.filter(function (className) {
+    return className !== 'token';
+  });
+  var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
+  return classNamesCombinations.reduce(function (styleObject, className) {
+    return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
+  }, elementStyle);
+}
+
+function createClassNameString(classNames) {
+  return classNames.join(' ');
+}
+
+function createChildren(stylesheet, useInlineStyles, codeBidiWarningLabel) {
+  var childrenCount = 0;
+  return function (children) {
+    childrenCount += 1;
+    return children.map(function (child, i) {
+      return createElement({
+        node: child,
+        stylesheet: stylesheet,
+        useInlineStyles: useInlineStyles,
+        codeBidiWarningLabel: codeBidiWarningLabel,
+        key: "code-segment-".concat(childrenCount, "-").concat(i)
+      });
+    });
+  };
+}
+
+function createElement(_ref2) {
+  var node = _ref2.node,
+      stylesheet = _ref2.stylesheet,
+      _ref2$style = _ref2.style,
+      style = _ref2$style === void 0 ? {} : _ref2$style,
+      useInlineStyles = _ref2.useInlineStyles,
+      codeBidiWarningLabel = _ref2.codeBidiWarningLabel,
+      key = _ref2.key;
+  var properties = node.properties,
+      type = node.type,
+      TagName = node.tagName,
+      value = node.value;
+
+  if (type === 'text') {
+    // occasionally react-syntax-highlighter passes a numeric value when the
+    // type is text
+    var textValue = value + '';
+    var decorated = (0, _bidiWarningDecorator.default)(textValue, function (_ref3) {
+      var bidiCharacter = _ref3.bidiCharacter,
+          index = _ref3.index;
+      return /*#__PURE__*/_react.default.createElement(_bidiWarning.default, {
+        bidiCharacter: bidiCharacter,
+        key: index,
+        label: codeBidiWarningLabel
+      });
+    });
+    return decorated;
+  } else if (TagName) {
+    var childrenCreator = createChildren(stylesheet, useInlineStyles, codeBidiWarningLabel);
+    var props;
+
+    if (!useInlineStyles) {
+      props = _objectSpread(_objectSpread({}, properties), {}, {
+        className: createClassNameString(properties.className)
+      });
+    } else {
+      var allStylesheetSelectors = Object.keys(stylesheet).reduce(function (classes, selector) {
+        selector.split('.').forEach(function (className) {
+          if (!classes.includes(className)) {
+            classes.push(className);
+          }
+        });
+        return classes;
+      }, []); // For compatibility with older versions of react-syntax-highlighter
+
+      var startingClassName = properties.className && properties.className.includes('token') ? ['token'] : [];
+      var className = properties.className && startingClassName.concat(properties.className.filter(function (className) {
+        return !allStylesheetSelectors.includes(className);
+      }));
+      props = _objectSpread(_objectSpread({}, properties), {}, {
+        className: createClassNameString(className) || undefined,
+        style: createStyleObject(properties.className, Object.assign({}, properties.style, style), stylesheet)
+      });
+    }
+
+    var children = childrenCreator(node.children);
+    return /*#__PURE__*/_react.default.createElement(TagName, (0, _extends2.default)({
+      key: key
+    }, props), children);
+  }
+}

package/dist/cjs/version.json

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

package/dist/es2019/bidi-warning/bidi-warning-decorator.js

@@ -0,0 +1,42 @@
+export const bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
+export default function codeBidiWarningDecorator(originalText, decorate) {
+  const matches = [...originalText.matchAll(bidiCharacterRegex)];
+
+  if (matches.length === 0) {
+    // No matches encountered, so we return the originalText value
+    return originalText;
+  }
+
+  let children = [];
+  let mappedTo = 0;
+
+  for (const match of matches) {
+    if (mappedTo !== match.index) {
+      // There were unmatched characters prior to this match which haven't been
+      // mapped to the children.
+      // Add them as plain text.
+      children.push(originalText.substring(mappedTo, match.index));
+    }
+
+    children.push(decorate({
+      bidiCharacter: match[0],
+      index: match.index
+    })); // While index is guaranteed to be present, it needs to be asserted due
+    // to a limitation of typescripts regex handling
+    //
+    // https://github.com/microsoft/TypeScript/issues/36788
+    // Decorate bidi character
+
+    mappedTo = match.index + match[0].length;
+  }
+
+  if (mappedTo !== originalText.length) {
+    // There is text following the final match, which needs to be mapped
+    // to the children.
+    // Added as plain text.
+    children.push(originalText.substring(mappedTo, originalText.length));
+  } // return the mapped children with decorated bidi characters
+
+
+  return children;
+}

package/dist/es2019/bidi-warning/index.js

@@ -0,0 +1 @@
+export { default } from './ui';