carbon-react 114.13.1 → 114.14.0

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

@@ -11,7 +11,7 @@ import MenuContext from "../menu.context";
 import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import { StyledMenuItem } from "../menu.style";
-import Search from "../../search";
+import guid from "../../../__internal__/utils/helpers/guid";
 
 const MenuItem = ({
   submenu,
@@ -33,41 +33,70 @@ const MenuItem = ({
   onSubmenuClose,
   overrideColor,
   rel,
-  isFocused,
   ...rest
 }) => {
-  const menuContext = useContext(MenuContext);
+  var _ref$current, _ref$current2;
+
+  const {
+    inFullscreenView,
+    registerItem,
+    unregisterItem,
+    focusId,
+    menuType,
+    openSubmenuId
+  } = useContext(MenuContext);
+  const menuItemId = useRef(guid());
   const submenuContext = useContext(SubmenuContext);
-  const ref = useRef(null);
-  const focusFromMenu = isFocused;
-  const focusFromSubmenu = submenuContext.isFocused;
-  const isChildSearch = useRef(false);
-  const childRef = useRef();
   const {
-    inFullscreenView
-  } = menuContext;
-  const childrenItems = React.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === Search) {
-      isChildSearch.current = true;
+    registerItem: registerSubmenuItem,
+    unregisterItem: unregisterSubmenuItem,
+    submenuFocusId,
+    updateFocusId: updateSubmenuFocusId,
+    handleKeyDown: handleSubmenuKeyDown,
+    shiftTabPressed
+  } = submenuContext;
+  const ref = useRef(null);
+  const focusFromMenu = focusId === menuItemId.current;
+  const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
+  const inputRef = useRef(null);
+  const inputIcon = useRef(null);
+  inputIcon.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[data-element='input-icon-toggle']");
+  inputRef.current = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector("[data-element='input']");
+  const focusRef = inputRef.current ? inputRef : ref;
+  useEffect(() => {
+    const id = menuItemId.current;
+
+    if (registerSubmenuItem) {
+      registerSubmenuItem(id);
+    } else if (registerItem) {
+      registerItem(id);
     }
 
-    return child;
-  });
-  const focusRef = isChildSearch.current ? childRef : ref;
+    return () => {
+      if (unregisterSubmenuItem) {
+        unregisterSubmenuItem(id);
+      } else if (unregisterItem) {
+        unregisterItem(id);
+      }
+    };
+  }, [registerSubmenuItem, registerItem, unregisterSubmenuItem, unregisterItem]);
   useEffect(() => {
-    if (focusFromSubmenu === undefined && focusFromMenu) {
+    var _inputIcon$current;
+
+    if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
       focusRef.current.focus();
-    } else if (focusFromSubmenu) {
+    } else if (focusFromSubmenu && !(shiftTabPressed && ((_inputIcon$current = inputIcon.current) === null || _inputIcon$current === void 0 ? void 0 : _inputIcon$current.getAttribute("tabindex")) === "0")) {
       focusRef.current.focus();
     }
-  }, [focusFromMenu, focusFromSubmenu, focusRef]);
+  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, inputIcon, shiftTabPressed, focusRef]);
   const updateFocusOnClick = useCallback(() => {
-    /* istanbul ignore else */
-    if (submenuContext.updateFocusIndex) {
-      submenuContext.updateFocusIndex(submenuContext.itemIndex);
+    if (updateSubmenuFocusId) {
+      updateSubmenuFocusId(menuItemId.current);
     }
-  }, [submenuContext]);
+  }, [updateSubmenuFocusId]);
   const handleKeyDown = useCallback(event => {
+    var _inputIcon$current2, _inputRef$current;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
@@ -76,16 +105,16 @@ const MenuItem = ({
       ref.current.focus();
     }
 
-    if (submenuContext.handleKeyDown !== undefined) {
-      var _focusRef$current;
+    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
 
-      if (!(isChildSearch.current && document.activeElement === focusRef.current && (_focusRef$current = focusRef.current) !== null && _focusRef$current !== void 0 && _focusRef$current.value)) {
-        submenuContext.handleKeyDown(event);
-      }
-    } else {
-      menuContext.handleKeyDown(event);
+    if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon.current)) {
+      return;
     }
-  }, [focusRef, menuContext, onKeyDown, submenuContext]);
+
+    if (handleSubmenuKeyDown) {
+      handleSubmenuKeyDown(event);
+    }
+  }, [onKeyDown, handleSubmenuKeyDown, inputIcon]);
   const classes = useMemo(() => classNames({
     "carbon-menu-item--has-link": href || onClick
   }), [href, onClick]);
