@bitrise/bitkit 10.19.0 → 10.21.0

package/package.json

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

package/src/Components/Collapse/Collapse.tsx

@@ -0,0 +1,5 @@
+import { Collapse, CollapseProps } from '@chakra-ui/react';
+
+export type { CollapseProps };
+
+export default Collapse;

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -114,8 +114,8 @@ export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
 export const InsideDialog = () => {
   return (
     <Provider>
-      <Dialog isOpen isClosable>
-        <DialogBody>
+      <Dialog isOpen isClosable title="Dropdown inside Dialog">
+        <DialogBody paddingBottom="24">
           <Dropdown search={false}>
             <DropdownOption value="x">Test Opt1</DropdownOption>
           </Dropdown>

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,

package/src/Old/DatePicker/DatePickerGrid.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import Grid, { Props as GridProps } from '../Grid/Grid';
+import Box, { BoxProps } from '../../Components/Box/Box';
 
-type Props = GridProps;
+type Props = BoxProps;
 
 const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
-  return <Grid {...props} className="DatePicker__grid" gapVertical="x1" repeat="7" repeatWidth="3rem" />;
+  return (
+    <Box display="grid" {...props} gridTemplateColumns="repeat(7, 3rem)" gridAutoRows="max-content" gridRowGap="4" />
+  );
 };
 
 export default DatePickerGrid;

package/src/Old/DatePicker/DatePickerMonth.tsx

@@ -57,7 +57,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
       </Flex>
 
-      <DatePickerGrid margin="x1">
+      <DatePickerGrid marginY="4">
         {daysOfTheWeek.map((day) => (
           <Text textAlign="center" key={day} paddingY="16" size="2" color="neutral.70" textTransform="uppercase">
             {day}
@@ -65,7 +65,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
         ))}
       </DatePickerGrid>
 
-      <DatePickerGrid paddingVertical="x2">
+      <DatePickerGrid borderTop="1px solid" borderTopColor="neutral.93" paddingY="8">
         {Array.from({ length: daysCount }).map((_, i) => (
           <DatePickerDay
             dateSelectableFrom={dateSelectableFrom}

package/src/Old/Placement/Placement.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Placement as TypePlacement } from '@popperjs/core';
 import { Props as BaseProps } from '../Base/Base';
-import { ModalContext } from '../Modal/ModalContext';
 import PlacementPopper from './PlacementPopper';
 import './Placement.css';
 
@@ -63,13 +62,9 @@ export interface Props extends BaseProps {
  * and PlacementReference. If the target is an existing reference element
  * it can be used by iteself by using the referenceElement prop.
  */
-const Placement: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <ModalContext.Consumer>
-      {({ modalElement }) => <PlacementPopper {...props} closeElement={modalElement} isInsideModal={!!modalElement} />}
-    </ModalContext.Consumer>
-  );
-};
+const Placement: React.FunctionComponent<Props> = (props: Props) => (
+  <PlacementPopper {...props} closeElement={null} isInsideModal={false} />
+);
 
 Placement.defaultProps = {
   flip: true,

package/src/Old/Progress/ProgressBitbot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props as BaseProps } from '../Base/Base';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export interface Props extends BaseProps {
   /**
@@ -62,7 +62,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
   const { content, size, ...rest } = props;
 
   return (
-    <Text {...rest} align="middle">
+    <Text {...rest} textAlign="center">
       <svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
@@ -159,7 +159,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
       </svg>
 
       {content && (
-        <Text align="middle" letterSpacing="x5" size="1" uppercase>
+        <Text textAlign="center" size="1" textTransform="uppercase">
           {content}
         </Text>
       )}

package/src/index.ts

@@ -196,5 +196,8 @@ export { default as Tr } from './Components/Table/Tr';
 export type { ToggleProps } from './Components/Toggle/Toggle';
 export { default as Toggle } from './Components/Toggle/Toggle';
 
+export type { CollapseProps } from './Components/Collapse/Collapse';
+export { default as Collapse } from './Components/Collapse/Collapse';
+
 export type { TextareaProps } from './Components/Form/Textarea/Textarea';
 export { default as Textarea } from './Components/Form/Textarea/Textarea';

package/src/old.ts

@@ -24,15 +24,9 @@ export { default as DropdownMenuItem } from './Old/Dropdown/DropdownMenuItem';
 export type { Props as DropdownMenuItemGroupProps } from './Old/Dropdown/DropdownMenuItemGroup';
 export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuItemGroup';
 
-export type { Props as ExpandProps } from './Old/Expand/Expand';
-export { default as Expand } from './Old/Expand/Expand';
-
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
-export type { Props as GridProps } from './Old/Grid/Grid';
-export { default as Grid } from './Old/Grid/Grid';
-
 export type { Props as InputProps } from './Old/Input/Input';
 export { default as Input } from './Old/Input/Input';
 
@@ -48,9 +42,6 @@ export { default as InputInlineHelp } from './Old/Input/InputInlineHelp';
 export type { Props as InputLabelProps } from './Old/Input/InputLabel';
 export { default as InputLabel } from './Old/Input/InputLabel';
 
-export type { Props as LogoProps } from './Old/Logo/Logo';
-export { default as Logo } from './Old/Logo/Logo';
-
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
@@ -66,31 +57,6 @@ export { default as Skeleton } from './Old/Skeleton/Skeleton';
 export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
 export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 
-export type { Props as Status500Props } from './Old/Status/Status500';
-export { default as Status500 } from './Old/Status/Status500';
-
-export type { Props as OldTableProps } from './Old/Table/Table';
-export { default as OldTable } from './Old/Table/Table';
-
-export type { Props as OldTableBodyProps } from './Old/Table/TableBody';
-export { default as OldTableBody } from './Old/Table/TableBody';
-
-export type { Props as OldTableCellProps } from './Old/Table/TableCell';
-export { default as OldTableCell } from './Old/Table/TableCell';
-
-export type { Props as OldTableHeaderProps } from './Old/Table/TableHeader';
-export { default as OldTableHeader } from './Old/Table/TableHeader';
-
-export type { Props as OldTableHeaderCellProps } from './Old/Table/TableHeaderCell';
-export type { TypeTableSort } from './Old/Table/TableHeaderCell';
-export { default as OldTableHeaderCell } from './Old/Table/TableHeaderCell';
-
-export type { Props as OldTableHeaderRowProps } from './Old/Table/TableHeaderRow';
-export { default as OldTableHeaderRow } from './Old/Table/TableHeaderRow';
-
-export type { Props as OldTableRowProps } from './Old/Table/TableRow';
-export { default as OldTableRow } from './Old/Table/TableRow';
-
 export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
 export { default as Visibility } from './Old/Visibility/Visibility';