@bitrise/bitkit 12.81.0 → 12.83.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.81.0",
+  "version": "12.83.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -47,8 +47,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@bitrise/eslint-plugin": "^2.3.3",
@@ -64,7 +64,7 @@
     "@storybook/react-webpack5": "^7.6.10",
     "@storybook/theming": "^7.6.10",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
@@ -73,7 +73,7 @@
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
-    "axios": "^1.6.5",
+    "axios": "^1.6.6",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.3",
@@ -89,7 +89,7 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.4",
     "react-hook-form": "^7.49.3",
-    "release-it": "^17.0.1",
+    "release-it": "^17.0.3",
     "storybook": "^7.6.10",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DateTime } from 'luxon';
 import FocusLock from 'react-focus-lock';
-import { PopoverAnchor } from '@chakra-ui/react';
 import { useObjectMemo } from '../../utils/utils';
 import Popover from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import Box from '../Box/Box';
 import useResponsive from '../../hooks/useResponsive';
 import Button from '../Button/Button';
+import PopoverTrigger from '../Popover/PopoverTrigger';
 import DatePickerMonth from './DatePickerMonth';
 import { DatePickerContext } from './DatePicker.context';
 import DatePickerMonthSelector from './DatePickerMonthSelector';
@@ -183,7 +183,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   return (
     <Popover modifiers={[]} isOpen={visible} onClose={onClose} isLazy lazyBehavior="unmount">
-      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverTrigger>{children}</PopoverTrigger>
       <PopoverContent aria-label="select date range">
         <FocusLock returnFocus>
           <DatePickerContext value={ctx}>

package/src/Components/Form/Checkbox/Checkbox.theme.ts

@@ -29,15 +29,17 @@ const CheckboxTheme = {
           backgroundColor: 'neutral.80',
         },
       },
-      _disabled: {
-        backgroundColor: 'neutral.93',
-      },
       _hover: {
         borderColor: 'neutral.70',
       },
       _focusVisible: {
         boxShadow: 'formFocus',
       },
+      _disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.90',
+      },
     },
     label: {
       userSelect: 'none',

package/src/Components/Form/DateInput/DateInput.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { forwardRef } from '@chakra-ui/react';
+import DatePicker from '../../DatePicker/DatePicker';
+import IconButton from '../../IconButton/IconButton';
+import Input, { InputProps } from '../Input/Input';
+
+export type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'placeholder'> & {
+  onCalendarClick?(): void;
+  value?: string;
+  onChange?(value: string): void;
+};
+
+const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
+  const { onCalendarClick, value, onChange, ...rest } = props;
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+
+  const rightButton = (
+    <IconButton
+      iconName="Calendar"
+      onClick={() => setIsDatePickerVisible(true)}
+      variant="tertiary"
+      aria-label="Show date picker"
+      _active={{ background: 'transparent' }}
+      _hover={{ background: 'transparent' }}
+      color="icon.tertiary"
+    />
+  );
+
+  return (
+    <DatePicker
+      variant="default"
+      onApply={(day) => onChange?.(day?.toLocaleString() || '')}
+      onClose={() => setIsDatePickerVisible(false)}
+      visible={isDatePickerVisible}
+      mode="day"
+    >
+      <Input
+        {...rest}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder="dd/mm/yyyy"
+        ref={ref}
+        rightAddon={rightButton}
+        rightAddonPlacement="inside"
+        value={value}
+      />
+    </DatePicker>
+  );
+});
+
+export default DateInput;

package/src/Components/Form/Radio/Radio.theme.ts

@@ -42,6 +42,11 @@ const RadioTheme = {
       _focusVisible: {
         boxShadow: 'formFocus',
       },
+      _disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.90',
+      },
     },
     label: {
       userSelect: 'none',

package/src/Components/Table/CheckableRow.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { LinkBox, LinkOverlay } from '@chakra-ui/react';
+import Checkbox from '../Form/Checkbox/Checkbox';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import Td from './Td';
+import Tr, { RowProps } from './Tr';
+
+export interface CheckableRowProps extends RowProps {
+  id: string;
+  isDisabled?: boolean;
+  label: ReactNode;
+  name: string;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  value: string;
+}
+
+const CheckableRow = (props: CheckableRowProps) => {
+  const { children, id, isDisabled, label, name, tooltipProps, value, ...rest } = props;
+
+  return (
+    <LinkBox
+      as={Tr}
+      transform="scale(1)"
+      _hover={{
+        td: { background: 'neutral.95' },
+        ':has(input:checked)': {
+          td: { background: 'purple.93' },
+        },
+      }}
+      sx={{
+        ':has(input:checked)': {
+          td: { background: 'purple.95' },
+        },
+      }}
+      {...rest}
+    >
+      <Td>
+        <Tooltip isDisabled={!tooltipProps} placement="right" shouldWrapChildren {...tooltipProps}>
+          <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
+        </Tooltip>
+      </Td>
+      <Td>
+        <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
+          {label}
+        </LinkOverlay>
+      </Td>
+      {children}
+    </LinkBox>
+  );
+};
+
+export default CheckableRow;

package/src/Components/Table/SelectableRow.tsx

@@ -1,17 +1,20 @@
 import { ReactNode } from 'react';
 import { LinkBox, LinkOverlay } from '@chakra-ui/react';
 import Radio from '../Form/Radio/Radio';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Td from './Td';
 import Tr, { RowProps } from './Tr';
 
 export interface SelectableRowProps extends RowProps {
   id: string;
+  isDisabled?: boolean;
   label: ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
   value: string;
 }
 
 const SelectableRow = (props: SelectableRowProps) => {
-  const { children, id, label, value, ...rest } = props;
+  const { children, id, isDisabled, label, tooltipProps, value, ...rest } = props;
 
   return (
     <LinkBox
@@ -31,10 +34,12 @@ const SelectableRow = (props: SelectableRowProps) => {
       {...rest}
     >
       <Td>
-        <Radio id={id} value={value} />
+        <Tooltip isDisabled={!tooltipProps} placement="right" shouldWrapChildren {...tooltipProps}>
+          <Radio id={id} isDisabled={isDisabled} value={value} zIndex="1" />
+        </Tooltip>
       </Td>
       <Td>
-        <LinkOverlay as="label" cursor="pointer" htmlFor={id}>
+        <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
           {label}
         </LinkOverlay>
       </Td>

package/src/index.ts

@@ -283,6 +283,9 @@ export { default as ClickableRow } from './Components/Table/ClickableRow';
 export type { SelectableRowProps } from './Components/Table/SelectableRow';
 export { default as SelectableRow } from './Components/Table/SelectableRow';
 
+export type { CheckableRowProps } from './Components/Table/CheckableRow';
+export { default as CheckableRow } from './Components/Table/CheckableRow';
+
 export type { TagProps } from './Components/Tag/Tag';
 export { default as Tag } from './Components/Tag/Tag';
 
@@ -327,3 +330,6 @@ export { default as ProgressIndicator } from './Components/ProgressIndicator/Pro
 export type { FilterProps } from './Components/Filter/Filter';
 export { default as Filter } from './Components/Filter/Filter';
 export * from './Components/Filter/Filter.types';
+
+export type { DateInputProps } from './Components/Form/DateInput/DateInput';
+export { default as DateInput } from './Components/Form/DateInput/DateInput';