carbon-react 110.2.3 → 110.4.0

package/lib/components/drawer/drawer.component.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DrawerSidebarContext = void 0;
+exports.default = exports.DrawerSidebarContext = exports.Drawer = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _invariant = _interopRequireDefault(require("invariant"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -52,17 +50,17 @@ const Drawer = ({
   stickyFooter,
   ...rest
 }) => {
-  const drawerSidebarContentRef = (0, _react.useRef)();
-  const scrollableContentRef = (0, _react.useRef)();
+  const drawerSidebarContentRef = (0, _react.useRef)(null);
+  const scrollableContentRef = (0, _react.useRef)(null);
   const isControlled = (0, _react.useRef)(expanded !== undefined);
   const [isOpening, setIsOpening] = (0, _react.useState)(false);
   const [isClosing, setIsClosing] = (0, _react.useState)(false);
   const [isExpanded, setIsExpanded] = (0, _react.useState)(isControlled.current ? expanded : defaultExpanded);
-  const timer = (0, _react.useRef)();
+  const timer = (0, _react.useRef)(null);
   const getAnimationDuration = (0, _react.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) {
@@ -70,11 +68,14 @@ const Drawer = ({
       return parseFloat(animationTime) * 1000;
     }
 
-    return animationDuration;
+    return parseInt(animationDuration);
   }, [animationDuration]);
   const toggleAnimation = (0, _react.useCallback)(() => {
     const timeout = getAnimationDuration();
-    clearTimeout(timer.current);
+
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
 
     if (!isExpanded) {
       setIsClosing(false);
@@ -105,14 +106,16 @@ const Drawer = ({
   }, [expanded, toggleAnimation, previousValue, showControls]);
   (0, _react.useEffect)(() => {
     return function cleanup() {
-      clearTimeout(timer.current);
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
     };
   }, []);
   const toggleDrawer = (0, _react.useCallback)(ev => {
     setIsExpanded(!isExpanded);
     if (onChange) onChange(ev, !isExpanded);
 
-    if (isExpanded) {
+    if (isExpanded && drawerSidebarContentRef.current) {
       drawerSidebarContentRef.current.scrollTop = 0;
     }
 
@@ -121,20 +124,29 @@ const Drawer = ({
   const guid = (0, _react.useRef)((0, _guid.default)());
   const sidebarId = `DrawerSidebar_${guid.current}`;
   const getClassNames = (0, _react.useCallback)(() => {
-    return (0, _classnames.default)(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.default.createElement(_drawer.StyledButton, {
+    return /*#__PURE__*/_react.default.createElement(_drawer.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.default.createElement(_icon.default, {
       type: "chevron_right"
     }));
@@ -170,47 +182,23 @@ const Drawer = ({
   }, footer))), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerChildren, null, children));
 };
 
+exports.Drawer = Drawer;
 Drawer.propTypes = {
-  children: _propTypes.default.node.isRequired,
-
-  /** Set the default state of expansion of the Drawer if component is meant to be used as uncontrolled */
-  defaultExpanded: _propTypes.default.bool,
-
-  /** Sets the expansion state of the Drawer if component is meant to be used as controlled */
-  expanded: _propTypes.default.bool,
-
-  /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
-  onChange: _propTypes.default.func,
-
-  /* Sidebar object either html or react component */
-  sidebar: _propTypes.default.node,
-
-  /* The (% or px) width of the expanded sidebar  */
-  expandedWidth: _propTypes.default.string,
-
-  /** Duration of a animation */
-  animationDuration: _propTypes.default.string,
-
-  /** Sets color of sidebar's background */
-  backgroundColor: _propTypes.default.string,
-
-  /** Sets custom height to Drawer component */
-  height: _propTypes.default.string,
-
-  /** Sets the heading of the drawer */
-  title: _propTypes.default.node,
-
-  /** Enables expand/collapse button that controls drawer */
-  showControls: _propTypes.default.bool,
-
-  /** Content to display inside of a footer */
-  footer: _propTypes.default.node,
-
-  /** Makes the header of the drawer sticky. Title prop must also be set. */
-  stickyHeader: _propTypes.default.bool,
-
-  /** Makes the footer of the drawer sticky. Footer prop must also be set. */
-  stickyFooter: _propTypes.default.bool
+  "animationDuration": _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "backgroundColor": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "defaultExpanded": _propTypes.default.bool,
+  "expanded": _propTypes.default.bool,
+  "expandedWidth": _propTypes.default.string,
+  "footer": _propTypes.default.node,
+  "height": _propTypes.default.string,
+  "onChange": _propTypes.default.func,
+  "showControls": _propTypes.default.bool,
+  "sidebar": _propTypes.default.node,
+  "stickyFooter": _propTypes.default.bool,
+  "stickyHeader": _propTypes.default.bool,
+  "title": _propTypes.default.node
 };
 var _default = Drawer;
 exports.default = _default;

package/lib/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/lib/components/drawer/drawer.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledButton = exports.StyledSidebarTitle = exports.StyledDrawerSidebar = exports.StyledDrawerChildren = exports.StyledDrawerContent = exports.StyledDrawerWrapper = exports.StyledSidebarHeader = void 0;
+exports.StyledSidebarToggleButton = exports.StyledSidebarTitle = exports.StyledDrawerSidebar = exports.StyledDrawerChildren = exports.StyledDrawerContent = exports.StyledDrawerWrapper = exports.StyledSidebarHeader = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -187,7 +187,7 @@ const StyledDrawerContent = _styledComponents.default.div`
   }
 `;
 exports.StyledDrawerContent = StyledDrawerContent;
-const StyledButton = _styledComponents.default.button.attrs({
+const StyledSidebarToggleButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
   ${({
@@ -223,7 +223,7 @@ const StyledButton = _styledComponents.default.button.attrs({
     `}
   `}
 `;
-exports.StyledButton = StyledButton;
+exports.StyledSidebarToggleButton = StyledSidebarToggleButton;
 const StyledDrawerWrapper = _styledComponents.default.div`
   display: flex;
   height: ${({

package/lib/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/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -66,7 +66,13 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
 
   const formattedChildren = _react.default.Children.map(children, child => {
     if (child.type === _scrollableBlock.default) {
-      return [...child.props.children];
+      const blockChildren = [...child.props.children];
+
+      if (child.props.parent) {
+        blockChildren.unshift( /*#__PURE__*/_react.default.createElement(_menuItem2.default, null, child.props.parent));
+      }
+
+      return blockChildren;
     }
 
     return child;
@@ -75,6 +81,19 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const arrayOfFormattedChildren = _react.default.Children.toArray(formattedChildren);
 
   const numberOfChildren = (0, _react.useMemo)(() => _react.default.Children.count(formattedChildren), [formattedChildren]);
+  const blockIndex = (0, _react.useMemo)(() => {
+    var _childrenArray$index;
+
+    const childrenArray = _react.default.Children.toArray(children);
+
+    let index = childrenArray.findIndex(item => item.type === _scrollableBlock.default);
+
+    if ((_childrenArray$index = childrenArray[index]) !== null && _childrenArray$index !== void 0 && _childrenArray$index.props.parent) {
+      index += 1;
+    }
+
+    return index;
+  }, [children]);
   const characterTimer = (0, _react.useRef)();
   const startCharacterTimeout = (0, _react.useCallback)(() => {
     characterTimer.current = setTimeout(() => {
@@ -260,7 +279,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
         isFocused: submenuFocusIndex === index,
         focusIndex: submenuFocusIndex,
         handleKeyDown,
-        blockIndex: _react.default.Children.toArray(children).findIndex(item => item.type === _scrollableBlock.default)
+        blockIndex
       }
     }, child))));
   }
@@ -293,13 +312,13 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     submenuDirection: submenuDirection,
     variant: variant,
     menuType: menuContext.menuType,
-    role: "list"
+    role: blockIndex === 0 ? "presentation" : "list"
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       isFocused: !blockDoubleFocus && submenuFocusIndex === index,
       focusIndex: submenuFocusIndex,
       handleKeyDown,
-      blockIndex: _react.default.Children.toArray(children).findIndex(item => item.type === _scrollableBlock.default),
+      blockIndex,
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === _menuItem2.default ? index : undefined
     }

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

@@ -55,6 +55,7 @@ const MenuItem = ({
   menuOpen,
   onSubmenuOpen,
   onSubmenuClose,
+  overrideColor,
   ...rest
 }) => {
   const menuContext = (0, _react.useContext)(_menu.default);
@@ -121,6 +122,7 @@ const MenuItem = ({
     selected,
     variant,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
+    overrideColor,
     ref
   };
   const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/_react.default.cloneElement(child, {
@@ -254,7 +256,10 @@ MenuItem.propTypes = {
   onSubmenuOpen: _propTypes.default.func,
 
   /** Callback triggered when submenu closes. Only valid with submenu prop */
-  onSubmenuClose: _propTypes.default.func
+  onSubmenuClose: _propTypes.default.func,
+
+  /** @ignore @private */
+  overrideColor: _propTypes.default.bool
 };
 var _default = MenuItem;
 exports.default = _default;

package/lib/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 {