carbon-react 114.13.1 → 114.14.0

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

@@ -19,11 +19,11 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _menu = require("./menu.style");
 
-var _keyboardNavigation = require("./__internal__/keyboard-navigation");
+var _menu2 = _interopRequireDefault(require("./menu.context"));
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _keyboardNavigation = require("./__internal__/keyboard-navigation");
 
-var _menu2 = _interopRequireDefault(require("./menu.context"));
+var _locators = require("./__internal__/locators");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,52 +38,48 @@ const Menu = ({
   children,
   ...rest
 }) => {
-  const [focusedItemIndex, setFocusedItemIndex] = (0, _react.useState)(undefined);
-  const [openSubmenuIndex, setOpenSubmenuIndex] = (0, _react.useState)(null);
+  const [openSubmenuId, setOpenSubmenuId] = (0, _react.useState)(null);
   const ref = (0, _react.useRef)();
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    const newIndex = (0, _keyboardNavigation.menuKeyboardNavigation)(event, _react.default.Children.toArray(children));
-    setFocusedItemIndex(newIndex);
-  }, [children]);
-  const onClickOutside = (0, _react.useCallback)(event => {
-    // Reset the state of the menu when clicking elsewhere
-    if (!_events.default.composedPath(event).includes(ref.current)) {
-      setFocusedItemIndex(undefined);
-      document.removeEventListener("click", onClickOutside);
-    }
+  const [focusId, setFocusId] = (0, _react.useState)(undefined);
+  const [itemIds, setItemIds] = (0, _react.useState)([]);
+  const registerItem = (0, _react.useCallback)(id => {
+    setItemIds(prevState => {
+      return [...prevState, id];
+    });
+  }, []);
+  const unregisterItem = (0, _react.useCallback)(id => {
+    setItemIds(prevState => {
+      return prevState.filter(itemId => itemId !== id);
+    });
   }, []);
-  (0, _react.useEffect)(() => {
-    document.addEventListener("click", onClickOutside);
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  });
+
+  const handleKeyDown = event => {
+    /* istanbul ignore else */
+    if (ref.current) {
+      const focusableItems = Array.from(ref.current.querySelectorAll(_locators.MENU_ITEM_CHILDREN_LOCATOR));
+      const newIndex = (0, _keyboardNavigation.menuKeyboardNavigation)(event, focusableItems);
+      setFocusId(itemIds[newIndex]);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, _extends({
     "data-component": "menu",
     menuType: menuType
   }, rest, {
     ref: ref,
-    role: "list"
+    role: "list",
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
     value: {
       menuType,
-      handleKeyDown,
       inMenu: true,
-      openSubmenuIndex,
-      setOpenSubmenuIndex
+      openSubmenuId,
+      setOpenSubmenuId,
+      focusId,
+      registerItem,
+      unregisterItem
     }
-  }, _react.default.Children.map(children, (child, index) => {
-    const isFocused = focusedItemIndex === index;
-
-    if ( /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === "MenuItem" && child.props.submenu) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        isFocused,
-        indexInMenu: index
-      });
-    }
-
-    return child;
-  })));
+  }, children));
 };
 
 Menu.propTypes = {

package/lib/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/lib/components/menu/menu.context.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = /*#__PURE__*/_react.default.createContext({
   menuType: "light",
   inMenu: false,
-  openSubmenuIndex: null,
-  setOpenSubmenuIndex:
+  openSubmenuId: null,
+  setOpenSubmenuId:
   /* istanbul ignore next */
   () => {}
 });

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

@@ -13,8 +13,6 @@ 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"));
 
 var _box = _interopRequireDefault(require("../../box"));
@@ -35,13 +33,9 @@ const ScrollableBlock = ({
   parentVariant,
   ...rest
 }) => {
-  const menuContext = (0, _react.useContext)(_menu.default);
-  const submenuContext = (0, _react.useContext)(_submenu.default);
   const {
-    blockIndex,
-    focusIndex,
-    handleKeyDown
-  } = submenuContext;
+    menuType
+  } = (0, _react.useContext)(_menu.default);
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -50,35 +44,22 @@ const ScrollableBlock = ({
   };
   return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
     "data-component": "submenu-scrollable-block",
-    menuType: menuContext.menuType,
+    menuType: menuType,
     variant: variant
   }, rest), parent && /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    "data-component": "scrollable-block-parent",
     overrideColor: true,
     variant: parentVariant,
     as: "div",
     href: "#"
   }, parent), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
-    scrollVariant: scrollVariants[menuContext.menuType],
+    scrollVariant: scrollVariants[menuType],
     height: height,
     p: 0,
     as: "ul",
     role: "list"
