build: map ip package to neoip instead given cve (#6176)

* build: map ip package to neoip instead given cve

* fix: resolution glob pattern not support in newer yarn versions

* chore: ignore cdai stylelinting

* chore: add ws to resolutions

* fix: add moduleNameMapper for sinon package

* fix: bump rimraf, update snapshots, fix linting

* chore: lint issues

* chore: update snapshots

* chore: format

* chore: bump a11y checker

* fix: add transform ignore pattern for ace node

.gitignore

@@ -57,3 +57,4 @@ package-lock.json
 // cspell:enable
 .yarn/install-state.gz
 .history/*
+.nx

.stylelintignore

@@ -1 +1,2 @@
 # .gitignore syntax (uses node-ignore behind the scenes)
+packages/cdai

config/babel-preset-ibm-cloud-cognitive/package.json

@@ -28,7 +28,7 @@
     "@babel/core": "^7.20.12",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.18.6",
     "browserslist-config-carbon": "^10.6.1"
   }

config/jest-config-ibm-cloud-cognitive/index.js

@@ -52,6 +52,9 @@ module.exports = {
   setupFilesAfterEnv: [require.resolve('./setup/setupFilesAfterEnv')],
   snapshotSerializers: [],
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ['node'],
+  },
   testMatch: [
     '<rootDir>/**/__tests__/**/*.js?(x)',
     '<rootDir>/**/*.(spec|test).js?(x)',
@@ -74,7 +77,11 @@ module.exports = {
     'templates',
     '/umd/',
   ],
-  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$',
+    'ace-node\\.js',
+    'ace-node-([a-zA-Z0-9_-]+).(js|ts)$',
+  ],
   watchPathIgnorePatterns: [
     '/cjs/',
     '/dist/',
@@ -84,4 +91,7 @@ module.exports = {
     '/storybook/',
     '/results/',
   ],
+  moduleNameMapper: {
+    sinon: '<rootDir>/../../node_modules/sinon/pkg/sinon.js',
+  },
 };

config/jest-config-ibm-cloud-cognitive/package.json

