@atlaskit/modal-dialog 12.0.2

package/codemods/migrations/remove-appearance-prop.ts

@@ -0,0 +1,27 @@
+import core, { ASTPath, Collection, JSXAttribute } from 'jscodeshift/src/core';
+
+import {
+  getDefaultSpecifier,
+  getJSXAttributesByName,
+} from '@atlaskit/codemod-utils';
+
+import { APPEARANCE_PROP_NAME, PACKAGE_NAME } from '../internal/constants';
+
+export const removeAppearanceProp = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source.findJSXElements(defaultSpecifier).forEach((element) => {
+    getJSXAttributesByName(j, element, APPEARANCE_PROP_NAME).forEach(
+      (attribute: ASTPath<JSXAttribute>) => {
+        j(attribute).remove();
+      },
+    );
+  });
+};

package/codemods/migrations/remove-component-override-props.ts

@@ -0,0 +1,84 @@
+import core, { ASTPath, JSXElement } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  addCommentToStartOfFile,
+  getDefaultSpecifier,
+  getJSXAttributesByName,
+  hasJSXAttributesByName,
+} from '@atlaskit/codemod-utils';
+
+import {
+  BODY_PROP_NAME,
+  COMPONENTS_PROP_NAME,
+  FOOTER_PROP_NAME,
+  HEADER_PROP_NAME,
+  PACKAGE_NAME,
+} from '../internal/constants';
+
+// TODO: Double-check the link to the customization docs after DSP-536 is completed.
+const comment = `
+We have converted this file as best we could but you might still need
+to manually complete migrating this usage of ModalDialog.
+
+This file uses one or more of the following ModalDialog props: 'components', 'header',
+'footer', 'body'. These props have been removed as part of moving to
+a compositional API.
+
+The render props that used to be exposed by the custom component APIs are
+now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+We are also no longer exposing 'appearance' as render prop, so this needs to be
+manually passed to your custom components.
+
+If you are using the 'container' value of 'components' to wrap ModalDialog in something
+other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+For a complete guide on customization using the new compositional API, refer to the docs at
+https://atlassian.design/components/modal-dialog/examples.
+`;
+
+export const removeComponentOverrideProps = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  let hasAttributesToRemove;
+  const attributeNames = [
+    BODY_PROP_NAME,
+    COMPONENTS_PROP_NAME,
+    FOOTER_PROP_NAME,
+    HEADER_PROP_NAME,
+  ];
+
+  source.findJSXElements(defaultSpecifier).forEach((element) => {
+    hasAttributesToRemove = attributeNames.find((attributeName) =>
+      hasJSXAttributesByName(j, element, attributeName),
+    );
+
+    attributeNames.forEach((attributeName) =>
+      removeAttribute(j, element, attributeName),
+    );
+  });
+
+  if (hasAttributesToRemove) {
+    addCommentToStartOfFile({ j, base: source, message: comment });
+  }
+};
+
+const removeAttribute = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  attributeName: string,
+) => {
+  getJSXAttributesByName(j, element, attributeName).forEach(
+    (attribute: any) => {
+      j(attribute).remove();
+    },
+  );
+};

package/codemods/migrations/remove-is-chromeless.tsx

@@ -0,0 +1,42 @@
+import core, { Collection } from 'jscodeshift/src/core';
+
+import {
+  addCommentBefore,
+  getDefaultSpecifier,
+  getJSXAttributesByName,
+} from '@atlaskit/codemod-utils';
+
+import { IS_CHROMELESS_PROP_NAME, PACKAGE_NAME } from '../internal/constants';
+
+const comment = `
+ModalDialog has a new compositional API and the 'isChromeless' prop is no longer supported.
+To have the functionality of the 'isChromeless' prop, you can choose to not use any of the default exports (ModalBody, ModalHeader and ModalFooter).
+The only other change is that ModalDialog's children should have a border radius of 3px to match the box shadow.
+For more information, check the documentation at https://atlassian.design/components/modal-dialog/examples`;
+
+export const removeIsChromeless = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source.findJSXElements(defaultSpecifier).forEach((element) => {
+    getJSXAttributesByName(j, element, IS_CHROMELESS_PROP_NAME).forEach(
+      (attribute: any) => {
+        // if values is true then add comment before removing
+        if (
+          attribute.node.value === null ||
+          (attribute.node.value.expression &&
+            attribute.node.value.expression.value !== false)
+        ) {
+          addCommentBefore(j, j(element), comment);
+        }
+        j(attribute).remove();
+      },
+    );
+  });
+};

package/codemods/migrations/rename-appearance-type.ts

