@bitrise/bitkit 10.20.0 → 10.22.0

package/package.json

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

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/Components/Table/Table.stories.tsx

@@ -132,13 +132,14 @@ ExpandableRows.args = {
       <TableCaption description="Click on a row">Expandable rows</TableCaption>
       <Thead>
         <Tr>
+          <Th />
           <Th colSpan={2}>ID</Th>
           <Th>Status</Th>
           <Th>Time</Th>
         </Tr>
       </Thead>
       <Tbody>
-        <Tr expandableContent={<Box paddingY="12">😎</Box>}>
+        <Tr expandableContent={<Box paddingY="12">😎</Box>} defaultIsExpanded>
           <Td>f6963af857c8f2fe</Td>
           <Td>Success</Td>
           <Td>May 29, 2022 10:11:32am</Td>
@@ -148,6 +149,12 @@ ExpandableRows.args = {
           <Td>Aborted</Td>
           <Td>May 29, 2022 9:12:50am</Td>
         </Tr>
+        <Tr>
+          <Td />
+          <Td>f6963af857c8f2fe</Td>
+          <Td>Failed</Td>
+          <Td>May 29, 2022 10:11:32am</Td>
+        </Tr>
       </Tbody>
     </>
   ),

package/src/Components/Table/Table.theme.ts

@@ -91,9 +91,7 @@ const Tabletheme: SystemStyleObject = {
     expandTd: {
       borderBottomColor: 'transparent',
       width: '1%',
-      '+ td': {
-        paddingLeft: 0,
-      },
+      paddingRight: 0,
     },
   },
 };

package/src/Components/Table/Tr.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactNode } from 'react';
+import { Children, ReactNode, useCallback } from 'react';
 import {
   Collapse,
   Tr as ChakraTr,
@@ -10,19 +10,33 @@ import {
 import IconButton from '../IconButton/IconButton';
 import Td from './Td';
 
-export interface TableRowProps extends ChakraTableRowProps {
-  expandableContent?: ReactNode | undefined;
+type RowProps = ChakraTableRowProps & {
   /**
    * @deprecated - Please use it only when really necessary, we are working on a new table-like components with clickable items
    */
   onClick?: ChakraTableRowProps['onClick'];
-}
+};
+
+type NonExpandableProps = ChakraTableRowProps & {
+  expandableContent?: never;
+  defaultIsExpanded?: never;
+  onExpandedChanged?: never;
+};
+
+type ExpandableProps = ChakraTableRowProps & {
+  expandableContent: ReactNode | undefined;
+  defaultIsExpanded?: boolean;
+  onExpandedChanged?(isExpanded: boolean): void;
+};
+
+export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps);
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
-  const { isOpen, onToggle } = useDisclosure();
+  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, ...rest } = props;
+
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsExpanded });
   const css = useTableStyles();
 
-  const { children, expandableContent, onClick, ...rest } = props;
   const properties: ChakraTableRowProps = {
     onClick,
     ...rest,
@@ -32,7 +46,12 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     properties.sx = css.clickableTr;
   }
 
-  //
+  const onToggleClick = useCallback(() => {
+    const nextOpen = !isOpen;
+    onToggle();
+    onExpandedChanged?.(nextOpen);
+  }, [isOpen, onToggle, onExpandedChanged]);
+
   if (expandableContent) {
     const colSpan = Children.count(children) + 1;
     return (
@@ -42,7 +61,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
             <IconButton
               iconName="ChevronDown"
               aria-label="Toggle current row"
-              onClick={onToggle}
+              onClick={onToggleClick}
               size="small"
               variant="tertiary"
               sx={{

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/old.ts

@@ -27,9 +27,6 @@ export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuIte
 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';
 
@@ -45,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';
 
@@ -63,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';