carbon-react 110.2.4 → 110.4.1

package/esm/components/button-toggle-group/button-toggle-group.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
-const ButtonToggleGroupStyle = styled.div`
+const StyledButtonToggleGroup = styled.div`
   display: flex;
 
   ${({
@@ -34,4 +34,4 @@ const ButtonToggleGroupStyle = styled.div`
     margin-left: 4px;
   }
 `;
-export default ButtonToggleGroupStyle;
+export default StyledButtonToggleGroup;

package/esm/components/button-toggle-group/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./button-toggle-group";
+export { default } from "./button-toggle-group.component";
+export type { ButtonToggleGroupProps } from "./button-toggle-group.component";

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/i18n-provider/i18n-provider.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Locale from "../../locales";
+export interface I18nProviderProps {
+    locale?: Partial<Locale>;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => JSX.Element;
+export default I18nProvider;

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -1,6 +1,6 @@
 import React from "react";
-import merge from "lodash/merge";
 import PropTypes from "prop-types";
+import merge from "lodash/merge";
 import Context from "../../__internal__/i18n-context";
 import enGB from "../../locales/en-gb";
 
@@ -9,87 +9,107 @@ const I18nProvider = ({
   children
 }) => locale ? /*#__PURE__*/React.createElement(Context.Provider, {
   value: merge({}, enGB, locale)
-}, children) : children;
+}, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 
-I18nProvider.defaultProps = {
-  locale: undefined
-};
 I18nProvider.propTypes = {
-  locale: PropTypes.shape({
-    locale: PropTypes.func,
-    actions: PropTypes.shape({
-      edit: PropTypes.func,
-      delete: PropTypes.func,
-      reset: PropTypes.func
-    }),
-    actionPopover: PropTypes.shape({
-      ariaLabel: PropTypes.func
-    }),
-    batchSelection: PropTypes.shape({
-      selected: PropTypes.func
-    }),
-    confirm: PropTypes.shape({
-      no: PropTypes.func,
-      yes: PropTypes.func
-    }),
-    date: PropTypes.shape({
-      dateFnsLocale: PropTypes.func
-    }),
-    errors: PropTypes.shape({
-      messages: PropTypes.shape({
-        formSummary: PropTypes.func
-      })
-    }),
-    message: PropTypes.shape({
-      closeButtonAriaLabel: PropTypes.func
-    }),
-    numeralDate: PropTypes.shape({
-      validation: PropTypes.shape({
-        day: PropTypes.func,
-        month: PropTypes.func,
-        year: PropTypes.func
-      })
-    }),
-    pager: PropTypes.shape({
-      show: PropTypes.func,
-      records: PropTypes.func,
-      first: PropTypes.func,
-      last: PropTypes.func,
-      next: PropTypes.func,
-      previous: PropTypes.func,
-      pageX: PropTypes.func,
-      ofY: PropTypes.func
-    }),
-    select: PropTypes.shape({
-      actionButtonText: PropTypes.func,
-      placeholder: PropTypes.func,
-      noResultsForTerm: PropTypes.func
-    }),
-    switch: PropTypes.shape({
-      on: PropTypes.func,
-      off: PropTypes.func
-    }),
-    table: PropTypes.shape({
-      noData: PropTypes.func
-    }),
-    textEditor: PropTypes.shape({
-      tooltipMessages: PropTypes.shape({
-        bold: PropTypes.func,
-        italic: PropTypes.func,
-        bulletList: PropTypes.func,
-        numberList: PropTypes.func
-      }),
-      ariaLabels: PropTypes.shape({
-        bold: PropTypes.func,
-        italic: PropTypes.func,
-        bulletList: PropTypes.func,
-        numberList: PropTypes.func
-      })
-    }),
-    titleSelect: PropTypes.shape({
-      deselect: PropTypes.func
+  "children": PropTypes.node,
+  "locale": PropTypes.shape({
+    "actionPopover": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired
+    }),
+    "actions": PropTypes.shape({
+      "delete": PropTypes.func.isRequired,
+      "edit": PropTypes.func.isRequired
+    }),
+    "batchSelection": PropTypes.shape({
+      "selected": PropTypes.func.isRequired
+    }),
+    "confirm": PropTypes.shape({
+      "no": PropTypes.func.isRequired,
+      "yes": PropTypes.func.isRequired
+    }),
+    "date": PropTypes.shape({
+      "dateFnsLocale": PropTypes.func.isRequired
+    }),
+    "dialog": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "dialogFullScreen": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "errors": PropTypes.shape({
+      "messages": PropTypes.shape({
+        "formSummary": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "heading": PropTypes.shape({
+      "backLinkAriaLabel": PropTypes.func.isRequired
+    }),
+    "link": PropTypes.shape({
+      "skipLinkLabel": PropTypes.func.isRequired
+    }),
+    "locale": PropTypes.func,
+    "message": PropTypes.shape({
+      "closeButtonAriaLabel": PropTypes.func.isRequired
+    }),
+    "numeralDate": PropTypes.shape({
+      "validation": PropTypes.shape({
+        "day": PropTypes.func.isRequired,
+        "month": PropTypes.func.isRequired,
+        "year": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "pager": PropTypes.shape({
+      "first": PropTypes.func.isRequired,
+      "last": PropTypes.func.isRequired,
+      "next": PropTypes.func.isRequired,
+      "ofY": PropTypes.func.isRequired,
+      "pageX": PropTypes.func.isRequired,
+      "previous": PropTypes.func.isRequired,
+      "records": PropTypes.func.isRequired,
+      "show": PropTypes.func.isRequired
+    }),
+    "select": PropTypes.shape({
+      "actionButtonText": PropTypes.func.isRequired,
+      "noResultsForTerm": PropTypes.func.isRequired,
+      "placeholder": PropTypes.func.isRequired
+    }),
+    "sidebar": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "switch": PropTypes.shape({
+      "off": PropTypes.func.isRequired,
+      "on": PropTypes.func.isRequired
+    }),
+    "textEditor": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "bold": PropTypes.func.isRequired,
+        "bulletList": PropTypes.func.isRequired,
+        "italic": PropTypes.func.isRequired,
+        "numberList": PropTypes.func.isRequired
+      }).isRequired,
+      "tooltipMessages": PropTypes.shape({
+        "bold": PropTypes.func.isRequired,
+        "bulletList": PropTypes.func.isRequired,
+        "italic": PropTypes.func.isRequired,
+        "numberList": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "tileSelect": PropTypes.shape({
+      "deselect": PropTypes.func.isRequired
+    }),
+    "toast": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
     })
-  }),
-  children: PropTypes.node.isRequired
+  })
 };
+export { I18nProvider };
 export default I18nProvider;

package/esm/components/i18n-provider/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./i18n-provider";
+export { default } from "./i18n-provider.component";
+export type { I18nProviderProps } from "./i18n-provider.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 {