carbon-react 110.2.4 → 110.3.0

package/esm/__internal__/sticky-footer/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./sticky-footer.component";

package/esm/__internal__/sticky-footer/sticky-footer.component.d.ts

@@ -0,0 +1,15 @@
+export default StickyFooter;
+declare function StickyFooter({ children, containerRef, disableSticky, ...rest }: {
+    [x: string]: any;
+    children: any;
+    containerRef: any;
+    disableSticky: any;
+}): JSX.Element;
+declare namespace StickyFooter {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const containerRef: PropTypes.Validator<any>;
+        const disableSticky: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/__internal__/sticky-footer/sticky-footer.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledStickyFooter;
+declare const StyledStickyFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/__spec_helper__/mock-resize-observer.d.ts

@@ -1,2 +1,2 @@
+declare const setupResizeObserverMock: () => void;
 export default setupResizeObserverMock;
-declare function setupResizeObserverMock(): void;

package/esm/__spec_helper__/mock-resize-observer.js

@@ -1,9 +1,9 @@
 const setupResizeObserverMock = () => {
-  if (!global.window) {
+  if (!window) {
     return;
   }
 
-  global.window.ResizeObserver = global.window.ResizeObserver || jest.fn().mockImplementation(() => ({
+  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn()

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

@@ -0,0 +1,37 @@
+import React from "react";
+export interface DrawerSidebarContextProps {
+    isInSidebar: boolean;
+}
+export interface DrawerProps {
+    /** Duration of a animation */
+    animationDuration?: string;
+    /** Specify an aria-label for the Drawer component */
+    "aria-label"?: string;
+    /** Sets color of sidebar's background */
+    backgroundColor?: string;
+    children: React.ReactNode;
+    /** Set the default state of expansion of the Drawer if component is meant to be used as uncontrolled */
+    defaultExpanded?: boolean;
+    /** Sets the expansion state of the Drawer if component is meant to be used as controlled */
+    expanded?: boolean;
+    expandedWidth?: string;
+    /** Sets custom height to Drawer component */
+    height?: string;
+    /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
+    onChange?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, isExpanded: boolean) => void;
+    sidebar?: React.ReactNode;
+    /** Enables expand/collapse button that controls drawer */
+    showControls?: boolean;
+    /** Sets the heading of the drawer */
+    title?: React.ReactNode;
+    /** Content to display inside of a footer */
+    footer?: React.ReactNode;
+    /** Makes the header of the drawer sticky. Title prop must also be set. */
+    stickyHeader?: boolean;
+    /** Makes the footer of the drawer sticky. Footer prop must also be set. */
+    stickyFooter?: boolean;
+}
+declare const DrawerSidebarContext: React.Context<{}>;
+export declare const Drawer: ({ defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, ...rest }: DrawerProps) => JSX.Element;
+export { DrawerSidebarContext };
+export default Drawer;

package/esm/components/drawer/drawer.component.js

@@ -2,12 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
 import invariant from "invariant";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Icon from "../icon";
-import { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledButton, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle } from "./drawer.style";
+import { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledSidebarToggleButton, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle } from "./drawer.style";
 import StickyFooter from "../../__internal__/sticky-footer";
 const DrawerSidebarContext = /*#__PURE__*/React.createContext({});
 
@@ -28,17 +27,17 @@ const Drawer = ({
   stickyFooter,
   ...rest
 }) => {
-  const drawerSidebarContentRef = useRef();
-  const scrollableContentRef = useRef();
+  const drawerSidebarContentRef = useRef(null);
+  const scrollableContentRef = useRef(null);
   const isControlled = useRef(expanded !== undefined);
   const [isOpening, setIsOpening] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const [isExpanded, setIsExpanded] = useState(isControlled.current ? expanded : defaultExpanded);
-  const timer = useRef();
+  const timer = useRef(null);
   const getAnimationDuration = useCallback(() => {
     if (animationDuration.indexOf("ms") !== -1) {
       const animationTime = animationDuration.substring(0, animationDuration.length - 2);
-      return animationTime;
+      return parseInt(animationTime);
     }
 
     if (animationDuration.indexOf(".") !== -1 || animationDuration.indexOf("s") !== -1) {
@@ -46,11 +45,14 @@ const Drawer = ({
       return parseFloat(animationTime) * 1000;
     }
 
-    return animationDuration;
+    return parseInt(animationDuration);
   }, [animationDuration]);
   const toggleAnimation = useCallback(() => {
     const timeout = getAnimationDuration();
-    clearTimeout(timer.current);
+
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
 
     if (!isExpanded) {
       setIsClosing(false);
@@ -81,14 +83,16 @@ const Drawer = ({
   }, [expanded, toggleAnimation, previousValue, showControls]);
   useEffect(() => {
     return function cleanup() {
-      clearTimeout(timer.current);
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
     };
   }, []);
   const toggleDrawer = useCallback(ev => {
     setIsExpanded(!isExpanded);
     if (onChange) onChange(ev, !isExpanded);
 
-    if (isExpanded) {
+    if (isExpanded && drawerSidebarContentRef.current) {
       drawerSidebarContentRef.current.scrollTop = 0;
     }
 
@@ -97,20 +101,29 @@ const Drawer = ({
   const guid = useRef(createGuid());
   const sidebarId = `DrawerSidebar_${guid.current}`;
   const getClassNames = useCallback(() => {
-    return classNames(isExpanded ? "open" : "closed", isOpening ? "opening" : "", isClosing ? "closing" : "");
+    const classes = [isExpanded ? "open" : "closed"];
+
+    if (isOpening) {
+      classes.push("opening");
+    }
+
+    if (isClosing) {
+      classes.push("closing");
+    }
+
+    return classes.join(" ");
   }, [isExpanded, isOpening, isClosing]);
 
   const getControls = () => {
     if (showControls === undefined) return null;
-    return /*#__PURE__*/React.createElement(StyledButton, {
+    return /*#__PURE__*/React.createElement(StyledSidebarToggleButton, {
       "aria-label": "toggle sidebar",
       "aria-expanded": isExpanded,
       "aria-controls": sidebarId,
       "data-element": "drawer-toggle",
       onClick: toggleDrawer,
       isExpanded: isExpanded,
-      animationDuration: animationDuration,
-      stickyHeader: stickyHeader
+      animationDuration: animationDuration
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "chevron_right"
     }));
@@ -147,46 +160,22 @@ const Drawer = ({
 };
 
 Drawer.propTypes = {
-  children: PropTypes.node.isRequired,
-
-  /** Set the default state of expansion of the Drawer if component is meant to be used as uncontrolled */
-  defaultExpanded: PropTypes.bool,
-
-  /** Sets the expansion state of the Drawer if component is meant to be used as controlled */
-  expanded: PropTypes.bool,
-
-  /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
-  onChange: PropTypes.func,
-
-  /* Sidebar object either html or react component */
-  sidebar: PropTypes.node,
-
-  /* The (% or px) width of the expanded sidebar  */
-  expandedWidth: PropTypes.string,
-
-  /** Duration of a animation */
-  animationDuration: PropTypes.string,
-
-  /** Sets color of sidebar's background */
-  backgroundColor: PropTypes.string,
-
-  /** Sets custom height to Drawer component */
-  height: PropTypes.string,
-
-  /** Sets the heading of the drawer */
-  title: PropTypes.node,
-
-  /** Enables expand/collapse button that controls drawer */
-  showControls: PropTypes.bool,
-
-  /** Content to display inside of a footer */
-  footer: PropTypes.node,
-
-  /** Makes the header of the drawer sticky. Title prop must also be set. */
-  stickyHeader: PropTypes.bool,
-
-  /** Makes the footer of the drawer sticky. Footer prop must also be set. */
-  stickyFooter: PropTypes.bool
+  "animationDuration": PropTypes.string,
+  "aria-label": PropTypes.string,
+  "backgroundColor": PropTypes.string,
+  "children": PropTypes.node,
+  "defaultExpanded": PropTypes.bool,
+  "expanded": PropTypes.bool,
+  "expandedWidth": PropTypes.string,
+  "footer": PropTypes.node,
+  "height": PropTypes.string,
+  "onChange": PropTypes.func,
+  "showControls": PropTypes.bool,
+  "sidebar": PropTypes.node,
+  "stickyFooter": PropTypes.bool,
+  "stickyHeader": PropTypes.bool,
+  "title": PropTypes.node
 };
+export { Drawer };
 export { DrawerSidebarContext };
 export default Drawer;

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

@@ -0,0 +1,27 @@
+declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
+    isExpanded?: boolean | undefined;
+}, never>;
+declare const StyledSidebarTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDrawerChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledDrawerSidebarProps {
+    isExpanded?: boolean;
+    hasControls: boolean;
+}
+declare const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledDrawerSidebarProps, never>;
+interface StyledDrawerContentProps {
+    animationDuration?: string;
+    backgroundColor?: string;
+    expandedWidth: string;
+}
+declare const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, StyledDrawerContentProps, never>;
+interface StyledSidebarToggleButtonProps {
+    animationDuration?: string;
+    isExpanded?: boolean;
+}
+declare const StyledSidebarToggleButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+} & StyledSidebarToggleButtonProps, "type">;
+declare const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", any, {
+    height: string;
+}, never>;
+export { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle, StyledSidebarToggleButton, };

package/esm/components/drawer/drawer.style.js

@@ -165,7 +165,7 @@ const StyledDrawerContent = styled.div`
     }
   }
 `;
-const StyledButton = styled.button.attrs({
+const StyledSidebarToggleButton = styled.button.attrs({
   type: "button"
 })`
   ${({
@@ -207,4 +207,4 @@ const StyledDrawerWrapper = styled.div`
   height
 }) => height};
 `;
-export { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle, StyledButton };
+export { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle, StyledSidebarToggleButton };

package/esm/components/drawer/index.d.ts

@@ -1 +1,2 @@
-export { default, DrawerSidebarContext } from "./drawer";
+export { default, DrawerSidebarContext } from "./drawer.component";
+export type { DrawerSidebarContextProps, DrawerProps, } from "./drawer.component";

package/esm/components/drawer/index.js

@@ -1,2 +1 @@
-export { default } from "./drawer.component";
-export { DrawerSidebarContext } from "./drawer.component";
+export { default, DrawerSidebarContext } from "./drawer.component";

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -41,13 +41,31 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [characterString, setCharacterString] = useState("");
   const formattedChildren = React.Children.map(children, child => {
     if (child.type === ScrollableBlock) {
-      return [...child.props.children];
+      const blockChildren = [...child.props.children];
+
+      if (child.props.parent) {
+        blockChildren.unshift( /*#__PURE__*/React.createElement(MenuItem, null, child.props.parent));
+      }
+
+      return blockChildren;
     }
 
     return child;
   });
   const arrayOfFormattedChildren = React.Children.toArray(formattedChildren);
   const numberOfChildren = useMemo(() => React.Children.count(formattedChildren), [formattedChildren]);
+  const blockIndex = useMemo(() => {
+    var _childrenArray$index;
+
+    const childrenArray = React.Children.toArray(children);
+    let index = childrenArray.findIndex(item => item.type === ScrollableBlock);
+
+    if ((_childrenArray$index = childrenArray[index]) !== null && _childrenArray$index !== void 0 && _childrenArray$index.props.parent) {
+      index += 1;
+    }
+
+    return index;
+  }, [children]);
   const characterTimer = useRef();
   const startCharacterTimeout = useCallback(() => {
     characterTimer.current = setTimeout(() => {
@@ -233,7 +251,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
         isFocused: submenuFocusIndex === index,
         focusIndex: submenuFocusIndex,
         handleKeyDown,
-        blockIndex: React.Children.toArray(children).findIndex(item => item.type === ScrollableBlock)
+        blockIndex
       }
     }, child))));
   }
@@ -266,13 +284,13 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     submenuDirection: submenuDirection,
     variant: variant,
     menuType: menuContext.menuType,
-    role: "list"
+    role: blockIndex === 0 ? "presentation" : "list"
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       isFocused: !blockDoubleFocus && submenuFocusIndex === index,
       focusIndex: submenuFocusIndex,
       handleKeyDown,
-      blockIndex: React.Children.toArray(children).findIndex(item => item.type === ScrollableBlock),
+      blockIndex,
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === MenuItem ? index : undefined
     }

package/esm/components/menu/menu-item/menu-item.component.js

@@ -31,6 +31,7 @@ const MenuItem = ({
   menuOpen,
   onSubmenuOpen,
   onSubmenuClose,
+  overrideColor,
   ...rest
 }) => {
   const menuContext = useContext(MenuContext);
@@ -95,6 +96,7 @@ const MenuItem = ({
     selected,
     variant,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
+    overrideColor,
     ref
   };
   const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/React.cloneElement(child, {
@@ -228,6 +230,9 @@ MenuItem.propTypes = {
   onSubmenuOpen: PropTypes.func,
 
   /** Callback triggered when submenu closes. Only valid with submenu prop */
-  onSubmenuClose: PropTypes.func
+  onSubmenuClose: PropTypes.func,
+
+  /** @ignore @private */
+  overrideColor: PropTypes.bool
 };
 export default MenuItem;

package/esm/components/menu/menu-item/menu-item.d.ts

@@ -29,6 +29,10 @@ export interface MenuItemBaseProps extends LayoutProps, FlexboxProps {
   onSubmenuOpen?: () => void;
   /** Callback triggered when submenu closes. Only valid with submenu prop */
   onSubmenuClose?: () => void;
+  /** @ignore @private
+  private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
+  for other MenuItems inside the block */
+  overrideColor?: boolean;
 }
 
 export interface MenuWithChildren extends MenuItemBaseProps {