@atlaskit/editor-core 188.3.0 → 188.3.1

package/dist/cjs/plugins/media/ui/PixelEntry/index.js

@@ -1,185 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PixelEntry = exports.FullWidthDisplay = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _form = _interopRequireWildcard(require("@atlaskit/form"));
-var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _constants = require("./constants");
-var _messages = require("./messages");
-var _styles = require("./styles");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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; }
-/** @jsx jsx */
-
-var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
-  var width = _ref.width,
-    mediaWidth = _ref.mediaWidth,
-    mediaHeight = _ref.mediaHeight,
-    onSubmit = _ref.onSubmit,
-    minWidth = _ref.minWidth,
-    maxWidth = _ref.maxWidth,
-    onChange = _ref.onChange,
-    formatMessage = _ref.intl.formatMessage,
-    showMigration = _ref.showMigration,
-    onMigrate = _ref.onMigrate;
-  var ratioWidth = (0, _react.useMemo)(function () {
-    return mediaHeight / mediaWidth;
-  }, [mediaHeight, mediaWidth]);
-  var ratioHeight = (0, _react.useMemo)(function () {
-    return mediaWidth / mediaHeight;
-  }, [mediaHeight, mediaWidth]);
-  var _useState = (0, _react.useState)(width),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    computedWidth = _useState2[0],
-    setComputedWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(Math.round(ratioWidth * width)),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    computedHeight = _useState4[0],
-    setComputedHeight = _useState4[1];
-
-  // Handle update to width from outside component
-  (0, _react.useEffect)(function () {
-    setComputedWidth(width);
-    setComputedHeight(Math.round(ratioWidth * width));
-  }, [width, ratioWidth]);
-
-  // Handle submit when user presses enter in form
-  var handleOnSubmit = function handleOnSubmit(data) {
-    if (data.inputWidth === '' || data.inputHeight === '') {
-      return;
-    }
-    if (onSubmit) {
-      var widthToBeSumitted = data.inputWidth;
-      var validation = 'valid';
-      if (data.inputWidth < minWidth) {
-        widthToBeSumitted = minWidth;
-        validation = 'less-than-min';
-      }
-      if (data.inputWidth > maxWidth) {
-        widthToBeSumitted = maxWidth;
-        validation = 'greater-than-max';
-      }
-
-      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
-      // and won't upadte the state in useEffect (since width is the same)
-      // Thus, we set the state here to always display the correct dimension
-      if (validation !== 'valid') {
-        setComputedWidth(widthToBeSumitted);
-        setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
-      }
-      onSubmit({
-        width: widthToBeSumitted,
-        validation: validation
-      });
-    }
-  };
-
-  // Handle updating computed fields based on
-  var handleOnChange = (0, _react.useCallback)(function (type) {
-    return function (event) {
-      var value = parseInt(event.currentTarget.value);
-      var newInputValue = isNaN(value) ? '' : value;
-      var newWidth = '';
-      switch (type) {
-        case 'inputWidth':
-          {
-            newWidth = newInputValue;
-            setComputedWidth(newInputValue);
-            var newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
-            setComputedHeight(newHeight);
-            break;
-          }
-        case 'inputHeight':
-          {
-            setComputedHeight(newInputValue);
-            newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
-            setComputedWidth(newWidth);
-            break;
-          }
-      }
-      var isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
-      onChange && onChange(isInvalidInputValid);
-    };
-  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
-  if (showMigration) {
-    return (0, _react2.jsx)(_tooltip.default, {
-      content: formatMessage(_messages.messages.migrationButtonTooltip)
-    }, (0, _react2.jsx)(_button.default, {
-      appearance: "warning",
-      spacing: "compact",
-      onClick: onMigrate,
-      testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
-    }, formatMessage(_messages.messages.migrationButtonText)));
-  }
-  return (0, _react2.jsx)("div", {
-    css: _styles.pixelEntryForm
-  }, (0, _react2.jsx)(_form.default, {
-    onSubmit: handleOnSubmit
-  }, function (_ref2) {
-    var formProps = _ref2.formProps;
-    return (0, _react2.jsx)("form", formProps, (0, _react2.jsx)("div", {
-      css: _styles.pixelSizingWrapper
-    }, (0, _react2.jsx)(_form.Field, {
-      key: "inputWidth",
-      name: "inputWidth",
-      defaultValue: computedWidth
-    }, function (_ref3) {
-      var fieldProps = _ref3.fieldProps;
-      return (0, _react2.jsx)(_tooltip.default, {
-        hideTooltipOnMouseDown: true,
-        content: formatMessage(_messages.messages.inputWidthTooltip, {
-          maxWidth: maxWidth
-        }),
-        position: "top"
-      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
-        css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
-        appearance: "none",
-        isCompact: true,
-        onChange: handleOnChange('inputWidth'),
-        pattern: "\\d*",
-        "aria-label": formatMessage(_messages.messages.inputWidthAriaLabel, {
-          maxWidth: maxWidth
-        })
-      })));
-    }), (0, _react2.jsx)("span", {
-      css: _styles.pixelSizingLabel
-    }, "x"), (0, _react2.jsx)(_form.Field, {
-      key: "inputHeight",
-      name: "inputHeight",
-      defaultValue: computedHeight
-    }, function (_ref4) {
-      var fieldProps = _ref4.fieldProps;
-      return (0, _react2.jsx)(_tooltip.default, {
-        hideTooltipOnMouseDown: true,
-        content: formatMessage(_messages.messages.inputHeightTooltip),
-        position: "top"
-      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
-        css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
-        appearance: "none",
-        isCompact: true,
-        onChange: handleOnChange('inputHeight'),
-        pattern: "\\d*",
-        "aria-label": formatMessage(_messages.messages.inputHeightAriaLabel)
-      })));
-    }), (0, _react2.jsx)(_button.default, {
-      css: _styles.pixelEntryHiddenSubmit,
-      type: "submit"
-    }, formatMessage(_messages.messages.submitButtonText))));
-  }));
-};
-var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref5) {
-  var formatMessage = _ref5.intl.formatMessage;
-  return (0, _react2.jsx)("div", {
-    css: _styles.pixelSizingFullWidthLabelStyles
-  }, (0, _react2.jsx)("span", null, formatMessage(_messages.messages.fullWidthLabel)));
-};