@@ -0,0 +1,9 @@
+import { renameNamedImportWithAliasName } from '@atlaskit/codemod-utils';
+
+import { PACKAGE_NAME } from '../internal/constants';
+
+export const renameAppearanceType = renameNamedImportWithAliasName(
+  PACKAGE_NAME,
+  'AppearanceType',
+  'Appearance',
+);

package/codemods/migrations/rename-inner-component-prop-types.ts

@@ -0,0 +1,28 @@
+import core from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { renameNamedImportWithAliasName as createAliasImportFor } from '@atlaskit/codemod-utils';
+
+import {
+  MODAL_BODY_TYPE_NAME,
+  MODAL_FOOTER_TYPE_NAME,
+  MODAL_HEADER_TYPE_NAME,
+  MODAL_TITLE_TYPE_NAME,
+  PACKAGE_NAME,
+} from '../internal/constants';
+
+export const renameInnerComponentPropTypes = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const aliases = [
+    { name: 'HeaderComponentProps', as: MODAL_HEADER_TYPE_NAME },
+    { name: 'TitleComponentProps', as: MODAL_TITLE_TYPE_NAME },
+    { name: 'BodyComponentProps', as: MODAL_BODY_TYPE_NAME },
+    { name: 'FooterComponentProps', as: MODAL_FOOTER_TYPE_NAME },
+  ];
+
+  aliases
+    .map(({ name, as }) => createAliasImportFor(PACKAGE_NAME, name, as))
+    .forEach((createAlias) => createAlias(j, source));
+};

package/codemods/migrations/rename-scrollBehavior-to-shouldScrollInViewport.ts

@@ -0,0 +1,82 @@
+import core, {
+  ASTPath,
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  StringLiteral,
+} from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  getDefaultSpecifier,
+  getJSXAttributesByName,
+} from '@atlaskit/codemod-utils';
+
+import { PACKAGE_NAME } from '../internal/constants';
+
+const fromProp = 'scrollBehavior';
+const toProp = 'shouldScrollInViewport';
+
+export const renameScrollBehaviorToShouldScrollInViewport = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  const convertToBooleanProp = (
+    attribute: ASTPath<JSXAttribute>,
+    value: StringLiteral,
+  ) => {
+    if (value.value === 'outside') {
+      // scrollBehavior="outside" -> shouldScrollInViewport
+      j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(toProp), null));
+    } else {
+      // scrollBehavior="inside" and scrollBehavior="inside-wide" -> removed
+      j(attribute).remove();
+    }
+  };
+
+  source
+    .findJSXElements(defaultSpecifier)
+    .forEach((element: ASTPath<JSXElement>) => {
+      getJSXAttributesByName(j, element, fromProp).forEach(
+        (attribute: ASTPath<JSXAttribute>) => {
+          const { value } = attribute.node;
+
+          if (!value) {
+            return;
+          }
+
+          if (value.type === 'StringLiteral') {
+            convertToBooleanProp(attribute, value);
+          } else if (value.type === 'JSXExpressionContainer') {
+            const expContainer = value as JSXExpressionContainer;
+            if (expContainer.expression.type === 'StringLiteral') {
+              convertToBooleanProp(
+                attribute,
+                value.expression as StringLiteral,
+              );
+            } else if (expContainer.expression.type !== 'JSXEmptyExpression') {
+              // scrollBehavior={scrollBehavior} -> shouldScrollInViewport={scrollBehavior === 'outside'}
+              j(attribute).replaceWith(
+                j.jsxAttribute(
+                  j.jsxIdentifier(toProp),
+                  j.jsxExpressionContainer(
+                    j.binaryExpression(
+                      '===',
+                      expContainer.expression,
+                      j.stringLiteral('outside'),
+                    ),
+                  ),
+                ),
+              );
+            }
+          }
+        },
+      );
+    });
+};

package/dist/cjs/hooks.js

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

package/dist/cjs/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _modalWrapper.default;
+  }
+});
+Object.defineProperty(exports, "ModalTransition", {
+  enumerable: true,
+  get: function get() {
+    return _modalTransition.default;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function get() {
+    return _modalHeader.default;
+  }
+});
+Object.defineProperty(exports, "ModalTitle", {
+  enumerable: true,
+  get: function get() {
+    return _modalTitle.default;
+  }
+});
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function get() {
+    return _modalBody.default;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function get() {
+    return _modalFooter.default;
+  }
+});
+Object.defineProperty(exports, "useModal", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useModal;
+  }
+});
+
+var _modalWrapper = _interopRequireDefault(require("./modal-wrapper"));
+
+var _modalTransition = _interopRequireDefault(require("./modal-transition"));
+
+var _modalHeader = _interopRequireDefault(require("./modal-header"));
+
+var _modalTitle = _interopRequireDefault(require("./modal-title"));
+
+var _modalBody = _interopRequireDefault(require("./modal-body"));
+
+var _modalFooter = _interopRequireDefault(require("./modal-footer"));
+
+var _hooks = require("./hooks");

