@atlaskit/modal-dialog 12.0.2

package/dist/cjs/internal/components/positioner.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _curves = require("@atlaskit/motion/curves");
+
+var _durations = require("@atlaskit/motion/durations");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _constants2 = require("../constants");
+
+/** @jsx jsx */
+var maxWidthDimensions = "calc(100vw - ".concat(_constants2.gutter * 2, "px)");
+var maxHeightDimensions = "calc(100vh - ".concat(_constants2.gutter * 2 - 1, "px)");
+var positionerStyles = (0, _core.css)({
+  width: '100%',
+  maxWidth: '100%',
+  height: '100%',
+  position: 'fixed',
+  zIndex: _constants.layers.modal(),
+  top: 0,
+  left: 0
+});
+var viewportScrollStyles = (0, _core.css)({
+  width: 'max-content',
+  height: 'auto',
+  position: 'relative',
+  '@media (min-width: 480px)': {
+    margin: "".concat(_constants2.gutter, "px auto")
+  }
+});
+var bodyScrollStyles = (0, _core.css)({
+  '@media (min-width: 480px)': {
+    width: 'max-content',
+    maxWidth: maxWidthDimensions,
+    maxHeight: maxHeightDimensions,
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    position: 'absolute',
+    top: "".concat(_constants2.gutter, "px"),
+    right: 0,
+    left: 0,
+    pointerEvents: 'none'
+  }
+});
+var stackTransitionStyles = (0, _core.css)({
+  transitionDuration: "".concat(_durations.mediumDurationMs, "ms"),
+  transitionProperty: 'transform',
+  transitionTimingFunction: _curves.easeInOut,
+
+  /** Duplicated from @atlaskit/motion/accessibility
+   * because @repo/internal/styles/consistent-style-ordering
+   * doesn't work well with object spreading. */
+  '@media (prefers-reduced-motion: reduce)': {
+    animation: 'none',
+    transition: 'none'
+  }
+});
+var stackTransformStyles = (0, _core.css)({
+  transform: 'translateY(var(--modal-dialog-translate-y))'
+});
+var stackIdleStyles = (0, _core.css)({
+  transform: 'none'
+});
+
+var Positioner = function Positioner(props) {
+  var children = props.children,
+      stackIndex = props.stackIndex,
+      shouldScrollInViewport = props.shouldScrollInViewport,
+      testId = props.testId;
+  return (0, _core.jsx)("div", {
+    style: {
+      '--modal-dialog-translate-y': "".concat(stackIndex * (_constants2.verticalOffset / 2), "px")
+    },
+    css: [positionerStyles, stackTransitionStyles,
+    /* We only want to apply transform on modals shifting to the back of the stack. */
+    stackIndex > 0 ? stackTransformStyles : stackIdleStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
+    "data-testid": testId && "".concat(testId, "--positioner")
+  }, children);
+};
+
+var _default = Positioner;
+exports.default = _default;

package/dist/cjs/internal/components/scroll-container.js

@@ -0,0 +1,138 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+
+var _useLazyCallback = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-callback"));
+
+var _useStateRef3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-state-ref"));
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
+var _constants = require("../constants");
+
+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 baseStyles = (0, _core.css)({
+  /**
+   * We need to inherit flex styles from its parent here
+   * in case they're set because we're essentially being a proxy container
+   * between the original flex parent and its children (the modal body).
+   */
+  display: 'inherit',
+  margin: 0,
+  flex: 'inherit',
+  flexDirection: 'inherit',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  '@media (min-width: 480px)': {
+    height: 'unset',
+    overflowY: 'auto'
+  }
+});
+var topKeylineStyles = (0, _core.css)({
+  borderTop: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+});
+var bottomKeylineStyles = (0, _core.css)({
+  borderBottom: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+});
+
+/**
+ * A container that shows top and bottom keylines when the
+ * content overflows into the scrollable element.
+ */
+var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var testId = props.testId,
+      children = props.children;
+
+  var _useStateRef = (0, _useStateRef3.default)({
+    previous: false,
+    next: false
+  }),
+      _useStateRef2 = (0, _slicedToArray2.default)(_useStateRef, 2),
+      hasSiblings = _useStateRef2[0],
+      setSiblings = _useStateRef2[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showContentFocus = _useState2[0],
+      setContentFocus = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showTopKeyline = _useState4[0],
+      setTopKeyline = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showBottomKeyline = _useState6[0],
+      setBottomKeyline = _useState6[1];
+
+  var scrollableRef = (0, _react.useRef)(null);
+  var setLazySiblings = (0, _useLazyCallback.default)(setSiblings);
+  var setLazyContentFocus = (0, _useLazyCallback.default)((0, _rafSchd.default)(function () {
+    var target = scrollableRef.current;
+    target && setContentFocus(target.scrollHeight > target.clientHeight);
+  }));
+  var setLazyKeylines = (0, _useLazyCallback.default)((0, _rafSchd.default)(function () {
+    var target = scrollableRef.current;
+
+    if (target) {
+      var scrollableDistance = target.scrollHeight - target.clientHeight;
+
+      if (hasSiblings.current.previous) {
+        setTopKeyline(target.scrollTop > _constants.keylineHeight);
+      }
+
+      if (hasSiblings.current.next) {
+        setBottomKeyline(target.scrollTop <= scrollableDistance - _constants.keylineHeight);
+      }
+    }
+  }));
+  (0, _react.useEffect)(function () {
+    var target = scrollableRef.current;
+    window.addEventListener('resize', setLazyKeylines, false);
+    target === null || target === void 0 ? void 0 : target.addEventListener('scroll', setLazyKeylines, false);
+    setLazyContentFocus();
+    setLazyKeylines();
+    setLazySiblings({
+      previous: Boolean(target === null || target === void 0 ? void 0 : target.previousElementSibling),
+      next: Boolean(target === null || target === void 0 ? void 0 : target.nextElementSibling)
+    });
+    return function () {
+      window.removeEventListener('resize', setLazyKeylines, false);
+      target === null || target === void 0 ? void 0 : target.removeEventListener('scroll', setLazyKeylines, false);
+    };
+  }, [setLazyContentFocus, setLazyKeylines, setLazySiblings]);
+  return (0, _core.jsx)(_focusRing.default, {
+    isInset: true
+  }, (0, _core.jsx)("div", {
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: showContentFocus ? 0 : undefined,
+    "data-testid": testId && "".concat(testId, "--scrollable"),
+    ref: (0, _mergeRefs.default)([ref, scrollableRef]),
+    css: [baseStyles, showTopKeyline && topKeylineStyles, showBottomKeyline && bottomKeylineStyles]
+  }, children));
+});
+ScrollContainer.displayName = 'ScrollContainer';
+var _default = ScrollContainer;
+exports.default = _default;

