@atlaskit/editor-core 191.0.0 → 191.0.3

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

@@ -1,139 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { Fragment, useState, useEffect, useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
-import { Field } from '@atlaskit/form';
-import { RadioGroup } from '@atlaskit/radio';
-import { DatePicker } from '@atlaskit/datetime-picker';
-import TextField from '@atlaskit/textfield';
-import { messages } from '../messages';
-import FieldMessages from '../FieldMessages';
-import { validate, validateRequired } from '../utils';
-const horizontalFields = css`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-const horizontalFieldWrapper = css`
-  flex-basis: 47%;
-`;
-const hidden = css`
-  display: none;
-`;
-const getFromDefaultValue = (field, attribute) => {
-  if (field.defaultValue) {
-    return field.defaultValue[attribute];
-  }
-};
-const DateField = ({
-  parentField,
-  scope,
-  fieldName,
-  onFieldChange,
-  intl,
-  isRequired
-}) => jsx("div", {
-  css: horizontalFieldWrapper,
-  key: fieldName
-}, jsx(Field, {
-  name: `${scope}.${fieldName}`,
-  label: intl.formatMessage(messages[fieldName]),
-  defaultValue: getFromDefaultValue(parentField, fieldName),
-  isRequired: isRequired,
-  validate: value => {
-    return validateRequired({
-      isRequired
-    }, value);
-  }
-}, ({
-  fieldProps,
-  error
-}) => jsx(Fragment, null, jsx(DatePicker, _extends({}, fieldProps, {
-  onChange: date => {
-    fieldProps.onChange(date);
-    onFieldChange(parentField.name, true);
-  },
-  locale: intl.locale
-})), jsx(FieldMessages, {
-  error: error
-}))));
-const DateRange = function ({
-  name,
-  field,
-  onFieldChange,
-  intl
-}) {
-  const items = useMemo(() => {
-    return [...(field.items || []), {
-      label: intl.formatMessage(messages.custom),
-      value: 'custom'
-    }].map(option => ({
-      ...option,
-      name
-    }));
-  }, [field.items, name, intl]);
-  const [currentValue, setCurrentValue] = useState(getFromDefaultValue(field, 'value') || items[0].value);
-  useEffect(() => {
-    // calling onBlur here based on the currentValue changing will ensure that we
-    // get the most up to date value after the form has been rendered
-    onFieldChange(name, true);
-  }, [currentValue, onFieldChange, name]);
-  const element = jsx(Fragment, null, jsx("div", {
-    css: hidden
-  }, jsx(Field, {
-    name: `${name}.type`,
-    defaultValue: 'date-range'
-  }, ({
-    fieldProps
-  }) => jsx(TextField, _extends({}, fieldProps, {
-    type: "hidden"
-  })))), jsx(Field, {
-    name: `${name}.value`,
-    label: field.label,
-    defaultValue: currentValue,
-    isRequired: field.isRequired,
-    validate: value => validate(field, value || ''),
-    testId: `config-panel-date-range-${name}`
-  }, ({
-    fieldProps,
-    error
-  }) => jsx(Fragment, null, jsx(RadioGroup, _extends({}, fieldProps, {
-    options: items,
-    onChange: event => {
-      fieldProps.onChange(event.target.value);
-      setCurrentValue(event.target.value);
-    }
-  })), jsx(FieldMessages, {
-    error: error
-  }))), currentValue !== 'custom' ? jsx("div", {
-    css: hidden
-  }, jsx(Field, {
-    name: `${name}.from`,
-    defaultValue: currentValue
-  }, ({
-    fieldProps
-  }) => jsx(TextField, _extends({}, fieldProps, {
-    type: "hidden"
-  })))) : jsx("div", {
-    css: horizontalFields
-  }, jsx(DateField, {
-    scope: name,
-    parentField: field,
-    fieldName: "from",
-    onFieldChange: onFieldChange,
-    intl: intl,
-    isRequired: field.isRequired
-  }), jsx(DateField, {
-    scope: name,
-    parentField: field,
-    fieldName: "to",
-    onFieldChange: onFieldChange,
-    intl: intl,
-    isRequired: field.isRequired
-  })), jsx(FieldMessages, {
-    description: field.description
-  }));
-  return element;
-};
-export default injectIntl(DateRange);

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import CheckboxGroup from './CheckboxGroup';
-import RadioGroup from './RadioGroup';
-import Select from './Select';
-export default function Enum({
-  name,
-  field,
-  autoFocus,
-  onFieldChange,
-  fieldDefaultValue
-}) {
-  switch (field.style) {
-    case 'checkbox':
-      return /*#__PURE__*/React.createElement(CheckboxGroup, {
-        name: name,
-        field: field,
-        onFieldChange: onFieldChange
-      });
-    case 'radio':
-      return /*#__PURE__*/React.createElement(RadioGroup, {
-        name: name,
-        field: field,
-        onFieldChange: onFieldChange
-      });
-    case 'select':
-      return /*#__PURE__*/React.createElement(Select, {
-        name: name,
-        field: field,
-        onFieldChange: onFieldChange,
-        placeholder: field.placeholder,
-        autoFocus: autoFocus,
-        fieldDefaultValue: fieldDefaultValue
-      });
-  }
-}

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

@@ -1,69 +0,0 @@
-/** @jsx jsx */
-import React, { useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
-import { N40 } from '@atlaskit/theme/colors';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
-import Button from '@atlaskit/button';
-import { messages } from '../messages';
-export const expandContainer = css`
-  border-bottom: 1px solid ${`var(--ds-border, ${N40})`};
-`;
-export const expandControl = css`
-  display: flex;
-  height: ${"var(--ds-space-600, 48px)"};
-  justify-content: center;
-  padding-right: ${"var(--ds-space-100, 8px)"};
-`;
-const chevronContainer = css`
-  display: flex;
-  align-items: center;
-
-  & > button {
-    width: ${"var(--ds-space-300, 24px)"};
-    height: ${"var(--ds-space-300, 24px)"};
-  }
-`;
-const labelContainer = css`
-  width: 100%;
-  align-items: center;
-  display: flex;
-  font-weight: 500;
-`;
-const expandContentContainer = isHidden => css`
-  display: ${isHidden ? 'none' : 'block'};
-  margin-top: ${"var(--ds-space-negative-100, -8px)"};
-`;
-function Expand({
-  field,
-  children,
-  isExpanded = false,
-  intl
-}) {
-  const [expanded, setExpanded] = useState(isExpanded);
-  return jsx("div", {
-    "data-testid": "expand-config-field",
-    css: expandContainer
-  }, jsx("div", {
-    css: expandControl
-  }, jsx("div", {
-    css: labelContainer
-  }, field.label), jsx("div", {
-    css: chevronContainer
-  }, jsx(Button, {
-    onClick: () => {
-      setExpanded(!expanded);
-    },
-    testId: "form-expand-toggle",
-    iconBefore: expanded ? jsx(ChevronDownIcon, {
-      label: intl.formatMessage(messages.collapse)
-    }) : jsx(ChevronRightIcon, {
-      label: intl.formatMessage(messages.expand)
-    })
-  }))), jsx("div", {
-    "data-testid": "expand-content-container",
-    css: expandContentContainer(!expanded)
-  }, children));
-}
-export default injectIntl(Expand);

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

@@ -1,226 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import React, { Fragment } from 'react';
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
-import SectionMessage from '@atlaskit/section-message';
-import Button from '@atlaskit/button/custom-theme-button';
-import Select from '@atlaskit/select';
-import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
-import { messages } from '../messages';
-import { getNameFromDuplicateField, isDuplicateField } from '../utils';
-import { N40A } from '@atlaskit/theme/colors';
-const actionsWrapper = css`
-  border-top: 1px solid ${`var(--ds-border, ${N40A})`};
-  margin-top: ${"var(--ds-space-200, 16px)"};
-  padding-top: ${"var(--ds-space-200, 16px)"};
-`;
-const populateFromParameters = (parameters, fields) => {
-  if (Object.keys(parameters).length) {
-    const keys = Object.keys(parameters);
-    const existingFieldKeys = keys.filter(key => fields.find(field => field.name === getNameFromDuplicateField(key)));
-    if (existingFieldKeys.length > 0) {
-      return existingFieldKeys;
-    }
-  }
-};
-const populateFromRequired = fields => {
-  return fields.filter(field => field.isRequired).map(field => field.name);
-};
-const getInitialFields = (parameters = {}, fields, isDynamic) => {
-  if (!isDynamic) {
-    return new Set(fields.map(field => field.name));
-  }
-  const dynamicFields = [];
-  const fromRequired = populateFromRequired(fields);
-  if (fromRequired) {
-    dynamicFields.push(...fromRequired);
-  }
-  const fromParameters = populateFromParameters(parameters, fields);
-  if (fromParameters) {
-    dynamicFields.push(...fromParameters);
-  }
-  if (dynamicFields.length === 0 && Array.isArray(fields) && fields.length > 0) {
-    dynamicFields.push(fields[0].name);
-  }
-  return new Set(dynamicFields);
-};
-class FieldsetField extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "getSelectedFields", visibleFields => {
-      const {
-        field
-      } = this.props;
-      return [...visibleFields].map(fieldName => {
-        const originalFieldDef = field.fields.find(field => field.name === getNameFromDuplicateField(fieldName));
-        const fieldDef = {
-          ...originalFieldDef,
-          name: fieldName
-        };
-        // for duplicate fields we only want the first one to actually be required
-        if (originalFieldDef.name !== fieldName && fieldDef.isRequired === true) {
-          fieldDef.isRequired = false;
-        }
-        return fieldDef;
-      });
-    });
-    _defineProperty(this, "getSelectOptions", visibleFields => {
-      const {
-        field
-      } = this.props;
-      return field.fields.filter(field => field.allowDuplicates || !visibleFields.has(field.name)).map(field => ({
-        value: field.name,
-        label: field.label
-      }));
-    });
-    _defineProperty(this, "setIsAdding", value => {
-      this.setState(state => ({
-        ...state,
-        isAdding: value
-      }));
-    });
-    _defineProperty(this, "setCurrentParameters", parameters => {
-      this.setState(state => ({
-        ...state,
-        currentParameters: parameters
-      }),
-      // callback required so autosave can be triggered on
-      // the right moment if fields are being removed
-      () => this.props.onFieldChange(this.props.field.name, true));
-    });
-    _defineProperty(this, "setVisibleFields", fields => {
-      this.setState(state => ({
-        ...state,
-        visibleFields: fields,
-        selectedFields: this.getSelectedFields(fields),
-        selectOptions: this.getSelectOptions(fields)
-      }));
-    });
-    _defineProperty(this, "onSelectItem", option => {
-      const {
-        visibleFields
-      } = this.state;
-      let newItem = option.value;
-      const duplicates = [...visibleFields].filter(field => getNameFromDuplicateField(field) === newItem);
-      if (duplicates.length > 0) {
-        newItem += `:${duplicates.length}`;
-      }
-      this.setVisibleFields(new Set([...visibleFields, newItem]));
-      this.setIsAdding(false);
-    });
-    _defineProperty(this, "onClickRemove", fieldName => {
-      const {
-        visibleFields,
-        currentParameters
-      } = this.state;
-      visibleFields.delete(fieldName);
-      this.setVisibleFields(new Set(visibleFields));
-      const newParameters = {
-        ...currentParameters
-      };
-      delete newParameters[fieldName];
-      // if any there are duplicate fields that come after the one removed, we want to reduce their
-      // duplicate index eg. label:2 -> label:1
-      if (isDuplicateField(fieldName)) {
-        const [key, idx] = fieldName.split(':');
-        let currentIdx = +idx;
-        while (currentParameters[`${key}:${currentIdx + 1}`]) {
-          newParameters[`${key}:${currentIdx}`] = currentParameters[`${key}:${currentIdx + 1}`];
-          currentIdx++;
-        }
-        delete newParameters[`${key}:${currentIdx}`];
-      }
-      this.setCurrentParameters(newParameters);
-    });
-    _defineProperty(this, "renderActions", () => {
-      const {
-        intl
-      } = this.props;
-      const {
-        selectOptions,
-        isAdding
-      } = this.state;
-      if (selectOptions.length === 0) {
-        return null;
-      }
-      return jsx(React.Fragment, null, isAdding ? jsx(Select, {
-        testId: "field-picker",
-        defaultMenuIsOpen: true,
-        autoFocus: true,
-        placeholder: intl.formatMessage(messages.addField),
-        options: selectOptions,
-        onChange: option => {
-          if (option) {
-            this.onSelectItem(option);
-          }
-        }
-      }) : jsx(Button, {
-        testId: "add-more",
-        appearance: "subtle",
-        iconBefore: jsx(AddCircleIcon, {
-          size: "small",
-          label: intl.formatMessage(messages.addField)
-        }),
-        onClick: () => this.setIsAdding(true)
-      }, intl.formatMessage(messages.addField)));
-    });
-    const initialFields = getInitialFields(props.parameters, props.field.fields, props.field.options.isDynamic);
-    this.state = {
-      isAdding: false,
-      currentParameters: props.parameters || {},
-      visibleFields: initialFields,
-      selectedFields: this.getSelectedFields(initialFields),
-      selectOptions: this.getSelectOptions(initialFields)
-    };
-  }
-  render() {
-    const {
-      name,
-      field,
-      extensionManifest,
-      onFieldChange,
-      firstVisibleFieldName,
-      error,
-      formComponent: FormComponent
-    } = this.props;
-    const {
-      label,
-      options
-    } = field;
-    const {
-      selectedFields,
-      currentParameters,
-      visibleFields
-    } = this.state;
-    const children = this.renderActions();
-    return jsx(Fragment, null, error && jsx(FieldsetError, {
-      message: error
-    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
-      fields: selectedFields,
-      parentName: name,
-      extensionManifest: extensionManifest,
-      parameters: currentParameters,
-      canRemoveFields: field.options.isDynamic && visibleFields.size > 1,
-      onClickRemove: this.onClickRemove,
-      onFieldChange: onFieldChange,
-      firstVisibleFieldName: firstVisibleFieldName
-    }), children && jsx("div", {
-      css: actionsWrapper,
-      "data-testId": "fieldset-actions"
-    }, children)));
-  }
-}
-function FieldsetError({
-  message
-}) {
-  return jsx("div", {
-    css: sectionMessageWrapper
-  }, jsx(SectionMessage, {
-    appearance: "error"
-  }, jsx("p", null, message)));
-}
-const sectionMessageWrapper = css`
-  margin-bottom: ${"var(--ds-space-300, 24px)"};
-`;
-export default injectIntl(FieldsetField);

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

@@ -1,61 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Field } from '@atlaskit/form';
-import TextField from '@atlaskit/textfield';
-import FieldMessages from '../FieldMessages';
-import { validate } from '../utils';
-import { ValidationError } from '../types';
-import isNumber from 'is-number';
-export default function Number({
-  name,
-  field,
-  autoFocus,
-  onFieldChange,
-  placeholder
-}) {
-  const {
-    label,
-    description,
-    defaultValue,
-    isRequired
-  } = field;
-  function validateNumber(value) {
-    const error = validate(field, value || '');
-    if (error) {
-      return error;
-    }
-    if (value === '') {
-      return;
-    }
-    if (isNumber(value)) {
-      return;
-    }
-    return ValidationError.Invalid;
-  }
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: label,
-    defaultValue: defaultValue === undefined ? '' : String(defaultValue),
-    isRequired: isRequired,
-    validate: validateNumber,
-    testId: `config-panel-number-${name}`
-  }, ({
-    fieldProps,
-    error,
-    meta
-  }) => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
-      autoFocus: autoFocus,
-      onBlur: () => {
-        fieldProps.onBlur();
-        onFieldChange(name, meta.dirty);
-      },
-      type: "text" // do not change this to type="number", it will return invalid strings as ''
-      ,
-      placeholder: placeholder
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
-      error: error,
-      description: description
-    }));
-  });
-}

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

@@ -1,40 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { Fragment } from 'react';
-import { Field } from '@atlaskit/form';
-import { RadioGroup } from '@atlaskit/radio';
-import FieldMessages from '../FieldMessages';
-import { FieldTypeError } from '../types';
-import { validate } from '../utils';
-export default function RadioField({
-  name,
-  field,
-  onFieldChange
-}) {
-  if (field.isMultiple) {
-    return /*#__PURE__*/React.createElement(FieldMessages, {
-      error: FieldTypeError.isMultipleAndRadio
-    });
-  }
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: field.label,
-    defaultValue: field.defaultValue,
-    isRequired: field.isRequired,
-    validate: value => validate(field, value),
-    testId: `config-panel-radio-group-${field.name}`
-  }, ({
-    fieldProps,
-    error
-  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
-    options: (field.items || []).map(option => ({
-      ...option,
-      name: field.name
-    })),
-    onChange: value => {
-      fieldProps.onChange(value);
-      onFieldChange(field.name, true);
-    }
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
-    error: error
-  })));
-}

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

@@ -1,50 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { Fragment } from 'react';
-import { Field } from '@atlaskit/form';
-import Select from '@atlaskit/select';
-import FieldMessages from '../FieldMessages';
-import { validate, getOptionFromValue } from '../utils';
-import { formatOptionLabel } from './SelectItem';
-export default function SelectField({
-  name,
-  field,
-  onFieldChange,
-  autoFocus,
-  placeholder,
-  fieldDefaultValue
-}) {
-  //ignore arrays as mutli-value select fields are always clearable
-  const hasValidSingleDefaultValue = !Array.isArray(fieldDefaultValue) && fieldDefaultValue !== undefined;
-  const isClearable = !hasValidSingleDefaultValue || field.isMultiple;
-  return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    label: field.label,
-    defaultValue: getOptionFromValue(field.items, field.defaultValue),
-    testId: `config-panel-select-${name}`,
-    isRequired: field.isRequired,
-    validate: value => {
-      return validate(field, value);
-    }
-  }, ({
-    fieldProps,
-    error
-  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, fieldProps, {
-    onChange: value => {
-      fieldProps.onChange(value);
-      onFieldChange(name, true);
-    }
-    // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
-    ,
-    isMulti: field.isMultiple || false,
-    options: field.items || [],
-    isClearable: isClearable,
-    validationState: error ? 'error' : 'default',
-    formatOptionLabel: formatOptionLabel,
-    autoFocus: autoFocus,
-    menuPlacement: "auto",
-    placeholder: placeholder
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
-    error: error,
-    description: field.description
-  })));
-}

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

@@ -1,47 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import Avatar from '@atlaskit/avatar';
-const itemWrapper = css`
-  display: flex;
-  align-items: center;
-
-  small {
-    margin: 0;
-    display: block;
-    color: currentColor;
-  }
-`;
-const iconWrapper = css`
-  line-height: 1;
-`;
-const iconWrapperMenu = css`
-  align-self: flex-start;
-  margin-top: 3px;
-`;
-const getIconSize = (context, description) => {
-  if (context === 'value' || !description) {
-    return 'xsmall';
-  }
-  return 'small';
-};
-export const formatOptionLabel = ({
-  label,
-  icon,
-  description
-}, {
-  context
-}) => {
-  return jsx("div", {
-    css: itemWrapper
-  }, jsx("span", {
-    css: [iconWrapper, context === 'menu' && iconWrapperMenu]
-  }, typeof icon === 'string' ? jsx(Avatar, {
-    src: icon,
-    size: getIconSize(context, description),
-    appearance: "square"
-  }) : icon), jsx("div", {
-    style: {
-      paddingLeft: icon ? "var(--ds-space-100, 8px)" : 0
-    }
-  }, jsx("p", null, label, description && context !== 'value' && jsx("small", null, description))));
-};