@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -10,62 +10,62 @@ const [HeaderContext, useHeaderContext] = createContext<{
   controls: 'left' | 'right' | 'both';
 }>();
 export const DatePickerHeaderContent = (props: BoxProps) => (
-  <Box alignSelf="center" display="flex" justifyContent="center" gap="8" {...props} />
+  <Box alignSelf="center" display="flex" gap="8" justifyContent="center" {...props} />
 );
 export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
-  const { onPrevious, controls } = useHeaderContext();
+  const { controls, onPrevious } = useHeaderContext();
   return (
     <IconButton
-      size="small"
       alignSelf="start"
-      visibility={controls === 'right' ? 'hidden' : undefined}
       aria-label={label}
-      variant="tertiary"
-      color="purple.10"
       as="button"
-      onClick={onPrevious}
+      color="purple.10"
       iconName="ChevronLeft"
       isTooltipDisabled
+      onClick={onPrevious}
+      size="small"
+      variant="tertiary"
+      visibility={controls === 'right' ? 'hidden' : undefined}
     />
   );
 };
 export const DatePickerHeaderNext = ({ label }: { label: string }) => {
-  const { onNext, controls } = useHeaderContext();
+  const { controls, onNext } = useHeaderContext();
   return (
     <IconButton
       alignSelf="end"
-      visibility={controls === 'left' ? 'hidden' : undefined}
-      size="small"
       aria-label={label}
-      variant="tertiary"
       color="purple.10"
-      onClick={onNext}
       iconName="ChevronRight"
       isTooltipDisabled
+      onClick={onNext}
+      size="small"
+      variant="tertiary"
+      visibility={controls === 'left' ? 'hidden' : undefined}
     />
   );
 };
 
 const DatePickerHeader = ({
-  onPrevious,
-  onNext,
   children,
   controls = 'both',
+  onNext,
+  onPrevious,
 }: {
   onPrevious: () => void;
   onNext: () => void;
   controls?: 'left' | 'right' | 'both';
   children?: ReactNode;
 }): JSX.Element => {
-  const ctx = useObjectMemo({ onPrevious, onNext, controls });
+  const ctx = useObjectMemo({ controls, onNext, onPrevious });
   return (
     <Box
-      marginBottom="24"
-      width="17.5rem"
-      display="grid"
-      gridTemplateColumns="2rem auto 2rem"
       alignItems="center"
+      display="grid"
       gap="4"
+      gridTemplateColumns="2rem auto 2rem"
+      marginBottom="24"
+      width="17.5rem"
     >
       <HeaderContext value={ctx}>{children}</HeaderContext>
     </Box>

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -35,48 +35,48 @@ const days = createElement(
   {},
   ...Array.from({ length: daysCount }).map((_, i) => <DatePickerDay n={i + 1} />),
 );
-const DatePickerMonth = ({ controls, onViewDateChange, viewDate, onMonthClick }: Props) => {
+const DatePickerMonth = ({ controls, onMonthClick, onViewDateChange, viewDate }: Props) => {
   const onNextMonth = useCallback(() => onViewDateChange(viewDate.plus({ months: 1 })), [onViewDateChange, viewDate]);
   const onPreviousMonth = useCallback(
     () => onViewDateChange(viewDate.minus({ months: 1 })),
     [onViewDateChange, viewDate],
   );
 
-  const dayContext = useObjectMemo({ onPreviousMonth, onNextMonth, viewDate });
+  const dayContext = useObjectMemo({ onNextMonth, onPreviousMonth, viewDate });
 
   const monthLabelId = useId();
   return (
     <Box data-testid={`controls-${controls}`}>
-      <DatePickerHeader onPrevious={onPreviousMonth} onNext={onNextMonth} controls={controls}>
+      <DatePickerHeader controls={controls} onNext={onNextMonth} onPrevious={onPreviousMonth}>
         <DatePickerHeaderPrevious label="previous month" />
         <DatePickerHeaderContent id={monthLabelId}>
           <Button
-            onClick={onMonthClick}
-            size="small"
-            variant="tertiary"
             color="purple.10"
             flexShrink={0}
+            onClick={onMonthClick}
             rightIconName="ChevronDown"
+            size="small"
+            variant="tertiary"
           >
             {viewDate.monthLong}
           </Button>
           <NumberInput
             aria-label="year"
             flexShrink={1}
-            size="small"
-            min={1990}
-            w="4.5rem"
             max={2100}
-            value={viewDate.year}
+            min={1990}
             onChange={(_, year) => onViewDateChange(viewDate.set({ year }))}
+            size="small"
+            value={viewDate.year}
+            w="4.5rem"
           >
             <NumberInputField />
             <NumberInputStepper>
               <NumberIncrementStepper>
-                <Icon size="16" name="ChevronUp" />
+                <Icon name="ChevronUp" size="16" />
               </NumberIncrementStepper>
               <NumberDecrementStepper>
-                <Icon size="16" name="ChevronDown" />
+                <Icon name="ChevronDown" size="16" />
               </NumberDecrementStepper>
             </NumberInputStepper>
           </NumberInput>
@@ -84,14 +84,14 @@ const DatePickerMonth = ({ controls, onViewDateChange, viewDate, onMonthClick }:
         <DatePickerHeaderNext label="next month" />
       </DatePickerHeader>
 
-      <DatePickerGrid alignItems="center" justifyItems="center" gridTemplateRows="2rem">
+      <DatePickerGrid alignItems="center" gridTemplateRows="2rem" justifyItems="center">
         {daysOfTheWeek.map((day) => (
-          <Text key={day} size="2" color="neutral.50" textTransform="capitalize">
+          <Text key={day} color="neutral.50" size="2" textTransform="capitalize">
             {day}
           </Text>
         ))}
       </DatePickerGrid>
-      <DatePickerGrid aria-labelledby={monthLabelId} role="listbox" paddingTop="8">
+      <DatePickerGrid aria-labelledby={monthLabelId} paddingTop="8" role="listbox">
         <DatePickerDayContext value={dayContext}>{days}</DatePickerDayContext>
       </DatePickerGrid>
     </Box>

package/src/Components/DatePicker/DatePickerMonthSelector.tsx

@@ -18,12 +18,12 @@ import DatePickerHeader, {
 } from './DatePickerHeader';
 
 const DatePickerMonthItem = ({
-  children,
-  selected,
   'aria-label': label,
-  onClick,
-  n,
+  children,
   id,
+  n,
+  onClick,
+  selected,
 }: {
   id?: string;
   'aria-label': string;
@@ -32,20 +32,20 @@ const DatePickerMonthItem = ({
   n: number;
   onClick: (n: number) => void;
 }) => {
-  const { text, day } = useMultiStyleConfig('DatePickerDay', {
+  const { day, text } = useMultiStyleConfig('DatePickerDay', {
+    currentMonth: true,
     selectable: true,
     selection: selected ? 'incomplete' : undefined,
-    currentMonth: true,
   });
   return (
     <Box
-      id={id}
-      aria-selected={selected ? true : undefined}
       aria-label={label}
+      aria-selected={selected ? true : undefined}
       as="button"
+      id={id}
+      onClick={() => onClick(n)}
       role="option"
       sx={day}
-      onClick={() => onClick(n)}
       width="48"
     >
       <Text sx={{ ...text, width: '48' }}>{children}</Text>
@@ -56,8 +56,8 @@ const DatePickerMonthItem = ({
 const monthNames = Info.months('short');
 const longMonthNames = Info.months('long');
 const DatePickerMonthSelector = ({
-  viewDate,
   onMonthSelected,
+  viewDate,
 }: {
   viewDate: DateTime;
   onMonthSelected: (month: number, year: number) => void;
@@ -71,28 +71,28 @@ const DatePickerMonthSelector = ({
   const monthId = useId();
   return (
     <Box>
-      <DatePickerHeader onPrevious={onPreviousYear} onNext={onNextYear}>
+      <DatePickerHeader onNext={onNextYear} onPrevious={onPreviousYear}>
         <DatePickerHeaderPrevious label="previous year" />
         <DatePickerHeaderContent>
           <NumberInput
             aria-label="year"
             flexShrink={1}
-            size="small"
-            min={1990}
-            w="4.5rem"
             max={2100}
-            value={selectedYear}
+            min={1990}
             onChange={(_, year) => {
               setSelectedYear(year);
             }}
+            size="small"
+            value={selectedYear}
+            w="4.5rem"
           >
             <NumberInputField ref={yearRef} />
             <NumberInputStepper>
               <NumberIncrementStepper>
-                <Icon size="16" name="ChevronUp" />
+                <Icon name="ChevronUp" size="16" />
               </NumberIncrementStepper>
               <NumberDecrementStepper>
-                <Icon size="16" name="ChevronDown" />
+                <Icon name="ChevronDown" size="16" />
               </NumberDecrementStepper>
             </NumberInputStepper>
           </NumberInput>
@@ -100,26 +100,26 @@ const DatePickerMonthSelector = ({
         <DatePickerHeaderNext label="next year" />
       </DatePickerHeader>
       <Box
-        display="grid"
-        rowGap="24"
         alignItems="center"
-        justifyItems="center"
+        aria-activedescendant={monthId}
+        aria-label="month"
+        display="grid"
         gridTemplateColumns="repeat(3,1fr)"
         gridTemplateRows="repeat(4, 1fr)"
+        justifyItems="center"
         role="listbox"
-        aria-label="month"
-        aria-activedescendant={monthId}
+        rowGap="24"
       >
         {monthNames.map((month, idx) => {
           const selected = viewDate.month === idx + 1;
           return (
             <DatePickerMonthItem
+              key={month}
+              aria-label={longMonthNames[idx]}
               id={selected ? monthId : undefined}
-              onClick={monthClicked}
               n={idx + 1}
-              aria-label={longMonthNames[idx]}
+              onClick={monthClicked}
               selected={selected}
-              key={month}
             >
               {month}
             </DatePickerMonthItem>

package/src/Components/DefinitionTooltip/DefinitionTooltip.theme.ts

@@ -6,19 +6,19 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['content', 'tr
 const DefinitionTooltipTheme = defineMultiStyleConfig({
   baseStyle: {
     content: {
+      maxWidth: rem(320),
       paddingX: '12',
       paddingY: '8',
-      maxWidth: rem(320),
     },
     trigger: {
+      _hover: {
+        borderBottomColor: 'purple.50',
+      },
       borderBottom: '1px dotted',
       borderBottomColor: 'neutral.60',
       display: 'inline-block',
-      width: 'fit-content',
       fontWeight: 'inherit',
-      _hover: {
-        borderBottomColor: 'purple.50',
-      },
+      width: 'fit-content',
     },
   },
 });

package/src/Components/DefinitionTooltip/DefinitionTooltip.tsx

@@ -18,7 +18,7 @@ const DefinitionTooltip = (props: DefinitionTooltipProps) => {
   return (
     <Popover placement="top" variant="dark" withArrow {...rest}>
       <PopoverTrigger>
-        <Box as="span" role="button" tabIndex={0} __css={style.trigger} {...triggerProps}>
+        <Box __css={style.trigger} as="span" role="button" tabIndex={0} {...triggerProps}>
           {children}
         </Box>
       </PopoverTrigger>

package/src/Components/Dialog/Dialog.theme.ts

@@ -2,58 +2,66 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
 const DialogTheme: ComponentStyleConfig = {
   baseStyle: ({ scrollBehavior }) => ({
-    overlay: {
-      backgroundColor: 'rgba(0, 0, 0, .5)',
-      zIndex: 'dialogOverlay',
+    body: {
+      flex: 1,
+      overflow: scrollBehavior === 'inside' ? 'auto' : undefined,
+      paddingX: '32',
     },
-    dialogContainer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'flex-start',
-      overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
-      zIndex: 'dialog',
+    closeButton: {
+      color: 'purple.10',
+      position: 'absolute',
+      right: '22',
+      top: '22',
     },
     dialog: {
-      borderRadius: '8',
       backgroundColor: 'neutral.100',
+      borderRadius: '8',
       boxShadow: 'large',
       marginY: '15vh',
       maxH: scrollBehavior === 'inside' ? '70vh' : undefined,
     },
-    header: {
-      padding: '24',
-      paddingLeft: '30',
-      color: 'purple.10',
-    },
-    closeButton: {
-      position: 'absolute',
-      top: '22',
-      right: '22',
-      color: 'purple.10',
-    },
-    body: {
-      flex: 1,
-      paddingX: '32',
-      overflow: scrollBehavior === 'inside' ? 'auto' : undefined,
+    dialogContainer: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      justifyContent: 'center',
+      overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
+      zIndex: 'dialog',
     },
     footer: {
       display: 'flex',
-      justifyContent: 'end',
+      flexWrap: 'wrap',
       gap: '16',
+      justifyContent: 'end',
       padding: '32',
       paddingTop: '48',
-      flexWrap: 'wrap',
+    },
+    header: {
+      color: 'purple.10',
+      padding: '24',
+      paddingLeft: '30',
+    },
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, .5)',
+      zIndex: 'dialogOverlay',
     },
   }),
   sizes: {
-    small: {
+    full: {
       dialog: {
-        maxWidth: '30rem',
+        bottom: '32',
+        left: '32',
+        margin: '0',
+        maxH: 'auto',
+        position: 'absolute',
+        right: '32',
+        top: '32',
+        width: 'auto',
       },
-    },
-    medium: {
-      dialog: {
-        maxWidth: '40rem',
+      dialogContainer: {
+        zIndex: 'fullDialog',
+      },
+      overlay: {
+        zIndex: 'fullDialogOverlay',
       },
     },
     large: {
@@ -61,33 +69,25 @@ const DialogTheme: ComponentStyleConfig = {
         maxWidth: '50rem',
       },
     },
-    full: {
-      overlay: {
-        zIndex: 'fullDialogOverlay',
-      },
-      dialogContainer: {
-        zIndex: 'fullDialog',
-      },
+    medium: {
       dialog: {
-        position: 'absolute',
-        margin: '0',
-        width: 'auto',
-        left: '32',
-        right: '32',
-        top: '32',
-        bottom: '32',
-        maxH: 'auto',
+        maxWidth: '40rem',
       },
     },
     mobile: {
       dialog: {
-        w: '100vw',
-        maxH: '100vh',
         '@supports(min-height: -webkit-fill-available)': {
           maxH: '-webkit-fill-available',
         },
-        marginY: '0',
         borderRadius: 0,
+        marginY: '0',
+        maxH: '100vh',
+        w: '100vw',
+      },
+    },
+    small: {
+      dialog: {
+        maxWidth: '30rem',
       },
     },
   },

package/src/Components/Dialog/Dialog.tsx

@@ -1,14 +1,14 @@
 import { useId } from 'react';
 import {
+  ComponentWithAs,
+  HTMLChakraProps,
   Modal,
-  ModalOverlay,
-  ModalContent,
   ModalCloseButton,
+  ModalContent,
   ModalHeader,
+  ModalOverlay,
   useBreakpointValue,
   usePrefersReducedMotion,
-  HTMLChakraProps,
-  ComponentWithAs,
 } from '@chakra-ui/react';
 import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Icon from '../Icon/Icon';
@@ -57,7 +57,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
         {variant !== 'empty' && (
           <>
             <ModalHeader marginRight="48">
-              <Text id={headerId} as="h1" size="5">
+              <Text as="h1" id={headerId} size="5">
                 {title}
               </Text>
             </ModalHeader>

package/src/Components/Dot/Dot.tsx

@@ -8,7 +8,7 @@ export interface DotProps extends BoxProps {
 const Dot = forwardRef<DotProps, 'div'>((props, ref) => {
   const { size, ...rest } = props;
 
-  return <Box ref={ref} width={size} height={size} borderRadius="50%" aria-hidden {...rest} />;
+  return <Box ref={ref} aria-hidden borderRadius="50%" height={size} width={size} {...rest} />;
 });
 
 export default Dot;

package/src/Components/Drawer/Drawer.theme.ts

@@ -11,40 +11,40 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers([
 
 const DrawerTheme = defineMultiStyleConfig({
   baseStyle: {
-    overlay: {
-      backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      zIndex: 'dialogOverlay',
-      top: '3rem',
-    },
-    dialogContainer: {
-      zIndex: 'dialog',
-      top: '3rem',
+    closeButton: {
+      padding: '4',
+      position: 'absolute',
+      right: '16',
+      top: '16',
     },
     dialog: {
-      top: '3rem !important',
       background: 'neutral.100',
-      maxWidth: '20rem',
-      padding: '24',
       display: 'flex',
       flexDirection: 'column',
       gap: '8',
+      maxWidth: '20rem',
+      padding: '24',
+      top: '3rem !important',
     },
-    closeButton: {
-      position: 'absolute',
-      top: '16',
-      right: '16',
-      padding: '4',
+    dialogContainer: {
+      top: '3rem',
+      zIndex: 'dialog',
+    },
+    footer: {
+      justifyContent: 'flex-start',
+      marginTop: 'auto',
     },
     header: {
       color: 'neutral.60',
       fontSize: '1',
+      fontWeight: 'bold',
       lineHeight: '1rem',
       textTransform: 'uppercase',
-      fontWeight: 'bold',
     },
-    footer: {
-      marginTop: 'auto',
-      justifyContent: 'flex-start',
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      top: '3rem',
+      zIndex: 'dialogOverlay',
     },
   },
 });

package/src/Components/Drawer/Drawer.tsx

@@ -3,13 +3,13 @@ import {
   BoxProps,
   Drawer as ChakraDrawer,
   DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentProps,
   DrawerFooter,
   DrawerHeader,
-  DrawerProps as ChakraDrawerProps,
   DrawerOverlay,
-  DrawerContent,
-  DrawerCloseButton,
-  DrawerContentProps,
+  DrawerProps as ChakraDrawerProps,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 
@@ -25,7 +25,7 @@ export interface DrawerProps
 }
 
 const Drawer = (props: DrawerProps) => {
-  const { children, footer, maxWidth = '20rem', padding, headerPadding, bodyPadding, title, ...drawerProps } = props;
+  const { bodyPadding, children, footer, headerPadding, maxWidth = '20rem', padding, title, ...drawerProps } = props;
 
   return (
     <ChakraDrawer {...drawerProps}>

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -26,9 +26,9 @@ function useDropdownContextTyped<T>(): DropdownContext<T> {
 }
 
 const DropdownProvider = <T,>({
-  styles,
-  context,
   children,
+  context,
+  styles,
 }: {
   styles: ComponentProps<typeof DropdownStylesProvider>['value'];
   children: ReactNode;