package/dist/cjs/internal/constants.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconColor = exports.focusOutlineColor = exports.textColor = exports.keylineColor = exports.keylineHeight = exports.titleIconMargin = exports.footerItemGap = exports.padding = exports.verticalOffset = exports.borderRadius = exports.gutter = exports.width = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var width = {
+  values: ['small', 'medium', 'large', 'x-large'],
+  widths: {
+    small: 400,
+    medium: 600,
+    large: 800,
+    'x-large': 968
+  },
+  defaultValue: 'medium'
+};
+exports.width = width;
+var gutter = 60;
+exports.gutter = gutter;
+var gridSize = (0, _constants.gridSize)();
+var borderRadius = (0, _constants.borderRadius)();
+exports.borderRadius = borderRadius;
+var verticalOffset = gridSize * 2;
+exports.verticalOffset = verticalOffset;
+var padding = gridSize * 3;
+exports.padding = padding;
+var footerItemGap = gridSize;
+exports.footerItemGap = footerItemGap;
+var titleIconMargin = gridSize;
+exports.titleIconMargin = titleIconMargin;
+var keylineHeight = 2;
+exports.keylineHeight = keylineHeight;
+var keylineColor = _colors.N30;
+exports.keylineColor = keylineColor;
+var textColor = (0, _colors.text)();
+exports.textColor = textColor;
+var focusOutlineColor = _colors.N800;
+exports.focusOutlineColor = focusOutlineColor;
+var iconColor = {
+  danger: _colors.R400,
+  warning: _colors.Y400
+};
+exports.iconColor = iconColor;

package/dist/cjs/internal/context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollContext = exports.ModalContext = void 0;
+
+var _react = require("react");
+
+var ModalContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.ModalContext = ModalContext;
+var ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.ScrollContext = ScrollContext;

