@atlaskit/editor-common 69.2.2 → 69.3.0

package/dist/esm/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -0,0 +1,153 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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; }
+
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { colors } from '@atlaskit/theme';
+import { darkPanelColors } from '../../../panel';
+import { DEFAULT_BORDER_COLOR } from './common';
+
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export var panelBackgroundPalette = [{
+  label: 'White',
+  value: colors.N0
+}, {
+  label: 'Light blue',
+  value: colors.B50
+}, {
+  label: 'Light teal',
+  value: colors.T50
+}, {
+  label: 'Light green',
+  value: colors.G50
+}, {
+  label: 'Light yellow',
+  value: colors.Y50
+}, {
+  label: 'Light red',
+  value: colors.R50
+}, {
+  label: 'Light purple',
+  value: colors.P50
+}, {
+  label: 'Light gray',
+  value: colors.N20
+}, {
+  label: 'Blue',
+  value: colors.B75
+}, {
+  label: 'Teal',
+  value: colors.T75
+}, {
+  label: 'Green',
+  value: colors.G75
+}, {
+  label: 'Yellow',
+  value: colors.Y75
+}, {
+  label: 'Red',
+  value: colors.R75
+}, {
+  label: 'Purple',
+  value: colors.P75
+}, {
+  label: 'Gray',
+  value: colors.N60
+}, {
+  label: 'Dark blue',
+  value: colors.B100
+}, {
+  label: 'Dark teal',
+  value: colors.T100
+}, {
+  label: 'Dark green',
+  value: colors.G200
+}, {
+  label: 'Dark yellow',
+  value: colors.Y200
+}, {
+  label: 'Dark red',
+  value: colors.R100
+}, {
+  label: 'Dark purple',
+  value: colors.P100
+}].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: DEFAULT_BORDER_COLOR
+  });
+});
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+export var panelDarkModeBackgroundPalette = [{
+  label: 'Dark gray',
+  value: darkPanelColors.DarkGray
+}, {
+  label: 'Dark blue',
+  value: darkPanelColors.B1200S
+}, {
+  label: 'Dark teal',
+  value: darkPanelColors.T1200S
+}, {
+  label: 'Dark green',
+  value: darkPanelColors.G1200S
+}, {
+  label: 'Dark yellow',
+  value: darkPanelColors.Y1200S
+}, {
+  label: 'Dark red',
+  value: darkPanelColors.R1200S
+}, {
+  label: 'Dark purple',
+  value: darkPanelColors.P1200S
+}, {
+  label: 'Gray',
+  value: darkPanelColors.Gray
+}, {
+  label: 'blue',
+  value: darkPanelColors.B900
+}, {
+  label: 'teal',
+  value: darkPanelColors.T900
+}, {
+  label: 'green',
+  value: darkPanelColors.G900
+}, {
+  label: 'yellow',
+  value: darkPanelColors.Y900
+}, {
+  label: 'red',
+  value: darkPanelColors.R900
+}, {
+  label: 'purple',
+  value: darkPanelColors.P900
+}, {
+  label: 'Light gray',
+  value: darkPanelColors.LightGray
+}, {
+  label: 'Light blue',
+  value: darkPanelColors.B800S
+}, {
+  label: 'Light teal',
+  value: darkPanelColors.T900S
+}, {
+  label: 'Light green',
+  value: darkPanelColors.G900S
+}, {
+  label: 'Light yellow',
+  value: darkPanelColors.Y800S
+}, {
+  label: 'Light red',
+  value: darkPanelColors.R800S
+}, {
+  label: 'Light purple',
+  value: darkPanelColors.P800S
+}].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: DEFAULT_BORDER_COLOR
+  });
+});

package/dist/esm/ui-color/ColorPalette/Palettes/statusColorPalette.js

@@ -0,0 +1,56 @@
+import * as colors from '@atlaskit/theme/colors';
+
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export var lightModeStatusColorPalette = [{
+  label: 'neutral',
+  value: colors.N40,
+  border: colors.N400
+}, {
+  label: 'purple',
+  value: colors.P50,
+  border: colors.P400
+}, {
+  label: 'blue',
+  value: colors.B50,
+  border: colors.B400
+}, {
+  label: 'red',
+  value: colors.R50,
+  border: colors.R400
+}, {
+  label: 'yellow',
+  value: colors.Y75,
+  border: colors.Y400
+}, {
+  label: 'green',
+  value: colors.G50,
+  border: colors.G400
+}];
+export var darkModeStatusColorPalette = [{
+  label: 'neutral',
+  value: '#7F9BB4',
+  border: colors.N400
+}, {
+  label: 'purple',
+  value: '#282249',
+  border: colors.P400
+}, {
+  label: 'blue',
+  value: '#0C294F',
+  border: colors.B400
+}, {
+  label: 'red',
+  value: '#441C13',
+  border: colors.R400
+}, {
+  label: 'yellow',
+  value: '#413001',
+  border: colors.Y400
+}, {
+  label: 'green',
+  value: '#052E21',
+  border: colors.G400
+}];
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/ui-color/ColorPalette/Palettes/textColorPalette.js

