carbon-react 110.2.3 → 110.4.0

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

@@ -32,6 +32,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
   clickToOpen,
   maxWidth,
   inFullscreenView,
+  overrideColor,
   as
 }) => (0, _styledComponents.css)`
     display: inline-block;
@@ -40,43 +41,51 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     height: 40px;
     position: relative;
     cursor: pointer;
-    background-color: ${_menu.default[menuType].background};
+    ${!overrideColor && (0, _styledComponents.css)`
+        background-color: ${_menu.default[menuType].background};
+      `}};
+    
+    ${overrideColor && (0, _styledComponents.css)`
+        &&&& {
+          background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
+        }
+      `}
 
     ${!inFullscreenView && (0, _styledComponents.css)`
-      max-width: inherit;
-
-      a,
-      button {
-        ${maxWidth && (0, _styledComponents.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: ${_menu.default[menuType].background};
-        color: ${_menu.default[menuType].color};
-        z-index: 1;
-        position: relative;
-      }
+        max-width: inherit;
+
+        a,
+        button {
+          ${maxWidth && (0, _styledComponents.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: ${_menu.default[menuType].background};
+          color: ${_menu.default[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,
     ${_link.StyledLink} a,
@@ -109,159 +118,159 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     }
 
     ${selected && (0, _styledComponents.css)`
-      background-color: ${_menu.default[menuType].selected};
-
-      a:focus,
-      button:focus {
         background-color: ${_menu.default[menuType].selected};
-      }
 
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-      }
-    `}
+        a:focus,
+        button:focus {
+          background-color: ${_menu.default[menuType].selected};
+        }
+
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+        }
+      `}
 
     ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
-      &&& {
-        background-color: ${_menu.default[menuType].alternate};
-      }
+        &&& {
+          background-color: ${_menu.default[menuType].alternate};
+        }
 
-      &&& a:focus,
-      &&& button:focus {
-        background-color: ${_menu.default[menuType].alternate};
-      }
+        &&& a:focus,
+        &&& button:focus {
+          background-color: ${_menu.default[menuType].alternate};
+        }
 
-      &&& a:hover,
-      &&& button:hover {
-        background-color: ${_menu.default[menuType].alternateHover};
-      }
-    `}
+        &&& a:hover,
+        &&& button:hover {
+          background-color: ${_menu.default[menuType].alternateHover};
+        }
+      `}
 
     ${isOpen && (0, _styledComponents.css)`
-      a,
-      button {
-        background-color: ${_menu.default[menuType].submenuItemBackground};
-        color: ${_menu.default[menuType].color};
-      }
-    `} 
+        a,
+        button {
+          background-color: ${_menu.default[menuType].submenuItemBackground};
+          color: ${_menu.default[menuType].color};
+        }
+      `} 
     
     ${hasSubmenu && (0, _styledComponents.css)`
-      background-color: ${_menu.default[menuType].submenuBackground};
-
-      a:focus,
-      button:focus {
         background-color: ${_menu.default[menuType].submenuBackground};
-        color: ${_menu.default[menuType].color};
 
-        [data-component="icon"] {
+        a:focus,
+        button:focus {
+          background-color: ${_menu.default[menuType].submenuBackground};
           color: ${_menu.default[menuType].color};
+
+          [data-component="icon"] {
+            color: ${_menu.default[menuType].color};
+          }
+
+          ${clickToOpen && isOpen && (0, _styledComponents.css)`
+            background-color: ${_menu.default[menuType].submenuOpenedBackground};
+          `}
         }
 
-        ${clickToOpen && isOpen && (0, _styledComponents.css)`
+        a:hover,
+        button:hover {
           background-color: ${_menu.default[menuType].submenuOpenedBackground};
-        `}
-      }
+          color: var(--colorsComponentsMenuYang100);
 
-      a:hover,
-      button:hover {
-        background-color: ${_menu.default[menuType].submenuOpenedBackground};
-        color: var(--colorsComponentsMenuYang100);
+          ${!(href || clickToOpen) && (0, _styledComponents.css)`
+            cursor: default;
+            background-color: ${_menu.default[menuType].submenuItemBackground};
+            color: ${_menu.default[menuType].color};
+          `}
 
-        ${!(href || clickToOpen) && (0, _styledComponents.css)`
-          cursor: default;
-          background-color: ${_menu.default[menuType].submenuItemBackground};
-          color: ${_menu.default[menuType].color};
-        `}
-
-        [data-component="icon"] {
-          color: ${_menu.default[menuType].color};
+          [data-component="icon"] {
+            color: ${_menu.default[menuType].color};
+          }
         }
-      }
 
-      ${selected && (0, _styledComponents.css)`
-        background-color: ${_menu.default[menuType].submenuSelected};
-
-        a:focus,
-        button:focus {
+        ${selected && (0, _styledComponents.css)`
           background-color: ${_menu.default[menuType].submenuSelected};
-        }
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-          color: var(--colorsComponentsMenuYang100);
-        }
-      `}
+          a:focus,
+          button:focus {
+            background-color: ${_menu.default[menuType].submenuSelected};
+          }
 
-      ${showDropdownArrow && (0, _styledComponents.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 ${_menu.default[menuType].text};
-          border-right: 4px solid transparent;
-          border-bottom: 4px solid transparent;
-          border-left: 4px solid transparent;
-        }
-      `};
-    `}
+        ${showDropdownArrow && (0, _styledComponents.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 ${_menu.default[menuType].text};
+            border-right: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            border-left: 4px solid transparent;
+          }
+        `}
+      `}
 
     ${isSearch && (0, _styledComponents.css)`
-      padding: 2px 16px;
-    `}
+        padding: 2px 16px;
+      `}
 
     ${inFullscreenView && (0, _styledComponents.css)`
-      ${as === "div" && (0, _styledComponents.css)`
-        cursor: default;
-        padding: 0 16px;
+        ${as === "div" && (0, _styledComponents.css)`
+          cursor: default;
+          padding: 0 16px;
 
-        :hover {
-          background: transparent;
-        }
-      `}
+          :hover {
+            background: transparent;
+          }
+        `}
 
-      a,
+        a,
       ${_link.StyledLink} a,
       button,
       ${_link.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);
+          }
         }
-      }
-    `}
+      `}
   `}
 `;
 var _default = StyledMenuItemWrapper;

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

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _menu = _interopRequireDefault(require("../menu.context"));
 
+var _menuItem = _interopRequireDefault(require("../menu-item"));
+
 var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
 
 var _scrollableBlock = _interopRequireDefault(require("./scrollable-block.style"));
@@ -29,6 +31,8 @@ const ScrollableBlock = ({
   children,
   height,
   variant = "default",
+  parent,
+  parentVariant,
   ...rest
 }) => {
   const menuContext = (0, _react.useContext)(_menu.default);
@@ -47,14 +51,19 @@ const ScrollableBlock = ({
   return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
-    variant: variant,
-    role: "presentation"
-  }, rest), /*#__PURE__*/_react.default.createElement(_box.default, {
+    variant: variant
+  }, rest), parent && /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    overrideColor: true,
+    variant: parentVariant,
+    as: "div",
+    href: "#"
+  }, parent), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
     p: 0,
-    role: "presentation"
+    as: "ul",
+    role: "list"
   }, _react.default.Children.map(children, (child, index) => {
     let isFocused = false;
     const blockItemFocused = focusIndex >= blockIndex;
@@ -80,7 +89,15 @@ ScrollableBlock.propTypes = {
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
   /** set the colour variant for a menuType */
-  variant: _propTypes.default.oneOf(["default", "alternate"])
+  variant: _propTypes.default.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.default.node,
+
+  /** the colour variant for the parent element, if different from the variant of the block */
+  parentVariant: _propTypes.default.oneOf(["default", "alternate"])
 };
 var _default = ScrollableBlock;
 exports.default = _default;

package/lib/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/lib/components/menu/scrollable-block/scrollable-block.style.js

@@ -17,7 +17,7 @@ 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 StyledScrollableBlock = _styledComponents.default.div`
+const StyledScrollableBlock = _styledComponents.default.li`
   ${({
   menuType,
   variant

package/lib/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/lib/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/lib/components/tabs/tabs.style.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "110.2.3",
+  "version": "110.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

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

@@ -1,38 +0,0 @@
-import ButtonToggleGroup from "./button-toggle-group.component";
-import Definition from "./../../../demo/utils/definition";
-const definition = new Definition("button-toggle-group", ButtonToggleGroup, {
-  description: "Adds support for validation, warning and info messages on a group of Button Toggles.",
-  designerNotes: `
-* Similar to [Button Toggle](/components/button-toggle), but use this component when you need your button toggles to act like a single form component, with field help and validation.
-* Unlike [Button Toggle](/components/button-toggle), this component doesn't require one option to be auto-selected.
-  `,
-  relatedComponentsNotes: `
-* Don't need validation on your options? [Try Button Toggle](/components/button-toggle).
-  `,
-  type: "form",
-  propValues: {
-    children: `<ButtonToggle name={ 'grouped' } id={ 'foo' } value={ 'foo' }>
-    Foo
-  </ButtonToggle>
-  <ButtonToggle name={ 'grouped' } id={ 'bar' } value={ 'bar' }>
-    Bar
-  </ButtonToggle>
-  <ButtonToggle name={ 'grouped' } id={ 'baz' } value={ 'baz' }>
-    Baz
-  </ButtonToggle>`,
-    value: ""
-  },
-  propTypes: {
-    children: "Node",
-    className: "String",
-    value: "String"
-  },
-  requiredProps: ["children"],
-  propDescriptions: {
-    value: "The value associated with the button toggle group.",
-    children: "The children to render for the button toggle group."
-  },
-  hiddenProps: ["children", "value"]
-});
-definition.isAnInput();
-export default definition;

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

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-import { ButtonToggleProps } from "../button-toggle";
-import { ValidationProps } from "../../__internal__/validations";
-
-type ButtonToggle =
-  | React.ReactElement<ButtonToggleProps>
-  | boolean
-  | null
-  | undefined;
-
-export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
-  /** 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. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** Unique id for the root element of the component */
-  id: string;
-  /** Specifies the name prop to be applied to each button in the group */
-  name: string;
-  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
-  children?: ButtonToggle | ButtonToggle[];
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel?: boolean;
-  /** Text for the label. */
-  label?: string;
-  /** Text for the labels help tooltip. */
-  labelHelp?: React.ReactNode;
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing?: 1 | 2;
-  /** The percentage width of the ButtonToggleGroup. */
-  inputWidth?: number;
-  /** The text for the field help. */
-  fieldHelp?: string;
-  /** Sets the field help to inline. */
-  fieldHelpInline?: boolean;
-  /** Sets the label to be inline. */
-  labelInline?: boolean;
-  /** The percentage width of the label. */
-  labelWidth?: number;
-  /** The alignment for the text in the label. */
-  labelAlign?: string;
-  /** Callback triggered by blur event on the input. */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Callback triggered by change event on the input. */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** The value of the Button Toggle Group */
-  value?: string;
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-declare function ButtonToggleGroup(props: ButtonToggleGroupProps): JSX.Element;
-
-export default ButtonToggleGroup;

package/esm/components/button-toggle-group/documentation/index.js

@@ -1 +0,0 @@
-export { default } from "./notes.md";

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

@@ -1,44 +0,0 @@
-import * as React from "react";
-
-export interface DrawerSidebarContextProps {
-  isInSidebar: boolean;
-}
-
-export interface DrawerPropTypes {
-  /** Duration of a animation */
-  animationDuration?: 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;
-  /* The (% or px) width of the expanded sidebar  */
-  expandedWidth?: string;
-  /** Sets custom height to Drawer component */
-  height?: string;
-  /** Callback fired when expansion state changes */
-  onChange?: (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    isExpanded: boolean
-  ) => void;
-  /* Sidebar object either html or react component */
-  sidebar?: React.ReactNode;
-  /** Enables expand/collapse button that controls drawer */
-  showControls?: boolean;
-  /** Sets title heading of sidebar's content */
-  title?: string;
-  /** 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<DrawerSidebarContextProps>;
-declare function Drawer(props: DrawerPropTypes): JSX.Element;
-
-export { DrawerSidebarContext };
-export default Drawer;

package/lib/components/button-toggle-group/__definition__.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.component"));
-
-var _definition = _interopRequireDefault(require("./../../../demo/utils/definition"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const definition = new _definition.default("button-toggle-group", _buttonToggleGroup.default, {
-  description: "Adds support for validation, warning and info messages on a group of Button Toggles.",
-  designerNotes: `
-* Similar to [Button Toggle](/components/button-toggle), but use this component when you need your button toggles to act like a single form component, with field help and validation.
-* Unlike [Button Toggle](/components/button-toggle), this component doesn't require one option to be auto-selected.
-  `,
-  relatedComponentsNotes: `
-* Don't need validation on your options? [Try Button Toggle](/components/button-toggle).
-  `,
-  type: "form",
-  propValues: {
-    children: `<ButtonToggle name={ 'grouped' } id={ 'foo' } value={ 'foo' }>
-    Foo
-  </ButtonToggle>
-  <ButtonToggle name={ 'grouped' } id={ 'bar' } value={ 'bar' }>
-    Bar
-  </ButtonToggle>
-  <ButtonToggle name={ 'grouped' } id={ 'baz' } value={ 'baz' }>
-    Baz
-  </ButtonToggle>`,
-    value: ""
-  },
-  propTypes: {
-    children: "Node",
-    className: "String",
-    value: "String"
-  },
-  requiredProps: ["children"],
-  propDescriptions: {
-    value: "The value associated with the button toggle group.",
-    children: "The children to render for the button toggle group."
-  },
-  hiddenProps: ["children", "value"]
-});
-definition.isAnInput();
-var _default = definition;
-exports.default = _default;