package/dist/cjs/internal/hooks/use-modal-stack.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useModalStack;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _useLazyCallback = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-callback"));
+
+var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+
+var _useStateRef3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-state-ref"));
+
+var _exitingPersistence = require("@atlaskit/motion/exiting-persistence");
+
+/**
+ *  ________________________________________________
+ * | MAJOR VERSIONS WILL NOT KNOW ABOUT EACH OTHER! |
+ *  ------------------------------------------------
+ *
+ * An array which holds references to all currently open modal dialogs.
+ * This will only work for modal dialogs of the same major version,
+ * as the reference will be different between them.
+ *
+ * E.g. V11 won't know about any from V12.
+ */
+var modalStackRegister = [];
+
+/**
+ * Returns the position of the calling modal dialog in the modal dialog stack.
+ * Stack index of `0` is the highest position in the stack,
+ * with every higher number being behind in the stack.
+ */
+function useModalStack(_ref) {
+  var onStackChange = _ref.onStackChange;
+
+  var _useExitingPersistenc = (0, _exitingPersistence.useExitingPersistence)(),
+      isExiting = _useExitingPersistenc.isExiting;
+
+  var _useStateRef = (0, _useStateRef3.default)(0),
+      _useStateRef2 = (0, _slicedToArray2.default)(_useStateRef, 2),
+      stackIndexRef = _useStateRef2[0],
+      setStackIndex = _useStateRef2[1];
+
+  var currentStackIndex = stackIndexRef.current;
+  var previousStackIndex = (0, _usePreviousValue.default)(stackIndexRef.current); // We want to ensure this function **never changes** during the lifecycle of this component.
+  // This is why it's assigned to a ref and not in a useMemo/useCallback.
+
+  var updateStack = (0, _useLazyCallback.default)(function () {
+    var newStackIndex = modalStackRegister.indexOf(updateStack); // We access the stack index ref instead of state because this closure will always only
+    // have the initial state and not any of the later values.
+
+    if (stackIndexRef.current !== newStackIndex) {
+      setStackIndex(newStackIndex);
+      stackIndexRef.current = newStackIndex;
+    }
+  });
+  (0, _react.useEffect)(function () {
+    var currentStackIndex = modalStackRegister.indexOf(updateStack);
+
+    if (!isExiting && currentStackIndex === -1) {
+      // We are opening the modal dialog.
+      // Add ourselves to the modal stack register!
+      modalStackRegister.unshift(updateStack);
+    }
+
+    if (isExiting && currentStackIndex !== -1) {
+      // We are closing the modal dialog using a wrapping modal transition component.
+      // Remove ourselves from the modal stack register!
+      // NOTE: Modal dialogs that don't have a wrapping modal transition component won't flow through here!
+      // For that scenario we cleanup when the component unmounts.
+      modalStackRegister.splice(currentStackIndex, 1);
+    } // Fire all registered modal dialogs to update their position in the stack.
+
+
+    modalStackRegister.forEach(function (cb) {
+      return cb();
+    });
+  }, [updateStack, isExiting]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      // Final cleanup just in case this modal dialog did not have a wrapping modal transition.
+      var currentStackIndex = modalStackRegister.indexOf(updateStack);
+
+      if (currentStackIndex !== -1) {
+        modalStackRegister.splice(currentStackIndex, 1);
+        modalStackRegister.forEach(function (cb) {
+          return cb();
+        });
+      }
+    };
+  }, [updateStack]);
+  (0, _react.useEffect)(function () {
+    if (previousStackIndex === undefined) {
+      // Initial case that we don't need to notify about.
+      return;
+    }
+
+    if (previousStackIndex !== currentStackIndex) {
+      onStackChange(currentStackIndex);
+    }
+  }, [onStackChange, previousStackIndex, currentStackIndex]);
+  return currentStackIndex;
+}

package/dist/cjs/internal/hooks/use-on-motion-finish.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOnMotionFinish;
+
+var _react = require("react");
+
+function useOnMotionFinish(_ref) {
+  var onOpenComplete = _ref.onOpenComplete,
+      onCloseComplete = _ref.onCloseComplete;
+  var motionRef = (0, _react.useRef)(null);
+  var onMotionFinish = (0, _react.useCallback)(function (state) {
+    if (state === 'entering' && onOpenComplete) {
+      onOpenComplete(motionRef.current, true);
+    }
+
+    if (state === 'exiting' && onCloseComplete) {
+      onCloseComplete(motionRef.current);
+    }
+  }, [onOpenComplete, onCloseComplete]);
+  return [motionRef, onMotionFinish];
+}

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePreventProgrammaticScroll;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _useWindowEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-window-event"));
+
+/**
+ * Returns how far the body is scrolled from the top of the viewport.
+ *
+ *   ____
+ * ||____|| <-- overflow
+ *  |    |  <-- viewport
+ *  |____|
+ *
+ * Scroll distance is the height of overflow outside the viewport.
+ */
+function getScrollDistance() {
+  var _document$documentEle, _document$body;
+
+  return window.pageYOffset || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.scrollTop) || ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.scrollTop) || 0;
+}
+/**
+ * Prevents programatic scrolling of the viewport with `scrollIntoView`.
+ * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
+ *
+ * @returns scroll top offset of the viewport
+ */
+
+
+function usePreventProgrammaticScroll() {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      scrollTopOffset = _useState2[0],
+      setScrollTopOffset = _useState2[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    setScrollTopOffset(getScrollDistance());
+  }, []);
+  var onWindowScroll = (0, _react.useCallback)(function () {
+    if (getScrollDistance() !== scrollTopOffset) {
+      window.scrollTo(window.pageXOffset, scrollTopOffset);
+    }
+  }, [scrollTopOffset]);
+  (0, _useWindowEvent.default)('scroll', onWindowScroll);
+  return scrollTopOffset;
+}