@atlaskit/modal-dialog 12.0.2

package/dist/cjs/internal/hooks/use-scroll.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScroll;
+
+var _react = require("react");
+
+var _context = require("../context");
+
+function useScroll() {
+  var shouldScrollInViewport = (0, _react.useContext)(_context.ScrollContext);
+
+  if (shouldScrollInViewport == null) {
+    throw Error('@atlaskit/modal-dialog: Scroll context unavailable – this component needs to be a child of ModalDialog.');
+  }
+
+  return shouldScrollInViewport;
+}

package/dist/cjs/internal/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dialogHeight = exports.dialogWidth = void 0;
+
+var _constants = require("./constants");
+
+var dialogWidth = function dialogWidth(input) {
+  if (!input) {
+    return 'auto';
+  }
+
+  var isWidthName = _constants.width.values.indexOf(input.toString()) !== -1;
+  var widthName = isWidthName && input;
+
+  if (widthName) {
+    return "".concat(_constants.width.widths[widthName], "px");
+  }
+
+  return typeof input === 'number' ? "".concat(input, "px") : input;
+};
+
+exports.dialogWidth = dialogWidth;
+
+var dialogHeight = function dialogHeight(input) {
+  if (!input) {
+    return 'auto';
+  }
+
+  return typeof input === 'number' ? "".concat(input, "px") : input;
+};
+
+exports.dialogHeight = dialogHeight;

package/dist/cjs/modal-body.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _reactScrolllock = require("react-scrolllock");
+
+var _hooks = require("./hooks");
+
+var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
+
+var _constants = require("./internal/constants");
+
+var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
+
+/** @jsx jsx */
+var bodyStyles = (0, _core.css)({
+  /* This ensures the body fills the whole space between header and footer. */
+  flex: '1 1 auto'
+});
+/**
+ * Adding the padding here avoids cropping the keyline on its sides.
+ * The combined vertical spacing is maintained by subtracting the
+ * keyline height from header and footer. */
+
+var bodyScrollStyles = (0, _core.css)({
+  padding: "".concat(_constants.keylineHeight, "px ").concat(_constants.padding, "px")
+});
+/**
+ * Keylines will not be shown if scrolling in viewport so we do
+ * not account for them in this case. */
+
+var viewportScrollStyles = (0, _core.css)({
+  padding: "0px ".concat(_constants.padding, "px")
+});
+
+var ModalBody = function ModalBody(props) {
+  var children = props.children,
+      userDefinedTestId = props.testId;
+
+  var _useModal = (0, _hooks.useModal)(),
+      modalTestId = _useModal.testId;
+
+  var shouldScrollInViewport = (0, _useScroll.default)();
+  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
+  return shouldScrollInViewport ? (0, _core.jsx)("div", {
+    css: [bodyStyles, viewportScrollStyles],
+    "data-testid": testId
+  }, children) : (0, _core.jsx)(_reactScrolllock.TouchScrollable, null, (0, _core.jsx)(_scrollContainer.default, {
+    testId: userDefinedTestId || modalTestId
+  }, (0, _core.jsx)("div", {
+    css: [bodyStyles, bodyScrollStyles],
+    "data-testid": testId
+  }, children)));
+};
+
+var _default = ModalBody;
+exports.default = _default;

package/dist/cjs/modal-footer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _hooks = require("./hooks");
+
+var _constants = require("./internal/constants");
+
+/** @jsx jsx */
+var footerStyles = (0, _core.css)({
+  display: 'flex',
+  padding: _constants.padding,
+  paddingTop: "".concat(_constants.padding - _constants.keylineHeight, "px"),
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: "".concat(_constants.footerItemGap, "px")
+});
+
+var ModalFooter = function ModalFooter(props) {
+  var children = props.children,
+      userDefinedTestId = props.testId;
+
+  var _useModal = (0, _hooks.useModal)(),
+      modalTestId = _useModal.testId;
+
+  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--footer");
+  return (0, _core.jsx)("div", {
+    css: footerStyles,
+    "data-testid": testId
+  }, children);
+};
+
+var _default = ModalFooter;
+exports.default = _default;

