carbon-react 153.0.0-beta.1 → 153.0.0

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -17,6 +17,7 @@ var _verticalMenuFullScreen = _interopRequireDefault(require("./__internal__/ver
 var _globals = require("../../../__internal__/dom/globals");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
+var _useMediaQuery = _interopRequireDefault(require("../../../hooks/useMediaQuery"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,6 +32,7 @@ const VerticalMenuFullScreen = ({
 }) => {
   const l = (0, _useLocale.default)();
   const menuWrapperRef = (0, _react.useRef)(null);
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const handleKeyDown = (0, _react.useCallback)(ev => {
     // istanbul ignore else
     if (_events.default.isEscKey(ev)) {
@@ -45,14 +47,13 @@ const VerticalMenuFullScreen = ({
     topModalOverride: true,
     focusCallToActionElement: safeDocument?.activeElement
   });
-
-  // TODO remove this as part of FE-5650
-  if (!isOpen) return null;
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     isOpen: isOpen,
     wrapperRef: menuWrapperRef
   }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenuFullScreen, _extends({
     ref: menuWrapperRef,
+    isOpen: isOpen,
+    prefersReducedMotion: reduceMotion,
     scrollVariant: "light",
     as: "nav",
     "aria-label": ariaLabel,
@@ -71,9 +72,7 @@ const VerticalMenuFullScreen = ({
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
-    bgSize: "small",
-    fontSize: "medium"
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
   }))), /*#__PURE__*/_react.default.createElement(_verticalMenuFullScreen.default.Provider, {
     value: {
       isFullScreen: true

package/lib/components/vertical-menu/vertical-menu.style.d.ts

@@ -18,6 +18,10 @@ export declare const StyledVerticalMenu: import("styled-components").StyledCompo
         width?: string | undefined;
     } | undefined;
 }, never>;
+interface FullScreenProps {
+    isOpen: boolean;
+    prefersReducedMotion?: boolean;
+}
 export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & {
     cssProps?: {
         color?: string | undefined;
@@ -25,5 +29,5 @@ export declare const StyledVerticalMenuFullScreen: import("styled-components").S
         height?: string | undefined;
         width?: string | undefined;
     } | undefined;
-}, never>;
+} & FullScreenProps, never>;
 export {};

package/lib/components/vertical-menu/vertical-menu.style.js

@@ -123,11 +123,30 @@ const StyledVerticalMenuFullScreen = exports.StyledVerticalMenuFullScreen = (0,
   overflow: auto;
   background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
   box-sizing: border-box;
-  transition: all 0.3s ease;
   z-index: ${({
   theme
 }) => theme.zIndex.fullScreenModal};
 
+  ${({
+  prefersReducedMotion
+}) => !prefersReducedMotion && (0, _styledComponents.css)`
+      transition: all 0.3s ease;
+    `}
+
+  ${({
+  isOpen
+}) => isOpen && (0, _styledComponents.css)`
+      visibility: visible;
+      transform: translateX(0);
+    `}
+
+  ${({
+  isOpen
+}) => !isOpen && (0, _styledComponents.css)`
+      transform: translateX(-100%);
+      visibility: hidden;
+    `}
+
   // TODO remove hardcoded values when DS have had chance to review which token to use
   &::-webkit-scrollbar-track {
     background-color: #cccccc;

package/lib/hooks/useCharacterCount/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/hooks/useCharacterCount/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _useDebounce = _interopRequireDefault(require("../useDebounce"));
+var _characterCount = _interopRequireDefault(require("../../__internal__/character-count"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _useDebounce = _interopRequireDefault(require("../__internal__/useDebounce"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/locales/en-gb.js

@@ -115,7 +115,8 @@ const enGB = {
     info: () => "Information",
     success: () => "Success",
     warning: () => "Warning",
-    neutral: () => "Information"
+    neutral: () => "Information",
+    ai: () => "AI Information"
   },
   numeralDate: {
     validation: {

package/lib/locales/locale.d.ts

@@ -93,6 +93,7 @@ interface Locale {
         success: () => string;
         warning: () => string;
         neutral: () => string;
+        ai?: () => string;
     };
     numeralDate: {
         validation: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.0.0-beta.1",
+  "version": "153.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -74,20 +74,20 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-controls": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-toolbars": "^8.4.7",
-    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/addon-a11y": "~8.6.7",
+    "@storybook/addon-actions": "~8.6.7",
+    "@storybook/addon-controls": "~8.6.7",
+    "@storybook/addon-docs": "~8.6.7",
+    "@storybook/addon-toolbars": "~8.6.7",
+    "@storybook/addon-viewport": "~8.6.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/components": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-webpack5": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/types": "^8.4.7",
+    "@storybook/components": "~8.6.7",
+    "@storybook/manager-api": "~8.6.7",
+    "@storybook/preview-api": "~8.6.7",
+    "@storybook/react": "~8.6.7",
+    "@storybook/react-webpack5": "~8.6.7",
+    "@storybook/theming": "~8.6.7",
+    "@storybook/types": "~8.6.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -161,7 +161,7 @@
     "semantic-release": "^24.2.3",
     "semver": "^7.5.4",
     "sprintf-js": "^1.1.3",
-    "storybook": "^8.4.7",
+    "storybook": "~8.6.7",
     "styled-components": "^5.3.11",
     "typescript": "~5.3.0",
     "url-loader": "^4.1.1",

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

@@ -1,9 +0,0 @@
-import React from "react";
-export interface MessageContentProps {
-    title?: React.ReactNode;
-    children?: React.ReactNode;
-    showCloseIcon?: boolean;
-    reduceLeftPadding?: boolean;
-}
-declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;
-export default MessageContent;

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

@@ -1,19 +0,0 @@
-import React from "react";
-import Content from "../../../content";
-import MessageContentStyle from "./message-content.style";
-const MessageContent = ({
-  title,
-  children,
-  showCloseIcon,
-  reduceLeftPadding
-}) => {
-  return /*#__PURE__*/React.createElement(MessageContentStyle, {
-    showCloseIcon: showCloseIcon,
-    reduceLeftPadding: reduceLeftPadding,
-    "data-element": "message-content",
-    "data-role": "message-content"
-  }, /*#__PURE__*/React.createElement(Content, {
-    title: title
-  }, children));
-};
-export default MessageContent;

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

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

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

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

package/esm/components/message/__internal__/type-icon/type-icon.component.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { MessageVariant } from "../../message.component";
-export interface TypeIconProps {
-    transparent?: boolean;
-    variant: MessageVariant;
-}
-declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => React.JSX.Element;
-export default TypeIcon;

package/esm/components/message/__internal__/type-icon/type-icon.component.js

@@ -1,20 +0,0 @@
-import React from "react";
-import TypeIconStyle from "./type-icon.style";
-import Icon from "../../../icon";
-const TypeIcon = ({
-  variant,
-  transparent
-}) => {
-  function iconToRender() {
-    if (variant === "neutral") return "info";
-    if (variant === "success") return "tick_circle";
-    return variant;
-  }
-  return /*#__PURE__*/React.createElement(TypeIconStyle, {
-    variant: variant,
-    transparent: transparent
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: iconToRender()
-  }));
-};
-export default TypeIcon;

package/esm/components/message/__internal__/type-icon/type-icon.style.d.ts

@@ -1,7 +0,0 @@
-import { MessageVariant } from "../../message.component";
-type TypeIconStyleProps = {
-    transparent?: boolean;
-    variant: MessageVariant;
-};
-declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;
-export default TypeIconStyle;

package/esm/components/message/__internal__/type-icon/type-icon.style.js

@@ -1,38 +0,0 @@
-import styled, { css } from "styled-components";
-const messageVariants = {
-  error: "var(--colorsSemanticNegative500)",
-  info: "var(--colorsSemanticInfo500)",
-  success: "var(--colorsSemanticPositive500)",
-  warning: "var(--colorsSemanticCaution500)",
-  neutral: "var(--colorsSemanticNeutral500)",
-  notification: "var(--colorsSemanticInfo500)"
-};
-const TypeIconStyle = styled.div`
-  align-items: center;
-  background-color: ${({
-  variant
-}) => messageVariants[variant]};
-  display: flex;
-  justify-content: center;
-  line-height: 100%;
-  min-width: 30px;
-  text-align: center;
-  span {
-    &:before {
-      color: var(--colorsUtilityYang100);
-    }
-  }
-
-  ${({
-  transparent,
-  variant
-}) => transparent && css`
-      background-color: transparent;
-      span {
-        &:before {
-          color: ${messageVariants[variant]};
-        }
-      }
-    `}
-`;
-export default TypeIconStyle;

package/lib/components/message/__internal__/message-content/message-content.component.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-export interface MessageContentProps {
-    title?: React.ReactNode;
-    children?: React.ReactNode;
-    showCloseIcon?: boolean;
-    reduceLeftPadding?: boolean;
-}
-declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;
-export default MessageContent;

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

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _content = _interopRequireDefault(require("../../../content"));
-var _messageContent = _interopRequireDefault(require("./message-content.style"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MessageContent = ({
-  title,
-  children,
-  showCloseIcon,
-  reduceLeftPadding
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_messageContent.default, {
-    showCloseIcon: showCloseIcon,
-    reduceLeftPadding: reduceLeftPadding,
-    "data-element": "message-content",
-    "data-role": "message-content"
-  }, /*#__PURE__*/_react.default.createElement(_content.default, {
-    title: title
-  }, children));
-};
-var _default = exports.default = MessageContent;

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

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

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

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MessageContentStyle = _styledComponents.default.div`
-  padding: 15px ${({
-  showCloseIcon
-}) => showCloseIcon ? "50px" : "20px"} 15px
-    ${({
-  reduceLeftPadding
-}) => reduceLeftPadding ? "10px" : "20px"};
-  white-space: pre-wrap;
-  flex: 1;
-`;
-var _default = exports.default = MessageContentStyle;

package/lib/components/message/__internal__/type-icon/type-icon.component.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { MessageVariant } from "../../message.component";
-export interface TypeIconProps {
-    transparent?: boolean;
-    variant: MessageVariant;
-}
-declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => React.JSX.Element;
-export default TypeIcon;

package/lib/components/message/__internal__/type-icon/type-icon.component.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _typeIcon = _interopRequireDefault(require("./type-icon.style"));
-var _icon = _interopRequireDefault(require("../../../icon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TypeIcon = ({
-  variant,
-  transparent
-}) => {
-  function iconToRender() {
-    if (variant === "neutral") return "info";
-    if (variant === "success") return "tick_circle";
-    return variant;
-  }
-  return /*#__PURE__*/_react.default.createElement(_typeIcon.default, {
-    variant: variant,
-    transparent: transparent
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: iconToRender()
-  }));
-};
-var _default = exports.default = TypeIcon;

package/lib/components/message/__internal__/type-icon/type-icon.style.d.ts

@@ -1,7 +0,0 @@
-import { MessageVariant } from "../../message.component";
-type TypeIconStyleProps = {
-    transparent?: boolean;
-    variant: MessageVariant;
-};
-declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;
-export default TypeIconStyle;

package/lib/components/message/__internal__/type-icon/type-icon.style.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const messageVariants = {
-  error: "var(--colorsSemanticNegative500)",
-  info: "var(--colorsSemanticInfo500)",
-  success: "var(--colorsSemanticPositive500)",
-  warning: "var(--colorsSemanticCaution500)",
-  neutral: "var(--colorsSemanticNeutral500)",
-  notification: "var(--colorsSemanticInfo500)"
-};
-const TypeIconStyle = _styledComponents.default.div`
-  align-items: center;
-  background-color: ${({
-  variant
-}) => messageVariants[variant]};
-  display: flex;
-  justify-content: center;
-  line-height: 100%;
-  min-width: 30px;
-  text-align: center;
-  span {
-    &:before {
-      color: var(--colorsUtilityYang100);
-    }
-  }
-
-  ${({
-  transparent,
-  variant
-}) => transparent && (0, _styledComponents.css)`
-      background-color: transparent;
-      span {
-        &:before {
-          color: ${messageVariants[variant]};
-        }
-      }
-    `}
-`;
-var _default = exports.default = TypeIconStyle;

package/lib/hooks/__internal__/useCharacterCount/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../esm/hooks/__internal__/useCharacterCount/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}