carbon-react 109.2.2 → 109.3.0

package/lib/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -17,51 +17,53 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // we can confirm that all Sage products use version 105.0.0^
 const scrollBlockManager = new _scrollBlockManager.default();
 
+const getRules = () => {
+  /* istanbul ignore next */
+  const {
+    documentElement,
+    body
+  } = document || {};
+  const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
+  const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+  return [// TODO: First two entries of this array with the documentElement can be removed
+  {
+    element: documentElement,
+    property: "position",
+    blockingValue: "relative"
+  }, {
+    element: documentElement,
+    property: "overflow",
+    blockingValue: "hidden"
+  }, {
+    element: body,
+    property: "position",
+    blockingValue: "relative"
+  }, {
+    element: body,
+    property: "overflow",
+    blockingValue: "hidden"
+  }, {
+    element: body,
+    property: "paddingRight",
+    blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
+  }];
+};
+
 const useScrollBlock = () => {
   const {
     current: containerGuid
   } = (0, _react.useRef)((0, _guid.default)());
   const originalValuesRef = (0, _react.useRef)([]);
-  const rules = (0, _react.useMemo)(() => {
-    /* istanbul ignore next */
-    const {
-      documentElement,
-      body
-    } = document || {};
-    const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
-    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-    return [// TODO: First two entries of this array with the documentElement can be removed
-    {
-      element: documentElement,
-      property: "position",
-      blockingValue: "relative"
-    }, {
-      element: documentElement,
-      property: "overflow",
-      blockingValue: "hidden"
-    }, {
-      element: body,
-      property: "position",
-      blockingValue: "relative"
-    }, {
-      element: body,
-      property: "overflow",
-      blockingValue: "hidden"
-    }, {
-      element: body,
-      property: "paddingRight",
-      blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
-    }];
-  }, []);
   const restoreValues = (0, _react.useCallback)(() => {
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValuesRef.current[index];
     });
-  }, [rules]);
+  }, []);
   const blockScroll = (0, _react.useCallback)(() => {
+    const rules = getRules();
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
 
@@ -85,7 +87,7 @@ const useScrollBlock = () => {
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [restoreValues, containerGuid, rules]);
+  }, [restoreValues, containerGuid]);
   const allowScroll = (0, _react.useCallback)(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
@@ -100,14 +102,14 @@ const useScrollBlock = () => {
 
 
     const originalValues = scrollBlockManager.getOriginalValues();
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValues[index];
     });
     scrollBlockManager.saveOriginalValues([]);
