@atlaskit/editor-core 191.0.1 → 191.0.3

package/dist/esm/plugins/extension/ui/ConfigPanel/Fields/ColorPicker.js

@@ -1,406 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react';
-import { Fragment } from 'react';
-import { Field } from '@atlaskit/form';
-import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
-import { validate as _validate } from '../utils';
-import { requiredIndicator } from './common/RequiredIndicator';
-import { headingSizes } from '@atlaskit/theme/typography';
-import FieldMessages from '../FieldMessages';
-import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
-import { chartsColorPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
-/*
-    NOTE: color used here are not yet in atlaskit code
-    this is part of extended color pack from ADG, which is yet to be release
-    at the time of writing this.
-
-    Colour sequence source: https://product-fabric.atlassian.net/browse/ED-12650?focusedCommentId=204875
-*/
-
-export var colorPalette = [{
-  label: 'Light Blue',
-  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
-},
-// 400
-{
-  label: 'Light Green',
-  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
-},
-// 400
-{
-  label: 'Light Yellow',
-  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
-},
-// 400
-{
-  label: 'Light Red',
-  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
-},
-// 400
-{
-  label: 'Light Purple',
-  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
-},
-// 400
-
-{
-  label: 'Blue',
-  value: "var(--ds-chart-blue-bold, #247FFF)"
-},
-// 600
-{
-  label: 'Green',
-  value: "var(--ds-chart-green-bold, #23A971)"
-},
-// 600
-{
-  label: 'Yellow',
-  value: "var(--ds-chart-yellow-bold, #FFBE33)"
-},
-// 600
-{
-  label: 'Red',
-  value: "var(--ds-chart-red-bold, #FC552C)"
-},
-// 600
-{
-  label: 'Purple',
-  value: "var(--ds-chart-purple-bold, #8B77EE)"
-},
-// 600
-
-{
-  label: 'Dark Blue',
-  value: "var(--ds-chart-blue-bolder, #0055CC)"
-},
-// 800
-{
-  label: 'Dark Green',
-  value: "var(--ds-chart-green-bolder, #177D52)"
-},
-// 800
-{
-  label: 'Dark Yellow',
-  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
-},
-// 800
-{
-  label: 'Dark Red',
-  value: "var(--ds-chart-red-bolder, #D32D03)"
-},
-// 800
-{
-  label: 'Dark Purple',
-  value: "var(--ds-chart-purple-bolder, #5A43D0)"
-},
-// 800
-
-{
-  label: 'Darker Blue',
-  value: "var(--ds-chart-blue-boldest, #003884)"
-},
-// 1000
-{
-  label: 'Darker Green',
-  value: "var(--ds-chart-green-boldest, #055C3F)"
-},
-// 1000
-{
-  label: 'Darker Yellow',
-  value: "var(--ds-chart-yellow-boldest, #946104)"
-},
-// 1000
-{
-  label: 'Darker Red',
-  value: "var(--ds-chart-red-boldest, #A32000)"
-},
-// 1000
-{
-  label: 'Darker Purple',
-  value: "var(--ds-chart-purple-boldest, #44368B)"
-} // 1000
-].map(function (color) {
-  return _objectSpread(_objectSpread({}, color), {}, {
-    border: DEFAULT_BORDER_COLOR
-  });
-});
-
-/**
- * Extended chart colors.
- * Decided here https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3477245015/Tokenising+table+charts+color
- */
-export var extendedColorPalette = [{
-  label: 'Darker Blue',
-  value: "var(--ds-chart-blue-boldest, #003884)"
-},
-// 1000
-{
-  label: 'Darker Teal',
-  value: "var(--ds-chart-teal-boldest, #206B74)"
-},
-// 1000
-{
-  label: 'Darker Green',
-  value: "var(--ds-chart-green-boldest, #055C3F)"
-},
-// 1000
-{
-  label: 'Darker Yellow',
-  value: "var(--ds-chart-yellow-boldest, #946104)"
-},
-// 1000
-{
-  label: 'Darker Orange',
-  value: "var(--ds-chart-orange-boldest, #974F0C)"
-},
-// 1000
-{
-  label: 'Darker Red',
-  value: "var(--ds-chart-red-boldest, #A32000)"
-},
-// 1000
-{
-  label: 'Darker Magenta',
-  value: "var(--ds-chart-magenta-boldest, #943D73)"
-},
-// 1000
-{
-  label: 'Darker Purple',
-  value: "var(--ds-chart-purple-boldest, #44368B)"
-},
-// 1000
-{
-  label: 'Darker Gray',
-  value: "var(--ds-chart-gray-boldest, #44546F)"
-},
-// 1000
-
-{
-  label: 'Dark Blue',
-  value: "var(--ds-chart-blue-bolder, #0055CC)"
-},
-// 800
-{
-  label: 'Dark Teal',
-  value: "var(--ds-chart-teal-bolder, #1D7F8C)"
-},
-// 800
-{
-  label: 'Dark Green',
-  value: "var(--ds-chart-green-bolder, #177D52)"
-},
-// 800
-{
-  label: 'Dark Yellow',
-  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
-},
-// 800
-{
-  label: 'Dark Orange',
-  value: "var(--ds-chart-orange-bolder, #B65C02)"
-},
-// 800
-{
-  label: 'Dark Red',
-  value: "var(--ds-chart-red-bolder, #D32D03)"
-},
-// 800
-{
-  label: 'Dark Magenta',
-  value: "var(--ds-chart-magenta-bolder, #CD519D)"
-},
-// 800
-{
-  label: 'Dark Purple',
-  value: "var(--ds-chart-purple-bolder, #5A43D0)"
-},
-// 800
-{
-  label: 'Dark Gray',
-  value: "var(--ds-chart-gray-bolder, #758195)"
-},
-// 800
-
-{
-  label: 'Blue',
-  value: "var(--ds-chart-blue-bold, #247FFF)"
-},
-// 600
-{
-  label: 'Teal',
-  value: "var(--ds-chart-teal-bold, #1D9AAA)"
-},
-// 600
-{
-  label: 'Green',
-  value: "var(--ds-chart-green-bold, #23A971)"
-},
-// 600
-{
-  label: 'Yellow',
-  value: "var(--ds-chart-yellow-bold, #FFBE33)"
-},
-// 600
-{
-  label: 'Orange',
-  value: "var(--ds-chart-orange-bold, #D97008)"
-},
-// 600
-{
-  label: 'Red',
-  value: "var(--ds-chart-red-bold, #FC552C)"
-},
-// 600
-{
-  label: 'Magenta',
-  value: "var(--ds-chart-magenta-bold, #DA62AC)"
-},
-// 600
-{
-  label: 'Purple',
-  value: "var(--ds-chart-purple-bold, #8B77EE)"
-},
-// 600
-{
-  label: 'Gray',
-  value: "var(--ds-chart-gray-bold, #8590A2)"
-},
-// 600
-
-{
-  label: 'Light Blue',
-  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
-},
-// 400
-{
-  label: 'Light Teal',
-  value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
-},
-// 400
-{
-  label: 'Light Green',
-  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
-},
-// 400
-{
-  label: 'Light Yellow',
-  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
-},
-// 400
-{
-  label: 'Light Orange',
-  value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
-},
-// 400
-{
-  label: 'Light Red',
-  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
-},
-// 400
-{
-  label: 'Light Magenta',
-  value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
-},
-// 400
-{
-  label: 'Light Purple',
-  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
-},
-// 400
-{
-  label: 'Light Gray',
-  value: "var(--ds-background-accent-gray-subtle, #8993A5)"
-} // 400
-].map(function (color) {
-  return _objectSpread(_objectSpread({}, color), {}, {
-    border: DEFAULT_BORDER_COLOR
-  });
-});
-var colorPickerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", ";\n  padding-right: ", ";\n"])), "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)");
-var colorPickerLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), headingSizes.h400.size);
-export var EXPANDED_COLOR_PICKER_COLUMNS = 9;
-export var ORIGINAL_COLOR_PICKER_COLUMNS = 5;
-var ColorPicker = function ColorPicker(props) {
-  var name = props.name,
-    title = props.title,
-    currentColor = props.currentColor,
-    onChange = props.onChange,
-    onFieldChange = props.onFieldChange;
-  var onColorChange = function onColorChange(color) {
-    var colorValue = color.value;
-    onChange(colorValue);
-    onFieldChange(name, currentColor !== colorValue);
-  };
-  return jsx(ColorPickerButton, {
-    title: title,
-    currentColor: currentColor,
-    onChange: onColorChange,
-    colorPalette: extendedColorPalette,
-    paletteColorTooltipMessages: chartsColorPaletteTooltipMessages,
-    cols: EXPANDED_COLOR_PICKER_COLUMNS,
-    alignX: "right",
-    placement: "ConfigPanel",
-    size: {
-      width: "var(--ds-space-300, 24px)",
-      height: "var(--ds-space-300, 24px)"
-    }
-    /* ED-18288 We align the palette to the right edge which is 1.5rem spacing away to avoid
-      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */,
-    absoluteOffset: {
-      right: Number(-1.5 * getCurrentRemSize() - 1)
-    }
-  });
-};
-var ColorPickerField = function ColorPickerField(_ref) {
-  var name = _ref.name,
-    field = _ref.field,
-    onFieldChange = _ref.onFieldChange,
-    featureFlags = _ref.featureFlags;
-  var label = field.label,
-    defaultValue = field.defaultValue,
-    isRequired = field.isRequired;
-  return jsx(Field, {
-    name: name,
-    isRequired: isRequired,
-    defaultValue: defaultValue,
-    testId: "config-panel-color-picker-".concat(name),
-    validate: function validate(value) {
-      return _validate(field, value || '');
-    }
-  }, function (_ref2) {
-    var fieldProps = _ref2.fieldProps,
-      error = _ref2.error;
-    return jsx(Fragment, null, jsx("div", {
-      css: colorPickerWrapper
-    }, jsx("label", {
-      css: colorPickerLabel
-    }, label, isRequired && jsx("span", {
-      css: requiredIndicator,
-      "aria-hidden": "true"
-    }, "*")), jsx(ColorPicker, {
-      name: name,
-      title: label,
-      currentColor: fieldProps.value,
-      onChange: fieldProps.onChange,
-      onFieldChange: onFieldChange,
-      featureFlags: featureFlags
-    })), error && jsx(FieldMessages, {
-      error: error,
-      description: ""
-    }));
-  });
-};
-var getCurrentRemSize = function getCurrentRemSize() {
-  var fallback = 16; // 16px is the default rem size for most browsers
-  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
-    return fallback;
-  }
-  var value = parseFloat(getComputedStyle(document.documentElement).fontSize);
-  return value || fallback;
-};
-export default ColorPickerField;