package/dist/cjs/internal/components/modal-dialog.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _reactUid = require("react-uid");
+
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+
+var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
+
+var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("../constants");
+
+var _context = require("../context");
+
+var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
+
+var _utils = require("../utils");
+
+var _positioner = _interopRequireDefault(require("./positioner"));
+
+/** @jsx jsx */
+var dialogStyles = (0, _core.css)({
+  display: 'flex',
+  width: '100%',
+  maxWidth: '100vw',
+  height: '100%',
+  minHeight: 0,
+  maxHeight: '100vh',
+  flex: '1 1 auto',
+  flexDirection: 'column',
+  backgroundColor: _colors.N0,
+  color: _constants.textColor,
+  pointerEvents: 'auto',
+  '@media (min-width: 480px)': {
+    width: 'var(--modal-dialog-width)',
+    maxWidth: 'inherit',
+    marginRight: 'inherit',
+    marginLeft: 'inherit',
+    borderRadius: _constants.borderRadius,
+    boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A)
+  },
+
+  /**
+   * This is to support scrolling if the modal's children are wrapped in
+   * a form.
+   */
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > form:only-child': {
+    display: 'inherit',
+    maxHeight: 'inherit',
+    flexDirection: 'inherit'
+  }
+});
+var viewportScrollStyles = (0, _core.css)({
+  /**
+   * This ensures that the element fills the viewport on mobile
+   * while also allowing it to overflow if its height is larger than
+   * the viewport.
+   */
+  minHeight: '100vh',
+  maxHeight: 'none',
+  '@media (min-width: 480px)': {
+    minHeight: 'var(--modal-dialog-height)'
+  }
+});
+var bodyScrollStyles = (0, _core.css)({
+  '@media (min-width: 480px)': {
+    height: 'var(--modal-dialog-height)',
+    maxHeight: 'inherit'
+  }
+});
+
+var ModalDialog = function ModalDialog(props) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 'medium' : _props$width,
+      _props$shouldScrollIn = props.shouldScrollInViewport,
+      shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
+      autoFocus = props.autoFocus,
+      stackIndex = props.stackIndex,
+      onClose = props.onClose,
+      onCloseComplete = props.onCloseComplete,
+      onOpenComplete = props.onOpenComplete,
+      height = props.height,
+      children = props.children,
+      testId = props.testId;
+  var id = (0, _reactUid.useUID)();
+  var titleId = "modal-dialog-title-".concat(id);
+  (0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined, // When a user supplies  a ref to focus we enable this hook
+  (0, _typeof2.default)(autoFocus) === 'object');
+
+  var _useOnMotionFinish = (0, _useOnMotionFinish3.default)({
+    onOpenComplete: onOpenComplete,
+    onCloseComplete: onCloseComplete
+  }),
+      _useOnMotionFinish2 = (0, _slicedToArray2.default)(_useOnMotionFinish, 2),
+      motionRef = _useOnMotionFinish2[0],
+      onMotionFinish = _useOnMotionFinish2[1];
+
+  var modalDialogContext = (0, _react.useMemo)(function () {
+    return {
+      testId: testId,
+      titleId: titleId,
+      onClose: onClose
+    };
+  }, [testId, titleId, onClose]);
+  return (0, _core.jsx)(_positioner.default, {
+    stackIndex: stackIndex,
+    shouldScrollInViewport: shouldScrollInViewport,
+    testId: testId
+  }, (0, _core.jsx)(_context.ModalContext.Provider, {
+    value: modalDialogContext
+  }, (0, _core.jsx)(_context.ScrollContext.Provider, {
+    value: shouldScrollInViewport
+  }, (0, _core.jsx)(_fadeIn.default, {
+    entranceDirection: "bottom",
+    onFinish: onMotionFinish
+  }, function (bottomFadeInProps) {
+    return (0, _core.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
+      ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef]),
+      style: {
+        '--modal-dialog-width': (0, _utils.dialogWidth)(width),
+        '--modal-dialog-height': (0, _utils.dialogHeight)(height)
+      },
+      css: [dialogStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
+      role: "dialog",
+      "aria-labelledby": titleId,
+      "data-testid": testId,
+      "data-modal-stack": stackIndex,
+      tabIndex: -1,
+      "aria-modal": true
+    }), children);
+  }))));
+};
+
+var _default = ModalDialog;
+exports.default = _default;