Merge pull request #338 from TykTechnologies/modules-updates

update modules

.gitignore

@@ -3,3 +3,4 @@ tyk-ui-styleguide
 coverage
 .nyc_output
 *DS_Store
+cypress/screenshots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {
@@ -42,53 +42,53 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.20.5",
-    "@babel/eslint-parser": "7.19.1",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@cypress/code-coverage": "3.10.0",
-    "@cypress/react": "7.0.2",
-    "@cypress/webpack-dev-server": "3.1.0",
+    "@babel/core": "7.23.3",
+    "@babel/eslint-parser": "7.23.3",
+    "@babel/preset-env": "7.23.3",
+    "@babel/preset-react": "7.23.3",
+    "@cypress/code-coverage": "3.12.12",
+    "@cypress/react": "8.0.0",
+    "@cypress/webpack-dev-server": "3.7.1",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.2",
-    "cypress": "11.2.0",
-    "esbuild-loader": "2.20.0",
-    "eslint": "8.29.0",
+    "css-loader": "6.8.1",
+    "cypress": "13.6.0",
+    "esbuild-loader": "4.0.2",
+    "eslint": "8.54.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-webpack-plugin": "3.2.0",
-    "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.7.1",
-    "react-styleguidist": "13.0.0",
+    "eslint-webpack-plugin": "4.0.1",
+    "html-webpack-plugin": "5.5.3",
+    "mini-css-extract-plugin": "2.7.6",
+    "react-styleguidist": "13.1.1",
     "resolve-url-loader": "5.0.0",
-    "sass-loader": "13.2.0",
-    "style-loader": "3.3.1",
-    "webpack": "5.75.0",
-    "webpack-cli": "5.0.0",
-    "webpack-dev-server": "4.11.1"
+    "sass-loader": "13.3.2",
+    "style-loader": "3.3.3",
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1"
   },
   "dependencies": {
+    "ace-builds": "1.31.2",
     "brace": "0.11.1",
-    "date-fns": "2.29.3",
-    "echarts": "5.4.0",
+    "date-fns": "2.30.0",
+    "echarts": "5.4.3",
     "flatpickr": "4.6.13",
     "immutable": "4.1.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
     "react": "18.2.0",
-    "react-ace": "6.6.0",
+    "react-ace": "10.1.0",
     "react-datetime": "3.2.0",
-    "react-datetime-picker": "4.1.1",
-    "react-docgen": "5.4.3",
+    "react-datetime-picker": "5.5.3",
     "react-dom": "18.2.0",
-    "react-fast-compare": "3.2.0",
+    "react-fast-compare": "3.2.2",
     "react-transition-group": "4.4.5",
-    "sass": "1.56.1"
+    "sass": "1.69.5"
   },
   "overrides": {
     "react": "$react",

src/components/FloatingContainer/index.js

@@ -9,53 +9,19 @@ import InfiniteScroller from '../InfiniteScroller';
  * It displays a container relative to another element.
  * Meant to be used for dropdowns, tooltips, and other similar components.
  */
-function FloatingContainer(props) {
-  const {
-    /** A DOM element that the floating container will be displayed relative to. */
-    element,
-    /** The size of the container.
-     * If `auto` the size will be determined by its contents.
-     * If `matchElement` it will take the width or the height of the element depending
-     * on the `displayAxis` prop.
-     * It can also be a function that returns a number representing the width
-     * or the height in pixels.
-     */
-    size = 'auto',
-    /**
-     * If `auto` the component will try to determine where to display the container relative to the
-     * element (top, bottom, left, right).
-     * It can also be one of top, bottom, left, right, to force the floating container to always be
-     * displayed in that position.
-     */
-    forceDisplay = 'auto',
-    /**
-     * It can be `auto`, `vertical` or `horizontal`. It specifies the axis where
-     * it will be displayed when `forceDisplay` is `auto`.
-     */
-    displayAxis = 'auto',
-    /**
-     * If there is space on both sides of the axis preffer this side.
-     */
-    preferredPosition,
-    /**
-     * The distance between the element and the floating container.
-     * It can be positive or negative.
-     */
-    offset = 0,
-    className,
-    children,
-    /**
-     * A reference for the container. Used in cases where you need some DOM
-     * control from outside the component.
-     */
-    passedRef,
-    /**
-     * Configuration object that will be passed to the infinite scroller component.
-     */
-    infiniteScrollerConfig,
-  } = props;
+function FloatingContainer({
+  element,
+  size = 'auto',
+  forceDisplay = 'auto',
+  displayAxis = 'auto',
+  preferredPosition,
+  offset = 0,
+  className,
+  children,
+  infiniteScrollerConfig,
+}, ref) {
   const localRef = useRef(null);
-  const floatingContainerRef = passedRef || localRef;
+  const floatingContainerRef = ref || localRef;
   const contentWrapperRef = useRef(null);
 
   function determineDisplay() {
@@ -196,17 +162,45 @@ function FloatingContainer(props) {
 }
 
 FloatingContainer.propTypes = {
+  /** A DOM element that the floating container will be displayed relative to. */
   element: PropTypes.instanceOf(Object),
   className: PropTypes.string,
+  /** The size of the container.
+   * If `auto` the size will be determined by its contents.
+   * If `matchElement` it will take the width or the height of the element depending
+   * on the `displayAxis` prop.
+   * It can also be a function that returns a number representing the width
+   * or the height in pixels.
+   */
   size: PropTypes.oneOfType([
     PropTypes.oneOf(['auto', 'matchElement']),
     PropTypes.func,
   ]),
+  /**
+   * The distance between the element and the floating container.
+   * It can be positive or negative.
+   */
   offset: PropTypes.number,
+  /**
+   * If `auto` the component will try to determine where to display the container relative to the
+   * element (top, bottom, left, right).
+   * It can also be one of top, bottom, left, right, to force the floating container to always be
+   * displayed in that position.
+   */
   forceDisplay: PropTypes.oneOf(['auto', 'top', 'bottom', 'left', 'right']),
+  /**
+   * It can be `auto`, `vertical` or `horizontal`. It specifies the axis where
+   * it will be displayed when `forceDisplay` is `auto`.
+   */
   displayAxis: PropTypes.oneOf(['auto', 'vertical', 'horizontal']),
+  /**
+   * If there is space on both sides of the axis preffer this side.
+   */
   preferredPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Configuration object that will be passed to the infinite scroller component.
+   */
   infiniteScrollerConfig: PropTypes.instanceOf(Object),
 };
 
-export default forwardRef((props, ref) => <FloatingContainer {...props} passedRef={ref} />);
+export default forwardRef(FloatingContainer);

src/form/components/CodeEditor/index.js

@@ -1,18 +1,21 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import 'brace';
+
+import ace from 'ace-builds/src-noconflict/ace';
 import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-golang';
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/mode-xml';
+import 'ace-builds/src-noconflict/mode-jsx';
+import 'ace-builds/src-noconflict/ext-searchbox';
+import 'ace-builds/src-noconflict/ext-beautify';
+import 'ace-builds/src-noconflict/theme-github';
+import jsonWorker from 'ace-builds/src-noconflict/worker-json';
 
-import 'brace/mode/javascript';
-import 'brace/mode/golang';
-import 'brace/mode/python';
-import 'brace/mode/css';
-import 'brace/mode/json';
-import 'brace/mode/xml';
-import 'brace/mode/jsx';
-import 'brace/ext/searchbox';
-import 'brace/ext/beautify';
-import 'brace/theme/github';
+ace.config.setModuleUrl('ace/mode/json_worker', jsonWorker);
 
 function CodeEditor(props) {
   const {

src/form/components/Combobox2/Combobox2.test.js

@@ -58,7 +58,7 @@ describe('Combobox2', () => {
       .click()
       .get(`.${classes.dropdownList} li`)
       .should('have.length', items.length)
-      .contains(selectedItem.name)
+      .filter(`[title="${selectedItem.name}"]`)
       .find(`.${classes.checkIcon}`);
 
     cy.get('label')

styleguide.config.js

@@ -60,6 +60,11 @@ module.exports = {
             filename: 'fonts/[name][ext]',
           },
         },
+        {
+          test: /worker-.*\.js/,
+          include: [/node_modules\/ace-build/],
+          type: 'asset/resource',
+        },
       ],
     },
   },

webpack.component.js

@@ -65,6 +65,11 @@ module.exports = {
           filename: 'images/[name][ext]',
         },
       },
+      {
+        test: /worker-.*\.js/,
+        include: [/node_modules\/ace-build/],
+        type: 'asset/resource',
+      },
     ],
   },
   devtool: 'source-map',

webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { ESBuildMinifyPlugin } = require('esbuild-loader');
+const { EsbuildPlugin } = require('esbuild-loader');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
@@ -14,14 +14,14 @@ module.exports = {
     path: path.resolve(__dirname, './lib/'),
     filename: '[name].js',
     library: {
-      type: 'commonjs2'
+      type: 'commonjs2',
     },
-    publicPath: ''
+    publicPath: '',
   },
   performance: {
     hints: false,
     maxEntrypointSize: 512000,
-    maxAssetSize: 512000
+    maxAssetSize: 512000,
   },
   module: {
     rules: [
@@ -78,12 +78,17 @@ module.exports = {
         generator: {
           filename: 'images/[name][ext]',
         },
-      }
+      },
+      {
+        test: /worker-.*\.js/,
+        include: [/node_modules\/ace-build/],
+        type: 'asset/resource',
+      },
     ],
   },
   optimization: {
     minimizer: [
-      new ESBuildMinifyPlugin({
+      new EsbuildPlugin({
         target: 'es2015',
         css: true,
       }),