package/dist/esm/plugins/extension/ui/ConfigPanel/Fields/CustomSelect.js

@@ -1,182 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useState } from 'react';
-import { injectIntl } from 'react-intl-next';
-import { messages } from '../messages';
-import { Field } from '@atlaskit/form';
-import { AsyncCreatableSelect } from '@atlaskit/select';
-import { formatOptionLabel } from './SelectItem';
-import { getCustomFieldResolver } from '@atlaskit/editor-common/extensions';
-import FieldMessages from '../FieldMessages';
-import UnhandledType from './UnhandledType';
-import { validate as _validate } from '../utils';
-function FieldError(_ref) {
-  var name = _ref.name,
-    field = _ref.field;
-  var type = field.options.resolver.type;
-  return /*#__PURE__*/React.createElement(UnhandledType, {
-    key: name,
-    field: field,
-    errorMessage: "Field \"".concat(name, "\" can't be rendered. Missing resolver for \"").concat(type, "\".")
-  });
-}
-function CustomSelect(_ref2) {
-  var name = _ref2.name,
-    autoFocus = _ref2.autoFocus,
-    extensionManifest = _ref2.extensionManifest,
-    placeholder = _ref2.placeholder,
-    field = _ref2.field,
-    onFieldChange = _ref2.onFieldChange,
-    parameters = _ref2.parameters,
-    intl = _ref2.intl;
-  var fieldDefaultValue = field.defaultValue,
-    description = field.description,
-    isMultiple = field.isMultiple,
-    isRequired = field.isRequired,
-    label = field.label,
-    options = field.options;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    resolver = _useState4[0],
-    setResolver = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    defaultOptions = _useState6[0],
-    setDefaultOptions = _useState6[1];
-  var _useState7 = useState(undefined),
-    _useState8 = _slicedToArray(_useState7, 2),
-    defaultValue = _useState8[0],
-    setDefaultValue = _useState8[1];
-  useEffect(function () {
-    var cancel = false;
-    function fetchResolver() {
-      return _fetchResolver.apply(this, arguments);
-    }
-    function _fetchResolver() {
-      _fetchResolver = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _resolver, _options;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              setLoading(true);
-              _context.prev = 1;
-              _context.next = 4;
-              return getCustomFieldResolver(extensionManifest, field.options.resolver);
-            case 4:
-              _resolver = _context.sent;
-              if (!cancel) {
-                _context.next = 7;
-                break;
-              }
-              return _context.abrupt("return");
-            case 7:
-              setResolver(function () {
-                return _resolver;
-              });
-
-              // fetch the default values
-              _context.next = 10;
-              return _resolver(undefined, fieldDefaultValue, parameters);
-            case 10:
-              _options = _context.sent;
-              setDefaultOptions(_options);
-              if (!cancel) {
-                _context.next = 14;
-                break;
-              }
-              return _context.abrupt("return");
-            case 14:
-              // filter returned values to match the defaultValue
-              if (fieldDefaultValue && isMultiple) {
-                setDefaultValue(_options.filter(function (option) {
-                  return fieldDefaultValue.includes(option.value);
-                }));
-              }
-              if (fieldDefaultValue && !isMultiple) {
-                setDefaultValue(_options.find(function (option) {
-                  return fieldDefaultValue === option.value;
-                }));
-              }
-              _context.next = 21;
-              break;
-            case 18:
-              _context.prev = 18;
-              _context.t0 = _context["catch"](1);
-              // eslint-disable-next-line no-console
-              console.error(_context.t0);
-            case 21:
-              setLoading(false);
-            case 22:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[1, 18]]);
-      }));
-      return _fetchResolver.apply(this, arguments);
-    }
-    fetchResolver();
-    return function () {
-      cancel = true;
-    };
-  }, [extensionManifest, field.options.resolver, fieldDefaultValue, isMultiple, parameters]);
-  function _formatCreateLabel(value) {
-    if (!value) {
-      return null;
-    }
-    var message = intl.formatMessage(messages.createOption);
-    return "".concat(message, " \"").concat(value, "\"");
-  }
-  var isCreatable = options.isCreatable;
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: label,
-    isRequired: isRequired,
-    defaultValue: defaultValue,
-    validate: function validate(value) {
-      return _validate(field, value);
-    },
-    testId: "config-panel-custom-select-".concat(name)
-  }, function (_ref3) {
-    var fieldProps = _ref3.fieldProps,
-      error = _ref3.error;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, resolver && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AsyncCreatableSelect, _extends({}, fieldProps, {
-      onChange: function onChange(value) {
-        fieldProps.onChange(value);
-        // We assume onChange is called whenever values actually changed
-        // for isDirty
-        onFieldChange(name, true);
-      }
-      // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
-      ,
-      isMulti: isMultiple || false,
-      isClearable: true,
-      isValidNewOption: function isValidNewOption(value) {
-        return !!(isCreatable && value);
-      },
-      validationState: error ? 'error' : 'default',
-      defaultOptions: defaultOptions,
-      formatCreateLabel: function formatCreateLabel(value) {
-        return _formatCreateLabel(value);
-      },
-      formatOptionLabel: formatOptionLabel,
-      loadOptions: function loadOptions(searchTerm) {
-        return resolver(searchTerm, fieldDefaultValue, parameters);
-      },
-      autoFocus: autoFocus,
-      placeholder: placeholder
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
-      error: error,
-      description: description
-    })), !loading && !resolver && /*#__PURE__*/React.createElement(FieldError, {
-      name: name,
-      field: field
-    }));
-  });
-}
-export default injectIntl(CustomSelect);