package/dist/cjs/plugins/media/ui/PixelEntry/messages.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.messages = void 0;
-var _reactIntlNext = require("react-intl-next");
-var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
-  validationFailedMessage: {
-    id: 'fabric.editor.media.pixelEntry.validationFailedMessage',
-    defaultMessage: 'Validation for width failed',
-    description: 'The passed in validator function returned false'
-  },
-  inputWidthTooltip: {
-    id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
-    defaultMessage: 'Max width {maxWidth}px',
-    description: 'The tooltip displayed ontop of the width input'
-  },
-  inputWidthAriaLabel: {
-    id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
-    defaultMessage: 'Max width {maxWidth}px',
-    description: 'The width input aria label'
-  },
-  inputHeightTooltip: {
-    id: 'fabric.editor.media.pixelEntry.inputHeightTooltip',
-    defaultMessage: 'Height',
-    description: 'The tooltip displayed ontop of the height input'
-  },
-  inputHeightAriaLabel: {
-    id: 'fabric.editor.media.pixelEntry.inputHeightAriaLabel',
-    defaultMessage: 'height input',
-    description: 'The width input aria label'
-  },
-  submitButtonText: {
-    id: 'fabric.editor.media.pixelEntry.submitButtonText',
-    defaultMessage: 'Submit',
-    description: 'The text give to the hidden submit button'
-  },
-  fullWidthLabel: {
-    id: 'fabric.editor.image.fullWidthLabel',
-    defaultMessage: 'Full-width',
-    description: 'The media has reached its maximum width'
-  },
-  migrationButtonText: {
-    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
-    defaultMessage: 'Convert to pixels',
-    description: 'The text give to the button used to covert to pixels for legacy experience'
-  },
-  migrationButtonTooltip: {
-    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
-    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
-    description: 'The tooltip displayed on the migration button'
-  }
-});

package/dist/cjs/plugins/media/ui/PixelEntry/styles.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingLabel = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelSizingFullWidthLabelStyles = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
-var pixelSizingWrapper = exports.pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
-var pixelEntryForm = exports.pixelEntryForm = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  form {\n    width: 100%;\n  }\n"])));
-var pixelSizingInput = exports.pixelSizingInput = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: ", ";\n  & input {\n    text-align: center;\n  }\n"])), "var(--ds-space-300, 24px)");
-var pixelSizingLabel = exports.pixelSizingLabel = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: label;\n  line-height: ", ";\n"])), "var(--ds-space-300, 24px)");
-var pixelSizingWidthInput = exports.pixelSizingWidthInput = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: widthinput;\n"])));
-var pixelSizingHeightInput = exports.pixelSizingHeightInput = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: heightinput;\n"])));
-var pixelEntryHiddenSubmit = exports.pixelEntryHiddenSubmit = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
-var pixelSizingFullWidthLabelStyles = exports.pixelSizingFullWidthLabelStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");

package/dist/cjs/plugins/media/ui/PixelEntry/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ResizableMediaMigrationNotification = void 0;
-var _react = require("@emotion/react");
-var _styles = require("./styles");
-/** @jsx jsx */
-
-var ResizableMediaMigrationNotification = exports.ResizableMediaMigrationNotification = function ResizableMediaMigrationNotification() {
-  return (0, _react.jsx)("div", {
-    "data-testid": "resizable-media-migration-notification",
-    css: [_styles.resizableMediaMigrationNotificationStyle]
-  });
-};