@@ -94,7 +123,7 @@ const MenuItem = ({
     href,
     target,
     rel,
-    onClick: onClick || (isChildSearch.current ? updateFocusOnClick : undefined),
+    onClick: onClick || (inputRef.current ? updateFocusOnClick : undefined),
     icon,
     selected,
     variant,
@@ -102,11 +131,8 @@ const MenuItem = ({
     overrideColor,
     ref
   };
-  const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/React.cloneElement(child, {
-    ref: childRef
-  })) : children;
 
-  const getTitle = title => maxWidth && typeof title === "string" ? title : "";
+  const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
 
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href);
@@ -114,13 +140,14 @@ const MenuItem = ({
   if (submenu) {
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
       "data-component": "menu-item",
-      menuType: menuContext.menuType,
+      menuType: menuType,
       display: "inline-block",
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
       onClick: updateFocusOnClick
     }, rest, {
-      inFullscreenView: inFullscreenView
+      inFullscreenView: inFullscreenView,
+      id: menuItemId.current
     }), /*#__PURE__*/React.createElement(Submenu, _extends({}, typeof submenu !== "boolean" && {
       title: submenu
     }, {
@@ -132,29 +159,31 @@ const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose
-    }, elementProps, rest), childrenItems));
+    }, elementProps, rest), children));
   }
 
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
-    menuType: menuContext.menuType,
-    inSubmenu: submenuContext.handleKeyDown !== undefined,
+    menuType: menuType,
+    inSubmenu: !!handleSubmenuKeyDown,
     display: "inline-block",
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
-    menuOpen: menuOpen
+    menuOpen: menuOpen,
+    id: menuItemId.current
   }), /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({
-    as: isChildSearch.current ? "div" : Link,
-    isSearch: isChildSearch.current,
-    menuType: menuContext.menuType
+    as: inputRef.current ? "div" : Link,
+    isSearch: inputRef.current,
+    menuType: menuType
   }, elementProps, {
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
     inFullscreenView: inFullscreenView,
-    asPassiveItem: asPassiveItem
-  }), clonedChildren));
+    asPassiveItem: asPassiveItem,
+    placeholderTabIndex: asPassiveItem
+  }), children));
 };
 
 MenuItem.propTypes = {
@@ -243,10 +272,7 @@ MenuItem.propTypes = {
   overrideColor: PropTypes.bool,
 
   /** @ignore @private */
-  isFocused: PropTypes.bool,
-
-  /** @ignore @private */
-  indexInMenu: PropTypes.number
+  "data-component": PropTypes.string
 };
 MenuItem.displayName = "MenuItem";
 export default MenuItem;

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

@@ -31,10 +31,14 @@ 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 */
+  /** 
+    @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;
+  /** @private @ignore */
+  "data-component"?: string;
 }
 
 export interface MenuWithChildren extends MenuItemBaseProps {

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

@@ -1,64 +1,60 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useEffect, useState, useCallback, useRef } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import { StyledMenuWrapper } from "./menu.style";
-import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
-import Events from "../../__internal__/utils/helpers/events";
 import MenuContext from "./menu.context";
