carbon-react 117.6.1 → 117.7.1

package/esm/components/link/link.component.js

@@ -81,6 +81,9 @@ const Link = /*#__PURE__*/React.forwardRef(({
     "aria-label": ariaLabel,
     ...ariaProps
   };
+  const buttonProps = {
+    type: "button"
+  };
 
   const createLinkBasedOnType = () => {
     let type = "a";
@@ -89,7 +92,10 @@ const Link = /*#__PURE__*/React.forwardRef(({
       type = "button";
     }
 
-    return /*#__PURE__*/React.createElement(type, { ...componentProps,
+    return /*#__PURE__*/React.createElement(type, type === "button" ? { ...componentProps,
+      ...buttonProps,
+      placeholderTabIndex
+    } : { ...componentProps,
       ...(placeholderTabIndex && href === undefined && !onClick && {
         tabIndex: -1
       })

package/esm/components/modal/__internal__/modal-manager.d.ts

@@ -1,14 +1,8 @@
 declare type SetTriggerRefocusFlag = (boolean: boolean) => void;
-declare type ModalList = {
+export declare type ModalList = {
     modal: HTMLElement;
     setTriggerRefocusFlag?: SetTriggerRefocusFlag;
 }[];
-declare global {
-    interface Window {
-        __CARBON_INTERNALS_MODAL_LIST?: ModalList;
-        __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((topModal: HTMLElement | null) => void)[];
-    }
-}
 declare class ModalManagerInstance {
     private modalList;
     constructor();

package/esm/components/pager/__internal__/pager-navigation-link.component.js

@@ -49,7 +49,7 @@ const PagerNavigationLink = ({
     }
   }, [disabled]);
 
-  const handleOnCLick = ev => {
+  const handleOnClick = ev => {
     onClick === null || onClick === void 0 ? void 0 : onClick(ev);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(navLinkConfig[type].destination, pageSize, type);
   };
@@ -64,7 +64,7 @@ const PagerNavigationLink = ({
     disabled: disabled(),
     onClick: // Type assertion due to the fact that StyledPagerLink
     // will always return a button element
-    handleOnCLick,
+    handleOnClick,
     ref: linkRef
   }, text);
 };

package/esm/global.d.ts

@@ -1,3 +1,19 @@
-declare module "@styled-system/prop-types";
-declare module "*.png";
-declare module "*.svg";
+import { ModalList } from "components/modal/__internal__/modal-manager";
+
+declare global {
+  module "*.png";
+  module "*.svg";
+  interface Window {
+    __CARBON_INTERNALS_MODAL_LIST?: ModalList;
+    __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((
+      topModal: HTMLElement | null
+    ) => void)[];
+    __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
+      components: {
+        [key: string]: boolean;
+      };
+      originalValues: string[];
+      restoreValues?: (() => void) | null;
+    };
+  }
+}

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.d.ts

@@ -1,14 +1,3 @@
-declare global {
-    interface Window {
-        __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
-            components: {
-                [key: string]: boolean;
-            };
-            originalValues: string[];
-            restoreValues?: (() => void) | null;
-        };
-    }
-}
 declare class ScrollBlockManager {
     components: {
         [key: string]: boolean;

package/esm/style/utils/filter-out-styled-system-spacing-props.d.ts

@@ -1,2 +1,3 @@
-declare const filterOutStyledSystemSpacingProps: (props: Record<string, any>) => Record<string, unknown>;
+import { SpaceProps } from "styled-system";
+declare const filterOutStyledSystemSpacingProps: (props: Record<string, unknown> | SpaceProps) => Record<string, unknown>;
 export default filterOutStyledSystemSpacingProps;

package/esm/style/utils/filter-out-styled-system-spacing-props.js

@@ -1,5 +1,6 @@
-import styledSystemPropTypes from "@styled-system/prop-types";
+import { marginPropertyNames } from "./filter-styled-system-margin-props";
+import { paddingPropertyNames } from "./filter-styled-system-padding-props";
 
-const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(([key]) => !styledSystemPropTypes.space[key]));
+const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(([key]) => ![...marginPropertyNames, ...paddingPropertyNames].includes(key)));
 
 export default filterOutStyledSystemSpacingProps;

package/esm/style/utils/filter-styled-system-padding-props.d.ts

@@ -1,3 +1,3 @@
 import { PaddingProps } from "styled-system";
 export declare const paddingPropertyNames: string[];
-export default function filterStyledSystemPaddingProps(props: Record<string, any>): PaddingProps;
+export default function filterStyledSystemPaddingProps(props: Record<string, unknown> | PaddingProps): PaddingProps;

package/esm/style/utils/filter-styled-system-padding-props.js

@@ -1,7 +1,5 @@
 import filterObjectProperties from "../../__internal__/filter-object-properties";
 export const paddingPropertyNames = ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"];
-export default function filterStyledSystemPaddingProps( // method should accept any react prop
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-props) {
+export default function filterStyledSystemPaddingProps(props) {
   return filterObjectProperties(props, paddingPropertyNames);
 }

package/esm/style/utils/visually-hidden.js

@@ -7,4 +7,5 @@ export default css`
   padding: 0;
   position: absolute;
   width: 1px;
+  white-space: nowrap;
 `;

package/lib/components/link/link.component.js

@@ -102,6 +102,9 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     "aria-label": ariaLabel,
     ...ariaProps
   };
+  const buttonProps = {
+    type: "button"
+  };
 
   const createLinkBasedOnType = () => {
     let type = "a";
@@ -110,7 +113,10 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
       type = "button";
     }
 
-    return /*#__PURE__*/_react.default.createElement(type, { ...componentProps,
+    return /*#__PURE__*/_react.default.createElement(type, type === "button" ? { ...componentProps,
+      ...buttonProps,
+      placeholderTabIndex
+    } : { ...componentProps,
       ...(placeholderTabIndex && href === undefined && !onClick && {
         tabIndex: -1
       })

package/lib/components/modal/__internal__/modal-manager.d.ts

@@ -1,14 +1,8 @@
 declare type SetTriggerRefocusFlag = (boolean: boolean) => void;
-declare type ModalList = {
+export declare type ModalList = {
     modal: HTMLElement;
     setTriggerRefocusFlag?: SetTriggerRefocusFlag;
 }[];
-declare global {
-    interface Window {
-        __CARBON_INTERNALS_MODAL_LIST?: ModalList;
-        __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((topModal: HTMLElement | null) => void)[];
-    }
-}
 declare class ModalManagerInstance {
     private modalList;
     constructor();

package/lib/components/pager/__internal__/pager-navigation-link.component.js

@@ -65,7 +65,7 @@ const PagerNavigationLink = ({
     }
   }, [disabled]);
 
-  const handleOnCLick = ev => {
+  const handleOnClick = ev => {
     onClick === null || onClick === void 0 ? void 0 : onClick(ev);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(navLinkConfig[type].destination, pageSize, type);
   };
@@ -80,7 +80,7 @@ const PagerNavigationLink = ({
     disabled: disabled(),
     onClick: // Type assertion due to the fact that StyledPagerLink
     // will always return a button element
-    handleOnCLick,
+    handleOnClick,
     ref: linkRef
   }, text);
 };

package/lib/global.d.ts

@@ -1,3 +1,19 @@
-declare module "@styled-system/prop-types";
-declare module "*.png";
-declare module "*.svg";
+import { ModalList } from "components/modal/__internal__/modal-manager";
+
+declare global {
+  module "*.png";
+  module "*.svg";
+  interface Window {
+    __CARBON_INTERNALS_MODAL_LIST?: ModalList;
+    __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((
+      topModal: HTMLElement | null
+    ) => void)[];
+    __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
+      components: {
+        [key: string]: boolean;
+      };
+      originalValues: string[];
+      restoreValues?: (() => void) | null;
+    };
+  }
+}

package/lib/hooks/__internal__/useScrollBlock/scroll-block-manager.d.ts

@@ -1,14 +1,3 @@
-declare global {
-    interface Window {
-        __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
-            components: {
-                [key: string]: boolean;
-            };
-            originalValues: string[];
-            restoreValues?: (() => void) | null;
-        };
-    }
-}
 declare class ScrollBlockManager {
     components: {
         [key: string]: boolean;

package/lib/style/utils/filter-out-styled-system-spacing-props.d.ts

@@ -1,2 +1,3 @@
-declare const filterOutStyledSystemSpacingProps: (props: Record<string, any>) => Record<string, unknown>;
+import { SpaceProps } from "styled-system";
+declare const filterOutStyledSystemSpacingProps: (props: Record<string, unknown> | SpaceProps) => Record<string, unknown>;
 export default filterOutStyledSystemSpacingProps;

package/lib/style/utils/filter-out-styled-system-spacing-props.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
+var _filterStyledSystemMarginProps = require("./filter-styled-system-margin-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _filterStyledSystemPaddingProps = require("./filter-styled-system-padding-props");
 
-const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(([key]) => !_propTypes.default.space[key]));
+const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(([key]) => ![..._filterStyledSystemMarginProps.marginPropertyNames, ..._filterStyledSystemPaddingProps.paddingPropertyNames].includes(key)));
 
 var _default = filterOutStyledSystemSpacingProps;
 exports.default = _default;

package/lib/style/utils/filter-styled-system-padding-props.d.ts

@@ -1,3 +1,3 @@
 import { PaddingProps } from "styled-system";
 export declare const paddingPropertyNames: string[];
-export default function filterStyledSystemPaddingProps(props: Record<string, any>): PaddingProps;
+export default function filterStyledSystemPaddingProps(props: Record<string, unknown> | PaddingProps): PaddingProps;

package/lib/style/utils/filter-styled-system-padding-props.js

@@ -13,8 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const paddingPropertyNames = ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"];
 exports.paddingPropertyNames = paddingPropertyNames;
 
-function filterStyledSystemPaddingProps( // method should accept any react prop
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-props) {
+function filterStyledSystemPaddingProps(props) {
   return (0, _filterObjectProperties.default)(props, paddingPropertyNames);
 }

package/lib/style/utils/visually-hidden.js

@@ -15,6 +15,7 @@ var _default = (0, _styledComponents.css)`
   padding: 0;
   position: absolute;
   width: 1px;
+  white-space: nowrap;
 `;
 
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "117.6.1",
+  "version": "117.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -9,7 +9,7 @@
     "scripts/check_rfcs/index.js"
   ],
   "scripts": {
-    "start": "node ./scripts/check_node_version.js && NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9001 -c .storybook",
+    "start": "node ./scripts/check_node_version.js && cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.config.json",
     "test-update": "jest --config=./jest.config.json --updateSnapshot",
@@ -30,8 +30,8 @@
     "clean-lib": "rimraf ./lib && rimraf ./esm",
     "commit": "git-cz",
     "generate-metadata": "node ./scripts/generate_metadata/index.mjs",
-    "type-check": "tsc --noEmit",
-    "type-check:watch": "npm run type-check -- --watch",
+    "type-check": "tsc --noEmit && tsc -p ./cypress/tsconfig.json",
+    "type-check:watch": "concurrently --names 'src,cypress' -c 'cyan,yellow' 'tsc --noEmit --watch' 'tsc -p ./cypress/tsconfig.json --watch'",
     "build:types": "tsc -p tsconfig-build.json --emitDeclarationOnly --outDir ./lib && tsc -p tsconfig-build.json --emitDeclarationOnly --outDir ./esm"
   },
   "repository": {
@@ -84,6 +84,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/crypto-js": "^4.1.1",
+    "@types/cypress": "^1.1.3",
     "@types/draft-js": "^0.11.7",
     "@types/enzyme": "^3.10.3",
     "@types/invariant": "^2.2.35",
@@ -108,6 +109,7 @@
     "browserslist": "^4.21.5",
     "chromatic": "^6.0.5",
     "commitizen": "^4.2.5",
+    "concurrently": "^8.0.1",
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
@@ -140,7 +142,7 @@
     "fs-extra": "^10.0.0",
     "husky": "^4.3.6",
     "jest": "^27.5.1",
-    "jest-canvas-mock": "^2.3.1",
+    "jest-canvas-mock": "^2.5.0",
     "jest-environment-jsdom": "^27.5.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^6.3.1",