@bitrise/bitkit 12.55.0 → 12.55.1

package/package.json

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

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

@@ -13,6 +13,7 @@ const DefinitionTooltipTheme = defineMultiStyleConfig({
     trigger: {
       borderBottom: '1px dotted',
       borderBottomColor: 'neutral.60',
+      display: 'inline-block',
       width: 'fit-content',
       fontWeight: 'inherit',
       _hover: {

package/src/Components/DefinitionTooltip/DefinitionTooltip.tsx

@@ -2,22 +2,23 @@ import { useMultiStyleConfig } from '@chakra-ui/react';
 import Popover, { PopoverProps } from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import PopoverTrigger from '../Popover/PopoverTrigger';
-import Box from '../Box/Box';
+import Box, { BoxProps } from '../Box/Box';
 
 export interface DefinitionTooltipProps extends Omit<PopoverProps, 'children'> {
   children: string;
   label: string;
+  triggerProps?: BoxProps;
 }
 
 const DefinitionTooltip = (props: DefinitionTooltipProps) => {
-  const { children, label, ...rest } = props;
+  const { children, label, triggerProps, ...rest } = props;
 
   const style = useMultiStyleConfig('DefinitionTooltip');
 
   return (
     <Popover placement="top" variant="dark" withArrow {...rest}>
       <PopoverTrigger>
-        <Box as="button" __css={style.trigger}>
+        <Box as="span" role="button" tabIndex={0} __css={style.trigger} {...triggerProps}>
           {children}
         </Box>
       </PopoverTrigger>

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

@@ -63,10 +63,10 @@ const Tabletheme: SystemStyleObject = {
       '[aria-sort="none"]:hover & path': {
         fill: 'purple.10',
       },
-      '[aria-sort="ascending"] & path:first-child': {
+      '[aria-sort="ascending"] & path:first-of-type': {
         fill: 'purple.10',
       },
-      '[aria-sort="descending"] & path:last-child': {
+      '[aria-sort="descending"] & path:last-of-type': {
         fill: 'purple.10',
       },
     },

package/src/Components/Table/Th.tsx

@@ -10,7 +10,6 @@ import Icon from '../Icon/Icon';
 import DefinitionTooltip, { DefinitionTooltipProps } from '../DefinitionTooltip/DefinitionTooltip';
 
 export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
-  children?: string;
   isNumeric?: boolean;
   isSortable?: boolean;
   onSortClick?: (sortDirection?: AriaAttributes['aria-sort']) => void;
@@ -27,11 +26,15 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
   };
 
   if (children && tooltip) {
-    properties.children = (
-      <DefinitionTooltip trigger="hover" {...tooltip}>
-        {children}
-      </DefinitionTooltip>
-    );
+    if (typeof children === 'string') {
+      properties.children = (
+        <DefinitionTooltip trigger="hover" {...tooltip}>
+          {children}
+        </DefinitionTooltip>
+      );
+    } else {
+      console.error('If you want to use tooltip on Th, the children should be string.');
+    }
   }
 
   if (isSortable) {