carbon-react 114.13.2 → 114.14.1

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

@@ -70,6 +70,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...props
 }, ref) => {
   const selectListId = (0, _react.useRef)((0, _guid.default)());
@@ -378,7 +380,9 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -459,7 +463,16 @@ SimpleSelect.propTypes = {
   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
 };
 SimpleSelect.defaultProps = {
   disablePortal: false,

package/lib/components/select/simple-select/simple-select.d.ts

@@ -44,6 +44,13 @@ export interface SimpleSelectProps
   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 SimpleSelect(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.13.2",
+  "version": "114.14.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -166,6 +166,7 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
+    "@tanstack/react-virtual": "^3.0.0-beta.39",
     "@types/styled-system": "^5.1.11",
     "chalk": "^4.1.1",
     "ci-info": "^3.3.2",

package/esm/components/select/select-list/update-list-scroll.js

@@ -1,21 +0,0 @@
-export default function updateListScrollTop(indexOfCurrent, list, options) {
-  if (!list || !options[indexOfCurrent] || options[indexOfCurrent].current === null) {
-    list.scrollTop = 0;
-    return;
-  }
-
-  let newPosition = 0;
-  const {
-    offsetHeight: listHeight
-  } = list;
-  const {
-    offsetTop: itemTop,
-    offsetHeight: currentItemHeight
-  } = options[indexOfCurrent].current;
-
-  if (itemTop + currentItemHeight > listHeight) {
-    newPosition = itemTop + currentItemHeight - listHeight;
-  }
-
-  list.scrollTop = newPosition;
-}

package/lib/components/select/select-list/update-list-scroll.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = updateListScrollTop;
-
-function updateListScrollTop(indexOfCurrent, list, options) {
-  if (!list || !options[indexOfCurrent] || options[indexOfCurrent].current === null) {
-    list.scrollTop = 0;
-    return;
-  }
-
-  let newPosition = 0;
-  const {
-    offsetHeight: listHeight
-  } = list;
-  const {
-    offsetTop: itemTop,
-    offsetHeight: currentItemHeight
-  } = options[indexOfCurrent].current;
-
-  if (itemTop + currentItemHeight > listHeight) {
-    newPosition = itemTop + currentItemHeight - listHeight;
-  }
-
-  list.scrollTop = newPosition;
-}