-  }, [containerGuid, rules]);
+  }, [containerGuid]);
   return {
     blockScroll,
     allowScroll

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.2.2",
+  "version": "109.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -10,24 +10,23 @@
   "files": [
     "lib",
     "esm",
-    "scripts/check_carbon_version.js",
-    "scripts/check_rfcs.js"
+    "scripts/check_carbon_version/check_carbon_version.js",
+    "scripts/check_rfcs/check_rfcs.js"
   ],
   "scripts": {
     "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
-    "test": "jest --config=./jest.conf.json",
-    "test-update": "jest --config=./jest.conf.json --updateSnapshot",
+    "test": "jest --config=./jest.config.json",
+    "test-update": "jest --config=./jest.config.json --updateSnapshot",
     "test:cypress": "npx cypress open --e2e",
     "cypress:react": "npx cypress open --component",
-    "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
     "build": "node ./scripts/build.js",
     "copy-files": "node ./scripts/copy-files.js",
     "precompile": "npm run type-check && npm run clean-lib && npm run build && npm run build:types && npm run copy-files",
     "prepublishOnly": "npm run precompile",
-    "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
+    "postinstall": "node ./scripts/check_carbon_version/check_carbon_version.js && node ./scripts/check_rfcs/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook",
     "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook",
@@ -109,6 +108,7 @@
     "axe-core": "^3.5.5",
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",
+    "babel-plugin-dev-expression": "^0.2.3",
     "browserslist": "^4.16.6",
     "chalk": "^4.1.1",
     "chromatic": "^6.0.5",
@@ -117,9 +117,8 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "^10.1.0",
-    "cypress-axe": "^0.14.0",
-    "cypress-cucumber-preprocessor": "^4.3.1",
+    "cypress": "^10.3.0",
+    "cypress-axe": "^1.0.0",
     "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
@@ -151,6 +150,7 @@
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^10.5.3",
     "mockdate": "^2.0.2",
+    "nock": "^13.2.8",
     "prettier": "^2.1.2",
     "raf": "^3.4.0",
     "react": "^17.0.2",
@@ -169,15 +169,19 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^11.4.0",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.11.5",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",
+    "ci-info": "^3.3.2",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
     "date-fns": "^2.26.0",
     "dotenv": "^10.0.0",
+    "esbuild": "^0.14.47",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
@@ -193,13 +197,11 @@
     "wait-on": "^5.2.1"
   },
   "cypress-cucumber-preprocessor": {
-    "step_definitions": "cypress/support/step-definitions/",
-    "cucumberJson": {
-      "generate": false,
-      "outputFolder": "cypress/cucumber-json",
-      "filePrefix": "",
-      "fileSuffix": ".cucumber"
-    }
+    "nonGlobalStepDefinitions": true,
+    "stepDefinitions": [
+      "cypress/support/step-definitions/*.{js,ts}",
+      "cypress/support/helper.js"
+    ]
   },
   "config": {
     "commitizen": {

package/scripts/{check_carbon_version.js → check_carbon_version/check_carbon_version.js}

@@ -2,12 +2,17 @@
 const fetch = require("node-fetch");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
-const { version } = require("../package.json");
+const ci = require("ci-info");
+const { version } = require("../../package.json");
 
 dotenv.config();
 const majorVersion = version.split(".")[0];
 
 const checkCarbonVersion = () => {
+  if (ci.BITRISE) {
+    return;
+  }
+
   fetch("https://registry.npmjs.com/carbon-react")
     .then((res) => res.json())
     .then((data) => {
@@ -16,6 +21,7 @@ const checkCarbonVersion = () => {
 
       const diff = Number(latestMajor) - Number(majorVersion);
 
+      // This is ignored as coverage will fail when run in CI without it
       if (diff > 1) {
         console.log(
           `carbon-react version installed is currently ${chalk.yellow(
@@ -27,4 +33,6 @@ const checkCarbonVersion = () => {
     .catch((err) => console.log(err));
 };
 
-if (!process.env.CARBON_INSTALL) checkCarbonVersion();
+checkCarbonVersion();
+
+module.exports = checkCarbonVersion;

package/scripts/{check_rfcs.js → check_rfcs/check_rfcs.js}

@@ -2,6 +2,7 @@
 const { Octokit } = require("@octokit/rest");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
+const ci = require("ci-info");
 
 dotenv.config();
 const octokit = new Octokit({
@@ -33,6 +34,10 @@ const getOpenRfcs = async () => {
 const getRfcTitle = (rfc) => rfc.title.split(": ")[1];
 
 const checkRfcs = async () => {
+  if (ci.BITRISE) {
+    return;
+  }
+
   const openRfcs = await getOpenRfcs();
 
   if (openRfcs.length > 0) {
@@ -46,4 +51,6 @@ const checkRfcs = async () => {
   }
 };
 
-if (!process.env.CARBON_INSTALL) checkRfcs();
+checkRfcs();
+
+module.exports = checkRfcs;

package/esm/__internal__/field-help/field-help.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-export interface FieldHelpProps {
-  /** Child elements */
-  children?: React.ReactNode;
-  /** When true, label is placed in line an input */
-  labelInline?: boolean;
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth?: number;
-}
-
-declare function FieldHelp(props: FieldHelpProps): JSX.Element;
-
-export default FieldHelp;

package/lib/__internal__/field-help/field-help.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-export interface FieldHelpProps {
-  /** Child elements */
-  children?: React.ReactNode;
-  /** When true, label is placed in line an input */
-  labelInline?: boolean;
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth?: number;
-}
-
-declare function FieldHelp(props: FieldHelpProps): JSX.Element;
-
-export default FieldHelp;