carbon-react 110.2.3 → 110.4.0

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

@@ -15,6 +15,7 @@ const StyledMenuItemWrapper = styled.a`
   clickToOpen,
   maxWidth,
   inFullscreenView,
+  overrideColor,
   as
 }) => css`
     display: inline-block;
@@ -23,43 +24,51 @@ const StyledMenuItemWrapper = styled.a`
     height: 40px;
     position: relative;
     cursor: pointer;
-    background-color: ${menuConfigVariants[menuType].background};
+    ${!overrideColor && css`
+        background-color: ${menuConfigVariants[menuType].background};
+      `}};
+    
+    ${overrideColor && css`
+        &&&& {
+          background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
+        }
+      `}
 
     ${!inFullscreenView && css`
-      max-width: inherit;
-
-      a,
-      button {
-        ${maxWidth && css`
-          box-sizing: border-box;
-          max-width: inherit;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          vertical-align: bottom;
-        `}
-      }
-
-      a:focus,
-      button:focus {
-        box-shadow: inset 0 0 0 var(--borderWidth300)
-          var(--colorsSemanticFocus500);
-        background-color: ${menuConfigVariants[menuType].background};
-        color: ${menuConfigVariants[menuType].color};
-        z-index: 1;
-        position: relative;
-      }
+        max-width: inherit;
+
+        a,
+        button {
+          ${maxWidth && css`
+            box-sizing: border-box;
+            max-width: inherit;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            vertical-align: bottom;
+          `}
+        }
 
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-        color: var(--colorsComponentsMenuYang100);
+        a:focus,
+        button:focus {
+          box-shadow: inset 0 0 0 var(--borderWidth300)
+            var(--colorsSemanticFocus500);
+          background-color: ${menuConfigVariants[menuType].background};
+          color: ${menuConfigVariants[menuType].color};
+          z-index: 1;
+          position: relative;
+        }
 
-        [data-component="icon"] {
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
+
+          [data-component="icon"] {
+            color: var(--colorsComponentsMenuYang100);
+          }
         }
-      }
-    `}
+      `}
 
     a,
     ${StyledLink} a,
@@ -92,159 +101,159 @@ const StyledMenuItemWrapper = styled.a`
     }
 
     ${selected && css`
-      background-color: ${menuConfigVariants[menuType].selected};
-
-      a:focus,
-      button:focus {
         background-color: ${menuConfigVariants[menuType].selected};
-      }
 
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-      }
-    `}
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].selected};
+        }
+
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+        }
+      `}
 
     ${variant === "alternate" && !inFullscreenView && css`
-      &&& {
-        background-color: ${menuConfigVariants[menuType].alternate};
-      }
+        &&& {
+          background-color: ${menuConfigVariants[menuType].alternate};
+        }
 
-      &&& a:focus,
-      &&& button:focus {
-        background-color: ${menuConfigVariants[menuType].alternate};
-      }
+        &&& a:focus,
+        &&& button:focus {
+          background-color: ${menuConfigVariants[menuType].alternate};
+        }
 
-      &&& a:hover,
-      &&& button:hover {
-        background-color: ${menuConfigVariants[menuType].alternateHover};
-      }
-    `}
+        &&& a:hover,
+        &&& button:hover {
+          background-color: ${menuConfigVariants[menuType].alternateHover};
+        }
+      `}
 
     ${isOpen && css`
