carbon-react 114.13.2 → 114.14.0

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%;

package/esm/components/select/option-row/option-row.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 StyledOptionRow from "./option-row.style";
@@ -9,7 +11,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   onSelect,
   value,
   index,
-  hidden
+  hidden,
+  style,
+  ...rest
 }, ref) => {
   const handleClick = () => {
     onSelect({
@@ -26,7 +30,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
 
-  return /*#__PURE__*/React.createElement(StyledOptionRow, {
+  return /*#__PURE__*/React.createElement(StyledOptionRow, _extends({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
@@ -34,8 +38,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
-    hidden: hidden
-  }, children);
+    hidden: hidden,
+    style: style
+  }, rest), children);
 });
 OptionRow.propTypes = {
   /** The option's visible text, displayed within Textbox of Select */
@@ -70,6 +75,12 @@ OptionRow.propTypes = {
    * @private
    * @ignore
    * True when option should be hidden from the view (prop added by the SelectList component) */
-  hidden: PropTypes.bool
+  hidden: PropTypes.bool,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying DOM element */
+  style: PropTypes.object
 };
 export default OptionRow;

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

@@ -1,6 +1,10 @@
 import styled, { css } from "styled-components";
 const StyledOptionRow = styled.tr`
   cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
 
   ${({
   hidden

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

@@ -3,12 +3,22 @@ import { baseTheme } from "../../../style/themes";
 const StyledSelectListContainer = styled.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% {