carbon-react 117.6.0 → 117.7.0

package/esm/components/message/message-content/message-content.component.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
-interface MessageContentProps {
+export interface MessageContentProps {
     /** set message title */
     title?: React.ReactNode;
     /** set content to component */
     children?: React.ReactNode;
+    /** determines if the close icon is shown */
+    showCloseIcon?: boolean;
 }
-declare const MessageContent: ({ title, children }: MessageContentProps) => JSX.Element;
+declare const MessageContent: ({ title, children, showCloseIcon, }: MessageContentProps) => JSX.Element;
 export default MessageContent;

package/esm/components/message/message-content/message-content.component.js

@@ -5,15 +5,20 @@ import MessageContentStyle from "./message-content.style";
 
 const MessageContent = ({
   title,
-  children
+  children,
+  showCloseIcon
 }) => {
-  return /*#__PURE__*/React.createElement(MessageContentStyle, null, /*#__PURE__*/React.createElement(Content, {
+  return /*#__PURE__*/React.createElement(MessageContentStyle, {
+    showCloseIcon: showCloseIcon,
+    "data-element": "message-content"
+  }, /*#__PURE__*/React.createElement(Content, {
     title: title
   }, children));
 };
 
 MessageContent.propTypes = {
   "children": PropTypes.node,
+  "showCloseIcon": PropTypes.bool,
   "title": PropTypes.node
 };
 export default MessageContent;

package/esm/components/message/message-content/message-content.style.d.ts

@@ -1,2 +1,3 @@
-declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { MessageContentProps } from "./message-content.component";
+declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon">, never>;
 export default MessageContentStyle;

package/esm/components/message/message-content/message-content.style.js

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 const MessageContentStyle = styled.div`
-  padding: 15px 50px 15px 20px;
+  padding: 15px ${({
+  showCloseIcon
+}) => showCloseIcon ? "50px" : "20px"} 15px
+    20px;
   white-space: pre-wrap;
   flex: 1;
 

package/esm/components/message/message.component.js

@@ -48,6 +48,7 @@ const Message = ({
     variant: variant,
     transparent: transparent
   }), /*#__PURE__*/React.createElement(MessageContent, {
+    showCloseIcon: showCloseIcon,
     title: title
   }, children), renderCloseIcon()) : null;
 };

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/toast/toast.style.d.ts

@@ -12,7 +12,7 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, {
+declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, Pick<import("../message/message-content/message-content.component").MessageContentProps, "showCloseIcon"> & {
     isNotice?: boolean | undefined;
     isDismiss?: boolean | undefined;
 }, never>;

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/message/message-content/message-content.component.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
-interface MessageContentProps {
+export interface MessageContentProps {
     /** set message title */
     title?: React.ReactNode;
     /** set content to component */
     children?: React.ReactNode;
+    /** determines if the close icon is shown */
+    showCloseIcon?: boolean;
 }
-declare const MessageContent: ({ title, children }: MessageContentProps) => JSX.Element;
+declare const MessageContent: ({ title, children, showCloseIcon, }: MessageContentProps) => JSX.Element;
 export default MessageContent;

package/lib/components/message/message-content/message-content.component.js

@@ -17,15 +17,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const MessageContent = ({
   title,
-  children
+  children,
+  showCloseIcon
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_messageContent.default, null, /*#__PURE__*/_react.default.createElement(_content.default, {
+  return /*#__PURE__*/_react.default.createElement(_messageContent.default, {
+    showCloseIcon: showCloseIcon,
+    "data-element": "message-content"
+  }, /*#__PURE__*/_react.default.createElement(_content.default, {
     title: title
   }, children));
 };
 
 MessageContent.propTypes = {
   "children": _propTypes.default.node,
+  "showCloseIcon": _propTypes.default.bool,
   "title": _propTypes.default.node
 };
 var _default = MessageContent;

package/lib/components/message/message-content/message-content.style.d.ts

@@ -1,2 +1,3 @@
-declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { MessageContentProps } from "./message-content.component";
+declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon">, never>;
 export default MessageContentStyle;

package/lib/components/message/message-content/message-content.style.js

@@ -10,7 +10,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const MessageContentStyle = _styledComponents.default.div`
-  padding: 15px 50px 15px 20px;
+  padding: 15px ${({
+  showCloseIcon
+}) => showCloseIcon ? "50px" : "20px"} 15px
+    20px;
   white-space: pre-wrap;
   flex: 1;
 

package/lib/components/message/message.component.js

@@ -66,6 +66,7 @@ const Message = ({
     variant: variant,
     transparent: transparent
   }), /*#__PURE__*/_react.default.createElement(_messageContent.default, {
+    showCloseIcon: showCloseIcon,
     title: title
   }, children), renderCloseIcon()) : null;
 };

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/toast/toast.style.d.ts

@@ -12,7 +12,7 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, {
+declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, Pick<import("../message/message-content/message-content.component").MessageContentProps, "showCloseIcon"> & {
     isNotice?: boolean | undefined;
     isDismiss?: boolean | undefined;
 }, never>;

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.0",
+  "version": "117.7.0",
   "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",