Fix Dependabot #124 cross-spawn; Upgrade tiptap, css-loader@7 (#…

…1303)

Fixes `cross-spawn` Dependabot https://github.com/user-interviews/ui-design-system/security/dependabot/124

Handles major upgrade version of `cssloader` @ 7.x

Upgrades minor/patch:
* @babel
* @storybook
* @testing-library/jest-dom
* @tiptap
* @types/jest
* @types/react-dom
* @typescript-eslint/eslint-plugin
* @typescript-eslint/parser
* bootstrap
* chromatic
* date-fns-tz
* eslint-plugins
* react-bootstrap
* react-currency-input-field
* react-hook-form
* react-loading-skeleton
* react-select
* sanitize-html
* sass-loader
* typescript
* webpack

package.json

@@ -2,33 +2,33 @@
   "name": "@user-interviews/ui-design-system",
   "version": "3.9.0",
   "dependencies": {
-    "@tiptap/core": "^2.7.4",
-    "@tiptap/extension-bold": "^2.7.4",
-    "@tiptap/extension-bullet-list": "^2.7.4",
-    "@tiptap/extension-character-count": "^2.7.4",
-    "@tiptap/extension-document": "^2.7.4",
-    "@tiptap/extension-hard-break": "^2.7.4",
-    "@tiptap/extension-history": "^2.7.4",
-    "@tiptap/extension-italic": "^2.7.4",
-    "@tiptap/extension-link": "^2.7.4",
-    "@tiptap/extension-list-item": "^2.7.4",
-    "@tiptap/extension-ordered-list": "^2.7.4",
-    "@tiptap/extension-paragraph": "^2.7.4",
-    "@tiptap/extension-placeholder": "^2.7.4",
-    "@tiptap/extension-text": "^2.7.4",
-    "@tiptap/pm": "^2.7.4",
-    "@tiptap/react": "^2.7.4",
-    "@tiptap/suggestion": "^2.7.4",
+    "@tiptap/core": "^2.10.3",
+    "@tiptap/extension-bold": "^2.10.3",
+    "@tiptap/extension-bullet-list": "^2.10.3",
+    "@tiptap/extension-character-count": "^2.10.3",
+    "@tiptap/extension-document": "^2.10.3",
+    "@tiptap/extension-hard-break": "^2.10.3",
+    "@tiptap/extension-history": "^2.10.3",
+    "@tiptap/extension-italic": "^2.10.3",
+    "@tiptap/extension-link": "^2.10.3",
+    "@tiptap/extension-list-item": "^2.10.3",
+    "@tiptap/extension-ordered-list": "^2.10.3",
+    "@tiptap/extension-paragraph": "^2.10.3",
+    "@tiptap/extension-placeholder": "^2.10.3",
+    "@tiptap/extension-text": "^2.10.3",
+    "@tiptap/pm": "^2.10.3",
+    "@tiptap/react": "^2.10.3",
+    "@tiptap/suggestion": "^2.10.3",
     "date-fns": "^4.1.0",
-    "date-fns-tz": "^3.1.3",
-    "react-bootstrap": "^2.10.5",
-    "react-currency-input-field": "^3.8.0",
+    "date-fns-tz": "^3.2.0",
+    "react-bootstrap": "^2.10.6",
+    "react-currency-input-field": "^3.9.0",
     "react-datepicker": "^7.5.0",
-    "react-loading-skeleton": "^3.4.0",
-    "react-select": "^5.8.1",
+    "react-loading-skeleton": "^3.5.0",
+    "react-select": "^5.8.3",
     "react-toggle": "^4.1.3",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.13.0",
+    "sanitize-html": "^2.13.1",
     "tippy.js": "^6.3.7",
     "uuid": "^11.0.3"
   },
@@ -81,65 +81,65 @@
     "react-tracking": "^9.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-runtime": "^7.25.4",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@babel/runtime": "^7.25.6",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/runtime": "^7.26.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/pro-regular-svg-icons": "^6.5.2",
     "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-actions": "^8.4.2",
-    "@storybook/addon-backgrounds": "^8.4.2",
-    "@storybook/addon-controls": "^8.4.2",
-    "@storybook/addon-docs": "^8.4.2",
-    "@storybook/addon-jest": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-storysource": "^8.4.2",
-    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-a11y": "^8.4.6",
+    "@storybook/addon-actions": "^8.4.6",
+    "@storybook/addon-backgrounds": "^8.4.6",
+    "@storybook/addon-controls": "^8.4.6",
+    "@storybook/addon-docs": "^8.4.6",
+    "@storybook/addon-jest": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-storysource": "^8.4.6",
+    "@storybook/addon-styling-webpack": "^1.0.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-webpack5": "^8.4.6",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
-    "@types/react-dom": "^18.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/react-dom": "^18.3.1",
     "@types/react-toggle": "^4.0.5",
     "@types/react-transition-group": "^4.4.11",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-preset-react": "^6.24.1",
-    "bootstrap": "5.1.3",
-    "chromatic": "^11.18.1",
+    "bootstrap": "5.3.3",
+    "chromatic": "^11.20.0",
     "classnames": "^2.5.1",