-  }, _react.default.Children.map(children, (child, index) => {
-    let isFocused = false;
-    const blockItemFocused = focusIndex >= blockIndex;
-
-    if (blockItemFocused) {
-      isFocused = focusIndex - blockIndex === index;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_submenu.default.Provider, {
-      value: {
-        isFocused,
-        handleKeyDown
-      }
-    }, child);
-  })));
+  }, children));
 };
 
 ScrollableBlock.propTypes = {

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

@@ -73,6 +73,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -455,7 +457,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     loaderDataRole: "filterable-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -543,7 +547,16 @@ FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   listPlacement: _propTypes.default.oneOf(["top", "bottom", "right", "left"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: _propTypes.default.bool
+  flipEnabled: _propTypes.default.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.default.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.default.number
 };
 FilterableSelect.defaultProps = {
   "data-component": "filterable-select"

package/lib/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/lib/components/select/list-action-button/list-action-button.style.js

@@ -16,13 +16,16 @@ const StyledListActionButtonWrapper = _styledComponents.default.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;
 
   ${_button.default} {
     border: none;
     justify-content: left;
     padding-left: var(--spacing200);
     padding-right: var(--spacing200);
-    width: 100%;
   }
 `;
 var _default = StyledListActionButtonWrapper;

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

@@ -76,6 +76,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   wrapPillText = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -468,7 +470,9 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
@@ -555,7 +559,16 @@ MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   flipEnabled: _propTypes.default.bool,
 
   /** Wraps the pill text when it would overflow the input width */
-  wrapPillText: _propTypes.default.bool
+  wrapPillText: _propTypes.default.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.default.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.default.number
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

package/lib/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/lib/components/select/option/option.component.js

@@ -19,6 +19,8 @@ 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; }
 
+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); }
+
 const Option = /*#__PURE__*/_react.default.forwardRef(({
   text,
   children,
@@ -27,7 +29,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
   id,
   index,
   hidden,
-  onClick
+  onClick,
+  style,
+  ...rest
 }, ref) => {
   const selectListContext = (0, _react.useContext)(_selectListContext.default);
   let isSelected = selectListContext.currentOptionsListIndex === index;
@@ -55,7 +59,7 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     }
   }
 
-  return /*#__PURE__*/_react.default.createElement(_option.default, {
+  return /*#__PURE__*/_react.default.createElement(_option.default, _extends({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
@@ -63,8 +67,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
-    hidden: hidden
-  }, children || text);
+    hidden: hidden,
+    style: style
+  }, rest), children || text);
 });
 
 Option.propTypes = {
@@ -114,7 +119,13 @@ Option.propTypes = {
 
   /** MultiSelect only - fill Pill background with color */
   // eslint-disable-next-line react/no-unused-prop-types
-  fill: _propTypes.default.bool
+  fill: _propTypes.default.bool,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying list-item */
+  style: _propTypes.default.object
 };
 var _default = Option;
 exports.default = _default;

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

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

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

@@ -15,14 +15,22 @@ var _icon = _interopRequireDefault(require("../../icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const OptionGroupHeader = ({
+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); }
+
+const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
   label,
-  icon
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_optionGroupHeader.default, null, icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
+  icon,
+  style,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_optionGroupHeader.default, _extends({
+    style: style
+  }, rest, {
+    ref: ref
+  }), icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: icon
   }), /*#__PURE__*/_react.default.createElement("h4", null, label));
-};
+});
 
 OptionGroupHeader.propTypes = {
   /** Heading text */
@@ -33,7 +41,13 @@ OptionGroupHeader.propTypes = {
    *
    * Any valid Carbon icon name
    */
-  icon: _propTypes.default.string
+  icon: _propTypes.default.string,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying DOM element */
+  style: _propTypes.default.object
 };
 var _default = OptionGroupHeader;
 exports.default = _default;

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

@@ -13,9 +13,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const StyledOptionGroupHeader = _styledComponents.default.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%;

package/lib/components/select/option-row/option-row.component.js

@@ -19,6 +19,8 @@ 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; }
 
+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); }
+
 const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   id,
   text,
@@ -26,7 +28,9 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   onSelect,
   value,
   index,
-  hidden
+  hidden,
+  style,
+  ...rest
 }, ref) => {
   const handleClick = () => {
     onSelect({
@@ -43,7 +47,7 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_optionRow.default, {
+  return /*#__PURE__*/_react.default.createElement(_optionRow.default, _extends({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
@@ -51,8 +55,9 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
-    hidden: hidden
-  }, children);
+    hidden: hidden,
+    style: style
+  }, rest), children);
 });
 
 OptionRow.propTypes = {
@@ -88,7 +93,13 @@ OptionRow.propTypes = {
    * @private
    * @ignore
    * True when option should be hidden from the view (prop added by the SelectList component) */
-  hidden: _propTypes.default.bool
+  hidden: _propTypes.default.bool,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying DOM element */
+  style: _propTypes.default.object
 };
 var _default = OptionRow;
 exports.default = _default;

package/lib/components/select/option-row/option-row.style.js

@@ -13,6 +13,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledOptionRow = _styledComponents.default.tr`
   cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
 
   ${({
   hidden

package/lib/components/select/select-list/select-list-container.style.js

@@ -14,12 +14,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const StyledSelectListContainer = _styledComponents.default.div`
   background-color: white;
   box-shadow: var(--boxShadow100);
-  overflow: hidden;
   animation: fadeIn 250ms ease-out;
   position: absolute;
   z-index: ${({
   theme
 }) => theme.zIndex.popover};
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
 
   @keyframes fadeIn {
     0% {