@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/Skeleton/Skeleton.theme.ts

@@ -7,24 +7,24 @@ const animation = keyframes`
 `;
 
 const afterStyle = (foregroundColor: string) => ({
+  animation: `${animation} infinite 1.5s`,
+  backgroundColor: foregroundColor,
   content: '""',
-  position: 'absolute',
-  width: '100%',
   height: '100%',
-  top: 0,
   left: 0,
-  pointerEvents: 'none',
-  backgroundColor: foregroundColor,
   maskImage:
     'linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 35%, rgb(0, 0, 0) 48%, rgba(0, 0, 0, 0.57) 55%, rgba(0, 0, 0, 0) 100%)',
-  animation: `${animation} infinite 1.5s`,
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  width: '100%',
 });
 
-const baseStyle = defineStyle(({ isActive, foregroundColor }) => {
+const baseStyle = defineStyle(({ foregroundColor, isActive }) => {
   return {
-    position: 'relative',
-    overflow: 'hidden',
     _after: isActive ? afterStyle(foregroundColor) : {},
+    overflow: 'hidden',
+    position: 'relative',
   };
 });
 

package/src/Components/Skeleton/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, forwardRef, useStyleConfig, useTheme, getToken } from '@chakra-ui/react';
+import { Box, BoxProps, forwardRef, getToken, useStyleConfig, useTheme } from '@chakra-ui/react';
 
 export interface SkeletonProps extends BoxProps {
   isActive?: boolean;
@@ -11,14 +11,14 @@ export interface SkeletonProps extends BoxProps {
  * We don't extend Chakra's Skeleton
  */
 const Skeleton = forwardRef<SkeletonProps, 'div'>((props, ref) => {
-  const { isActive, foregroundColor: foregroundColorToken, ...rest } = props;
+  const { foregroundColor: foregroundColorToken, isActive, ...rest } = props;
   const theme = useTheme();
   const foregroundColor = foregroundColorToken
     ? getToken('colors', foregroundColorToken, foregroundColorToken)(theme)
     : '#ffffff';
   const css = useStyleConfig('Skeleton', {
-    isActive,
     foregroundColor,
+    isActive,
   });
 
   return <Box __css={css} {...rest} ref={ref} />;

package/src/Components/Slider/Slider.theme.ts

@@ -1,6 +1,6 @@
-import { defineStyle, createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
 
-const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
   'container',
   'track',
   'thumb',
@@ -8,61 +8,61 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 ]);
 
 const baseStyleContainer = defineStyle(() => ({
-  width: '100%',
-  display: 'inline-block',
-  position: 'relative',
-  cursor: 'pointer',
   _disabled: {
-    opacity: 0.6,
     cursor: 'default',
+    opacity: 0.6,
     pointerEvents: 'none',
   },
+  cursor: 'pointer',
+  display: 'inline-block',
+  position: 'relative',
+  width: '100%',
 }));
 
 const baseStyleTrack = defineStyle(() => ({
-  height: '8',
-  overflow: 'hidden',
   backgroundColor: 'neutral.95',
   borderRadius: '4',
+  height: '8',
+  overflow: 'hidden',
 }));
 
 const baseStyleThumb = defineStyle(() => ({
-  top: '50%',
-  transform: `translateY(-50%)`,
   _active: {
     transform: 'translateY(-50%) scale(1.15)',
   },
-  width: '40px',
-  height: '40px',
-  display: 'flex',
+  _focusVisible: {
+    boxShadow: 'outline',
+  },
   alignItems: 'center',
-  justifyContent: 'center',
-  position: 'absolute',
-  outline: 0,
-  zIndex: 1,
-  borderRadius: '4',
   bg: 'neutral.100',
   border: '1px solid',
   borderColor: 'neutral.90',
+  borderRadius: '4',
   color: 'neutral.90',
+  display: 'flex',
+  height: '40px',
+  justifyContent: 'center',
+  outline: 0,
+  position: 'absolute',
+  top: '50%',
+  transform: `translateY(-50%)`,
   transitionProperty: 'transform',
-  _focusVisible: {
-    boxShadow: 'outline',
-  },
+  width: '40px',
+  zIndex: 1,
 }));
 
 const baseStyleFilledTrack = defineStyle(() => ({
-  width: 'inherit',
-  height: 'inherit',
-  borderRadius: 'inherit',
   backgroundColor: 'purple.40',
+  borderRadius: 'inherit',
+  height: 'inherit',
+  width: 'inherit',
 }));
 
 const baseStyle = definePartsStyle(() => ({
   container: baseStyleContainer(),
-  track: baseStyleTrack(),
-  thumb: baseStyleThumb(),
   filledTrack: baseStyleFilledTrack(),
+  thumb: baseStyleThumb(),
+  track: baseStyleTrack(),
 }));
 
 const SliderTheme = defineMultiStyleConfig({ baseStyle });

package/src/Components/Table/CheckableRow.tsx

@@ -19,19 +19,19 @@ const CheckableRow = (props: CheckableRowProps) => {
 
   return (
     <LinkBox
-      as={Tr}
-      transform="scale(1)"
       _hover={{
-        td: { background: 'neutral.95' },
         ':has(input:checked)': {
           td: { background: 'purple.93' },
         },
+        td: { background: 'neutral.95' },
       }}
+      as={Tr}
       sx={{
         ':has(input:checked)': {
           td: { background: 'purple.95' },
         },
       }}
+      transform="scale(1)"
       {...rest}
     >
       <Td>

package/src/Components/Table/SelectableRow.tsx

@@ -18,19 +18,19 @@ const SelectableRow = (props: SelectableRowProps) => {
 
   return (
     <LinkBox
-      as={Tr}
-      transform="scale(1)"
       _hover={{
-        td: { background: 'neutral.95' },
         ':has(input:checked)': {
           td: { background: 'purple.93' },
         },
+        td: { background: 'neutral.95' },
       }}
+      as={Tr}
       sx={{
         ':has(input:checked)': {
           td: { background: 'purple.95' },
         },
       }}
+      transform="scale(1)"
       {...rest}
     >
       <Td>

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

@@ -4,109 +4,111 @@ const Tabletheme = {
   baseStyle: () => {
     return {
       caption: {
-        textAlign: 'left',
         marginBottom: '12',
-      },
-      captionTitle: {
-        fontSize: '4',
-        lineHeight: '1.75rem',
-        fontWeight: 'bold',
-        color: 'pal.purple.10',
+        textAlign: 'left',
       },
       captionDescription: {
-        marginTop: '4',
         color: 'pal.neutral.30',
+        marginTop: '4',
       },
-      table: {
-        fontVariantNumeric: 'lining-nums tabular-nums',
-        borderCollapse: 'separate',
-        borderRadius: '4',
-        border: '1px solid',
-        borderColor: 'pal.neutral.93',
-        width: '100%',
-        borderSpacing: 0,
-        '&:not(.disable-row-hover)': {
-          tr: {
-            _hover: {
-              td: { backgroundColor: 'pal.neutral.95' },
-            },
-          },
-        },
-      },
-      thead: {
-        backgroundColor: 'pal.neutral.93',
-        borderTopLeftRadius: '4',
-        borderTopRightRadius: '4',
-      },
-      th: {
-        paddingX: '16',
-        paddingY: '12',
+      captionTitle: {
+        color: 'pal.purple.10',
+        fontSize: '4',
         fontWeight: 'bold',
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
+        lineHeight: '1.75rem',
       },
-      tooltipContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
+      expandTd: {
+        borderBottomColor: 'transparent',
+        paddingRight: 0,
+        width: '1%',
       },
       sortButton: {
+        _hover: {
+          backgroundColor: 'pal.neutral.90',
+        },
+        alignItems: 'center',
         display: 'flex',
+        fontWeight: 'bold',
         gap: '8',
-        alignItems: 'center',
-        width: '100%',
         paddingX: '16',
         paddingY: '12',
-        fontWeight: 'bold',
         textAlign: 'left',
-        _hover: {
-          backgroundColor: 'pal.neutral.90',
-        },
+        width: '100%',
       },
       sortIcon: {
-        path: {
-          fill: 'pal.neutral.80',
-        },
-        '[aria-sort="none"]:hover & path': {
-          fill: 'pal.purple.10',
-        },
         '[aria-sort="ascending"] & path:first-of-type': {
           fill: 'pal.purple.10',
         },
         '[aria-sort="descending"] & path:last-of-type': {
           fill: 'pal.purple.10',
         },
+        '[aria-sort="none"]:hover & path': {
+          fill: 'pal.purple.10',
+        },
+        path: {
+          fill: 'pal.neutral.80',
+        },
+      },
+      table: {
+        '&:not(.disable-row-hover)': {
+          tr: {
+            _hover: {
+              td: { backgroundColor: 'pal.neutral.95' },
+            },
+          },
+        },
+        borderCollapse: 'separate',
+        borderColor: 'pal.neutral.93',
+        borderRadius: '4',
+        borderSpacing: 0,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        fontVariantNumeric: 'lining-nums tabular-nums',
+        width: '100%',
       },
       td: {
         backgroundColor: 'pal.neutral.100',
-        borderTop: '1px solid',
-        borderColor: 'pal.neutral.93',
+        borderTopColor: 'pal.neutral.93',
+        borderTopStyle: 'solid',
+        borderTopWidth: '1px',
         height: rem(65),
         paddingX: '16',
         paddingY: '8',
         textAlign: 'left',
       },
-      expandTd: {
-        borderBottomColor: 'transparent',
-        width: '1%',
-        paddingRight: 0,
+      th: {
+        fontWeight: 'bold',
+        paddingX: '16',
+        paddingY: '12',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+      },
+      thead: {
+        backgroundColor: 'pal.neutral.93',
+        borderTopLeftRadius: '4',
+        borderTopRightRadius: '4',
+      },
+      tooltipContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        gap: 4,
       },
     };
   },
   variants: {
     borderless: {
-      thead: {
-        backgroundColor: 'transparent',
-      },
       table: {
         border: 'none',
       },
-      th: {
+      td: {
         paddingX: '12',
       },
-      td: {
+      th: {
         paddingX: '12',
       },
+      thead: {
+        backgroundColor: 'transparent',
+      },
     },
   },
 };

package/src/Components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { Table as ChakraTable, TableProps as ChakraTableProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, Table as ChakraTable, TableProps as ChakraTableProps } from '@chakra-ui/react';
 
 export interface TableProps extends ChakraTableProps {
   disableRowHover?: boolean;
@@ -13,8 +13,8 @@ const Table = forwardRef<TableProps, 'table'>((props, ref) => {
   const { disableRowHover, isFixed, ...rest } = props;
   return (
     <ChakraTable
-      layout={isFixed ? 'fixed' : 'auto'}
       className={disableRowHover ? 'disable-row-hover' : undefined}
+      layout={isFixed ? 'fixed' : 'auto'}
       {...rest}
       ref={ref}
     />

package/src/Components/Table/TableCaption.tsx

@@ -1,7 +1,7 @@
 import {
+  forwardRef,
   TableCaption as ChakraTableCaption,
   TableCaptionProps as ChakraTableCaptionProps,
-  forwardRef,
   useTableStyles,
 } from '@chakra-ui/react';
 import Text from '../Text/Text';
@@ -15,7 +15,7 @@ const TableCaption = forwardRef<TableCaptionProps, 'caption'>((props, ref) => {
   const css = useTableStyles();
 
   return (
-    <ChakraTableCaption {...props} placement="top" ref={ref}>
+    <ChakraTableCaption {...props} ref={ref} placement="top">
       <Text as="h5" sx={css.captionTitle}>
         {children}
       </Text>

package/src/Components/Table/TableContainer.tsx

@@ -1,4 +1,4 @@
-import { TableContainer as ChakraTableContainer, TableContainerProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TableContainer as ChakraTableContainer, TableContainerProps } from '@chakra-ui/react';
 
 const TableContainer = forwardRef<TableContainerProps, 'div'>((props, ref) => {
   return <ChakraTableContainer {...props} ref={ref} />;

package/src/Components/Table/TableIconButton.tsx

@@ -7,11 +7,6 @@ const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref)
   const { isDanger } = props;
   return (
     <IconButton
-      color={isDanger ? undefined : 'pal.purple.10'}
-      iconSize="24"
-      size="small"
-      isDanger={isDanger}
-      variant="tertiary"
       ref={ref}
       _active={{
         backgroundColor: 'pal.neutral.80',
@@ -19,6 +14,11 @@ const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref)
       _hover={{
         backgroundColor: 'pal.neutral.90',
       }}
+      color={isDanger ? undefined : 'pal.purple.10'}
+      iconSize="24"
+      isDanger={isDanger}
+      size="small"
+      variant="tertiary"
       {...props}
     />
   );

package/src/Components/Table/TablePagination.tsx

@@ -22,13 +22,13 @@ export type TablePaginationProps = {
 };
 
 const TablePagination = ({
+  colSpan,
+  itemsPerPageOptions = defaultItemsPerPageOptions,
   page,
   perPage,
-  totalCount,
   setPage,
   setPerPage,
-  colSpan,
-  itemsPerPageOptions = defaultItemsPerPageOptions,
+  totalCount,
 }: TablePaginationProps): JSX.Element => {
   const pageCount = totalCount && Math.ceil(totalCount / perPage);
   const itemsStartIndex = (page - 1) * perPage + 1;
@@ -38,13 +38,13 @@ const TablePagination = ({
     <Tfoot>
       <Tr>
         <Td colSpan={colSpan}>
-          <Box display="flex" gap="1rem" alignItems="center">
-            <Box display="flex" gap="0.5rem" alignItems="center">
+          <Box alignItems="center" display="flex" gap="1rem">
+            <Box alignItems="center" display="flex" gap="0.5rem">
               <Text>Items per page:</Text>
               <Dropdown
                 onChange={({ target }) => setPerPage(Number(target.value))}
-                value={perPage.toString()}
                 search={false}
+                value={perPage.toString()}
                 width="auto"
               >
                 {itemsPerPageOptions.map((perPageOption) => (
@@ -54,16 +54,16 @@ const TablePagination = ({
                 ))}
               </Dropdown>
             </Box>
-            <Divider orientation="vertical" height="3rem" color="pal.neutral.90" />
+            <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
             <Text as="span" marginRight="auto">
               {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
             </Text>
-            <Divider orientation="vertical" height="3rem" color="pal.neutral.90" />
-            <Box display="flex" gap="0.5rem" alignItems="center">
+            <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
+            <Box alignItems="center" display="flex" gap="0.5rem">
               <Dropdown
                 onChange={({ target }) => setPage(Number(target.value))}
-                value={page.toString()}
                 search={false}
+                value={page.toString()}
                 width="auto"
               >
                 {[...Array(pageCount)].map((_, index) => {
@@ -80,18 +80,18 @@ const TablePagination = ({
             </Box>
             <ButtonGroup>
               <IconButton
-                iconName="ChevronLeft"
-                variant="secondary"
-                onClick={() => setPage(page - 1)}
                 aria-label="Previous page"
+                iconName="ChevronLeft"
                 isDisabled={page === 1}
+                onClick={() => setPage(page - 1)}
+                variant="secondary"
               />
               <IconButton
-                iconName="ChevronRight"
-                variant="secondary"
-                onClick={() => setPage(page + 1)}
                 aria-label="Next page"
+                iconName="ChevronRight"
                 isDisabled={page === pageCount}
+                onClick={() => setPage(page + 1)}
+                variant="secondary"
               />
             </ButtonGroup>
           </Box>

package/src/Components/Table/Tbody.tsx

@@ -1,4 +1,4 @@
-import { Tbody as ChakraTbody, TableBodyProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TableBodyProps, Tbody as ChakraTbody } from '@chakra-ui/react';
 
 const Tbody = forwardRef<TableBodyProps, 'tbody'>((props, ref) => {
   return <ChakraTbody {...props} ref={ref} />;

package/src/Components/Table/Td.tsx

@@ -1,4 +1,4 @@
-import { Td as ChakraTd, TableCellProps as ChakraTableCellProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TableCellProps as ChakraTableCellProps, Td as ChakraTd } from '@chakra-ui/react';
 
 export interface TableCellProps extends ChakraTableCellProps {
   variant?: 'default' | 'separator';

package/src/Components/Table/Th.tsx

@@ -1,8 +1,8 @@
 import { AriaAttributes } from 'react';
 import {
-  Th as ChakraTh,
-  TableColumnHeaderProps as ChakraTableColumnHeaderProps,
   forwardRef,
+  TableColumnHeaderProps as ChakraTableColumnHeaderProps,
+  Th as ChakraTh,
   useTableStyles,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
@@ -58,12 +58,12 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
     properties['aria-sort'] = sortedBy || 'none';
     properties.children = (
       <Box
-        as="button"
-        onClick={onClick}
         __css={{
           ...css.sortButton,
           flexDirection: isNumeric ? 'row-reverse' : 'row',
         }}
+        as="button"
+        onClick={onClick}
       >
         {properties.children}
         <Icon name="Sort" sx={css.sortIcon} />

package/src/Components/Table/Thead.tsx

@@ -1,4 +1,4 @@
-import { Thead as ChakraThead, TableHeadProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TableHeadProps, Thead as ChakraThead } from '@chakra-ui/react';
 
 const Thead = forwardRef<TableHeadProps, 'thead'>((props, ref) => {
   return <ChakraThead {...props} ref={ref} />;

package/src/Components/Table/Tr.tsx

@@ -1,9 +1,9 @@
 import { Children, ReactNode, useCallback } from 'react';
 import {
   Collapse,
-  Tr as ChakraTr,
-  TableRowProps as ChakraTableRowProps,
   forwardRef,
+  TableRowProps as ChakraTableRowProps,
+  Tr as ChakraTr,
   useDisclosure,
   useTableStyles,
 } from '@chakra-ui/react';
@@ -28,7 +28,7 @@ type ExpandableProps = ChakraTableRowProps & {
 export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps);
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
-  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, ...rest } = props;
+  const { children, defaultIsExpanded, expandableContent, onClick, onExpandedChanged, ...rest } = props;
 
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsExpanded });
   const css = useTableStyles();
@@ -50,9 +50,9 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
         <ChakraTr {...properties} ref={ref}>
           <Td sx={css.expandTd}>
             <TableIconButton
+              aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               iconName="ChevronDown"
               isTooltipDisabled
-              aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               onClick={onToggleClick}
               sx={{
                 '> svg': {
@@ -65,9 +65,9 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
           {children}
         </ChakraTr>
         <ChakraTr>
-          <Td colSpan={colSpan} height="0" borderTop="none" padding="0">
+          <Td borderTop="none" colSpan={colSpan} height="0" padding="0">
             <Collapse in={isOpen} unmountOnExit>
-              <Box sx={{ borderTop: css.td.borderTop, borderColor: css.td.borderColor, paddingX: css.td.paddingX }}>
+              <Box sx={{ borderColor: css.td.borderColor, borderTop: css.td.borderTop, paddingX: css.td.paddingX }}>
                 {expandableContent}
               </Box>
             </Collapse>

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,4 +1,4 @@
-import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
+import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
 import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';

package/src/Components/Tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
+import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
 import Badge, { BadgeProps } from '../Badge/Badge';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/Tabs/TabList.tsx

@@ -1,4 +1,4 @@
-import { TabList as ChakraTabList, TabListProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TabList as ChakraTabList, TabListProps } from '@chakra-ui/react';
 
 const TabList = forwardRef<TabListProps, 'div'>((props, ref) => {
   return <ChakraTabList {...props} ref={ref} />;

package/src/Components/Tabs/TabPanel.tsx

@@ -1,4 +1,4 @@
-import { TabPanel as ChakraTabPanel, TabPanelProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TabPanel as ChakraTabPanel, TabPanelProps } from '@chakra-ui/react';
 
 const TabPanel = forwardRef<TabPanelProps, 'div'>((props, ref) => {
   return <ChakraTabPanel {...props} ref={ref} />;

package/src/Components/Tabs/TabPanels.tsx

@@ -1,4 +1,4 @@
-import { TabPanels as ChakraTabPanels, TabPanelsProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, TabPanels as ChakraTabPanels, TabPanelsProps } from '@chakra-ui/react';
 
 const TabPanels = forwardRef<TabPanelsProps, 'div'>((props, ref) => {
   return <ChakraTabPanels {...props} ref={ref} />;