@@ -30,7 +30,7 @@
   "dependencies": {
     "@babel/core": "^7.20.12",
     "@testing-library/jest-dom": "^5.16.5",
-    "accessibility-checker": "3.1.40",
+    "accessibility-checker": "3.1.50",
     "axe-core": "^4.6.3",
     "babel-jest": "^29.4.2",
     "babel-preset-ibm-cloud-cognitive": "^0.14.28",

package.json

@@ -78,6 +78,7 @@
     "eslint": "^8.34.0",
     "eslint-config-carbon": "3.11.1",
     "husky": "^8.0.3",
+    "ip": "^2.0.1",
     "jest": "^29.4.2",
     "jest-canvas-mock": "^2.5.1",
     "json": "^11.0.0",
@@ -101,7 +102,9 @@
   "//resolutions:http-signature": "package 'request' deprecated but still used, asks for http-signature ~1.2.0 which indirectly has vulnerabilities",
   "//resolutions:minimist": "https://security.snyk.io/vuln/SNYK-JS-MINIMIST-2429795 (version <=1.2.5)",
   "resolutions": {
-    "cheerio": "1.0.0-rc.10"
+    "cheerio": "1.0.0-rc.10",
+    "ip": "https://registry.npmjs.org/neoip/-/neoip-2.1.0.tgz",
+    "ws": "^8.17.1"
   },
   "eslintConfig": {
     "parser": "@babel/eslint-parser",

packages/cdai/package.json

@@ -59,7 +59,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-regenerator": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.18.6",
     "cpx": "^1.5.0",
     "enzyme": "^3.11.0",
@@ -69,7 +69,7 @@
     "jest-environment-jsdom": "^29.4.2",
     "node-sass": "^8.0.0",
     "npm-check-updates": "^16.7.4",
-    "rimraf": "~3 || > 4.1",
+    "rimraf": "^4.1",
     "sinon": "^15.0.1"
   },
   "babel": {

packages/cdai/scripts/build.js

@@ -7,7 +7,6 @@ const rimraf = require('rimraf');
 const util = require('util');
 
 const copy = util.promisify(cpx.copy);
-const rimrafAsync = util.promisify(rimraf);
 const execAsync = (commands, env) =>
   new Promise((resolve, reject) => {
     const options = {
@@ -41,7 +40,7 @@ async function build() {
   // eslint-disable-next-line no-console
   console.log('Deleting old build folders...');
   await Promise.all(
-    buildDirectories.map((dir) => rimrafAsync(`${ROOT_DIR}/${dir}`))
+    buildDirectories.map((dir) => rimraf(`${ROOT_DIR}/${dir}`))
   );
 
   const buildSteps = [

packages/ibm-products/src/__tests__/__snapshots__/styles.test.js.snap

@@ -28,11 +28,10 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
   font-weight: var(--cds-body-short-02-font-weight, 400);
   line-height: var(--cds-body-short-02-line-height, 1.375);
   letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
+  overflow: hidden auto;
   min-height: var(--cds-layout-05, 4rem);
   padding: 0 20% 0 var(--cds-spacing-05, 1rem);
   grid-row: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
@@ -987,10 +986,7 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
   border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
-  margin-top: calc(
-        var(--c4p--side-panel--title-text-height) +
-          var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
-      );
+  margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem));
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
   border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
@@ -1115,13 +1111,10 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
 .c4p--side-panel__overlay {
   position: fixed;
   z-index: 6000;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
+  inset: 0;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -1130,69 +1123,69 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
 
 .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
   width: calc(16rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(16rem * 0.2 - var(--cds-spacing-05, 1rem));
   margin-bottom: var(--cds-spacing-02, 0.25rem);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
   width: calc(16rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(16rem * 0.2 - var(--cds-spacing-05, 1rem));
   padding-bottom: var(--cds-spacing-05, 1rem);
   border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
   color: var(--cds-text-02, #525252);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
   width: calc(20rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(20rem * 0.2 - var(--cds-spacing-05, 1rem));
   margin-bottom: var(--cds-spacing-02, 0.25rem);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
   width: calc(20rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(20rem * 0.2 - var(--cds-spacing-05, 1rem));
   padding-bottom: var(--cds-spacing-05, 1rem);
   border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
   color: var(--cds-text-02, #525252);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
   width: calc(30rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(30rem * 0.2 - var(--cds-spacing-05, 1rem));
   margin-bottom: var(--cds-spacing-02, 0.25rem);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
   width: calc(30rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(30rem * 0.2 - var(--cds-spacing-05, 1rem));
   padding-bottom: var(--cds-spacing-05, 1rem);
   border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
   color: var(--cds-text-02, #525252);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
   width: calc(40rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(40rem * 0.2 - var(--cds-spacing-05, 1rem));
   margin-bottom: var(--cds-spacing-02, 0.25rem);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
   width: calc(40rem - var(--cds-spacing-05, 1rem));
-  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(40rem * 0.2 - var(--cds-spacing-05, 1rem));
   padding-bottom: var(--cds-spacing-05, 1rem);
   border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
   color: var(--cds-text-02, #525252);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__title-text {
   width: calc(75% - var(--cds-spacing-05, 1rem));
-  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(75% * 0.2 - var(--cds-spacing-05, 1rem));
   margin-bottom: var(--cds-spacing-02, 0.25rem);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__subtitle-text {
   width: calc(75% - var(--cds-spacing-05, 1rem));
-  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
+  padding-right: calc(75% * 0.2 - var(--cds-spacing-05, 1rem));
   padding-bottom: var(--cds-spacing-05, 1rem);
   border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
   color: var(--cds-text-02, #525252);
@@ -1341,25 +1334,23 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
   max-height: calc(100% - var(--cds-spacing-09, 3rem) + var(--cds-spacing-05, 1rem));
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
-  max-height: calc(100% - var(--cds-spacing-09, 3rem) + (2 * var(--cds-spacing-05, 1rem)));
+  max-height: calc(100% - var(--cds-spacing-09, 3rem) + 2 * var(--cds-spacing-05, 1rem));
 }
 .c4p--tearsheet .c4p--tearsheet__container--lower {
   max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)));
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
-  max-height: calc(
-        100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + var(--cds-spacing-05, 1rem)
-      );
+  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + var(--cds-spacing-05, 1rem));
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
-  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + (2 * var(--cds-spacing-05, 1rem)));
+  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + 2 * var(--cds-spacing-05, 1rem));
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
   width: 100%;
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
-    width: calc(100% - (2 * var(--cds-spacing-10, 4rem)));
+    width: calc(100% - 2 * var(--cds-spacing-10, 4rem));
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
@@ -2006,8 +1997,7 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
 .c4p--datagrid__simple-body {
   position: relative;
   display: table;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   scrollbar-width: thin;
 }
 
@@ -2100,9 +2090,7 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
   /* stylelint-disable-next-line carbon/layout-token-use */
   top: var(--c4p--datagrid--row-height);
   /* stylelint-disable-next-line carbon/layout-token-use */
-  left: calc(
-      var(--c4p--datagrid--indicator-offset-amount) + var(--cds-spacing-05, 1rem)
-    );
+  left: calc(var(--c4p--datagrid--indicator-offset-amount) + var(--cds-spacing-05, 1rem));
   width: 1px;
   height: var(--c4p--datagrid--indicator-height);
   border-left: 1px solid var(--cds-active-ui, #c6c6c6);
@@ -3436,7 +3424,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   position: absolute;
   top: 0;
   left: var(--cds-spacing-01, 0.125rem);
-  width: calc(100% - (var(--cds-spacing-01, 0.125rem) * 2));
+  width: calc(100% - var(--cds-spacing-01, 0.125rem) * 2);
   height: var(--cds-spacing-01, 0.125rem);
   background-color: var(--cds-ui-01, #f4f4f4);
   content: "";
@@ -3446,7 +3434,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   position: absolute;
   top: var(--cds-spacing-01, 0.125rem);
   left: var(--cds-spacing-03, 0.5rem);
-  width: calc(100% - (var(--cds-spacing-03, 0.5rem) * 2));
+  width: calc(100% - var(--cds-spacing-03, 0.5rem) * 2);
   height: 1px;
   background-color: var(--cds-ui-03, #e0e0e0);
   content: "";
@@ -3973,12 +3961,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--inline-edit .c4p--inline-edit__input {
   display: inline-block;
   overflow: hidden;
-  width: calc(
-        100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
-      );
-  max-width: calc(
-        100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
-      );
+  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
+  max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
   min-height: var(--c4p--inline-edit--size);
   /* stylelint-disable-next-line carbon/layout-token-use */
   margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -4892,7 +4876,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
   position: absolute;
   top: 0;
-  width: calc(100% - (2 * var(--cds-spacing-05, 1rem)));
+  width: calc(100% - 2 * var(--cds-spacing-05, 1rem));
   height: 1px;
   margin: 0 auto;
   background-color: var(--cds-ui-02, #ffffff);

packages/ibm-products/src/components/AboutModal/_about-modal.scss

@@ -42,11 +42,10 @@
   .#{$block-class} .#{$block-class}__body {
     @include carbon--type-style('body-short-02');
 
+    overflow: hidden auto;
     min-height: $layout-05;
     padding: 0 20% 0 $spacing-05;
     grid-row: auto;
-    overflow-x: hidden;
-    overflow-y: auto;
   }
 
   .#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {

packages/ibm-products/src/components/Coachmark/styles/_coachmark-tagline.scss

@@ -43,12 +43,9 @@
     &::before {
       position: absolute;
       z-index: -1;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
       background: linear-gradient(90deg, $blue-70 0%, $purple-70 100%);
       content: '';
+      inset: 0;
       opacity: 0;
       /* stylelint-disable-next-line carbon/motion-duration-use */
       transition: opacity 240ms carbon--motion(exit, productive);

packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -61,7 +61,8 @@ export let CoachmarkBeacon = React.forwardRef(
           aria-label={label}
           className={`${blockClass}__target`}
         >
-          <svg className={`${blockClass}__center`} alt="">
+          <svg className={`${blockClass}__center`}>
+            <title>{label}</title>
             <circle r={1} cx={38} cy={38} />
           </svg>
         </button>

packages/ibm-products/src/components/Datagrid/styles/_datagrid.scss

@@ -392,8 +392,7 @@
 .#{$block-class}__simple-body {
   position: relative;
   display: table;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   //makes thin scrollbar in chrome and firefox
   scrollbar-width: thin;
 }

packages/ibm-products/src/components/OptionsTile/OptionsTile.js

@@ -274,6 +274,7 @@ export let OptionsTile = React.forwardRef(
         )}
         {isExpandable ? (
           <details open={isOpen} ref={detailsRef}>
+            {/* eslint-disable-next-line  */}
             <summary className={`${blockClass}__header`} onClick={toggle}>
               <ChevronDown16 className={`${blockClass}__chevron`} />
               {renderTitle()}

packages/ibm-products/src/components/SidePanel/_side-panel.scss

@@ -435,13 +435,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
   .#{$block-class}__overlay {
     position: fixed;
     z-index: z('overlay');
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     width: 100%;
     height: 100%;
     background-color: $overlay-01;
+    inset: 0;
   }
 }