+import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
+import { MENU_ITEM_CHILDREN_LOCATOR } from "./__internal__/locators";
 
 const Menu = ({
   menuType = "light",
   children,
   ...rest
 }) => {
-  const [focusedItemIndex, setFocusedItemIndex] = useState(undefined);
-  const [openSubmenuIndex, setOpenSubmenuIndex] = useState(null);
+  const [openSubmenuId, setOpenSubmenuId] = useState(null);
   const ref = useRef();
-  const handleKeyDown = useCallback(event => {
-    const newIndex = menuKeyboardNavigation(event, React.Children.toArray(children));
-    setFocusedItemIndex(newIndex);
-  }, [children]);
-  const onClickOutside = useCallback(event => {
-    // Reset the state of the menu when clicking elsewhere
-    if (!Events.composedPath(event).includes(ref.current)) {
-      setFocusedItemIndex(undefined);
-      document.removeEventListener("click", onClickOutside);
-    }
+  const [focusId, setFocusId] = useState(undefined);
+  const [itemIds, setItemIds] = useState([]);
+  const registerItem = useCallback(id => {
+    setItemIds(prevState => {
+      return [...prevState, id];
+    });
   }, []);
-  useEffect(() => {
-    document.addEventListener("click", onClickOutside);
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  });
+  const unregisterItem = useCallback(id => {
+    setItemIds(prevState => {
+      return prevState.filter(itemId => itemId !== id);
+    });
+  }, []);
+
+  const handleKeyDown = event => {
+    /* istanbul ignore else */
+    if (ref.current) {
+      const focusableItems = Array.from(ref.current.querySelectorAll(MENU_ITEM_CHILDREN_LOCATOR));
+      const newIndex = menuKeyboardNavigation(event, focusableItems);
+      setFocusId(itemIds[newIndex]);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(StyledMenuWrapper, _extends({
     "data-component": "menu",
     menuType: menuType
   }, rest, {
     ref: ref,
-    role: "list"
+    role: "list",
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       menuType,
-      handleKeyDown,
       inMenu: true,
-      openSubmenuIndex,
-      setOpenSubmenuIndex
+      openSubmenuId,
+      setOpenSubmenuId,
+      focusId,
+      registerItem,
+      unregisterItem
     }
-  }, React.Children.map(children, (child, index) => {
-    const isFocused = focusedItemIndex === index;
-
-    if ( /*#__PURE__*/React.isValidElement(child) && child.type.displayName === "MenuItem" && child.props.submenu) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        isFocused,
-        indexInMenu: index
-      });
-    }
-
-    return child;
-  })));
+  }, children));
 };
 
 Menu.propTypes = {

package/esm/components/menu/menu.context.d.ts

@@ -1,8 +1,8 @@
 declare var _default: React.Context<{
     menuType: string;
     inMenu: boolean;
-    openSubmenuIndex: null;
-    setOpenSubmenuIndex: () => void;
+    openSubmenuId: null;
+    setOpenSubmenuId: () => void;
 }>;
 export default _default;
 import React from "react";

package/esm/components/menu/menu.context.js

@@ -2,8 +2,8 @@ import React from "react";
 export default /*#__PURE__*/React.createContext({
   menuType: "light",
   inMenu: false,
-  openSubmenuIndex: null,
-  setOpenSubmenuIndex:
+  openSubmenuId: null,
+  setOpenSubmenuId:
   /* istanbul ignore next */
   () => {}
 });

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

@@ -4,7 +4,6 @@ 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";
 
@@ -16,13 +15,9 @@ const ScrollableBlock = ({
   parentVariant,
   ...rest
 }) => {
-  const menuContext = useContext(MenuContext);
-  const submenuContext = useContext(SubmenuContext);
   const {
-    blockIndex,
-    focusIndex,
-    handleKeyDown
-  } = submenuContext;
+    menuType
+  } = useContext(MenuContext);
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -31,35 +26,22 @@ const ScrollableBlock = ({
   };
   return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({
     "data-component": "submenu-scrollable-block",
-    menuType: menuContext.menuType,
+    menuType: menuType,
     variant: variant
   }, rest), parent && /*#__PURE__*/React.createElement(MenuItem, {
+    "data-component": "scrollable-block-parent",
     overrideColor: true,
     variant: parentVariant,
     as: "div",
     href: "#"
   }, parent), /*#__PURE__*/React.createElement(Box, {
     overflowY: "scroll",
-    scrollVariant: scrollVariants[menuContext.menuType],
+    scrollVariant: scrollVariants[menuType],
     height: height,
     p: 0,
     as: "ul",
     role: "list"
-  }, React.Children.map(children, (child, index) => {
-    let isFocused = false;
-    const blockItemFocused = focusIndex >= blockIndex;
-
-    if (blockItemFocused) {
-      isFocused = focusIndex - blockIndex === index;
-    }
-
-    return /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
-      value: {
-        isFocused,
-        handleKeyDown
-      }
-    }, child);
-  })));
+  }, children));
 };
 
 ScrollableBlock.propTypes = {

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -47,6 +47,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -428,7 +430,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     loaderDataRole: "filterable-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,
@@ -514,7 +518,16 @@ FilterableSelect.propTypes = { ...formInputPropTypes,
   listPlacement: PropTypes.oneOf(["top", "bottom", "right", "left"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: PropTypes.bool
+  flipEnabled: PropTypes.bool,
+
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll: PropTypes.bool,
+
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan: PropTypes.number
 };
 FilterableSelect.defaultProps = {
   "data-component": "filterable-select"

package/esm/components/select/filterable-select/filterable-select.d.ts

@@ -51,6 +51,13 @@ export interface FilterableSelectProps
   listPlacement?: Side;
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: boolean;
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll?: boolean;
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan?: number;
 }
 
 declare function FilterableSelect(

package/esm/components/select/list-action-button/list-action-button.style.js

@@ -5,13 +5,16 @@ const StyledListActionButtonWrapper = styled.div`
   padding-bottom: var(--spacing100);
   border-top: 1px solid var(--colorsUtilityDisabled600);
   box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0), 0 -8px 8px 0 rgba(0, 0, 0, 0.03);
+  width: 100%;
+  position: sticky;
+  bottom: 0;
+  background-color: inherit;
 
   ${StyledButton} {
     border: none;
     justify-content: left;
     padding-left: var(--spacing200);
     padding-right: var(--spacing200);
-    width: 100%;
   }
 `;
 export default StyledListActionButtonWrapper;

package/esm/components/select/multi-select/multi-select.component.js

@@ -48,6 +48,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   flipEnabled = true,
   wrapPillText = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -438,7 +440,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,
@@ -523,7 +527,16 @@ MultiSelect.propTypes = { ...formInputPropTypes,
   flipEnabled: PropTypes.bool,
 
   /** Wraps the pill text when it would overflow the input width */
-  wrapPillText: PropTypes.bool
+  wrapPillText: PropTypes.bool,
+
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll: PropTypes.bool,
+
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan: PropTypes.number
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

package/esm/components/select/multi-select/multi-select.d.ts

@@ -48,6 +48,13 @@ export interface MultiSelectProps
   flipEnabled?: boolean;
   /** Wraps the pill text when it would overflow the input width */
   wrapPillText?: boolean;
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll?: boolean;
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan?: number;
 }
 
 declare function MultiSelect(

package/esm/components/select/option/option.component.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledOption from "./option.style";
@@ -10,7 +12,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
   id,
   index,
   hidden,
-  onClick
+  onClick,
+  style,
+  ...rest
 }, ref) => {
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
@@ -38,7 +42,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
     }
   }
 
-  return /*#__PURE__*/React.createElement(StyledOption, {
+  return /*#__PURE__*/React.createElement(StyledOption, _extends({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
@@ -46,8 +50,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
-    hidden: hidden
-  }, children || text);
+    hidden: hidden,
+    style: style
+  }, rest), children || text);
 });
 Option.propTypes = {
   /** The option's visible text, displayed within Textbox of Select, and used for filtering */
@@ -96,6 +101,12 @@ Option.propTypes = {
 
   /** MultiSelect only - fill Pill background with color */
   // eslint-disable-next-line react/no-unused-prop-types
-  fill: PropTypes.bool
+  fill: PropTypes.bool,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying list-item */
+  style: PropTypes.object
 };
 export default Option;

package/esm/components/select/option/option.style.js

@@ -7,6 +7,10 @@ const StyledOption = styled.li`
   padding: 12px 16px;
   width: 100%;
   user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
 
   ${({
   isHighlighted

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -1,17 +1,23 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
-
-const OptionGroupHeader = ({
+const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
   label,
-  icon
-}) => {
-  return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, null, icon && /*#__PURE__*/React.createElement(Icon, {
+  icon,
+  style,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
+    style: style
+  }, rest, {
+    ref: ref
+  }), icon && /*#__PURE__*/React.createElement(Icon, {
     type: icon
   }), /*#__PURE__*/React.createElement("h4", null, label));
-};
-
+});
 OptionGroupHeader.propTypes = {
   /** Heading text */
   label: PropTypes.string.isRequired,
@@ -21,6 +27,12 @@ OptionGroupHeader.propTypes = {
    *
    * Any valid Carbon icon name
    */
-  icon: PropTypes.string
+  icon: PropTypes.string,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying DOM element */
+  style: PropTypes.object
 };
 export default OptionGroupHeader;

package/esm/components/select/option-group-header/option-group-header.style.js

@@ -2,9 +2,10 @@ import styled from "styled-components";
 import StyledIcon from "../../icon/icon.style";
 const StyledOptionGroupHeader = styled.div`
   box-sizing: border-box;
-  height: 26px;
-  margin: 16px 0 0;
+  position: absolute;
+  height: 40px;
   padding-left: 16px;
+  padding-top: 16px;
   display: flex;
   align-items: center;
   width: 100%;