@atlaskit/modal-dialog 12.20.2 → 12.20.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/modal-dialog
 
+## 12.20.4
+
+### Patch Changes
+
+- [#113859](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113859)
+  [`c14cf08cfe2e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c14cf08cfe2e9) -
+  Remove old codemods.
+
+## 12.20.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.20.2
 
 ### Patch Changes

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

@@ -58,7 +58,8 @@ var bodyScrollStyles = (0, _react.css)((0, _defineProperty2.default)({}, _primit
   pointerEvents: 'none'
 }));
 var stackTransitionStyles = (0, _react.css)({
-  transitionDuration: "".concat(_durations.mediumDurationMs, "ms"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  transitionDuration: "".concat(_durations.durations.medium, "ms"),
   transitionProperty: 'transform',
   transitionTimingFunction: _curves.easeInOut,
   /**

package/dist/cjs/modal-wrapper.js

@@ -108,7 +108,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.20.2"
+    packageVersion: "12.20.4"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

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

@@ -7,7 +7,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { easeInOut } from '@atlaskit/motion/curves';
-import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { durations } from '@atlaskit/motion/durations';
 import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import { gutter, verticalOffset } from '../constants';
@@ -53,7 +53,8 @@ const bodyScrollStyles = css({
   }
 });
 const stackTransitionStyles = css({
-  transitionDuration: `${mediumDurationMs}ms`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  transitionDuration: `${durations.medium}ms`,
   transitionProperty: 'transform',
   transitionTimingFunction: easeInOut,
   /**

package/dist/es2019/modal-wrapper.js

@@ -93,7 +93,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.20.2"
+    packageVersion: "12.20.4"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

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

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { easeInOut } from '@atlaskit/motion/curves';
-import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { durations } from '@atlaskit/motion/durations';
 import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import { gutter, verticalOffset } from '../constants';
@@ -51,7 +51,8 @@ var bodyScrollStyles = css(_defineProperty({}, media.above.xs, {
   pointerEvents: 'none'
 }));
 var stackTransitionStyles = css({
-  transitionDuration: "".concat(mediumDurationMs, "ms"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  transitionDuration: "".concat(durations.medium, "ms"),
   transitionProperty: 'transform',
   transitionTimingFunction: easeInOut,
   /**

package/dist/esm/modal-wrapper.js

@@ -98,7 +98,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.20.2"
+    packageVersion: "12.20.4"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.20.2",
+	"version": "12.20.4",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,13 +33,13 @@
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^3.5.0",
 		"@atlaskit/focus-ring": "^2.1.0",
-		"@atlaskit/icon": "^23.7.0",
+		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/layering": "^1.1.0",
-		"@atlaskit/motion": "^1.10.0",
+		"@atlaskit/motion": "^2.0.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
 		"@atlaskit/portal": "^4.11.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",

package/codemods/12.0.0-lite-mode.tsx

@@ -1,48 +0,0 @@
-import { type JSCodeshift } from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import { createTransformer, hasImportDeclaration } from '@atlaskit/codemod-utils';
-
-import { handlePropSpread } from './migrations/handle-prop-spread';
-import { inlineWidthNamesDeclaration } from './migrations/inline-width-names-declaration';
-import { mapActionsProp } from './migrations/map-actions-prop';
-import { mapBodyFromProps } from './migrations/map-body-from-props';
-import { mapContainerFromProps } from './migrations/map-container-from-props';
-import { mapFooterFromProps } from './migrations/map-footer-from-props';
-import { mapHeaderFromProps } from './migrations/map-header-from-props';
-import { mapHeadingPropToModalTitle } from './migrations/map-heading-prop';
-import { removeAppearanceProp } from './migrations/remove-appearance-prop';
-import { removeComponentOverrideProps } from './migrations/remove-component-override-props';
-import { removeIsChromeless } from './migrations/remove-is-chromeless';
-import { renameAppearanceType } from './migrations/rename-appearance-type';
-import { renameInnerComponentPropTypes } from './migrations/rename-inner-component-prop-types';
-import { renameScrollBehaviorToShouldScrollInViewport } from './migrations/rename-scroll-behavior-to-should-scroll-in-viewport';
-
-/**
- * The order of these migrations matters!
- * Mapping the container usage, along with removal of key props
- * such as the 'components' and 'appearance' should come last
- * after the other migrations.
- */
-const transformer = createTransformer(
-	[
-		mapBodyFromProps,
-		mapHeaderFromProps,
-		mapFooterFromProps,
-		renameScrollBehaviorToShouldScrollInViewport,
-		renameAppearanceType,
-		renameInnerComponentPropTypes,
-		inlineWidthNamesDeclaration,
-		mapHeadingPropToModalTitle,
-		mapActionsProp,
-		mapContainerFromProps,
-		removeComponentOverrideProps,
-		removeAppearanceProp,
-		removeIsChromeless,
-		handlePropSpread,
-	],
-	(j: JSCodeshift, source: Collection<Node>) =>
-		hasImportDeclaration(j, source, '@atlaskit/modal-dialog'),
-);
-
-export default transformer;

package/codemods/__tests__/12.0.0-lite-mode.test.tsx

@@ -1,493 +0,0 @@
-import transformer from '../12.0.0-lite-mode';
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('12.0.0-lite-mode', () => {
-	['tsx', 'babylon'].forEach((parser) => {
-		describe(`parser: ${parser}`, () => {
-			defineInlineTest(
-				{ default: transformer, parser },
-				{},
-				`
-      import React, { useState } from 'react';
-
-      import ModalDialog from '@atlaskit/modal-dialog';
-
-      const Container = (props) => (<form>{props.children}</form>);
-      const Header = (props) => (<div><h1>{props.children}</h1></div>);
-      const Footer = (props) => (<div>{props.children}</div>);
-
-      export default function modalDialog() {
-        const [appearance, setAppearance] = useState(null);
-
-        return (
-          <ModalDialog
-            appearance={appearance}
-            scrollBehavior="outside"
-            onClose={noop}
-            components={{ Container }}
-            header={Header}
-            footer={Footer}>
-            <p>Content #1</p>
-            <p>Content #2</p>
-          </ModalDialog>
-        );
-      }
-      `,
-				`
-      /* TODO: (from codemod)\u0020
-      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. */
-      import React, { useState } from 'react';
-
-      import ModalDialog, { ModalBody } from "@atlaskit/modal-dialog";
-
-      const Container = (props) => (<form>{props.children}</form>);
-      const Header = (props) => (<div><h1>{props.children}</h1></div>);
-      const Footer = (props) => (<div>{props.children}</div>);
-
-      export default function modalDialog() {
-        const [appearance, setAppearance] = useState(null);
-
-        return (
-          <ModalDialog shouldScrollInViewport onClose={noop}>
-            {Container({
-              children: <>
-                {Header({
-                  appearance: appearance
-                })}
-                <ModalBody>
-                  <p>Content #1</p>
-                  <p>Content #2</p>
-                </ModalBody>
-                {Footer({
-                  appearance: appearance
-                })}
-              </>
-            })}
-          </ModalDialog>
-        );
-      }
-      `,
-				'should change custom usages in the appropriate order',
-			);
-
-			defineInlineTest(
-				{ default: transformer, parser },
-				{},
-				`
-      import React, { useState } from 'react';
-
-      import ModalDialog, {
-        AppearanceType,
-        HeaderComponentProps,
-        FooterComponentProps,
-        BodyComponentProps
-      } from '@atlaskit/modal-dialog';
-
-      const Container = (props) => (<form>{props.children}</form>);
-      const Header = (props: HeaderComponentProps) => (<div><h1>{props.children}</h1></div>);
-      const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
-
-      export default function modalDialog() {
-        const [appearance, setAppearance] = useState<AppearanceType | null>(null);
-
-        return (
-          <ModalDialog
-            appearance={appearance}
-            scrollBehavior="outside"
-            onClose={noop}
-            components={{ Container }}
-            header={Header}
-            footer={Footer} />
-        );
-      }
-      `,
-				`
-      /* TODO: (from codemod)\u0020
-      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. */
-      import React, { useState } from 'react';
-
-      import ModalDialog, {
-        Appearance as AppearanceType,
-        ModalHeaderProps as HeaderComponentProps,
-        ModalFooterProps as FooterComponentProps,
-        ModalBodyProps as BodyComponentProps
-      } from '@atlaskit/modal-dialog';
-
-      const Container = (props) => (<form>{props.children}</form>);
-      const Header = (props: HeaderComponentProps) => (<div><h1>{props.children}</h1></div>);
-      const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
-
-      export default function modalDialog() {
-        const [appearance, setAppearance] = useState<AppearanceType | null>(null);
-
-        return (
-          <ModalDialog shouldScrollInViewport onClose={noop}>
-            {Container({
-              children: <>
-                {Header({
-                  appearance: appearance
-                })}{Footer({
-                  appearance: appearance
-                })}
-              </>
-            })}
-          </ModalDialog>
-        );
-      }
-      `,
-				'should change custom usages for a self-closing modal without body',
-			);
-
-			defineInlineTest(
-				{ default: transformer, parser },
-				{},
-				`
-      import React, { useState } from 'react';
-
-      import ModalDialog, { ModalTransition } from '@atlaskit/modal-dialog';
-
-      export default function modalDialog(props) {
-        const [isOpen, toggleOpen] = useState<boolean>(false);
-        const { appearance, multiline, onClose } = props;
-
-        const actions = [
-          { text: 'Close', onClick: close, testId: 'primary' },
-          {
-            text: 'Secondary Action',
-            onClick: noop,
-            testId: 'secondary',
-          },
-        ];
-
-        return (
-          <ModalTransition>
-          {isOpen &&
-            <ModalDialog
-              appearance={appearance}
-              actions={actions}
-              onClose={onClose}
-              heading="Modal dialog"
-              isHeadingMultiline={multiline}
-              isChromeless={false}
-              scrollBehavior="outside"
-              {...props}
-            >
-              <div>Content #1</div>
-              <div>Content #2</div>
-            </ModalDialog>
-          }
-          </ModalTransition>
-        );
-      }
-      `,
-				`
-      /* TODO: (from codemod)\u0020
-      This file is spreading props on the ModalDialog component, so we could not
-      automatically convert this usage to the new API.
-
-      The following props have been deprecated as part of moving to a compositional API:
-
-      - 'heading' prop has been replaced by ModalHeader and ModalTitle components.
-      - 'actions' prop has been replaced by ModalFooter component, with Button components from @atlaskit/button.
-      - 'scrollBehavior' prop has been replaced by 'shouldScrollInViewport', where "outside" from the previous prop maps to true in the new prop.
-      - 'isHeadingMultiline' prop has been replaced by 'isMultiline' prop on the ModalTitle component.
-      - 'appearance' prop has been moved to the ModalTitle component. To achieve the feature parity, pass the 'appearance' prop directly to ModalTitle and Button components inside ModalFooter.
-
-      Refer to the docs for the new API at https://atlassian.design/components/modal-dialog/examples
-      to complete the migration and use the new composable components. */
-      import React, { useState } from 'react';
-
-      import Button from "@atlaskit/button/standard-button";
-      import ModalDialog, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from "@atlaskit/modal-dialog";
-
-      export default function modalDialog(props) {
-        const [isOpen, toggleOpen] = useState<boolean>(false);
-        const { appearance, multiline, onClose } = props;
-
-        const actions = [
-          { text: 'Close', onClick: close, testId: 'primary' },
-          {
-            text: 'Secondary Action',
-            onClick: noop,
-            testId: 'secondary',
-          },
-        ];
-
-        return (
-          <ModalTransition>
-          {isOpen &&
-            <ModalDialog onClose={onClose} shouldScrollInViewport {...props}>
-              <ModalHeader>
-                <ModalTitle appearance={appearance} isMultiline={multiline}>
-                  Modal dialog
-                </ModalTitle>
-              </ModalHeader>
-
-              <ModalBody>
-                <div>Content #1</div>
-                <div>Content #2</div>
-              </ModalBody>
-              <ModalFooter>
-                {actions.map((props, index) => <Button
-                  {...props}
-                  autoFocus={index === 0}
-                  appearance={index === 0 ? appearance || "primary" : "subtle"}>{props.text}</Button>).reverse()}
-              </ModalFooter>
-            </ModalDialog>
-          }
-          </ModalTransition>
-        );
-      }
-      `,
-				'should change default usages for modal dialog',
-			);
-
-			defineInlineTest(
-				{ default: transformer, parser },
-				{},
-				`
-      import React, { useState } from 'react';
-
-      import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
-
-      import { getModalDialogActions } from './utils';
-
-      const Container = (props) => (<form>{props.children}</form>);
-      const CustomBody = (props) => (<div><ModalBody>{props.children}</ModalBody></div>);
-
-      export default function modalDialog(props) {
-        const [isOpen, toggleOpen] = useState<boolean>(false);
-        const { appearance, onClose } = props;
-
-        return (
-          <ModalTransition>
-          {isOpen &&
-            <ModalDialog
-              components={{ Container, Body: CustomBody }}
-              actions={getModalDialogActions(onClose)}
-              onClose={onClose}
-              heading="Modal dialog"
-              isChromeless={true}
-              scrollBehavior="outside"
-            >
-              <div>Content #1</div>
-              <div>Content #2</div>
-            </ModalDialog>
-          }
-          </ModalTransition>
-        );
-      }
-      `,
-				`
-      /* TODO: (from codemod)\u0020
-      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. */
-      import React, { useState } from 'react';
-
-      import Button from "@atlaskit/button/standard-button";
-      import ModalDialog, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from "@atlaskit/modal-dialog";
-
-      import { getModalDialogActions } from './utils';
-
-      const Container = (props) => (<form>{props.children}</form>);
-      const CustomBody = (props) => (<div><ModalBody>{props.children}</ModalBody></div>);
-
-      export default function modalDialog(props) {
-        const [isOpen, toggleOpen] = useState<boolean>(false);
-        const { appearance, onClose } = props;
-
-        return (
-          <ModalTransition>
-          {isOpen &&
-            /* TODO: (from codemod)\u0020
-            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 */
-            <ModalDialog onClose={onClose} shouldScrollInViewport>
-              {Container({
-                children: <>
-                  <ModalHeader>
-                    <ModalTitle>
-                      Modal dialog
-                    </ModalTitle>
-                  </ModalHeader>
-
-                  {CustomBody({
-                    children: <>
-                      <div>Content #1</div>
-                      <div>Content #2</div>
-                    </>
-                  })}
-                  <ModalFooter>
-                    {getModalDialogActions(onClose).map((props, index) => <Button
-                      {...props}
-                      appearance={index === 0 ? props.appearance || "primary" : props.appearance || "subtle"}>{props.text}</Button>)}
-                  </ModalFooter>
-                </>
-              })}
-            </ModalDialog>
-          }
-          </ModalTransition>
-        );
-      }
-      `,
-				'should change mixed usages (custom + default) for modal dialog',
-			);
-		});
-	});
-
-	// Only support ts for this case
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-
-    import ModalDialog, {
-      AppearanceType,
-      HeaderComponentProps,
-      FooterComponentProps,
-    } from '@atlaskit/modal-dialog';
-
-    import { WidthNames } from '@atlaskit/modal-dialog/shared-variables';
-
-    interface CustomHeaderProps extends HeaderComponentProps {
-      size?: WidthNames;
-    }
-
-    const Container = (props) => (<form>{props.children}</form>);
-    const Header = (props: CustomHeaderProps) => (<div><h1>{props.children}</h1></div>);
-    const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
-
-    export default function modalDialog() {
-      const [appearance, setAppearance] = useState<AppearanceType | null>(null);
-
-      return (
-        <ModalDialog
-          appearance={appearance}
-          scrollBehavior="outside"
-          onClose={noop}
-          components={{ Container }}
-          header={Header}
-          footer={Footer}>
-          <p>Content #1</p>
-          <p>Content #2</p>
-        </ModalDialog>
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod)\u0020
-    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. */
-    import React, { useState } from 'react';
-
-    import ModalDialog, {
-      Appearance as AppearanceType,
-      ModalHeaderProps as HeaderComponentProps,
-      ModalFooterProps as FooterComponentProps,
-      ModalBody,
-    } from "@atlaskit/modal-dialog";
-
-    interface CustomHeaderProps extends HeaderComponentProps {
-      size?: "small" | "medium" | "large" | "x-large";
-    }
-
-    const Container = (props) => (<form>{props.children}</form>);
-    const Header = (props: CustomHeaderProps) => (<div><h1>{props.children}</h1></div>);
-    const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
-
-    export default function modalDialog() {
-      const [appearance, setAppearance] = useState<AppearanceType | null>(null);
-
-      return (
-        <ModalDialog shouldScrollInViewport onClose={noop}>
-          {Container({
-            children: <>
-              {Header({
-                appearance: appearance
-              })}
-              <ModalBody>
-                <p>Content #1</p>
-                <p>Content #2</p>
-              </ModalBody>
-              {Footer({
-                appearance: appearance
-              })}
-            </>
-          })}
-        </ModalDialog>
-      );
-    }
-    `,
-		'should change custom usages and types in the appropriate order',
-	);
-});