@@ -0,0 +1,25 @@
+import { colorPalette, colorPaletteExtended } from '@atlaskit/adf-schema';
+import { DEFAULT_BORDER_COLOR } from './common';
+import getColorMessage from './getColorMessage';
+import paletteMessages from './paletteMessages';
+
+var mapPaletteColor = function mapPaletteColor(label, color) {
+  var key = label.toLowerCase().replace(' ', '-');
+  var message = getColorMessage(paletteMessages, key);
+  return {
+    value: color,
+    label: label,
+    border: DEFAULT_BORDER_COLOR,
+    message: message
+  };
+}; // row 1
+
+
+export var textColorPalette = [];
+export var textColorPaletteExtended = [];
+colorPalette.forEach(function (label, color) {
+  textColorPalette.push(mapPaletteColor(label, color));
+});
+colorPaletteExtended.forEach(function (label, color) {
+  textColorPaletteExtended.push(mapPaletteColor(label, color));
+});

package/dist/esm/ui-color/ColorPalette/Palettes/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,70 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import chromatism from 'chromatism';
+import { injectIntl } from 'react-intl-next';
+import { N0, N500 } from '@atlaskit/theme/colors';
+import Color from './Color';
+import { colorPaletteWrapper } from './styles';
+
+/**
+ * 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.
+ * @return Highest contrast color in pool
+ */
+function getContrastColor(color, pool) {
+  return pool.sort(function (a, b) {
+    return chromatism.difference(b, color) - chromatism.difference(a, color);
+  })[0];
+}
+
+var ColorPalette = function ColorPalette(props) {
+  var palette = props.palette,
+      _props$cols = props.cols,
+      cols = _props$cols === void 0 ? 7 : _props$cols,
+      onClick = props.onClick,
+      selectedColor = props.selectedColor,
+      className = props.className,
+      formatMessage = props.intl.formatMessage;
+  var colorsPerRow = React.useMemo(function () {
+    return palette.reduce(function (resultArray, item, index) {
+      var chunkIndex = Math.floor(index / cols);
+      resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
+
+      resultArray[chunkIndex].push(item);
+      return resultArray;
+    }, []);
+  }, [palette, cols]);
+  return jsx(React.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
+    return jsx("div", {
+      css: colorPaletteWrapper,
+      className: className,
+      key: "row-first-color-".concat(row[0].value),
+      role: "radiogroup"
+    }, row.map(function (_ref, colorIdx) {
+      var value = _ref.value,
+          label = _ref.label,
+          border = _ref.border,
+          message = _ref.message;
+      return jsx(Color, {
+        key: value,
+        value: value,
+        borderColor: border,
+        label: message ? formatMessage(message) : label,
+        onClick: onClick,
+        isSelected: value === selectedColor
+        /** this is not new usage - old code extracted from editor-core */
+
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
+        checkMarkColor: getContrastColor(value, [N0, N500])
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+      });
+    }));
+  }));
+};
+
+export default injectIntl(ColorPalette);

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

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { gridSize } from '@atlaskit/theme/constants';
+export var colorPaletteWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), gridSize());

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

@@ -0,0 +1,8 @@
+export { default as ColorPalette } from './ColorPalette';
+export { default as Color } from './ColorPalette/Color';
+export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
+export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
+export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
+export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
+export { textColorPalette, textColorPaletteExtended } from './ColorPalette/Palettes/textColorPalette';
+export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';

package/dist/esm/ui-menu/Dropdown/index.js

@@ -0,0 +1,105 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React, { PureComponent } from 'react';
+import { withReactEditorViewOuterListeners } from '../../ui-react';
+import DropdownList from '../../ui/DropList';
+import Popup from '../../ui/Popup';
+
+/**
+ * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
+ * droplist outside of "overflow: hidden" containers when needed.
+ *
+ * Also it controls popper's placement.
+ */
+export var Dropdown = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Dropdown, _PureComponent);
+
+  var _super = _createSuper(Dropdown);
+
+  function Dropdown(props) {
+    var _this;
+
+    _classCallCheck(this, Dropdown);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
+      _this.setState({
+        target: target || undefined
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updatePopupPlacement", function (placement) {
+      _this.setState({
+        popupPlacement: placement
+      });
+    });
+
+    _this.state = {
+      popupPlacement: ['bottom', 'left']
+    };
+    return _this;
+  }
+
+  _createClass(Dropdown, [{
+    key: "renderDropdown",
+    value: function renderDropdown() {
+      var _this$state = this.state,
+          target = _this$state.target,
+          popupPlacement = _this$state.popupPlacement;
+      var _this$props = this.props,
+          children = _this$props.children,
+          mountTo = _this$props.mountTo,
+          boundariesElement = _this$props.boundariesElement,
+          scrollableElement = _this$props.scrollableElement,
+          onOpenChange = _this$props.onOpenChange,
+          fitHeight = _this$props.fitHeight,
+          fitWidth = _this$props.fitWidth,
+          zIndex = _this$props.zIndex;
+      return /*#__PURE__*/React.createElement(Popup, {
+        target: target,
+        mountTo: mountTo,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        onPlacementChanged: this.updatePopupPlacement,
+        fitHeight: fitHeight,
+        fitWidth: fitWidth,
+        zIndex: zIndex
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          height: 0,
+          minWidth: fitWidth || 0
+        }
+      }, /*#__PURE__*/React.createElement(DropdownList, {
+        isOpen: true,
+        onOpenChange: onOpenChange,
+        position: popupPlacement.join(' '),
+        shouldFitContainer: true
+      }, children)));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          trigger = _this$props2.trigger,
+          isOpen = _this$props2.isOpen;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        ref: this.handleRef
+      }, trigger), isOpen ? this.renderDropdown() : null);
+    }
+  }]);
+
+  return Dropdown;
+}(PureComponent);
+var DropdownWithOuterListeners = withReactEditorViewOuterListeners(Dropdown);
+export default DropdownWithOuterListeners;