-    "css-loader": "^6.11.0",
+    "css-loader": "^7.1.2",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-local-rules": "^3.0.2",
     "eslint-plugin-no-only-tests": "^3.3.0",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-utils": "^3.0.0",
     "file-loader": "^6.2.0",
@@ -152,17 +152,17 @@
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.4",
+    "react-hook-form": "^7.53.2",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-test-renderer": "^18.3.1",
     "react-tracking": "^9.3.2",
-    "sass-loader": "^16.0.2",
-    "storybook": "^8.4.2",
+    "sass-loader": "^16.0.4",
+    "storybook": "^8.4.6",
     "storybook-addon-designs": "6.3.1",
     "style-loader": "^4.0.0",
-    "typescript": "^5.5.4",
-    "webpack": "^5.95.0",
+    "typescript": "^5.7.2",
+    "webpack": "^5.97.0",
     "yalc": "^1.0.0-pre.53"
   },
   "resolutions": {

src/CheckboxButton/CheckboxButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
-import styles from './CheckboxButton.module.scss';
+import * as styles from './CheckboxButton.module.scss';
 
 export const CHECKED_STATES = {
   CHECKED: true,

src/Dropdown/DropdownItem.tsx

@@ -9,7 +9,7 @@ import {
   type DropdownProps as RBDropdownProps,
 } from 'react-bootstrap';
 
-import styles from './DropdownItem.module.scss';
+import * as styles from './DropdownItem.module.scss';
 
 type DropdownItemProps = {
   /**

src/Flex/Flex.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { useDeprecationWarning } from '../utils';
 
-import styles from './Flex.module.scss';
+import * as styles from './Flex.module.scss';
 
 export interface FlexProps {
   alignItems?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'initial' | 'inherit';

src/FlexContainer/FlexContainer.tsx

@@ -2,7 +2,7 @@ import React, { type ReactNode } from 'react';
 import classNames from 'classnames';
 import { computeBreakpointClassNames } from './utils';
 
-import styles from './FlexContainer.module.css';
+import * as styles from './FlexContainer.module.css';
 
 type FlexProps = {
   alignItems?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'initial' | 'inherit';

src/FlexContainer/utils.ts

@@ -1,5 +1,5 @@
 import { type FlexContainerProps } from './FlexContainer';
-import styles from './FlexContainer.module.css';
+import * as styles from './FlexContainer.module.css';
 
 export function computeBreakpointClassNames(
   props: Omit<FlexContainerProps, 'children' | 'className'>,

src/Popover/PopoverCard.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import PopoverBody from './PopoverBody';
 
-import styles from './PopoverCard.module.scss';
+import * as styles from './PopoverCard.module.scss';
 
 const handleWidth = (cardSize) => {
   switch (cardSize) {

src/RadioButton/RadioButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import styles from './RadioButton.module.scss';
+import * as styles from './RadioButton.module.scss';
 
 type RadioButtonProps = {
   checked?: boolean;

src/RichTextEditor/RichTextEditor.test.tsx

@@ -7,7 +7,12 @@ import { RichTextEditorDefaultActionsArray } from './richTextEditorActions';
 describe('<RichTextEditor />', () => {
   const elements = {
     textbox: {
-      find: () => screen.findByRole('textbox'),
+      // The latest tiptap seems to be applying "textbox" role to two elements, parent and child now
+      // so just going to grab the innermost one that has contenteditable attribute...
+      // note that this might be a tiptap bug? so be ready if this has to be undone
+      find: () => screen.findAllByRole('textbox').then(
+        (elems) => elems.find((element) => element.hasAttribute('contenteditable')),
+      ),
     },
     allButtons: {
       findAll: () => screen.findAllByRole('button'),
@@ -51,7 +56,7 @@ describe('<RichTextEditor />', () => {
       const disabledButtons = buttons.filter((button) => button.hasAttribute('disabled'));
 
       expect(disabledButtons.length).toBe(RichTextEditorDefaultActionsArray.length);
-      expect(textbox.firstChild).toHaveAttribute('contenteditable', 'false');
+      expect(textbox).toHaveAttribute('contenteditable', 'false');
     });
   });
 });

src/RichTextEditor/__snapshots__/RichTextEditor.test.tsx.snap

@@ -145,6 +145,7 @@ exports[`<RichTextEditor /> renders snapshot 1`] = `
       <div
         class="tiptap ProseMirror"
         contenteditable="true"
+        role="textbox"
         tabindex="0"
         translate="no"
       >

src/Styles/colors/palette.js

@@ -1,4 +1,4 @@
 // This can probably be generated... try to group the colors spatially plz
-import colors from 'scss/variables.scss';
+import * as colors from 'scss/variables.scss';
 
 export default colors;

src/Tabs/Tabs.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import ReactBootstrapTabs from 'react-bootstrap/Tabs';
-import styles from './tabs.module.scss';
+import * as styles from './tabs.module.scss';
 
 export interface TabsProps extends BootstrapTabProps {
   flexWrapUnset?: boolean;