-      a,
-      button {
-        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-        color: ${menuConfigVariants[menuType].color};
-      }
-    `} 
+        a,
+        button {
+          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+          color: ${menuConfigVariants[menuType].color};
+        }
+      `} 
     
     ${hasSubmenu && css`
-      background-color: ${menuConfigVariants[menuType].submenuBackground};
-
-      a:focus,
-      button:focus {
         background-color: ${menuConfigVariants[menuType].submenuBackground};
-        color: ${menuConfigVariants[menuType].color};
 
-        [data-component="icon"] {
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].submenuBackground};
           color: ${menuConfigVariants[menuType].color};
+
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
+
+          ${clickToOpen && isOpen && css`
+            background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
+          `}
         }
 
-        ${clickToOpen && isOpen && css`
+        a:hover,
+        button:hover {
           background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-        `}
-      }
+          color: var(--colorsComponentsMenuYang100);
 
-      a:hover,
-      button:hover {
-        background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-        color: var(--colorsComponentsMenuYang100);
+          ${!(href || clickToOpen) && css`
+            cursor: default;
+            background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+            color: ${menuConfigVariants[menuType].color};
+          `}
 
-        ${!(href || clickToOpen) && css`
-          cursor: default;
-          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-          color: ${menuConfigVariants[menuType].color};
-        `}
-
-        [data-component="icon"] {
-          color: ${menuConfigVariants[menuType].color};
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
         }
-      }
 
-      ${selected && css`
-        background-color: ${menuConfigVariants[menuType].submenuSelected};
-
-        a:focus,
-        button:focus {
+        ${selected && css`
           background-color: ${menuConfigVariants[menuType].submenuSelected};
-        }
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-          color: var(--colorsComponentsMenuYang100);
-        }
-      `}
+          a:focus,
+          button:focus {
+            background-color: ${menuConfigVariants[menuType].submenuSelected};
+          }
 
-      ${showDropdownArrow && css`
-        > a,
-        > button {
-          padding-right: 32px;
-        }
+          a:hover,
+          button:hover {
+            background-color: var(--colorsComponentsMenuAutumnStandard600);
+            color: var(--colorsComponentsMenuYang100);
+          }
+        `}
 
-        a::before,
-        button::before {
-          display: block;
-          margin-top: -2px;
-          pointer-events: none;
-          position: absolute;
-          right: 16px;
-          top: 50%;
-          z-index: 2;
-          content: "";
-          width: 0;
-          height: 0;
-          border-top: 5px solid ${menuConfigVariants[menuType].text};
-          border-right: 4px solid transparent;
-          border-bottom: 4px solid transparent;
-          border-left: 4px solid transparent;
-        }
-      `};
-    `}
+        ${showDropdownArrow && css`
+          > a,
+          > button {
+            padding-right: 32px;
+          }
+
+          a::before,
+          button::before {
+            display: block;
+            margin-top: -2px;
+            pointer-events: none;
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            z-index: 2;
+            content: "";
+            width: 0;
+            height: 0;
+            border-top: 5px solid ${menuConfigVariants[menuType].text};
+            border-right: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            border-left: 4px solid transparent;
+          }
+        `}
+      `}
 
     ${isSearch && css`
-      padding: 2px 16px;
-    `}
+        padding: 2px 16px;
+      `}
 
     ${inFullscreenView && css`
-      ${as === "div" && css`
-        cursor: default;
-        padding: 0 16px;
+        ${as === "div" && css`
+          cursor: default;
+          padding: 0 16px;
 
-        :hover {
-          background: transparent;
-        }
-      `}
+          :hover {
+            background: transparent;
+          }
+        `}
 
-      a,
+        a,
       ${StyledLink} a,
       button,
       ${StyledLink} button {
-        width: 100vw;
-        box-sizing: border-box;
-      }
-
-      a:focus,
-      button:focus {
-        box-shadow: inset 0 0 0 var(--borderWidth300)
-          var(--colorsSemanticFocus500);
-        z-index: 1;
-        position: relative;
-      }
-
-      a:focus,
-      a:hover,
-      button:focus,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-        color: var(--colorsComponentsMenuYang100);
-
-        [data-component="icon"] {
+          width: 100vw;
+          box-sizing: border-box;
+        }
+
+        a:focus,
+        button:focus {
+          box-shadow: inset 0 0 0 var(--borderWidth300)
+            var(--colorsSemanticFocus500);
+          z-index: 1;
+          position: relative;
+        }
+
+        a:focus,
+        a:hover,
+        button:focus,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
+
+          [data-component="icon"] {
+            color: var(--colorsComponentsMenuYang100);
+          }
         }
-      }
-    `}
+      `}
   `}
 `;
 export default StyledMenuItemWrapper;

package/esm/components/menu/scrollable-block/scrollable-block.component.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import MenuContext from "../menu.context";
+import MenuItem from "../menu-item";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
@@ -11,6 +12,8 @@ const ScrollableBlock = ({
   children,
   height,
   variant = "default",
+  parent,
+  parentVariant,
   ...rest
 }) => {
   const menuContext = useContext(MenuContext);
@@ -29,14 +32,19 @@ const ScrollableBlock = ({
   return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
-    variant: variant,
-    role: "presentation"
-  }, rest), /*#__PURE__*/React.createElement(Box, {
+    variant: variant
+  }, rest), parent && /*#__PURE__*/React.createElement(MenuItem, {
+    overrideColor: true,
+    variant: parentVariant,
+    as: "div",
+    href: "#"
+  }, parent), /*#__PURE__*/React.createElement(Box, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
     p: 0,
-    role: "presentation"
+    as: "ul",
+    role: "list"
   }, React.Children.map(children, (child, index) => {
     let isFocused = false;
     const blockItemFocused = focusIndex >= blockIndex;
@@ -62,6 +70,14 @@ ScrollableBlock.propTypes = {
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /** set the colour variant for a menuType */
-  variant: PropTypes.oneOf(["default", "alternate"])
+  variant: PropTypes.oneOf(["default", "alternate"]),
+
+  /** the element, if any, displayed at the top of the block to be its semantic "parent",
+   * but not part of the scrollable section
+   */
+  parent: PropTypes.node,
+
+  /** the colour variant for the parent element, if different from the variant of the block */
+  parentVariant: PropTypes.oneOf(["default", "alternate"])
 };
 export default ScrollableBlock;

package/esm/components/menu/scrollable-block/scrollable-block.d.ts

@@ -7,6 +7,12 @@ export interface ScrollableBlockProps {
   height?: string | number;
   /** set the colour variant for a menuType */
   variant?: "default" | "alternate";
+  /** the element, if any, displayed at the top of the block to be its semantic "parent",
+   * but not part of the scrollable section
+   */
+  parent?: React.ReactElement;
+  /** the colour variant for the parent element, if different from the variant of the block */
+  parentVariant?: "default" | "alternate";
 }
 
 declare function ScrollableBlock(props: ScrollableBlockProps): JSX.Element;

package/esm/components/menu/scrollable-block/scrollable-block.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledMenuItemWrapper from "../menu-item/menu-item.style";
 import menuConfigVariants from "../menu.config";
-const StyledScrollableBlock = styled.div`
+const StyledScrollableBlock = styled.li`
   ${({
   menuType,
   variant

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -0,0 +1,6 @@
+export const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, {
+    alternateStyling: any;
+    isInSidebar: any;
+    position: any;
+}, never>;

package/esm/components/tabs/tab/tab.style.d.ts

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

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

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

package/lib/__internal__/radio-button-mapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./radio-button-mapper";
+export * from "./radio-button-mapper";

package/lib/{components/button-toggle-group/documentation → __internal__/radio-button-mapper}/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _notes.default;
+    return _radioButtonMapper.default;
   }
 });
 
-var _notes = _interopRequireDefault(require("./notes.md"));
+var _radioButtonMapper = _interopRequireDefault(require("./radio-button-mapper.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/__internal__/radio-button-mapper/package.json

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

package/lib/__internal__/radio-button-mapper/radio-button-mapper.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+export interface RadioButtonMapperProps {
+  /** The RadioButton objects to be rendered in the group */
+  children?: React.ReactNode;
+  /** Specifies the name prop to be applied to each button in the group */
+  name: string;
+  /** Callback fired when each RadioButton is blurred */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Callback fired when the user selects a RadioButton */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Callback fired on key down */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Value of the selected RadioButton */
+  value?: string;
+}
+
+declare function RadioButtonMapper(props?: RadioButtonMapperProps): JSX.Element;
+RadioButtonMapper.displayName = "RadioButtonMapper";
+
+export default RadioButtonMapper;

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

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

package/lib/__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/lib/__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/lib/__internal__/utils/helpers/tags/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./tags";
+export type { TagProps } from "./tags";

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

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

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 
 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/lib/components/button-toggle/button-toggle.component.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 import { StyledButtonToggleLabelProps } from "./button-toggle.style";
 import { ButtonToggleInputProps } from "./button-toggle-input.component";
 export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<StyledButtonToggleLabelProps> {
-    /** A required prop. This is the button text. */
-    children: React.ReactNode;
+    /** Text to display for the button. */
+    children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -18,7 +18,7 @@ export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<Style
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
 }
 export declare const ButtonToggle: {
-    (props: ButtonToggleProps): JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onChange, onFocus, size, value, }: ButtonToggleProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

package/lib/components/button-toggle/button-toggle.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _buttonToggle = require("./button-toggle.style");
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -25,26 +27,26 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const ButtonToggle = props => {
-  const {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    buttonIcon,
-    buttonIconSize = "small",
-    checked,
-    children,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    disabled,
-    grouped,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size = "medium",
-    value
-  } = props;
+const ButtonToggle = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  buttonIcon,
+  buttonIconSize = "small",
+  checked,
+  children,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  grouped,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  size = "medium",
+  value
+}) => {
+  !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `buttonIcon` must be defined, or this node must have children") : (0, _invariant.default)(false) : void 0;
   const {
     onMouseEnter,
     onMouseLeave

package/lib/components/button-toggle/button-toggle.style.d.ts

@@ -2,7 +2,7 @@ import { IconType } from "../icon";
 export declare type ButtonToggleIconSizes = "small" | "large";
 declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface StyledButtonToggleLabelProps {
-    /** buttonIcon to render. */
+    /** The icon to be rendered inside of the button */
     buttonIcon?: IconType;
     /** Sets the size of the buttonIcon (eg. large) */
     buttonIconSize?: ButtonToggleIconSizes;