refactor: Use visual-mode utils from the toolkit

.github/workflows/bundle-size/package.json

@@ -4,7 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "node build.js"
+    "build": "node build.js",
+    "preinstall": "node ./unlock-package-lock.cjs"
   },
   "dependencies": {
     "@cloudscape-design/components": "*",

.github/workflows/bundle-size/unlock-package-lock.cjs

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Remove specific @cloudscape-design/* packages where we should always use the latest minor release.
+ */
+const filename = path.resolve(__dirname, 'package-lock.json');
+const packageLock = JSON.parse(fs.readFileSync(filename));
+
+Object.keys(packageLock.packages).forEach(dependencyName => {
+  removeDependencies(dependencyName, packageLock.packages);
+});
+
+Object.keys(packageLock.dependencies).forEach(dependencyName => {
+  removeDependencies(dependencyName, packageLock.dependencies);
+});
+
+fs.writeFileSync(filename, JSON.stringify(packageLock, null, 2) + '\n');
+console.log('Removed @cloudscape-design/ dependencies from package-lock file');
+
+function removeDependencies(dependencyName, packages) {
+  if (dependencyName.includes('@cloudscape-design/')) {
+    delete packages[dependencyName];
+  }
+}

scripts/unlock-package-lock.js

@@ -11,12 +11,6 @@ const path = require('path');
 const filename = path.resolve(__dirname, '..', 'package-lock.json');
 const packageLock = JSON.parse(fs.readFileSync(filename));
 
-function removeDependencies(dependencyName, packages) {
-  if (dependencyName.includes('@cloudscape-design/')) {
-    delete packages[dependencyName];
-  }
-}
-
 Object.keys(packageLock.packages).forEach(dependencyName => {
   removeDependencies(dependencyName, packageLock.packages);
 });
@@ -27,3 +21,9 @@ Object.keys(packageLock.dependencies).forEach(dependencyName => {
 
 fs.writeFileSync(filename, JSON.stringify(packageLock, null, 2) + '\n');
 console.log('Removed @cloudscape-design/ dependencies from package-lock file');
+
+function removeDependencies(dependencyName, packages) {
+  if (dependencyName.includes('@cloudscape-design/')) {
+    delete packages[dependencyName];
+  }
+}

src/app-layout/__tests__/main.test.tsx

@@ -10,7 +10,8 @@ import mobileStyles from '../../../lib/components/app-layout/mobile-toolbar/styl
 import sharedStyles from '../../../lib/components/app-layout/styles.css.js';
 import '../../__a11y__/to-validate-a11y';
 
-jest.mock('../../../lib/components/internal/motion', () => ({
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   isMotionDisabled: jest.fn().mockReturnValue(true),
 }));
 

src/app-layout/__tests__/mobile.test.tsx

@@ -20,7 +20,8 @@ import testUtilsStyles from '../../../lib/components/app-layout/test-classes/sty
 import visualRefreshRefactoredStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
 import { findUpUntil } from '../../../lib/components/internal/utils/dom';
 
-jest.mock('../../../lib/components/internal/motion', () => ({
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   isMotionDisabled: jest.fn().mockReturnValue(true),
 }));
 

src/app-layout/__tests__/split-panel.test.tsx

@@ -28,11 +28,13 @@ const fakeComputedStyle: Window['getComputedStyle'] = (...args) => {
 
 jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
   useVisualRefresh: jest.fn().mockReturnValue(false),
-  useDensityMode: jest.fn().mockReturnValue('comfortable'),
-  useReducedMotion: jest.fn().mockReturnValue(true),
 }));
-jest.mock('../../../lib/components/internal/motion', () => ({
+
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   isMotionDisabled: jest.fn().mockReturnValue(true),
+  useDensityMode: jest.fn().mockReturnValue('comfortable'),
+  useReducedMotion: jest.fn().mockReturnValue(true),
 }));
 
 let isMocked = false;

src/app-layout/__tests__/utils.tsx

@@ -19,12 +19,13 @@ jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
 
 jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
   useVisualRefresh: jest.fn().mockReturnValue(false),
-  useDensityMode: jest.fn().mockReturnValue('comfortable'),
-  useReducedMotion: jest.fn().mockReturnValue(true),
 }));
 
-jest.mock('../../../lib/components/internal/motion', () => ({
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   isMotionDisabled: jest.fn().mockReturnValue(true),
+  useDensityMode: jest.fn().mockReturnValue('comfortable'),
+  useReducedMotion: jest.fn().mockReturnValue(true),
 }));
 
 export function renderComponent(jsx: React.ReactElement) {

src/button-dropdown/tooltip.tsx

@@ -7,7 +7,7 @@ import PopoverContainer from '../popover/container';
 import PopoverBody from '../popover/body';
 import Portal from '../internal/components/portal';
 import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';
-import { useReducedMotion } from '../internal/hooks/use-visual-mode';
+import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
 
 export interface TooltipProps {
   children?: React.ReactNode;

src/code-editor/index.tsx

@@ -30,7 +30,7 @@ import ErrorScreen from './error-screen';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { useCurrentMode } from '../internal/hooks/use-visual-mode';
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 import { useInternalI18n } from '../internal/i18n/context';
 import { StatusBar } from './status-bar';
 import { useFormFieldContext } from '../internal/context/form-field-context';

src/flashbar/__tests__/flashbar.test.tsx

@@ -18,6 +18,13 @@ jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => {
     ...originalVisualModeModule,
     useVisualRefresh: (...args: any) =>
       mockUseAnimations ? useAnimations : originalVisualModeModule.useVisualRefresh(...args),
+  };
+});
+jest.mock('@cloudscape-design/component-toolkit/internal', () => {
+  const originalVisualModeModule = jest.requireActual('@cloudscape-design/component-toolkit/internal');
+  return {
+    __esModule: true,
+    ...originalVisualModeModule,
     useReducedMotion: (...args: any) =>
       mockUseAnimations ? !useAnimations : originalVisualModeModule.useReducedMotion(...args),
   };

src/flashbar/common.tsx

@@ -4,12 +4,12 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
-import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { getBaseProps } from '../internal/base-component';
 import { FlashbarProps } from './interfaces';
 import { focusFlashById } from './flash';
 import { isDevelopment } from '../internal/is-development';
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 export const componentName = 'Flashbar';