@bitrise/bitkit 13.217.0 → 13.218.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.217.0",
+  "version": "13.218.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Dropdown/Dropdown.tsx

@@ -15,9 +15,11 @@ import {
   FormErrorMessage,
   FormHelperText,
   useControllableState,
+  useMergeRefs,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 import SearchInput from '../SearchInput/SearchInput';
 import FormLabel from '../Form/FormLabel';
 import { AvatarProps } from '../Avatar/Avatar';
@@ -279,6 +281,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       name,
       onBlur,
       onChange,
+      onScrolledToBottom,
       placeholder,
       placement,
       readOnly,
@@ -350,6 +353,25 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
     );
     const searchElement = search === false ? null : search || <DropdownSearch />;
     const buttonId = useId();
+
+    const internalRef = useCallback((node: HTMLDivElement | null) => {
+      if (!node) return;
+
+      const handleScroll = () => {
+        const { scrollTop, scrollHeight, clientHeight } = node;
+        if (scrollTop + clientHeight >= scrollHeight) {
+          onScrolledToBottom?.();
+        }
+      };
+
+      node.addEventListener('scroll', handleScroll);
+
+      // Cleanup when the element is unmounted or ref changes
+      return () => node.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const mergedRef = useMergeRefs(internalRef, optionsRef);
+
     return (
       <>
         {name && formValue && <input name={name} type="hidden" value={formValue} />}
@@ -391,8 +413,11 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
             <FloatingFocusManager context={floatingContext} initialFocus={searchRef} returnFocus={returnFocus}>
               <chakra.div {...floatingProps} {...dataAttributes} sx={listStyles}>
                 {searchElement}
-                <chakra.div ref={optionsRef} __css={dropdownStyles.options} tabIndex={-1}>
+                <chakra.div ref={mergedRef} __css={dropdownStyles.options} tabIndex={-1}>
                   {children}
+                  <chakra.div display="flex" justifyContent="space-around">
+                    <ProgressSpinner />
+                  </chakra.div>
                 </chakra.div>
               </chakra.div>
             </FloatingFocusManager>

package/src/Components/Dropdown/DropdownProps.ts

@@ -27,9 +27,11 @@ export interface DropdownProps<T> extends ChakraProps {
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
   isError?: boolean;
+  isLoadingMore?: boolean;
   isWarning?: boolean;
   label?: string;
   name?: string;
+  onScrolledToBottom?(): void;
   onBlur?: DropdownChangeEventHandler<T>;
   onChange?: DropdownChangeEventHandler<T>;
   placeholder?: string;