package/dist/esm/plugins/extension/ui/ConfigPanel/Fields/Date.js

@@ -1,48 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { injectIntl } from 'react-intl-next';
-import { Field } from '@atlaskit/form';
-import { DatePicker } from '@atlaskit/datetime-picker';
-import FieldMessages from '../FieldMessages';
-import { validate as _validate } from '../utils';
-function Date(_ref) {
-  var name = _ref.name,
-    field = _ref.field,
-    autoFocus = _ref.autoFocus,
-    onFieldChange = _ref.onFieldChange,
-    placeholder = _ref.placeholder,
-    intl = _ref.intl;
-  var label = field.label,
-    description = field.description,
-    defaultValue = field.defaultValue,
-    isRequired = field.isRequired;
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: label,
-    defaultValue: defaultValue,
-    isRequired: isRequired,
-    validate: function validate(value) {
-      return _validate(field, value);
-    },
-    testId: "config-panel-date-picker-".concat(name)
-  }, function (_ref2) {
-    var fieldProps = _ref2.fieldProps,
-      error = _ref2.error;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
-      autoFocus: autoFocus,
-      onBlur: function onBlur() {
-        fieldProps.onBlur();
-      },
-      onChange: function onChange(value) {
-        fieldProps.onChange(value);
-        onFieldChange(name, true);
-      },
-      locale: intl.locale,
-      placeholder: placeholder
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
-      error: error,
-      description: description
-    }));
-  });
-}
-export default injectIntl(Date);