@atlaskit/editor-core 191.0.1 → 191.0.4

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

@@ -1,410 +0,0 @@
-/** @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 } 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 const 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(color => ({
-  ...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 const 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(color => ({
-  ...color,
-  border: DEFAULT_BORDER_COLOR
-}));
-const colorPickerWrapper = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: ${"var(--ds-space-400, 32px)"};
-  padding-right: ${"var(--ds-space-100, 8px)"};
-`;
-const colorPickerLabel = css`
-  font-size: ${headingSizes.h400.size}px;
-  margin-top: 0;
-`;
-export const EXPANDED_COLOR_PICKER_COLUMNS = 9;
-export const ORIGINAL_COLOR_PICKER_COLUMNS = 5;
-const ColorPicker = props => {
-  const {
-    name,
-    title,
-    currentColor,
-    onChange,
-    onFieldChange
-  } = props;
-  const onColorChange = color => {
-    const 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)
-    }
-  });
-};
-const ColorPickerField = ({
-  name,
-  field,
-  onFieldChange,
-  featureFlags
-}) => {
-  const {
-    label,
-    defaultValue,
-    isRequired
-  } = field;
-  return jsx(Field, {
-    name: name,
-    isRequired: isRequired,
-    defaultValue: defaultValue,
-    testId: `config-panel-color-picker-${name}`,
-    validate: value => validate(field, value || '')
-  }, ({
-    fieldProps,
-    error
-  }) => 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: ""
-  })));
-};
-const getCurrentRemSize = () => {
-  const fallback = 16; // 16px is the default rem size for most browsers
-  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
-    return fallback;
-  }
-  const value = parseFloat(getComputedStyle(document.documentElement).fontSize);
-  return value || fallback;
-};
-export default ColorPickerField;

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

@@ -1,132 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-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 } from '../utils';
-function FieldError({
-  name,
-  field
-}) {
-  const {
-    type
-  } = field.options.resolver;
-  return /*#__PURE__*/React.createElement(UnhandledType, {
-    key: name,
-    field: field,
-    errorMessage: `Field "${name}" can't be rendered. Missing resolver for "${type}".`
-  });
-}
-function CustomSelect({
-  name,
-  autoFocus,
-  extensionManifest,
-  placeholder,
-  field,
-  onFieldChange,
-  parameters,
-  intl
-}) {
-  const {
-    defaultValue: fieldDefaultValue,
-    description,
-    isMultiple,
-    isRequired,
-    label,
-    options
-  } = field;
-  const [loading, setLoading] = useState(true);
-  const [resolver, setResolver] = useState(null);
-  const [defaultOptions, setDefaultOptions] = useState([]);
-  const [defaultValue, setDefaultValue] = useState(undefined);
-  useEffect(() => {
-    let cancel = false;
-    async function fetchResolver() {
-      setLoading(true);
-      try {
-        const resolver = await getCustomFieldResolver(extensionManifest, field.options.resolver);
-        if (cancel) {
-          return;
-        }
-        setResolver(() => resolver);
-
-        // fetch the default values
-        const options = await resolver(undefined, fieldDefaultValue, parameters);
-        setDefaultOptions(options);
-        if (cancel) {
-          return;
-        }
-
-        // filter returned values to match the defaultValue
-        if (fieldDefaultValue && isMultiple) {
-          setDefaultValue(options.filter(option => fieldDefaultValue.includes(option.value)));
-        }
-        if (fieldDefaultValue && !isMultiple) {
-          setDefaultValue(options.find(option => fieldDefaultValue === option.value));
-        }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-      }
-      setLoading(false);
-    }
-    fetchResolver();
-    return () => {
-      cancel = true;
-    };
-  }, [extensionManifest, field.options.resolver, fieldDefaultValue, isMultiple, parameters]);
-  function formatCreateLabel(value) {
-    if (!value) {
-      return null;
-    }
-    const message = intl.formatMessage(messages.createOption);
-    return `${message} "${value}"`;
-  }
-  const {
-    isCreatable
-  } = options;
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: label,
-    isRequired: isRequired,
-    defaultValue: defaultValue,
-    validate: value => validate(field, value),
-    testId: `config-panel-custom-select-${name}`
-  }, ({
-    fieldProps,
-    error
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, resolver && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AsyncCreatableSelect, _extends({}, fieldProps, {
-    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: value => !!(isCreatable && value),
-    validationState: error ? 'error' : 'default',
-    defaultOptions: defaultOptions,
-    formatCreateLabel: value => formatCreateLabel(value),
-    formatOptionLabel: formatOptionLabel,
-    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/es2019/plugins/extension/ui/ConfigPanel/Fields/Date.js

@@ -1,50 +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 } from '../utils';
-function Date({
-  name,
-  field,
-  autoFocus,
-  onFieldChange,
-  placeholder,
-  intl
-}) {
-  const {
-    label,
-    description,
-    defaultValue,
-    isRequired
-  } = field;
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: label,
-    defaultValue: defaultValue,
-    isRequired: isRequired,
-    validate: value => validate(field, value),
-    testId: `config-panel-date-picker-${name}`
-  }, ({
-    fieldProps,
-    error
-  }) => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
-      autoFocus: autoFocus,
-      onBlur: () => {
-        fieldProps.onBlur();
-      },
-      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);