@innovaccer/design-system 2.23.3 → 2.25.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1698770699214 
+   * Generated on: 1699952738884 
    *      Package: @innovaccer/design-system
-   *      Version: v2.23.3
+   *      Version: v2.25.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -16579,7 +16579,928 @@
     SelectionCard.useMultiSelect = useMultiSelect;
     SelectionCard.useSingleSelect = useSingleSelect;
 
-    var version = "2.23.3";
+    function arrayMove(array, from, to) {
+      array = array.slice();
+      array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
+      return array;
+    }
+    function getTranslateOffset(element) {
+      var style = window.getComputedStyle(element);
+      return Math.max(parseInt(style['margin-top'], 10), parseInt(style['margin-bottom'], 10)) + element.getBoundingClientRect().height;
+    }
+    function isTouchEvent(event) {
+      return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length;
+    }
+    function transformItem(element, offsetY, offsetX) {
+      if (offsetY === void 0) {
+        offsetY = 0;
+      }
+
+      if (offsetX === void 0) {
+        offsetX = 0;
+      }
+
+      if (!element) return;
+
+      if (offsetY === null || offsetX === null) {
+        element.style.removeProperty('transform');
+        return;
+      }
+
+      element.style.transform = "translate(" + offsetX + "px, " + offsetY + "px)";
+    }
+    function setItemTransition(element, duration, timing) {
+      if (element) {
+        element.style['transition'] = "transform " + duration + "ms" + (timing ? " " + timing : '');
+      }
+    }
+    function binarySearch(array, targetValue) {
+      var min = 0;
+      var max = array.length - 1;
+      var guess;
+
+      while (min <= max) {
+        guess = Math.floor((max + min) / 2);
+
+        if (!array[guess + 1] || array[guess] <= targetValue && array[guess + 1] >= targetValue) {
+          return guess;
+        } else if (array[guess] < targetValue && array[guess + 1] < targetValue) {
+          min = guess + 1;
+        } else {
+          max = guess - 1;
+        }
+      }
+
+      return -1;
+    }
+    var schd = function schd(fn) {
+      var lastArgs = [];
+      var frameId = null;
+
+      var wrapperFn = function wrapperFn() {
+        var args = [];
+
+        for (var _i = 0; _i < arguments.length; _i++) {
+          args[_i] = arguments[_i];
+        }
+
+        lastArgs = args;
+
+        if (frameId) {
+          return;
+        }
+
+        frameId = requestAnimationFrame(function () {
+          frameId = null;
+          fn.apply(void 0, lastArgs);
+        });
+      };
+
+      wrapperFn.cancel = function () {
+        if (frameId) {
+          cancelAnimationFrame(frameId);
+        }
+      };
+
+      return wrapperFn;
+    };
+
+    var AUTOSCROLL_ACTIVE_OFFSET = 200;
+    var AUTOSCROLL_SPEED_RATIO = 10;
+
+    var Draggable = function (_super) {
+      __extends(Draggable, _super);
+
+      function Draggable(props) {
+        var _this = _super.call(this, props) || this;
+
+        _this.listRef = /*#__PURE__*/React__namespace.createRef();
+        _this.ghostRef = /*#__PURE__*/React__namespace.createRef();
+        _this.topOffsets = [];
+        _this.itemTranslateOffsets = [];
+        _this.initialYOffset = 0;
+        _this.lastScroll = 0;
+        _this.lastYOffset = 0;
+        _this.lastListYOffset = 0;
+        _this.needle = -1;
+        _this.afterIndex = -2;
+        _this.state = {
+          itemDragged: -1,
+          itemDraggedOutOfBounds: -1,
+          selectedItem: -1,
+          initialX: 0,
+          initialY: 0,
+          targetX: 0,
+          targetY: 0,
+          targetHeight: 0,
+          targetWidth: 0,
+          scrollingSpeed: 0,
+          scrollWindow: false
+        };
+
+        _this.doScrolling = function () {
+          var _a = _this.state,
+              scrollingSpeed = _a.scrollingSpeed,
+              scrollWindow = _a.scrollWindow;
+          var listEl = _this.listRef.current;
+          window.requestAnimationFrame(function () {
+            if (scrollWindow) {
+              window.scrollTo(window.pageXOffset, window.pageYOffset + scrollingSpeed * 1.5);
+            } else {
+              listEl.scrollTop += scrollingSpeed;
+            }
+
+            if (scrollingSpeed !== 0) {
+              _this.doScrolling();
+            }
+          });
+        };
+
+        _this.getChildren = function () {
+          if (_this.listRef && _this.listRef.current) {
+            return Array.from(_this.listRef.current.children);
+          }
+
+          return [];
+        };
+
+        _this.calculateOffsets = function () {
+          _this.topOffsets = _this.getChildren().map(function (item) {
+            return item.getBoundingClientRect().top;
+          });
+          _this.itemTranslateOffsets = _this.getChildren().map(function (item) {
+            return getTranslateOffset(item);
+          });
+        };
+
+        _this.getTargetIndex = function (e) {
+          return _this.getChildren().findIndex(function (child) {
+            return child === e.target || child.contains(e.target);
+          });
+        };
+
+        _this.onMouseOrTouchStart = function (e) {
+          var _a;
+
+          if (_this.dropTimeout && _this.state.itemDragged > -1) {
+            window.clearTimeout(_this.dropTimeout);
+
+            _this.finishDrop();
+          }
+
+          var isTouch = isTouchEvent(e);
+          if (!isTouch && e.button !== 0) return;
+
+          var index = _this.getTargetIndex(e);
+
+          var listItemTouched = _this.getChildren()[index];
+
+          var isValidDragHandle = (_a = e.target) === null || _a === void 0 ? void 0 : _a.classList.contains('Listbox-item--drag-icon');
+          if (!isValidDragHandle) return;
+          e.preventDefault();
+
+          if (isTouch) {
+            var opts = {
+              passive: false
+            };
+            listItemTouched.style.touchAction = 'none';
+            document.addEventListener('touchend', _this.schdOnEnd, opts);
+            document.addEventListener('touchmove', _this.schdOnTouchMove, opts);
+            document.addEventListener('touchcancel', _this.schdOnEnd, opts);
+          } else {
+            document.addEventListener('mousemove', _this.schdOnMouseMove);
+            document.addEventListener('mouseup', _this.schdOnEnd);
+
+            var listItemDragged = _this.getChildren()[_this.state.itemDragged];
+
+            if (listItemDragged && listItemDragged.style) {
+              listItemDragged.style.touchAction = '';
+            }
+          }
+
+          _this.onStart(listItemTouched, isTouch ? e.touches[0].clientX : e.clientX, isTouch ? e.touches[0].clientY : e.clientY, index);
+        };
+
+        _this.getYOffset = function () {
+          var listScroll = _this.listRef.current ? _this.listRef.current.scrollTop : 0;
+          return window.pageYOffset + listScroll;
+        };
+
+        _this.onStart = function (target, clientX, clientY, index) {
+          if (_this.state.selectedItem > -1) {
+            _this.setState({
+              selectedItem: -1
+            });
+
+            _this.needle = -1;
+          }
+
+          var targetRect = target.getBoundingClientRect();
+          var targetStyles = window.getComputedStyle(target);
+
+          _this.calculateOffsets();
+
+          _this.initialYOffset = _this.getYOffset();
+          _this.lastYOffset = window.pageYOffset;
+          _this.lastListYOffset = _this.listRef.current.scrollTop;
+
+          _this.setState({
+            itemDragged: index,
+            targetX: targetRect.left - parseInt(targetStyles['margin-left'], 10),
+            targetY: targetRect.top - parseInt(targetStyles['margin-top'], 10),
+            targetHeight: targetRect.height,
+            targetWidth: targetRect.width,
+            initialX: clientX,
+            initialY: clientY
+          });
+        };
+
+        _this.onMouseMove = function (e) {
+          e.cancelable && e.preventDefault();
+
+          _this.onMove(e.clientX, e.clientY);
+        };
+
+        _this.onTouchMove = function (e) {
+          e.cancelable && e.preventDefault();
+
+          _this.onMove(e.touches[0].clientX, e.touches[0].clientY);
+        };
+
+        _this.onWheel = function (e) {
+          if (_this.state.itemDragged < 0) return;
+          _this.lastScroll = _this.listRef.current.scrollTop += e.deltaY;
+
+          _this.moveOtherItems();
+        };
+
+        _this.onMove = function (clientX, clientY) {
+          if (_this.state.itemDragged === -1) return null;
+          transformItem(_this.ghostRef.current, clientY - _this.state.initialY, _this.props.lockVertically ? 0 : clientX - _this.state.initialX);
+
+          _this.autoScrolling(clientY);
+
+          _this.moveOtherItems();
+
+          return;
+        };
+
+        _this.moveOtherItems = function () {
+          var targetRect = _this.ghostRef.current.getBoundingClientRect();
+
+          var itemVerticalCenter = targetRect.top + targetRect.height / 2;
+          var offset = getTranslateOffset(_this.getChildren()[_this.state.itemDragged]);
+
+          var currentYOffset = _this.getYOffset();
+
+          if (_this.initialYOffset !== currentYOffset) {
+            _this.topOffsets = _this.topOffsets.map(function (offset) {
+              return offset - (currentYOffset - _this.initialYOffset);
+            });
+            _this.initialYOffset = currentYOffset;
+          }
+
+          if (_this.isDraggedItemOutOfBounds() && _this.props.removableByMove) {
+            _this.afterIndex = _this.topOffsets.length + 1;
+          } else {
+            _this.afterIndex = binarySearch(_this.topOffsets, itemVerticalCenter);
+          }
+
+          _this.animateItems(_this.afterIndex === -1 ? 0 : _this.afterIndex, _this.state.itemDragged, offset);
+        };
+
+        _this.autoScrolling = function (clientY) {
+          var _a = _this.listRef.current.getBoundingClientRect(),
+              top = _a.top,
+              bottom = _a.bottom,
+              height = _a.height;
+
+          var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+
+          if (bottom > viewportHeight && viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET) {
+            _this.setState({
+              scrollingSpeed: Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) / AUTOSCROLL_SPEED_RATIO),
+              scrollWindow: true
+            });
+          } else if (top < 0 && clientY < AUTOSCROLL_ACTIVE_OFFSET) {
+            _this.setState({
+              scrollingSpeed: Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -AUTOSCROLL_SPEED_RATIO),
+              scrollWindow: true
+            });
+          } else {
+            if (_this.state.scrollWindow && _this.state.scrollingSpeed !== 0) {
+              _this.setState({
+                scrollingSpeed: 0,
+                scrollWindow: false
+              });
+            }
+
+            if (height + 20 < _this.listRef.current.scrollHeight) {
+              var scrollingSpeed = 0;
+
+              if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET) {
+                scrollingSpeed = Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) / -AUTOSCROLL_SPEED_RATIO);
+              } else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET) {
+                scrollingSpeed = Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) / AUTOSCROLL_SPEED_RATIO);
+              }
+
+              if (_this.state.scrollingSpeed !== scrollingSpeed) {
+                _this.setState({
+                  scrollingSpeed: scrollingSpeed
+                });
+              }
+            }
+          }
+        };
+
+        _this.animateItems = function (needle, movedItem, offset, animateMovedItem) {
+          if (animateMovedItem === void 0) {
+            animateMovedItem = false;
+          }
+
+          _this.getChildren().forEach(function (item, i) {
+            setItemTransition(item, _this.props.transitionDuration);
+
+            if (movedItem === i && animateMovedItem) {
+              if (movedItem === needle) {
+                return transformItem(item, null);
+              }
+
+              transformItem(item, movedItem < needle ? _this.itemTranslateOffsets.slice(movedItem + 1, needle + 1).reduce(function (a, b) {
+                return a + b;
+              }, 0) : _this.itemTranslateOffsets.slice(needle, movedItem).reduce(function (a, b) {
+                return a + b;
+              }, 0) * -1);
+            } else if (movedItem < needle && i > movedItem && i <= needle) {
+              transformItem(item, -offset);
+            } else if (i < movedItem && movedItem > needle && i >= needle) {
+              transformItem(item, offset);
+            } else {
+              transformItem(item, null);
+            }
+          });
+        };
+
+        _this.isDraggedItemOutOfBounds = function () {
+          var initialRect = _this.getChildren()[_this.state.itemDragged].getBoundingClientRect();
+
+          var targetRect = _this.ghostRef.current.getBoundingClientRect();
+
+          if (Math.abs(initialRect.left - targetRect.left) > targetRect.width) {
+            if (_this.state.itemDraggedOutOfBounds === -1) {
+              _this.setState({
+                itemDraggedOutOfBounds: _this.state.itemDragged
+              });
+            }
+
+            return true;
+          }
+
+          if (_this.state.itemDraggedOutOfBounds > -1) {
+            _this.setState({
+              itemDraggedOutOfBounds: -1
+            });
+          }
+
+          return false;
+        };
+
+        _this.onEnd = function (e) {
+          e.cancelable && e.preventDefault();
+          document.removeEventListener('mousemove', _this.schdOnMouseMove);
+          document.removeEventListener('touchmove', _this.schdOnTouchMove);
+          document.removeEventListener('mouseup', _this.schdOnEnd);
+          document.removeEventListener('touchup', _this.schdOnEnd);
+          document.removeEventListener('touchcancel', _this.schdOnEnd);
+
+          var removeItem = _this.props.removableByMove && _this.isDraggedItemOutOfBounds();
+
+          if (!removeItem && _this.props.transitionDuration > 0 && _this.afterIndex !== -2) {
+            schd(function () {
+              setItemTransition(_this.ghostRef.current, _this.props.transitionDuration, 'cubic-bezier(0.2, 0, 0.38, 0.9)');
+
+              if (_this.afterIndex < 1 && _this.state.itemDragged === 0) {
+                transformItem(_this.ghostRef.current, 0, 0);
+              } else {
+                transformItem(_this.ghostRef.current, -(window.pageYOffset - _this.lastYOffset) + -(_this.listRef.current.scrollTop - _this.lastListYOffset) + (_this.state.itemDragged < _this.afterIndex ? _this.itemTranslateOffsets.slice(_this.state.itemDragged + 1, _this.afterIndex + 1).reduce(function (a, b) {
+                  return a + b;
+                }, 0) : _this.itemTranslateOffsets.slice(_this.afterIndex < 0 ? 0 : _this.afterIndex, _this.state.itemDragged).reduce(function (a, b) {
+                  return a + b;
+                }, 0) * -1), 0);
+              }
+            })();
+          }
+
+          _this.dropTimeout = window.setTimeout(_this.finishDrop, removeItem || _this.afterIndex === -2 ? 0 : _this.props.transitionDuration);
+        };
+
+        _this.finishDrop = function () {
+          var removeItem = _this.props.removableByMove && _this.isDraggedItemOutOfBounds();
+
+          if (removeItem || _this.afterIndex > -2 && _this.state.itemDragged !== _this.afterIndex) {
+            _this.props.onChange({
+              oldIndex: _this.state.itemDragged,
+              newIndex: removeItem ? -1 : Math.max(_this.afterIndex, 0),
+              targetRect: _this.ghostRef.current.getBoundingClientRect()
+            });
+          }
+
+          _this.getChildren().forEach(function (item) {
+            setItemTransition(item, 0);
+            transformItem(item, null);
+            item.style.touchAction = '';
+          });
+
+          _this.setState({
+            itemDragged: -1,
+            scrollingSpeed: 0
+          });
+
+          _this.afterIndex = -2;
+
+          if (_this.lastScroll > 0) {
+            _this.listRef.current.scrollTop = _this.lastScroll;
+            _this.lastScroll = 0;
+          }
+        };
+
+        _this.onKeyDown = function (e) {
+          var selectedItem = _this.state.selectedItem;
+
+          var index = _this.getTargetIndex(e);
+
+          if (index === -1 || _this.props.values[index] && _this.props.values[index].props.disabled) {
+            return;
+          }
+
+          if (e.key === ' ') {
+            e.preventDefault();
+
+            if (selectedItem === index) {
+              if (selectedItem !== _this.needle) {
+                _this.getChildren().forEach(function (item) {
+                  setItemTransition(item, 0);
+                  transformItem(item, null);
+                });
+
+                _this.props.onChange({
+                  oldIndex: selectedItem,
+                  newIndex: _this.needle,
+                  targetRect: _this.getChildren()[_this.needle].getBoundingClientRect()
+                });
+
+                _this.getChildren()[_this.needle].focus();
+              }
+
+              _this.setState({
+                selectedItem: -1
+              });
+
+              _this.needle = -1;
+            } else {
+              _this.setState({
+                selectedItem: index
+              });
+
+              _this.needle = index;
+
+              _this.calculateOffsets();
+            }
+          }
+
+          if ((e.key === 'ArrowDown' || e.key === 'j') && selectedItem > -1 && _this.needle < _this.props.values.length - 1) {
+            e.preventDefault();
+            var offset = getTranslateOffset(_this.getChildren()[selectedItem]);
+            _this.needle++;
+
+            _this.animateItems(_this.needle, selectedItem, offset, true);
+          }
+
+          if ((e.key === 'ArrowUp' || e.key === 'k') && selectedItem > -1 && _this.needle > 0) {
+            e.preventDefault();
+            var offset = getTranslateOffset(_this.getChildren()[selectedItem]);
+            _this.needle--;
+
+            _this.animateItems(_this.needle, selectedItem, offset, true);
+          }
+
+          if (e.key === 'Escape' && selectedItem > -1) {
+            _this.getChildren().forEach(function (item) {
+              setItemTransition(item, 0);
+              transformItem(item, null);
+            });
+
+            _this.setState({
+              selectedItem: -1
+            });
+
+            _this.needle = -1;
+          }
+
+          if ((e.key === 'Tab' || e.key === 'Enter') && selectedItem > -1) {
+            e.preventDefault();
+          }
+        };
+
+        _this.schdOnMouseMove = schd(_this.onMouseMove);
+        _this.schdOnTouchMove = schd(_this.onTouchMove);
+        _this.schdOnEnd = schd(_this.onEnd);
+        return _this;
+      }
+
+      Draggable.prototype.componentDidMount = function () {
+        this.calculateOffsets();
+        document.addEventListener('touchstart', this.onMouseOrTouchStart, {
+          passive: false,
+          capture: false
+        });
+        document.addEventListener('mousedown', this.onMouseOrTouchStart);
+      };
+
+      Draggable.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.scrollingSpeed !== this.state.scrollingSpeed && prevState.scrollingSpeed === 0) {
+          this.doScrolling();
+        }
+      };
+
+      Draggable.prototype.componentWillUnmount = function () {
+        document.removeEventListener('touchstart', this.onMouseOrTouchStart);
+        document.removeEventListener('mousedown', this.onMouseOrTouchStart);
+
+        if (this.dropTimeout) {
+          window.clearTimeout(this.dropTimeout);
+        }
+
+        this.schdOnMouseMove.cancel();
+        this.schdOnTouchMove.cancel();
+        this.schdOnEnd.cancel();
+      };
+
+      Draggable.prototype.render = function () {
+        var _this = this;
+
+        var baseStyle = {
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          MozUserSelect: 'none',
+          msUserSelect: 'none',
+          boxSizing: 'border-box',
+          position: 'relative'
+        };
+
+        var ghostStyle = __assign(__assign({}, baseStyle), {
+          top: this.state.targetY,
+          left: this.state.targetX,
+          width: this.state.targetWidth,
+          height: this.state.targetHeight,
+          backgroundColor: '#ffffff',
+          listStyleType: 'none',
+          margin: 0,
+          position: 'fixed',
+          boxShadow: '0 4px 16px 0 rgba(0, 0, 0, 0.16)'
+        });
+
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, this.props.renderList({
+          children: this.props.values.map(function (value, index) {
+            var isHidden = index === _this.state.itemDragged;
+            var isSelected = index === _this.state.selectedItem;
+            var isDisabled = _this.props.values[index] && _this.props.values[index].props.disabled;
+            var props = {
+              key: index,
+              tabIndex: isDisabled ? -1 : 0,
+              onKeyDown: _this.onKeyDown,
+              style: __assign(__assign({}, baseStyle), {
+                visibility: isHidden ? 'hidden' : undefined,
+                zIndex: isSelected ? 5000 : 0
+              })
+            };
+            return _this.props.renderItem({
+              value: value,
+              props: props,
+              index: index,
+              isDragged: false,
+              isSelected: isSelected,
+              isOutOfBounds: false
+            });
+          }),
+          isDragged: this.state.itemDragged > -1,
+          props: {
+            ref: this.listRef
+          }
+        }), this.state.itemDragged > -1 && /*#__PURE__*/ReactDOM__namespace.createPortal(this.props.renderItem({
+          value: this.props.values[this.state.itemDragged],
+          props: {
+            ref: this.ghostRef,
+            style: ghostStyle,
+            onWheel: this.onWheel
+          },
+          index: this.state.itemDragged,
+          isDragged: true,
+          isSelected: false,
+          isOutOfBounds: this.state.itemDraggedOutOfBounds > -1
+        }), document.body));
+      };
+
+      Draggable.defaultProps = {
+        transitionDuration: 240,
+        lockVertically: false,
+        removableByMove: false
+      };
+      return Draggable;
+    }(React__namespace.Component);
+
+    var DraggableList = function DraggableList(props) {
+      var children = props.children,
+          className = props.className,
+          Tag = props.tagName;
+      var baseProps = extractBaseProps(props);
+      var classes = classNames__default["default"]({
+        Listbox: true
+      }, className);
+      var renderChildren = React__default["default"].Children.toArray(children).map(function (child) {
+        var element = /*#__PURE__*/React__default["default"].cloneElement(child, {
+          parentProps: __assign({}, props)
+        });
+        return element;
+      });
+
+      var _a = React__default["default"].useState(renderChildren),
+          childList = _a[0],
+          setChildList = _a[1];
+
+      var onChangeHandler = function onChangeHandler(props) {
+        var oldIndex = props.oldIndex,
+            newIndex = props.newIndex;
+        var updatedList = arrayMove(childList, oldIndex, newIndex);
+        setChildList(updatedList);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(Draggable, {
+        values: childList,
+        onChange: onChangeHandler,
+        renderItem: function renderItem(_a) {
+          var value = _a.value,
+              props = _a.props;
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign({}, props, {
+            className: "Listbox-item--draggable"
+          }), value);
+        },
+        renderList: function renderList(_a) {
+          var children = _a.children,
+              props = _a.props;
+          return /*#__PURE__*/React__default["default"].createElement(Tag, __assign({
+            "data-test": "DesignSystem-Listbox"
+          }, baseProps, {
+            className: classes
+          }, props), children);
+        }
+      });
+    };
+
+    var isDisabledElement = function isDisabledElement(element) {
+      return element && element.getAttribute('data-disabled') === 'true';
+    };
+
+    var getNextSibling = function getNextSibling(element) {
+      var _a, _b;
+
+      return (_b = (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.nextSibling) === null || _b === void 0 ? void 0 : _b.firstChild;
+    };
+
+    var getPrevSibling = function getPrevSibling(element) {
+      var _a, _b;
+
+      return (_b = (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.previousSibling) === null || _b === void 0 ? void 0 : _b.firstChild;
+    };
+
+    var focusOption = function focusOption(element, direction) {
+      var iterateElement = element;
+
+      while (iterateElement) {
+        if (!isDisabledElement(iterateElement)) {
+          iterateElement.focus();
+          break;
+        }
+
+        if (direction === 'down') {
+          iterateElement = getNextSibling(iterateElement);
+        } else {
+          iterateElement = getPrevSibling(iterateElement);
+        }
+      }
+    };
+
+    var onKeyDown = function onKeyDown(event) {
+      var sourceElement = event.target;
+      var nextElement = getNextSibling(sourceElement);
+      var prevElement = getPrevSibling(sourceElement);
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          focusOption(nextElement, 'down');
+          break;
+
+        case 'ArrowUp':
+          event.preventDefault();
+          focusOption(prevElement, 'up');
+          break;
+      }
+    };
+
+    var ListBody = function ListBody(props) {
+      var _a;
+
+      var children = props.children,
+          className = props.className,
+          disabled = props.disabled,
+          selected = props.selected,
+          activated = props.activated;
+      var contextProp = React__namespace.useContext(ListboxContext);
+      var size = contextProp.size,
+          type = contextProp.type,
+          draggable = contextProp.draggable;
+      var itemClass = classNames__default["default"]((_a = {
+        'Listbox-item': true
+      }, _a["Listbox-item--" + size] = size, _a["Listbox-item--" + type] = type, _a['Listbox-item--disabled'] = disabled, _a['Listbox-item--selected'] = selected && type === 'option', _a['Listbox-item--activated'] = activated && type === 'resource', _a), className);
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        "data-disabled": disabled,
+        "data-test": "DesignSystem-Listbox-ItemWrapper",
+        tabIndex: draggable ? -1 : 0,
+        className: itemClass,
+        onKeyDown: onKeyDown,
+        role: "tablist"
+      }, draggable && /*#__PURE__*/React__namespace.createElement(Icon, {
+        size: 16,
+        appearance: "subtle",
+        name: "drag_indicator",
+        className: "Listbox-item--drag-icon",
+        "data-test": "DesignSystem-Listbox-DragIcon"
+      }), children);
+    };
+
+    var getAnimationClass = function getAnimationClass(uniqueKey, expanded) {
+      if (expanded) return "nestedList-open-" + uniqueKey + " 240ms cubic-bezier(0, 0, 0.38, 0.9)";else if (!expanded) return "nestedList-close-" + uniqueKey + " 160ms cubic-bezier(0.2, 0, 1, 0.9)";
+      return '';
+    };
+
+    var getHeight = function getHeight(listItemRef) {
+      var _a;
+
+      var scrollHeight = (_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+      return scrollHeight;
+    };
+
+    var menuItemAnimation = function menuItemAnimation(listItemRef, uniqueKey) {
+      return "\n      @keyframes nestedList-open-" + uniqueKey + " {\n      from {\n        height: 0px;\n      }\n      to {\n        height: " + getHeight(listItemRef) + "px;\n      }\n    }\n\n    @keyframes nestedList-close-" + uniqueKey + " {\n      from {\n        height: " + getHeight(listItemRef) + "px;\n      }\n      to {\n        height: 0px;\n      }\n    }\n  ";
+    };
+
+    function usePrevious(value) {
+      var ref = React__namespace.useRef();
+      React__namespace.useEffect(function () {
+        if (value != undefined) {
+          ref.current = value;
+        }
+      }, [value]);
+      return ref.current;
+    }
+
+    var NestedList = function NestedList(props) {
+      var nestedBody = props.nestedBody,
+          expanded = props.expanded;
+      var prevState = usePrevious(expanded);
+
+      var _a = React__namespace.useState(expanded),
+          open = _a[0],
+          setOpen = _a[1];
+
+      var _b = React__namespace.useState(''),
+          keyframe = _b[0],
+          setKeyframe = _b[1];
+
+      var listItemRef = React__namespace.useRef(null);
+      var uniqueKey = Math.random().toString(36).substring(2, 6);
+
+      var _c = React__namespace.useState(getAnimationClass(uniqueKey, expanded)),
+          animation = _c[0],
+          setAnimation = _c[1];
+
+      React__namespace.useEffect(function () {
+        if (prevState != undefined && prevState !== expanded) {
+          setOpen(true);
+        }
+
+        requestAnimationFrame(function () {
+          var result = menuItemAnimation(listItemRef, uniqueKey);
+          setKeyframe(result);
+        });
+        var animationClass = getAnimationClass(uniqueKey, expanded);
+        setAnimation(animationClass);
+      }, [expanded]);
+
+      var handleAnimationEnd = function handleAnimationEnd() {
+        !expanded && setOpen(false);
+      };
+
+      var styles = {
+        animation: animation,
+        overflow: 'hidden',
+        animationFillMode: 'forwards'
+      };
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("style", null, keyframe), nestedBody && open && /*#__PURE__*/React__namespace.createElement("div", {
+        style: styles,
+        onAnimationEnd: handleAnimationEnd,
+        "data-test": "DesignSystem-Listbox--Nested-Item",
+        ref: listItemRef
+      }, nestedBody));
+    };
+
+    var ListboxItem = function ListboxItem(props) {
+      var _a;
+
+      var nestedBody = props.nestedBody,
+          expanded = props.expanded,
+          id = props.id,
+          onClick = props.onClick,
+          value = props.value,
+          Tag = props.tagName,
+          rest = __rest(props, ["nestedBody", "expanded", "id", "onClick", "value", "tagName"]);
+
+      var contextProp = React__namespace.useContext(ListboxContext);
+      var showDivider = contextProp.showDivider,
+          draggable = contextProp.draggable;
+
+      var onClickHandler = function onClickHandler(e) {
+        onClick && onClick(e, id, value);
+      };
+
+      var tagClass = classNames__default["default"]((_a = {}, _a['Listbox-item-wrapper'] = !draggable, _a));
+      return /*#__PURE__*/React__namespace.createElement(Tag, __assign({
+        id: id,
+        key: id
+      }, rest, {
+        "data-test": "DesignSystem-Listbox-Item",
+        onClick: onClickHandler,
+        "data-value": value,
+        className: tagClass
+      }), /*#__PURE__*/React__namespace.createElement(ListBody, __assign({}, props)), nestedBody && /*#__PURE__*/React__namespace.createElement(NestedList, {
+        expanded: expanded,
+        nestedBody: nestedBody
+      }), showDivider && /*#__PURE__*/React__namespace.createElement(Divider, {
+        className: "Listbox-divider"
+      }));
+    };
+    ListboxItem.displayName = 'ListboxItem';
+    ListboxItem.defaultProps = {
+      tagName: 'li'
+    };
+
+    var ListboxContext = /*#__PURE__*/React__namespace.createContext({
+      size: 'standard',
+      type: 'resource',
+      draggable: false,
+      showDivider: true
+    });
+    var Provider = ListboxContext.Provider;
+    var Listbox = function Listbox(props) {
+      var children = props.children,
+          className = props.className,
+          draggable = props.draggable,
+          size = props.size,
+          type = props.type,
+          showDivider = props.showDivider,
+          Tag = props.tagName,
+          rest = __rest(props, ["children", "className", "draggable", "size", "type", "showDivider", "tagName"]);
+
+      var baseProps = extractBaseProps(props);
+      var classes = classNames__default["default"]({
+        Listbox: true
+      }, className);
+      var sharedProp = {
+        size: size,
+        type: type,
+        draggable: draggable,
+        showDivider: showDivider
+      };
+      return /*#__PURE__*/React__namespace.createElement(Provider, {
+        value: sharedProp
+      }, draggable ? /*#__PURE__*/React__namespace.createElement(DraggableList, __assign({}, props)) : /*#__PURE__*/React__namespace.createElement(Tag, __assign({
+        "data-test": "DesignSystem-Listbox"
+      }, baseProps, {
+        className: classes
+      }, rest), children));
+    };
+    Listbox.displayName = 'Listbox';
+    Listbox.defaultProps = {
+      tagName: 'ul',
+      size: 'standard',
+      type: 'resource',
+      draggable: false,
+      showDivider: true
+    };
+    Listbox.Item = ListboxItem;
+
+    var version = "2.25.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
@@ -16631,6 +17552,7 @@
     exports.Link = Link;
     exports.LinkButton = LinkButton;
     exports.List = List;
+    exports.Listbox = Listbox;
     exports.Message = Message;
     exports.MetaList = MetaList;
     exports.MetricInput = MetricInput;