carbon-react 152.3.1 → 152.5.0

package/esm/components/dialog/dialog.component.d.ts

@@ -46,6 +46,7 @@ export interface DialogProps extends ModalProps, TagProps {
     height?: string;
     /** Adds Help tooltip to Header */
     help?: string;
+    highlightVariant?: string;
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */

package/esm/components/dialog/dialog.component.js

@@ -31,6 +31,7 @@ export const Dialog = /*#__PURE__*/forwardRef(({
   bespokeFocusTrap,
   disableClose,
   help,
+  highlightVariant = "default",
   role = "dialog",
   contentPadding = {},
   greyBackground = false,
@@ -115,6 +116,7 @@ export const Dialog = /*#__PURE__*/forwardRef(({
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef
   }, dialogProps, {
+    highlightVariant: highlightVariant,
     role: role,
     tabIndex: -1
   }, contentPadding, {

package/esm/components/dialog/dialog.style.d.ts

@@ -3,6 +3,7 @@ declare const DialogPositioner: import("styled-components").StyledComponent<"div
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
     dialogHeight?: string | undefined;
     backgroundColor: string;
+    highlightVariant?: string | undefined;
 } & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;

package/esm/components/dialog/dialog.style.js

@@ -51,6 +51,20 @@ const StyledDialog = styled.div`
     outline: none;
   }
 
+  ${({
+  highlightVariant
+}) => highlightVariant === "ai" && `
+      &::before {
+        content: "";
+        position: absolute;
+        top: -8px;
+        height: 100px;
+        width: 100%;
+        z-index: -1;
+        background: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+        border-radius: var(--borderRadius200) var(--borderRadius200) 0 0;
+      }`}
+
   ${({
   backgroundColor
 }) => css`

package/esm/components/tile/tile.style.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export default StyledTile;

package/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.d.ts

@@ -12,5 +12,5 @@ export interface VerticalMenuFullScreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
-export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element | null;
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
 export default VerticalMenuFullScreen;

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

@@ -12,6 +12,7 @@ import VerticalMenuFullScreenContext from "./__internal__/vertical-menu-full-scr
 import { getDocument } from "../../../__internal__/dom/globals";
 import Events from "../../../__internal__/utils/helpers/events/events";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
+import useMediaQuery from "../../../hooks/useMediaQuery";
 export const VerticalMenuFullScreen = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -22,6 +23,7 @@ export const VerticalMenuFullScreen = ({
 }) => {
   const l = useLocale();
   const menuWrapperRef = useRef(null);
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const handleKeyDown = useCallback(ev => {
     // istanbul ignore else
     if (Events.isEscKey(ev)) {
@@ -36,14 +38,13 @@ export const VerticalMenuFullScreen = ({
     topModalOverride: true,
     focusCallToActionElement: safeDocument?.activeElement
   });
-
-  // TODO remove this as part of FE-5650
-  if (!isOpen) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
     isOpen: isOpen,
     wrapperRef: menuWrapperRef
   }, /*#__PURE__*/React.createElement(StyledVerticalMenuFullScreen, _extends({
     ref: menuWrapperRef,
+    isOpen: isOpen,
+    prefersReducedMotion: reduceMotion,
     scrollVariant: "light",
     as: "nav",
     "aria-label": ariaLabel,
@@ -62,9 +63,7 @@ export const VerticalMenuFullScreen = ({
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
-    bgSize: "small",
-    fontSize: "medium"
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
   }))), /*#__PURE__*/React.createElement(VerticalMenuFullScreenContext.Provider, {
     value: {
       isFullScreen: true

package/esm/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/esm/components/vertical-menu/vertical-menu.style.js

@@ -114,11 +114,30 @@ export const StyledVerticalMenuFullScreen = styled(StyledBox)`
   overflow: auto;
   background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
   box-sizing: border-box;
-  transition: all 0.3s ease;
   z-index: ${({
   theme
 }) => theme.zIndex.fullScreenModal};
 
+  ${({
+  prefersReducedMotion
+}) => !prefersReducedMotion && css`
+      transition: all 0.3s ease;
+    `}
+
+  ${({
+  isOpen
+}) => isOpen && css`
+      visibility: visible;
+      transform: translateX(0);
+    `}
+
+  ${({
+  isOpen
+}) => !isOpen && 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/components/dialog/dialog.component.d.ts

@@ -46,6 +46,7 @@ export interface DialogProps extends ModalProps, TagProps {
     height?: string;
     /** Adds Help tooltip to Header */
     help?: string;
+    highlightVariant?: string;
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */

package/lib/components/dialog/dialog.component.js

@@ -40,6 +40,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   bespokeFocusTrap,
   disableClose,
   help,
+  highlightVariant = "default",
   role = "dialog",
   contentPadding = {},
   greyBackground = false,
@@ -124,6 +125,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef
   }, dialogProps, {
+    highlightVariant: highlightVariant,
     role: role,
     tabIndex: -1
   }, contentPadding, {

package/lib/components/dialog/dialog.style.d.ts

@@ -3,6 +3,7 @@ declare const DialogPositioner: import("styled-components").StyledComponent<"div
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
     dialogHeight?: string | undefined;
     backgroundColor: string;
+    highlightVariant?: string | undefined;
 } & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;

package/lib/components/dialog/dialog.style.js

@@ -60,6 +60,20 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
     outline: none;
   }
 
+  ${({
+  highlightVariant
+}) => highlightVariant === "ai" && `
+      &::before {
+        content: "";
+        position: absolute;
+        top: -8px;
+        height: 100px;
+        width: 100%;
+        z-index: -1;
+        background: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+        border-radius: var(--borderRadius200) var(--borderRadius200) 0 0;
+      }`}
+
   ${({
   backgroundColor
 }) => (0, _styledComponents.css)`

package/lib/components/tile/tile.style.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export default StyledTile;

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.d.ts

@@ -12,5 +12,5 @@ export interface VerticalMenuFullScreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
-export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element | null;
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
 export default VerticalMenuFullScreen;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.3.1",
+  "version": "152.5.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",