@bitrise/bitkit 13.216.0 → 13.218.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.216.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;

package/src/Components/Form/Input/Input.theme.ts

@@ -65,13 +65,11 @@ const InputTheme = defineStyle({
       pointerEvents: 'none',
       top: '50%',
       transform: 'translateY(-50%)',
-      left: '12',
     },
     rightIconWrapper: {
       pointerEvents: 'none',
       top: '50%',
       transform: 'translateY(-50%)',
-      right: '12',
     },
     inputContainer: {
       position: 'relative',

package/src/Components/Form/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, Ref, useState } from 'react';
+import { ChangeEvent, ReactNode, Ref, useCallback, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
@@ -20,7 +20,7 @@ import {
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 import FormLabel, { FormLabelProps } from '../FormLabel';
-import { getDataAttributes } from '../../../utils/utils';
+import { getDataAttributes, rem } from '../../../utils/utils';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -169,6 +169,22 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const iconSize = size === 'lg' ? '24' : '16';
   const style = useMultiStyleConfig('Input');
 
+  const [leftIconPos, setLeftIconPos] = useState(rem(12));
+
+  const leftAddonRef = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setLeftIconPos(rem(node.getBoundingClientRect().width + 12));
+    }
+  }, []);
+
+  const [rightIconPos, setRightIconPos] = useState(rem(12));
+
+  const rightAddonRef = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setRightIconPos(rem(node.getBoundingClientRect().width + 12));
+    }
+  }, []);
+
   return (
     <FormControl {...formControlProps}>
       <FormLabel
@@ -182,9 +198,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         {label}
       </FormLabel>
       <InputGroup sx={style.inputContainer} {...inputWrapperStyle}>
-        {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
-        {!leftAddon && leftIconName && (
-          <InputLeftElement sx={style.leftIconWrapper}>
+        {leftAddon && <LeftContentWrapper ref={leftAddonRef}>{leftAddon}</LeftContentWrapper>}
+        {leftIconName && (
+          <InputLeftElement sx={style.leftIconWrapper} left={leftIconPos}>
             <Icon
               color={leftIconColor}
               name={leftIconName}
@@ -201,9 +217,13 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           {...dataAttributes}
           onChange={onInputChange}
         />
-        {rightAddon && <RightContentWrapper bottom="0">{rightAddon}</RightContentWrapper>}
-        {!rightAddon && (rightIconName || isWarning || warningText || isInvalid) && (
-          <InputRightElement sx={style.rightIconWrapper}>
+        {rightAddon && (
+          <RightContentWrapper ref={rightAddonRef} bottom="0">
+            {rightAddon}
+          </RightContentWrapper>
+        )}
+        {(rightIconName || isWarning || warningText || isInvalid) && (
+          <InputRightElement sx={style.rightIconWrapper} right={rightIconPos}>
             {rightIconName && !isWarning && !warningText && !isInvalid && (
               <Icon
                 color={rightIconColor}