package/dist/cjs/modal-header.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _hooks = require("./hooks");
+
+var _constants = require("./internal/constants");
+
+/** @jsx jsx */
+var headerStyles = (0, _core.css)({
+  display: 'flex',
+  padding: _constants.padding,
+  paddingBottom: "".concat(_constants.padding - _constants.keylineHeight, "px"),
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+var ModalHeader = function ModalHeader(props) {
+  var children = props.children,
+      userDefinedTestId = props.testId;
+
+  var _useModal = (0, _hooks.useModal)(),
+      modalTestId = _useModal.testId;
+
+  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--header");
+  return (0, _core.jsx)("div", {
+    css: headerStyles,
+    "data-testid": testId
+  }, children);
+};
+
+var _default = ModalHeader;
+exports.default = _default;

package/dist/cjs/modal-title.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _hooks = require("./hooks");
+
+var _constants = require("./internal/constants");
+
+/** @jsx jsx */
+var fontSize = 20;
+var lineHeight = 1;
+var adjustedLineHeight = 1.2;
+var titleStyles = (0, _core.css)({
+  display: 'flex',
+  minWidth: 0,
+  margin: 0,
+  alignItems: 'center',
+  fontSize: "".concat(fontSize, "px"),
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: "-0.008em",
+  lineHeight: lineHeight
+});
+var textStyles = (0, _core.css)({
+  minWidth: 0,
+
+  /**
+   * This ensures that the element fills the whole header space
+   * and its content does not overflow (since flex items don't
+   * shrink past its content size by default). */
+  flex: '1 1 auto',
+  wordWrap: 'break-word'
+});
+var iconStyles = (0, _core.css)({
+  marginRight: "".concat(_constants.titleIconMargin, "px"),
+
+  /* Keeps the size of the icon the same, in case the text element grows in width. */
+  flex: '0 0 auto'
+});
+/**
+ * When the title is truncated (not multi-line), we adjust the
+ * line height to avoid cropping the descenders. This removes
+ * the extra spacing that we get from that adjustment. */
+
+var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
+var truncatedTextStyles = (0, _core.css)({
+  marginTop: "".concat(lineHeightOffset / 2, "px"),
+  marginBottom: "".concat(lineHeightOffset / 2, "px"),
+  lineHeight: adjustedLineHeight,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var truncatedTextIconStyles = (0, _core.css)({
+  marginBottom: "".concat(lineHeightOffset / 2, "px"),
+  lineHeight: 1.2
+});
+
+var TitleIcon = function TitleIcon(_ref) {
+  var appearance = _ref.appearance,
+      isMultiline = _ref.isMultiline;
+  var Icon = appearance === 'danger' ? _error.default : _warning.default;
+  return (0, _core.jsx)("span", {
+    css: [iconStyles, !isMultiline && truncatedTextIconStyles]
+  }, (0, _core.jsx)(Icon, {
+    label: "".concat(appearance, " icon"),
+    primaryColor: _constants.iconColor[appearance]
+  }));
+};
+
+var ModalTitle = function ModalTitle(props) {
+  var appearance = props.appearance,
+      children = props.children,
+      _props$isMultiline = props.isMultiline,
+      isMultiline = _props$isMultiline === void 0 ? true : _props$isMultiline,
+      userDefinedTestId = props.testId;
+
+  var _useModal = (0, _hooks.useModal)(),
+      titleId = _useModal.titleId,
+      modalTestId = _useModal.testId;
+
+  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
+  return (0, _core.jsx)("h1", {
+    css: titleStyles,
+    "data-testid": testId
+  }, appearance && (0, _core.jsx)(TitleIcon, {
+    appearance: appearance,
+    isMultiline: isMultiline
+  }), (0, _core.jsx)("span", {
+    id: titleId,
+    css: [textStyles, !isMultiline && truncatedTextStyles],
+    "data-testid": testId && "".concat(testId, "-text")
+  }, children));
+};
+
+var _default = ModalTitle;
+exports.default = _default;

package/dist/cjs/modal-transition.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
+
+var ModalTransition = function ModalTransition(props) {
+  return /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, {
+    appear: true
+  }, props.children);
+};
+
+var _default = ModalTransition;
+exports.default = _default;

package/dist/cjs/modal-wrapper.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+
+var _reactScrolllock = _interopRequireWildcard(require("react-scrolllock"));
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
+
+var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _modalDialog = _interopRequireDefault(require("./internal/components/modal-dialog"));
+
+var _useModalStack = _interopRequireDefault(require("./internal/hooks/use-modal-stack"));
+
+var _usePreventProgrammaticScroll = _interopRequireDefault(require("./internal/hooks/use-prevent-programmatic-scroll"));
+
+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 fillScreenStyles = (0, _core.css)({
+  width: '100vw',
+  height: '100vh',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  overflowY: 'auto',
+  WebkitOverflowScrolling: 'touch'
+});
+
+var ModalWrapper = function ModalWrapper(props) {
+  var _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+      _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
+      shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
+      _props$shouldCloseOnO = props.shouldCloseOnOverlayClick,
+      shouldCloseOnOverlayClick = _props$shouldCloseOnO === void 0 ? true : _props$shouldCloseOnO,
+      _props$shouldScrollIn = props.shouldScrollInViewport,
+      shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
+      stackIndexOverride = props.stackIndex,
+      _props$onClose = props.onClose,
+      onClose = _props$onClose === void 0 ? _noop.default : _props$onClose,
+      _props$onStackChange = props.onStackChange,
+      onStackChange = _props$onStackChange === void 0 ? _noop.default : _props$onStackChange,
+      isBlanketHidden = props.isBlanketHidden,
+      testId = props.testId,
+      modalDialogProps = (0, _objectWithoutProperties2.default)(props, ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"]);
+  var calculatedStackIndex = (0, _useModalStack.default)({
+    onStackChange: onStackChange
+  });
+  var stackIndex = stackIndexOverride || calculatedStackIndex;
+  var isForeground = stackIndex === 0; // When a user supplies a ref to focus we skip auto focus via react-focus-lock
+
+  var autoFocusLock = typeof autoFocus === 'boolean' ? autoFocus : false;
+  var onCloseHandler = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: onClose,
+    action: 'closed',
+    componentName: 'modalDialog',
+    packageName: "@atlaskit/modal-dialog",
+    packageVersion: "12.0.2"
+  });
+  var onBlanketClicked = (0, _react.useCallback)(function (e) {
+    if (shouldCloseOnOverlayClick) {
+      onCloseHandler(e);
+    }
+  }, [shouldCloseOnOverlayClick, onCloseHandler]);
+  (0, _usePreventProgrammaticScroll.default)();
+  (0, _useCloseOnEscapePress.default)({
+    onClose: onCloseHandler,
+    isDisabled: !shouldCloseOnEscapePress || !isForeground
+  });
+  var modalDialogWithBlanket = (0, _core.jsx)(_blanket.default, {
+    isTinted: !isBlanketHidden,
+    onBlanketClicked: onBlanketClicked,
+    testId: testId && "".concat(testId, "--blanket")
+  }, (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({
+    testId: testId,
+    autoFocus: autoFocus,
+    stackIndex: stackIndex,
+    onClose: onCloseHandler,
+    shouldScrollInViewport: shouldScrollInViewport
+  }, modalDialogProps)));
+  return (0, _core.jsx)(_portal.default, {
+    zIndex: _constants.layers.modal()
+  }, (0, _core.jsx)(_fadeIn.default, null, function (fadeInProps) {
+    return (0, _core.jsx)("div", (0, _extends2.default)({}, fadeInProps, {
+      css: fillScreenStyles,
+      "aria-hidden": !isForeground
+    }), (0, _core.jsx)(_reactFocusLock.default, {
+      autoFocus: autoFocusLock,
+      disabled: !isForeground,
+      returnFocus: true
+    }, (0, _core.jsx)(_reactScrolllock.default, null), shouldScrollInViewport ? (0, _core.jsx)(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
+  }));
+};
+
+var _default = ModalWrapper;
+exports.default = _default;