@bitrise/bitkit 10.20.1 → 10.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.20.1",
+  "version": "10.21.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -31,6 +31,13 @@ const TestComponent = forwardRef<
 });
 
 describe('Dropdown', () => {
+  it('sets ref to the button', async () => {
+    const handler = jest.fn();
+    render(<Dropdown ref={handler} />);
+    const button = await screen.findByRole('combobox');
+    expect(handler).toHaveBeenCalledWith(button);
+  });
+
   it('shows option on button', async () => {
     render(<TestComponent submit={() => {}} />);
     const button = await screen.findByRole('combobox', { name: 'Test' });

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,14 +1,4 @@
-import React, {
-  cloneElement,
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { cloneElement, forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   chakra,
   ChakraProps,
@@ -18,7 +8,7 @@ import {
   useControllableState,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
-import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { FloatingFocusManager, UseFloatingProps } from '@floating-ui/react-dom-interactions';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
@@ -95,6 +85,8 @@ export interface DropdownProps<T> extends ChakraProps {
   size?: 'small' | 'medium';
   dropdownMaxHeight?: ChakraProps['maxH'];
   dropdownMinHeight?: ChakraProps['minH'];
+  dropdownWidth?: ChakraProps['width'] | 'match';
+  placement?: UseFloatingProps['placement'];
   readOnly?: boolean;
   disabled?: boolean;
   placeholder?: string;
@@ -102,7 +94,7 @@ export interface DropdownProps<T> extends ChakraProps {
   search?: ReactNode;
   children?: ReactNode;
   iconName?: TypeIconName;
-  formLabel?: string;
+  formLabel?: ReactNode;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
@@ -132,8 +124,8 @@ function useOptionListWithIndexes({ children }: { children: ReactNode }) {
   }, [children]);
 }
 
-type UseDropdownProps<T> = {
-  ref: React.Ref<DropdownInstance<T>>;
+type UseDropdownProps = {
+  ref: React.Ref<Element>;
   optionsRef: React.RefObject<HTMLDivElement>;
 };
 
@@ -162,11 +154,13 @@ function useDropdown<T>({
   value,
   optionsRef,
   defaultValue,
+  dropdownWidth = 'match',
+  placement,
   ref,
   children,
   readOnly,
   ...rest
-}: DropdownProps<T> & UseDropdownProps<T>) {
+}: DropdownProps<T> & UseDropdownProps) {
   const searchRef = useRef(null);
   const {
     close,
@@ -179,7 +173,7 @@ function useDropdown<T>({
     setActiveIndex,
     getItemProps,
     listRef,
-  } = useFloatingDropdown({ enabled: !readOnly, optionsRef });
+  } = useFloatingDropdown({ enabled: !readOnly, optionsRef, dropdownWidth, placement });
   const [formValue, setFormValue] = useControllableState<T>({
     onChange: (newValue) => onChange?.({ target: { value: newValue, name } }),
     defaultValue,
@@ -187,7 +181,6 @@ function useDropdown<T>({
   });
 
   const [formLabel, setFormLabel] = useState<ReactNode>();
-  useImperativeHandle(ref, () => ({ value: formValue, name }), [formValue, name]);
   const refdChildren = useOptionListWithIndexes({ children });
 
   const searchOnSubmit = useCallback(() => {
@@ -251,6 +244,7 @@ function useDropdown<T>({
   return {
     isOpen,
     referenceProps: getReferenceProps({
+      ref,
       onKeyDown: referenceKeyDown,
     }),
     floatingProps,
@@ -265,11 +259,12 @@ function useDropdown<T>({
   };
 }
 
-const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<string | null>>(
+const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   (
     {
       dropdownMaxHeight,
       dropdownMinHeight,
+      dropdownWidth,
       readOnly,
       onBlur,
       placeholder,
@@ -297,6 +292,7 @@ const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<strin
       name,
       readOnly,
       optionsRef,
+      dropdownWidth,
       ref,
       ...props,
     });
@@ -350,7 +346,7 @@ const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<strin
 
 export function typedDropdown<T>() {
   return {
-    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<DropdownInstance<T>>>,
+    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<Element>>,
     DropdownOption: DropdownOption as (p: DropdownOptionProps<T>) => JSX.Element,
   };
 }

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

@@ -9,10 +9,28 @@ import {
   useRole,
   useDismiss,
   flip,
+  UseFloatingProps,
+  MiddlewareArguments,
 } from '@floating-ui/react-dom-interactions';
+import { ChakraProps } from '@chakra-ui/react';
+import { mergeRefs } from '@chakra-ui/react-utils';
 import useAutoScroll from './useAutoScroll';
 
-const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; optionsRef: RefObject<HTMLDivElement> }) => {
+type ApplyFnArgs = MiddlewareArguments & {
+  availableWidth: number;
+  availableHeight: number;
+};
+const useFloatingDropdown = ({
+  enabled,
+  optionsRef,
+  dropdownWidth,
+  placement,
+}: {
+  enabled: boolean;
+  optionsRef: RefObject<HTMLDivElement>;
+  dropdownWidth: ChakraProps['width'] | 'match';
+  placement: UseFloatingProps['placement'] | undefined;
+}) => {
   const listRef = useRef<HTMLElement[]>([]);
   const [isOpen, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
@@ -22,18 +40,21 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
     setKeyboardControlled(true);
   }, [isOpen]);
 
-  const { context, reference, floating, strategy, x, y } = useFloating({
+  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 });
     },
     middleware: [
       size({
         padding: 5,
-        apply({ elements, availableHeight, rects }) {
+        apply: ({ elements, availableHeight, rects }: ApplyFnArgs) => {
           Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
+            width: widthRef.current === 'match' ? `${rects.reference.width}px` : widthRef.current,
           });
           elements.floating.style.setProperty('--floating-available-height', `${availableHeight}px`);
         },
@@ -91,8 +112,9 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
     activeIndex,
     setActiveIndex,
     setSelectedIndex,
-    getReferenceProps(props: React.HTMLProps<Element>) {
-      return getReferenceProps({ ...props, ref: reference });
+    getReferenceProps({ ref, ...props }: React.HTMLProps<Element>) {
+      const merged = mergeRefs(ref as any, reference);
+      return getReferenceProps({ ...props, ref: merged });
     },
     floatingProps: getFloatingProps({
       ref: floating,