@atlaskit/editor-common 74.52.0 → 74.52.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-common
 
+## 74.52.2
+
+### Patch Changes
+
+- [`e0f020abea0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0f020abea0) - created new plugin for unsupported-content, moved code and styles
+- Updated dependencies
+
+## 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.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "TaskDecisionSharedCssClassName", {
     return _taskDecision.TaskDecisionSharedCssClassName;
   }
 });
+Object.defineProperty(exports, "UnsupportedSharedCssClassName", {
+  enumerable: true,
+  get: function get() {
+    return _unsupportedContent.UnsupportedSharedCssClassName;
+  }
+});
 Object.defineProperty(exports, "annotationSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -357,6 +363,12 @@ Object.defineProperty(exports, "triggerWrapperStyles", {
     return _plugins.triggerWrapperStyles;
   }
 });
+Object.defineProperty(exports, "unsupportedStyles", {
+  enumerable: true,
+  get: function get() {
+    return _unsupportedContent.unsupportedStyles;
+  }
+});
 Object.defineProperty(exports, "whitespaceSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -397,4 +409,5 @@ var _resizer = require("./shared/resizer");
 var _grid = require("./shared/grid");
 var _smartCard2 = require("./shared/smartCard");
 var _embedCard = require("./shared/embedCard");
-var _plugins = require("./shared/plugins");
+var _plugins = require("./shared/plugins");
+var _unsupportedContent = require("./shared/unsupported-content");

package/dist/cjs/styles/shared/unsupported-content.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unsupportedStyles = exports.UnsupportedSharedCssClassName = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _templateObject;
+var UnsupportedSharedCssClassName = {
+  BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
+  INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
+};
+exports.UnsupportedSharedCssClassName = UnsupportedSharedCssClassName;
+var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)");
+var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
+var unsupportedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background, _editorSharedStyles.SelectionStyle.Border]), _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"));
+exports.unsupportedStyles = unsupportedStyles;

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.2";
 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.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/index.js

@@ -26,4 +26,5 @@ export { resizerStyles, resizerHandleShadowClassName } from './shared/resizer';
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles } from './shared/embedCard';
-export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles } from './shared/plugins';
+export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles } from './shared/plugins';
+export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';

package/dist/es2019/styles/shared/unsupported-content.js

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+export const UnsupportedSharedCssClassName = {
+  BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
+  INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
+};
+const inlineUnsupportedSelector = `.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-of-type(2)`;
+const blockUnsupportedSelector = `.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div`;
+export const unsupportedStyles = css`
+  ${blockUnsupportedSelector}, ${inlineUnsupportedSelector} {
+    cursor: pointer;
+  }
+
+  .${akEditorSelectedNodeClassName}${blockUnsupportedSelector},
+    .${akEditorSelectedNodeClassName}${inlineUnsupportedSelector} {
+    ${getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border])}
+  }
+
+  .danger {
+    .${akEditorSelectedNodeClassName}${blockUnsupportedSelector},
+      .${akEditorSelectedNodeClassName}${inlineUnsupportedSelector} {
+      border: ${akEditorSelectedBorderSize}px solid
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
+    }
+  }
+`;

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.2";
 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.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/index.js

@@ -26,4 +26,5 @@ export { resizerStyles, resizerHandleShadowClassName } from './shared/resizer';
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles } from './shared/embedCard';
-export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles } from './shared/plugins';
+export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles } from './shared/plugins';
+export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';

package/dist/esm/styles/shared/unsupported-content.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+export var UnsupportedSharedCssClassName = {
+  BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
+  INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
+};
+var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)");
+var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
+export var unsupportedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border]), akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));

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.2";
 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/styles/index.d.ts

@@ -27,3 +27,4 @@ export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles, } from './shared/embedCard';
 export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles, } from './shared/plugins';
+export { UnsupportedSharedCssClassName, unsupportedStyles, } from './shared/unsupported-content';

package/dist/types/styles/shared/unsupported-content.d.ts

@@ -0,0 +1,5 @@
+export declare const UnsupportedSharedCssClassName: {
+    BLOCK_CONTAINER: string;
+    INLINE_CONTAINER: string;
+};
+export declare const unsupportedStyles: import("@emotion/react").SerializedStyles;

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/styles/index.d.ts

@@ -27,3 +27,4 @@ export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles, } from './shared/embedCard';
 export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles, } from './shared/plugins';
+export { UnsupportedSharedCssClassName, unsupportedStyles, } from './shared/unsupported-content';

package/dist/types-ts4.5/styles/shared/unsupported-content.d.ts

@@ -0,0 +1,5 @@
+export declare const UnsupportedSharedCssClassName: {
+    BLOCK_CONTAINER: string;
+    INLINE_CONTAINER: string;
+};
+export declare const unsupportedStyles: import("@emotion/react").SerializedStyles;

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.2",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -105,14 +105,14 @@
     "@atlaskit/media-client": "^23.1.0",
     "@atlaskit/media-picker": "^66.1.0",
     "@atlaskit/mention": "^22.1.0",
-    "@atlaskit/menu": "^1.9.0",
+    "@atlaskit/menu": "^1.10.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/profilecard": "^19.5.0",
     "@atlaskit/smart-user-picker": "^6.3.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/task-decision": "^17.7.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/tokens": "^1.16.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/width-detector": "^4.1.0",
@@ -200,4 +200,4 @@
       "type": "boolean"
     }
   }
-}
+}