@atlaskit/editor-common 74.52.0 → 74.52.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 74.52.1
+
+### Patch Changes
+
+- [`dbccd831543`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbccd831543) - [ux] tokenize ColorPicker, make charts package compatible with tokens, make check mark compatible with tokens
+
 ## 74.52.0
 
 ### Minor Changes

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.52.0";
+var packageVersion = "74.52.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.52.0";
+var packageVersion = "74.52.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -21,13 +21,17 @@ var _utils = require("./utils");
  * For a given color pick the color from a list of colors with
  * the highest contrast
  *
- * @param color color string, suppports HEX, RGB, RGBA etc.
+ * @param color color string, supports HEX, RGB, RGBA etc.
+ * @param useIconToken boolean, describes if a token should be used for the icon color
  * @return Highest contrast color in pool
  */
 function getCheckMarkColor(color, useIconToken) {
+  var tokenVal = (0, _utils.getTokenCSSVariableValue)(color);
+  var colorValue = !!tokenVal ? tokenVal : color;
+
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var contrastColor = [_colors.N0, _colors.N500].sort(function (a, b) {
-    return _chromatism.default.difference(b, color) - _chromatism.default.difference(a, color);
+    return _chromatism.default.difference(b, colorValue) - _chromatism.default.difference(a, colorValue);
   })[0];
   if (!useIconToken) {
     return contrastColor;
@@ -58,13 +62,13 @@ var ColorPalette = function ColorPalette(props) {
   var colorsPerRow = _react.default.useMemo(function () {
     return (0, _utils.getColorsPerRowFromPalette)(palette, cols);
   }, [palette, cols]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
+  return (0, _react2.jsx)(_react.default.Fragment, null, colorsPerRow.map(function (row) {
     return (0, _react2.jsx)("div", {
       css: _styles.colorPaletteWrapper,
       className: className,
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
-    }, row.map(function (_ref, colorIdx) {
+    }, row.map(function (_ref) {
       var value = _ref.value,
         label = _ref.label,
         border = _ref.border,

package/dist/cjs/ui-color/ColorPalette/utils.js

@@ -7,6 +7,7 @@ exports.DEFAULT_COLOR_PICKER_COLUMNS = void 0;
 exports.getColorsPerRowFromPalette = getColorsPerRowFromPalette;
 exports.getSelectedRowAndColumn = getSelectedRowAndColumn;
 exports.getSelectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette;
+exports.getTokenCSSVariableValue = void 0;
 var DEFAULT_COLOR_PICKER_COLUMNS = 7;
 exports.DEFAULT_COLOR_PICKER_COLUMNS = DEFAULT_COLOR_PICKER_COLUMNS;
 function getColorsPerRowFromPalette(palette) {
@@ -39,4 +40,18 @@ function getSelectedRowAndColumnFromPalette(palette, selectedColor) {
   var cols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLOR_PICKER_COLUMNS;
   var colorsPerRow = getColorsPerRowFromPalette(palette, cols);
   return getSelectedRowAndColumn(colorsPerRow, selectedColor);
-}
+}
+var getTokenCSSVariableValue = function getTokenCSSVariableValue(variableExpression) {
+  var matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?\)/);
+  if (matcher) {
+    var variable = matcher[1].trim();
+    var fallback = matcher[2] ? matcher[2].replace(',', '').trim() : '';
+    if (typeof document === 'undefined') {
+      return fallback;
+    }
+    var value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};
+exports.getTokenCSSVariableValue = getTokenCSSVariableValue;

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.52.0";
+const packageVersion = "74.52.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.52.0";
+const packageVersion = "74.52.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -8,17 +8,21 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { colorPaletteWrapper } from './styles';
-import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette } from './utils';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
 /**
  * For a given color pick the color from a list of colors with
  * the highest contrast
  *
- * @param color color string, suppports HEX, RGB, RGBA etc.
+ * @param color color string, supports HEX, RGB, RGBA etc.
+ * @param useIconToken boolean, describes if a token should be used for the icon color
  * @return Highest contrast color in pool
  */
 function getCheckMarkColor(color, useIconToken) {
+  const tokenVal = getTokenCSSVariableValue(color);
+  const colorValue = !!tokenVal ? tokenVal : color;
+
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  const contrastColor = [N0, N500].sort((a, b) => chromatism.difference(b, color) - chromatism.difference(a, color))[0];
+  const contrastColor = [N0, N500].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
   if (!useIconToken) {
     return contrastColor;
   }
@@ -53,7 +57,7 @@ const ColorPalette = props => {
   const colorsPerRow = React.useMemo(() => {
     return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
-  return jsx(React.Fragment, null, colorsPerRow.map((row, rowIdx) => jsx("div", {
+  return jsx(React.Fragment, null, colorsPerRow.map(row => jsx("div", {
     css: colorPaletteWrapper,
     className: className,
     key: `row-first-color-${row[0].value}`,
@@ -63,7 +67,7 @@ const ColorPalette = props => {
     label,
     border,
     message
-  }, colorIdx) => {
+  }) => {
     if (showSomewhatSemanticTooltips && paletteColorTooltipMessages) {
       if (tokenTheme === 'dark') {
         message = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());

package/dist/es2019/ui-color/ColorPalette/utils.js

@@ -28,4 +28,17 @@ export function getSelectedRowAndColumn(colorsPerRow, selectedColor) {
 export function getSelectedRowAndColumnFromPalette(palette, selectedColor, cols = DEFAULT_COLOR_PICKER_COLUMNS) {
   const colorsPerRow = getColorsPerRowFromPalette(palette, cols);
   return getSelectedRowAndColumn(colorsPerRow, selectedColor);
-}
+}
+export const getTokenCSSVariableValue = variableExpression => {
+  const matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?\)/);
+  if (matcher) {
+    const variable = matcher[1].trim();
+    const fallback = matcher[2] ? matcher[2].replace(',', '').trim() : '';
+    if (typeof document === 'undefined') {
+      return fallback;
+    }
+    const value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.52.0";
+var packageVersion = "74.52.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.52.0";
+var packageVersion = "74.52.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui-color/ColorPalette/index.js

@@ -8,18 +8,22 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { colorPaletteWrapper } from './styles';
-import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette } from './utils';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
 /**
  * For a given color pick the color from a list of colors with
  * the highest contrast
  *
- * @param color color string, suppports HEX, RGB, RGBA etc.
+ * @param color color string, supports HEX, RGB, RGBA etc.
+ * @param useIconToken boolean, describes if a token should be used for the icon color
  * @return Highest contrast color in pool
  */
 function getCheckMarkColor(color, useIconToken) {
+  var tokenVal = getTokenCSSVariableValue(color);
+  var colorValue = !!tokenVal ? tokenVal : color;
+
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var contrastColor = [N0, N500].sort(function (a, b) {
-    return chromatism.difference(b, color) - chromatism.difference(a, color);
+    return chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue);
   })[0];
   if (!useIconToken) {
     return contrastColor;
@@ -50,13 +54,13 @@ var ColorPalette = function ColorPalette(props) {
   var colorsPerRow = React.useMemo(function () {
     return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
-  return jsx(React.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
+  return jsx(React.Fragment, null, colorsPerRow.map(function (row) {
     return jsx("div", {
       css: colorPaletteWrapper,
       className: className,
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
-    }, row.map(function (_ref, colorIdx) {
+    }, row.map(function (_ref) {
       var value = _ref.value,
         label = _ref.label,
         border = _ref.border,

package/dist/esm/ui-color/ColorPalette/utils.js

@@ -29,4 +29,17 @@ export function getSelectedRowAndColumnFromPalette(palette, selectedColor) {
   var cols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLOR_PICKER_COLUMNS;
   var colorsPerRow = getColorsPerRowFromPalette(palette, cols);
   return getSelectedRowAndColumn(colorsPerRow, selectedColor);
-}
+}
+export var getTokenCSSVariableValue = function getTokenCSSVariableValue(variableExpression) {
+  var matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?\)/);
+  if (matcher) {
+    var variable = matcher[1].trim();
+    var fallback = matcher[2] ? matcher[2].replace(',', '').trim() : '';
+    if (typeof document === 'undefined') {
+      return fallback;
+    }
+    var value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};

package/dist/types/ui-color/ColorPalette/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
 interface Props {
     selectedColor: string | null;
     onClick: (value: string, label: string) => void;
@@ -27,7 +27,7 @@ interface Props {
          *  tooltip messages. Which is same as palette, where consumer determines which
          *  colors ColorPalette should render.
          * Same way now consumer will determine which tooltip messages should
-         *  be used using paletteColorTooltipMessages option.
+         *  be using paletteColorTooltipMessages option.
          */
         paletteColorTooltipMessages?: PaletteTooltipMessages;
         /**
@@ -39,12 +39,6 @@ interface Props {
     };
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>; /**
-     * If hexToPaletteColor is passed, it will be called to convert
-     *  hexCodes passed in palette props to DST token.
-     * Different color palette will set different mapping function.
-     * Such as text and background color palette uses different
-     *  mapping function to map tokens.
-     */
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui-color/ColorPalette/utils.d.ts

@@ -1,4 +1,4 @@
-import { PaletteColor } from './Palettes/type';
+import type { PaletteColor } from './Palettes/type';
 export declare const DEFAULT_COLOR_PICKER_COLUMNS = 7;
 export declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
 export declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
@@ -9,3 +9,4 @@ export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor
     selectedRowIndex: number;
     selectedColumnIndex: number;
 };
+export declare const getTokenCSSVariableValue: (variableExpression: string) => string;

package/dist/types-ts4.5/ui-color/ColorPalette/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
 interface Props {
     selectedColor: string | null;
     onClick: (value: string, label: string) => void;
@@ -27,7 +27,7 @@ interface Props {
          *  tooltip messages. Which is same as palette, where consumer determines which
          *  colors ColorPalette should render.
          * Same way now consumer will determine which tooltip messages should
-         *  be used using paletteColorTooltipMessages option.
+         *  be using paletteColorTooltipMessages option.
          */
         paletteColorTooltipMessages?: PaletteTooltipMessages;
         /**
@@ -39,12 +39,6 @@ interface Props {
     };
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>; /**
-     * If hexToPaletteColor is passed, it will be called to convert
-     *  hexCodes passed in palette props to DST token.
-     * Different color palette will set different mapping function.
-     * Such as text and background color palette uses different
-     *  mapping function to map tokens.
-     */
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.5/ui-color/ColorPalette/utils.d.ts

@@ -1,4 +1,4 @@
-import { PaletteColor } from './Palettes/type';
+import type { PaletteColor } from './Palettes/type';
 export declare const DEFAULT_COLOR_PICKER_COLUMNS = 7;
 export declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
 export declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
@@ -9,3 +9,4 @@ export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor
     selectedRowIndex: number;
     selectedColumnIndex: number;
 };
+export declare const getTokenCSSVariableValue: (variableExpression: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.52.0",
+  "version": "74.52.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"