@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -1,73 +1,62 @@
 const DropdownTheme = {
   baseStyle: ({ disabled }: { disabled?: boolean }) => ({
     field: {
+      _active: disabled
+        ? undefined
+        : {
+            bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+            borderColor: 'neutral.80',
+          },
+      _hover: disabled
+        ? undefined
+        : {
+            bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+          },
+      alignItems: 'center',
       bgGradient: 'linear(to-b, neutral.100, neutral.93)',
       border: '0.0625rem solid',
       borderColor: 'neutral.90',
       borderRadius: '4',
       color: disabled ? 'neutral.70' : 'purple.10',
-      position: 'relative',
       display: 'flex',
-      alignItems: 'center',
+      pointerEvents: disabled && 'none',
+      position: 'relative',
       textAlign: 'start',
       width: '100%',
-      _hover: disabled
-        ? undefined
-        : {
-            bgGradient: 'linear(to-b, neutral.93, neutral.93)',
-          },
-      _active: disabled
-        ? undefined
-        : {
-            bgGradient: 'linear(to-b, neutral.90, neutral.90)',
-            borderColor: 'neutral.80',
-          },
-      pointerEvents: disabled && 'none',
-    },
-    icon: {
-      opacity: disabled && '0.2',
-    },
-    search: {
-      mx: 16,
-      marginTop: '12',
-      width: 'auto',
     },
     group: {
+      alignItems: 'center',
       display: 'flex',
       flexDir: 'row',
       gap: '12',
-      paddingY: '8',
       paddingX: '16',
-      alignItems: 'center',
+      paddingY: '8',
+    },
+    icon: {
+      opacity: disabled && '0.2',
     },
     item: {
-      cursor: 'pointer',
-      userSelect: 'none',
-      wordBreak: 'break-word',
-      color: 'purple.10',
-      paddingY: '8',
-      paddingX: '16',
-      textAlign: 'start',
-      w: '100%',
-      '&.bitkit-select__option-hover': {
-        backgroundColor: 'neutral.95',
-      },
       '&.bitkit-select__option-active': {
-        backgroundColor: 'purple.95',
         '&.bitkit-select__option-hover': {
           backgroundColor: 'purple.93',
         },
+        backgroundColor: 'purple.95',
+      },
+      '&.bitkit-select__option-hover': {
+        backgroundColor: 'neutral.95',
       },
       _disabled: {
         color: 'neutral.70',
         pointerEvents: 'none',
       },
-    },
-    options: {
-      paddingY: '12',
-      overflowY: 'auto',
-      flexShrink: 1,
-      position: 'relative',
+      color: 'purple.10',
+      cursor: 'pointer',
+      paddingX: '16',
+      paddingY: '8',
+      textAlign: 'start',
+      userSelect: 'none',
+      w: '100%',
+      wordBreak: 'break-word',
     },
     list: {
       backgroundColor: 'neutral.100',
@@ -75,31 +64,42 @@ const DropdownTheme = {
       borderColor: 'neutral.93',
       borderRadius: '4',
       boxShadow: 'large',
-      zIndex: '1',
       display: 'flex',
-      minH: 0,
+      flexDir: 'column',
+      flexShrink: 1,
       maxH: 'max(min(var(--dropdown-floating-max, 16rem), var(--floating-available-height)), var(--dropdown-floating-min, 10rem))',
+      minH: 0,
+      zIndex: '1',
+    },
+    options: {
       flexShrink: 1,
-      flexDir: 'column',
+      overflowY: 'auto',
+      paddingY: '12',
+      position: 'relative',
+    },
+    search: {
+      marginTop: '12',
+      mx: 16,
+      width: 'auto',
     },
   }),
   sizes: {
-    small: {
-      field: {
-        fontSize: '2',
-        height: '32',
-        paddingLeft: '12',
-        paddingRight: '12',
-        gap: '0.375rem',
-      },
-    },
     medium: {
       field: {
         fontSize: '3',
+        gap: '0.625rem',
         height: '48',
         paddingLeft: '16',
         paddingRight: '16',
-        gap: '0.625rem',
+      },
+    },
+    small: {
+      field: {
+        fontSize: '2',
+        gap: '0.375rem',
+        height: '32',
+        paddingLeft: '12',
+        paddingRight: '12',
       },
     },
   },

package/src/Components/Dropdown/Dropdown.tsx

@@ -4,10 +4,10 @@ import { FloatingFocusManager, UseFloatingProps } from '@floating-ui/react-dom-i
 import { TypeIconName } from '../Icon/Icon';
 import SearchInput from '../SearchInput/SearchInput';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
-import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
+import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
 import useFloatingDropdown from './hooks/useFloatingDropdown';
-import { useSimpleSearch, NoResultsFound } from './hooks/useSimpleSearch';
+import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
 
 type DropdownSearchCustomProps = {
@@ -21,9 +21,9 @@ const DropdownSearch = ({
   ...rest
 }: DropdownSearchProps | (DropdownSearchProps & DropdownSearchCustomProps)) => {
   const { search } = useDropdownStyles();
-  const { searchValue, searchOnSubmit, searchOnChange, searchRef } = useDropdownContext();
+  const { searchOnChange, searchOnSubmit, searchRef, searchValue } = useDropdownContext();
 
-  const { value, onChange } = 'onChange' in rest ? rest : { value: searchValue, onChange: searchOnChange };
+  const { onChange, value } = 'onChange' in rest ? rest : { onChange: searchOnChange, value: searchValue };
 
   const onChangeCB = useCallback(
     (q: string) => {
@@ -49,14 +49,14 @@ const DropdownSearch = ({
   );
   return (
     <SearchInput
-      onKeyDown={onKeyDown}
-      inputRef={searchRef}
-      role="search"
       aria-label={placeholder}
-      placeholder={placeholder}
-      value={value}
+      inputRef={searchRef}
       onChange={onChangeCB}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      role="search"
       sx={search}
+      value={value}
     />
   );
 };
@@ -126,7 +126,7 @@ function findOption<T>(children: ReactNode, value: T): { label: ReactNode; index
     if (React.isValidElement(elem)) {
       const optValue = typeof elem.props.value === 'undefined' ? null : elem.props.value;
       if (elem.type === DropdownOption && optValue === value) {
-        return { label: elem.props.children, index: elem.props.index };
+        return { index: elem.props.index, label: elem.props.children };
       }
       const ch =
         findOption(elem.props.children, value) || (isSearchable(elem.type) && findOption(elem.type(elem.props), value));
@@ -139,34 +139,34 @@ function findOption<T>(children: ReactNode, value: T): { label: ReactNode; index
 }
 
 function useDropdown<T>({
+  children,
+  defaultValue,
+  dropdownWidth = 'match',
   name,
   onChange,
-  value,
   optionsRef,
-  defaultValue,
-  dropdownWidth = 'match',
   placement = 'bottom-start',
-  ref,
-  children,
   readOnly,
+  ref,
+  value,
   ...rest
 }: DropdownProps<T> & UseDropdownProps) {
   const searchRef = useRef(null);
   const {
+    activeIndex,
     close,
-    isOpen,
-    getReferenceProps,
-    floatingProps,
     context: floatingContext,
-    activeIndex,
-    setSelectedIndex,
-    setActiveIndex,
+    floatingProps,
     getItemProps,
+    getReferenceProps,
+    isOpen,
     listRef,
-  } = useFloatingDropdown({ enabled: !readOnly, optionsRef, dropdownWidth, placement });
+    setActiveIndex,
+    setSelectedIndex,
+  } = useFloatingDropdown({ dropdownWidth, enabled: !readOnly, optionsRef, placement });
   const [formValue, setFormValue] = useControllableState<T>({
-    onChange: (newValue) => onChange?.({ target: { value: newValue, name } }),
     defaultValue,
+    onChange: (newValue) => onChange?.({ target: { name, value: newValue } }),
     value,
   });
 
@@ -187,7 +187,7 @@ function useDropdown<T>({
     },
     [searchOnSubmit],
   );
-  const { searchValue, searchOnChange, ...searchResults } = useSimpleSearch({
+  const { searchOnChange, searchValue, ...searchResults } = useSimpleSearch({
     children: refdChildren,
     onSearch: () => setActiveIndex(null),
   });
@@ -201,15 +201,15 @@ function useDropdown<T>({
   );
   const context = useMemo(
     () => ({
+      activeIndex,
       formValue,
-      onOptionSelected,
       getItemProps,
-      activeIndex,
+      listRef,
+      onOptionSelected,
       searchOnChange,
-      searchValue,
-      searchRef,
       searchOnSubmit,
-      listRef,
+      searchRef,
+      searchValue,
     }),
     [
       listRef,
@@ -235,18 +235,18 @@ function useDropdown<T>({
     }
   }, [refdChildren, formValue]);
   return {
+    context,
+    floatingContext,
+    floatingProps,
+    formLabel,
+    formValue,
     isOpen,
     referenceProps: getReferenceProps({
-      ref,
       onKeyDown: referenceKeyDown,
+      ref,
     }),
-    floatingProps,
-    floatingContext,
     searchOnSubmit,
     searchRef,
-    context,
-    formLabel,
-    formValue,
     ...searchResults,
     ...rest,
   };
@@ -258,35 +258,35 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       dropdownMaxHeight,
       dropdownMinHeight,
       dropdownWidth,
-      readOnly,
+      formLabel: customFormLabel,
+      name,
       onBlur,
       placeholder,
-      name,
+      readOnly,
+      returnFocus = true,
       search,
       size = 'medium',
-      formLabel: customFormLabel,
-      returnFocus = true,
       ...props
     },
     ref,
   ) => {
     const optionsRef = useRef(null);
     const {
+      children,
       context: dropdownCtx,
       floatingContext,
-      isOpen,
-      referenceProps,
       floatingProps,
-      formValue,
       formLabel,
+      formValue,
+      isOpen,
+      referenceProps,
       searchRef,
-      children,
       ...rest
     } = useDropdown({
+      dropdownWidth,
       name,
-      readOnly,
       optionsRef,
-      dropdownWidth,
+      readOnly,
       ref,
       ...props,
     });
@@ -297,7 +297,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
         return;
       }
       if (!isOpen) {
-        onBlur({ target: { value: formValue, name } });
+        onBlur({ target: { name, value: formValue } });
       }
     };
     const listStyles = useMemo(
@@ -311,22 +311,22 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
     const searchElement = search === false ? null : search || <DropdownSearch />;
     return (
       <>
-        {name && formValue && <input type="hidden" name={name} value={formValue} />}
+        {name && formValue && <input name={name} type="hidden" value={formValue} />}
         <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
           <DropdownButton
             {...referenceProps}
             {...props}
-            placeholder={placeholder}
-            size={size}
-            formLabel={customFormLabel ?? formLabel}
             blurHandler={blurHandler}
+            formLabel={customFormLabel ?? formLabel}
+            placeholder={placeholder}
             readOnly={readOnly}
+            size={size}
           />
           {isOpen && (
-            <FloatingFocusManager initialFocus={searchRef} context={floatingContext} returnFocus={returnFocus}>
+            <FloatingFocusManager context={floatingContext} initialFocus={searchRef} returnFocus={returnFocus}>
               <chakra.div {...floatingProps} sx={listStyles}>
                 {searchElement}
-                <chakra.div tabIndex={-1} ref={optionsRef} __css={dropdownStyles.options}>
+                <chakra.div ref={optionsRef} __css={dropdownStyles.options} tabIndex={-1}>
                   {children}
                 </chakra.div>
               </chakra.div>

package/src/Components/Dropdown/DropdownButton.tsx

@@ -13,16 +13,16 @@ interface DropdownButtonProps extends ChakraProps {
   iconName?: TypeIconName;
 }
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
-  ({ size, blurHandler, formLabel, readOnly, placeholder, children, iconName, ...rest }, ref) => {
+  ({ blurHandler, children, formLabel, iconName, placeholder, readOnly, size, ...rest }, ref) => {
     const { field, icon } = useDropdownStyles();
     const iconSize = size === 'medium' ? '24' : '16';
     return (
-      <chakra.button aria-readonly={readOnly} type="button" ref={ref} onBlur={blurHandler} __css={field} {...rest}>
-        {iconName && <Icon aria-hidden="true" __css={icon} name={iconName} size={iconSize} />}
-        <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" flexGrow={1}>
+      <chakra.button ref={ref} __css={field} aria-readonly={readOnly} onBlur={blurHandler} type="button" {...rest}>
+        {iconName && <Icon __css={icon} aria-hidden="true" name={iconName} size={iconSize} />}
+        <chakra.span flexGrow={1} overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
           {formLabel || placeholder}
         </chakra.span>
-        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" size={iconSize} />
+        <Icon __css={icon} aria-hidden="true" name="DropdownArrows" size={iconSize} />
       </chakra.button>
     );
   },

package/src/Components/Dropdown/DropdownOption.tsx

@@ -13,10 +13,10 @@ export type DropdownOptionProps<T> = {
   isDisabled?: boolean;
 };
 const DropdownOption = <T = string,>({
-  value = null,
   children,
-  onClick,
   isDisabled,
+  onClick,
+  value = null,
   ...rest
 }: DropdownOptionProps<T>) => {
   const { item } = useDropdownStyles();
@@ -24,26 +24,26 @@ const DropdownOption = <T = string,>({
   const { index } = rest as { index?: number };
   return (
     <chakra.div
-      role="option"
-      id={useId()}
       ref={(node) => {
         if (ctx.listRef.current) {
           ctx.listRef.current[index!] = node;
         }
       }}
       aria-disabled={isDisabled || undefined}
+      id={useId()}
+      role="option"
       {...rest}
+      __css={item}
       className={cx(
         value === ctx.formValue && 'bitkit-select__option-active',
         index === ctx.activeIndex && 'bitkit-select__option-hover',
       )}
-      __css={item}
       {...ctx.getItemProps({
         onClick(event) {
           onClick?.(event);
 
           if (!event.defaultPrevented) {
-            ctx.onOptionSelected({ value, index, label: children });
+            ctx.onOptionSelected({ index, label: children, value });
           }
         },
       })}
@@ -65,9 +65,9 @@ const DropdownGroup = ({
   const { group } = useDropdownStyles();
   const textId = useId();
   return (
-    <div role="group" aria-labelledby={textId}>
+    <div aria-labelledby={textId} role="group">
       <chakra.div __css={group}>
-        <Text size="1" id={textId} fontWeight="bold" color="neutral.60" {...labelProps}>
+        <Text color="neutral.60" fontWeight="bold" id={textId} size="1" {...labelProps}>
           {label}
         </Text>
         <Divider color="neutral.93" />
@@ -79,8 +79,8 @@ const DropdownGroup = ({
 
 const DropdownDetailedOption = ({
   icon,
-  title,
   subtitle,
+  title,
   value,
   ...rest
 }: {
@@ -91,13 +91,13 @@ const DropdownDetailedOption = ({
 }) => {
   return (
     <DropdownOption value={value} {...rest} aria-label={title}>
-      <chakra.div alignItems="center" gap="12" display="flex" flexDir="row">
+      <chakra.div alignItems="center" display="flex" flexDir="row" gap="12">
         {icon}
         <chakra.div>
-          <Text size="3" color="purple.10">
+          <Text color="purple.10" size="3">
             {title}
           </Text>
-          <Text size="2" color="neutral.60">
+          <Text color="neutral.60" size="2">
             {subtitle}
           </Text>
         </chakra.div>

package/src/Components/Dropdown/hooks/useAutoScroll.ts

@@ -1,11 +1,11 @@
 import { useLayoutEffect, useRef } from 'react';
 
 const useAutoScroll = ({
-  optionsRef,
-  listRef,
   activeIndex,
-  selectedIndex,
   keyboardControlled,
+  listRef,
+  optionsRef,
+  selectedIndex,
 }: {
   optionsRef: React.RefObject<HTMLDivElement>;
   listRef: React.MutableRefObject<HTMLElement[]>;

package/src/Components/Dropdown/hooks/useFloatingDropdown.ts

@@ -1,16 +1,16 @@
 import { KeyboardEvent, RefObject, useEffect, useRef, useState } from 'react';
 import {
   autoUpdate,
-  useFloating,
-  useInteractions,
+  flip,
+  MiddlewareArguments,
   size,
   useClick,
-  useListNavigation,
-  useRole,
   useDismiss,
-  flip,
+  useFloating,
   UseFloatingProps,
-  MiddlewareArguments,
+  useInteractions,
+  useListNavigation,
+  useRole,
 } from '@floating-ui/react-dom-interactions';
 import { ChakraProps } from '@chakra-ui/react';
 import { mergeRefs } from '@chakra-ui/react-utils';
@@ -21,9 +21,9 @@ type ApplyFnArgs = MiddlewareArguments & {
   availableHeight: number;
 };
 const useFloatingDropdown = ({
+  dropdownWidth,
   enabled,
   optionsRef,
-  dropdownWidth,
   placement,
 }: {
   enabled: boolean;
@@ -42,34 +42,28 @@ const useFloatingDropdown = ({
 
   const widthRef = useRef(dropdownWidth);
   widthRef.current = dropdownWidth;
-  const { context, reference, floating, strategy, x, y } = useFloating<Element>({
-    open: enabled && isOpen,
-    onOpenChange: setOpen,
-    placement,
-    whileElementsMounted(aRef, aFloat, update) {
-      return autoUpdate(aRef, aFloat, update, { elementResize: false });
-    },
+  const { context, floating, reference, strategy, x, y } = useFloating<Element>({
     middleware: [
       size({
-        padding: 5,
-        apply: ({ elements, availableHeight, rects }: ApplyFnArgs) => {
+        apply: ({ availableHeight, elements, rects }: ApplyFnArgs) => {
           Object.assign(elements.floating.style, {
             width: widthRef.current === 'match' ? `${rects.reference.width}px` : widthRef.current,
           });
           elements.floating.style.setProperty('--floating-available-height', `${availableHeight}px`);
         },
+        padding: 5,
       }),
       flip(),
     ],
+    onOpenChange: setOpen,
+    open: enabled && isOpen,
+    placement,
+    whileElementsMounted(aRef, aFloat, update) {
+      return autoUpdate(aRef, aFloat, update, { elementResize: false });
+    },
   });
 
   const keyboardControlledHandlers = {
-    onPointerEnter() {
-      setKeyboardControlled(false);
-    },
-    onPointerMove() {
-      setKeyboardControlled(false);
-    },
     onKeyDown(ev: KeyboardEvent) {
       if (ev.key === 'Escape') {
         ev.stopPropagation();
@@ -77,50 +71,56 @@ const useFloatingDropdown = ({
       }
       setKeyboardControlled(true);
     },
+    onPointerEnter() {
+      setKeyboardControlled(false);
+    },
+    onPointerMove() {
+      setKeyboardControlled(false);
+    },
   };
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
     useClick(context, { enabled }),
     useRole(context, { role: 'listbox' }),
     useDismiss(context),
     useListNavigation(context, {
+      activeIndex,
       enabled,
       listRef,
-      activeIndex,
-      selectedIndex,
-      virtual: true,
       loop: true,
       onNavigate: setActiveIndex,
+      selectedIndex,
+      virtual: true,
     }),
     {
-      reference: { onKeyDown: keyboardControlledHandlers.onKeyDown },
       floating: keyboardControlledHandlers,
+      reference: { onKeyDown: keyboardControlledHandlers.onKeyDown },
     },
   ]);
   useAutoScroll({
+    activeIndex,
+    keyboardControlled,
     listRef,
     optionsRef,
-    activeIndex,
     selectedIndex,
-    keyboardControlled,
   });
 
   return {
-    listRef,
+    activeIndex,
     close: () => setOpen(false),
-    isOpen,
+    context,
+    floatingProps: getFloatingProps({
+      ref: floating,
+      style: { left: x ?? 0, position: strategy, top: y ?? 0 },
+    }),
     getItemProps,
-    activeIndex,
-    setActiveIndex,
-    setSelectedIndex,
     getReferenceProps({ ref, ...props }: React.HTMLProps<Element>) {
       const merged = mergeRefs(ref as any, reference);
       return getReferenceProps({ ...props, ref: merged });
     },
-    floatingProps: getFloatingProps({
-      ref: floating,
-      style: { position: strategy, top: y ?? 0, left: x ?? 0 },
-    }),
-    context,
+    isOpen,
+    listRef,
+    setActiveIndex,
+    setSelectedIndex,
   };
 };
 

package/src/Components/Dropdown/hooks/useSimpleSearch.tsx

@@ -42,6 +42,6 @@ function useSimpleSearch({ children, onSearch }: { children?: ReactNode; onSearc
     return results.length ? results : <NoResultsFound>No results found for `{searchValue}`</NoResultsFound>;
   }, [children, searchValue]);
 
-  return { children: options, searchValue, searchOnChange };
+  return { children: options, searchOnChange, searchValue };
 }
 export { useSimpleSearch, NoResultsFound };