@bitrise/bitkit 12.82.0 → 12.84.0

package/src/Components/Filter/FilterSwitch/FilterSwitch.theme.ts

@@ -4,35 +4,26 @@ const FilterSwitch = {
   baseStyle: () => {
     return {
       container: {
-        color: 'neutral.40',
         background: 'neutral.95',
         border: '1px solid',
         borderColor: 'neutral.80',
-        display: 'flex',
         borderRadius: '4',
+        color: 'neutral.40',
+        display: 'flex',
       },
       item: {
-        cursor: 'pointer',
-        position: 'relative',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        paddingBlock: rem(5),
-        paddingInline: rem(11),
-        zIndex: 0,
-        fontSize: rem(14),
-        lineHeight: rem(20),
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4',
-        borderLeft: '1px solid',
-        borderLeftColor: 'neutral.80',
+        _active: {
+          background: 'neutral.100',
+          color: 'purple.10',
+        },
+        _checked: {
+          background: 'neutral.100',
+          color: 'purple.10',
+          cursor: 'default',
+        },
         _first: {
-          borderLeftRadius: '4',
           borderLeft: 'none',
-        },
-        _last: {
-          borderRightRadius: '4',
+          borderLeftRadius: '4',
         },
         _focusVisible: {
           boxShadow: 'outline',
@@ -41,15 +32,24 @@ const FilterSwitch = {
         _hover: {
           background: 'neutral.100',
         },
-        _active: {
-          color: 'purple.10',
-          background: 'neutral.100',
-        },
-        _checked: {
-          background: 'neutral.100',
-          color: 'purple.10',
-          cursor: 'default',
+        _last: {
+          borderRightRadius: '4',
         },
+        alignItems: 'center',
+        borderLeft: '1px solid',
+        borderLeftColor: 'neutral.80',
+        cursor: 'pointer',
+        display: 'flex',
+        fontSize: rem(14),
+        gap: '4',
+        lineHeight: rem(20),
+        overflow: 'hidden',
+        paddingBlock: rem(5),
+        paddingInline: rem(11),
+        position: 'relative',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        zIndex: 0,
       },
     };
   },

package/src/Components/Filter/FilterSwitch/FilterSwitch.tsx

@@ -1,9 +1,9 @@
 import {
-  RadioProps as ChakraRadioProps,
-  forwardRef,
   chakra,
-  useRadio,
+  forwardRef,
+  RadioProps as ChakraRadioProps,
   useMultiStyleConfig,
+  useRadio,
   useRadioGroupContext,
 } from '@chakra-ui/react';
 import { omitThemingProps } from '@chakra-ui/styled-system';
@@ -36,13 +36,13 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
 
   const { name } = group;
 
-  const { getInputProps, getLabelProps, getCheckboxProps } = useRadio({
+  const { getCheckboxProps, getInputProps, getLabelProps } = useRadio({
     ...rest,
     isChecked,
-    isFocusable,
     isDisabled,
-    onChange: group.onChange,
+    isFocusable,
     name,
+    onChange: group.onChange,
   });
 
   return (

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

@@ -1,52 +1,52 @@
 const CheckboxTheme = {
   baseStyle: {
-    icon: {
-      color: 'neutral.100',
-    },
     container: {
-      alignItems: 'flex-start',
+      ':hover > span:first-of-type': {
+        borderColor: 'neutral.70',
+      },
       _disabled: {
-        cursor: 'not-allowed',
         ':hover > span:first-of-type': {
           borderColor: 'neutral.90',
         },
+        cursor: 'not-allowed',
       },
-      ':hover > span:first-of-type': {
-        borderColor: 'neutral.70',
-      },
+      alignItems: 'flex-start',
     },
     control: {
-      width: '24',
-      height: '24',
-      border: '1px solid',
-      borderColor: 'neutral.90',
-      borderRadius: '4',
-      boxShadow: 'inner',
-      transitionDuration: '200ms',
       _checked: {
-        backgroundColor: 'purple.50',
         _disabled: {
           backgroundColor: 'neutral.80',
         },
+        backgroundColor: 'purple.50',
       },
-      _hover: {
-        borderColor: 'neutral.70',
+      _disabled: {
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.90',
+        cursor: 'not-allowed',
       },
       _focusVisible: {
         boxShadow: 'formFocus',
       },
-      _disabled: {
-        cursor: 'not-allowed',
-        backgroundColor: 'neutral.93',
-        borderColor: 'neutral.90',
+      _hover: {
+        borderColor: 'neutral.70',
       },
+      border: '1px solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      boxShadow: 'inner',
+      height: '24',
+      transitionDuration: '200ms',
+      width: '24',
+    },
+    icon: {
+      color: 'neutral.100',
     },
     label: {
-      userSelect: 'none',
-      display: 'flex',
+      _disabled: { color: 'neutral.60' },
       alignItems: 'center',
+      display: 'flex',
       gap: '4',
-      _disabled: { color: 'neutral.60' },
+      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, onChange, value, ...rest } = props;
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+
+  const rightButton = (
+    <IconButton
+      _active={{ background: 'transparent' }}
+      _hover={{ background: 'transparent' }}
+      aria-label="Show date picker"
+      color="icon.tertiary"
+      iconName="Calendar"
+      onClick={() => setIsDatePickerVisible(true)}
+      variant="tertiary"
+    />
+  );
+
+  return (
+    <DatePicker
+      mode="day"
+      onApply={(day) => onChange?.(day?.toLocaleString() || '')}
+      onClose={() => setIsDatePickerVisible(false)}
+      variant="default"
+      visible={isDatePickerVisible}
+    >
+      <Input
+        {...rest}
+        ref={ref}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder="dd/mm/yyyy"
+        rightAddon={rightButton}
+        rightAddonPlacement="inside"
+        value={value}
+      />
+    </DatePicker>
+  );
+});
+
+export default DateInput;

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

@@ -5,25 +5,18 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['container', '
 const getContainerType = (hasSelectedFiles?: boolean) => {
   if (hasSelectedFiles) {
     return {
-      display: 'flex',
       alignItems: 'center',
-      justifyContent: 'space-between',
-      borderRadius: '8',
       backgroundColor: 'neutral.100',
-      paddingX: '24',
-      paddingY: '16',
       border: '1px solid',
       borderColor: 'neutral.90',
+      borderRadius: '8',
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingX: '24',
+      paddingY: '16',
     };
   }
   return {
-    borderRadius: '8',
-    backgroundColor: 'neutral.95',
-    padding: '8',
-    cursor: 'pointer',
-    _hover: {
-      backgroundColor: 'purple.93',
-    },
     _active: {
       backgroundColor: 'purple.93',
     },
@@ -35,26 +28,26 @@ const getContainerType = (hasSelectedFiles?: boolean) => {
         backgroundColor: 'neutral.95',
       },
     },
+    _hover: {
+      backgroundColor: 'purple.93',
+    },
+    backgroundColor: 'neutral.95',
+    borderRadius: '8',
+    cursor: 'pointer',
+    padding: '8',
   };
 };
 
 const FileInputTheme = defineMultiStyleConfig({
   baseStyle: ({ hasSelectedFiles }) => ({
     container: getContainerType(hasSelectedFiles),
+    input: {
+      display: 'none',
+    },
     label: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '8',
-      padding: '24',
-      border: '1px dashed',
-      borderColor: 'purple.50',
-      borderRadius: '4',
-      color: 'purple.50',
-      cursor: 'pointer',
       _active: {
-        color: 'purple.10',
         borderColor: 'purple.10',
+        color: 'purple.10',
       },
       _disabled: {
         borderColor: 'neutral.60',
@@ -65,9 +58,16 @@ const FileInputTheme = defineMultiStyleConfig({
         borderColor: 'red.50',
         color: 'red.50',
       },
-    },
-    input: {
-      display: 'none',
+      alignItems: 'center',
+      border: '1px dashed',
+      borderColor: 'purple.50',
+      borderRadius: '4',
+      color: 'purple.50',
+      cursor: 'pointer',
+      display: 'flex',
+      gap: '8',
+      justifyContent: 'center',
+      padding: '24',
     },
   }),
 });

package/src/Components/Form/FileInput/FileInput.tsx

@@ -94,29 +94,29 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
   const isInputInvalid = isInvalid || !!internalErrorMessage;
 
   return (
-    <FormControl {...rest} isDisabled={isDisabled} isInvalid={isInputInvalid} ref={ref}>
+    <FormControl {...rest} ref={ref} isDisabled={isDisabled} isInvalid={isInputInvalid}>
       <Box __css={style.container} data-disabled={isDisabled || undefined} gap="10px">
         {selectedFileNames.length > 0 ? (
           <>
-            <Box textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden">
-              <Text as="h6" size="2" fontWeight="bold">
+            <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+              <Text as="h6" fontWeight="bold" size="2">
                 Selected file
               </Text>
               <Text as="span">{selectedFileNames[0]}</Text>
             </Box>
-            <Button leftIconName="MinusRemove" size="small" variant="secondary" onClick={onRemoveClick} flexShrink={0}>
+            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="small" variant="secondary">
               Remove
             </Button>
           </>
         ) : (
           <Box
-            as="label"
+            __css={style.label}
             aria-disabled={isDisabled || undefined}
+            as="label"
             data-invalid={isInputInvalid || undefined}
             htmlFor={id}
             onDragOver={onDragOver}
             onDrop={onDrop}
-            __css={style.label}
           >
             <Icon name="Upload" size="24" />
             {isDisabled && disabledLabel ? disabledLabel : label}
@@ -132,16 +132,16 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
         </FormHelperText>
       )}
       <Box
-        as="input"
-        aria-hidden="true"
+        ref={inputRef}
+        __css={style.input}
         accept={accept}
+        aria-hidden="true"
+        as="input"
         disabled={isDisabled}
         id={id}
         name={name}
-        type="file"
         onChange={onFileInputChange}
-        ref={inputRef}
-        __css={style.input}
+        type="file"
       />
     </FormControl>
   );

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

@@ -4,31 +4,31 @@ const FormTheme = {
   Form: {
     baseStyle: {
       helperText: {
+        color: 'neutral.50',
         fontSize: '2',
         lineHeight: '1.25rem',
         marginTop: '4',
-        color: 'neutral.50',
       },
     } as ComponentStyleConfig,
   },
   FormError: {
     baseStyle: {
       text: {
+        color: 'red.50',
         fontSize: '2',
         lineHeight: '1.25rem',
         marginTop: '4',
-        color: 'red.50',
       },
     } as ComponentStyleConfig,
   },
   FormLabel: {
     baseStyle: {
-      fontSize: '2',
-      fontWeight: 'bold',
-      color: 'purple.10',
       _disabled: {
         color: 'neutral.80',
       },
+      color: 'purple.10',
+      fontSize: '2',
+      fontWeight: 'bold',
     } as ComponentStyleConfig,
   },
 };

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

@@ -3,50 +3,50 @@ import { defineStyle } from '@chakra-ui/styled-system';
 const InputTheme = defineStyle({
   baseStyle: {
     field: {
-      width: '100%',
-      padding: '0.6875rem',
-      background: 'neutral.100',
-      border: '1px solid',
-      borderColor: 'neutral.90',
-      borderRadius: '4',
-      boxShadow: 'inner',
-      outline: 0,
-      appearance: 'none',
-      transition: '200ms',
-      _placeholder: {
-        fontStyle: 'italic',
-        color: 'neutral.60',
-      },
       _disabled: {
-        background: 'neutral.93',
-        cursor: 'not-allowed',
         _hover: {
           borderColor: 'neutral.90',
         },
         _placeholder: {
           color: 'neutral.80',
         },
-      },
-      _readOnly: {
         background: 'neutral.93',
-        _hover: {
-          borderColor: 'neutral.90',
-        },
+        cursor: 'not-allowed',
       },
       _focusVisible: {
-        boxShadow: 'formFocus',
         borderColor: 'purple.50',
+        boxShadow: 'formFocus',
       },
       _hover: {
         borderColor: 'neutral.70',
       },
       _invalid: {
-        color: 'red.50',
-        borderColor: 'red.50',
         _hover: {
           borderColor: 'red.50',
         },
+        borderColor: 'red.50',
+        color: 'red.50',
+      },
+      _placeholder: {
+        color: 'neutral.60',
+        fontStyle: 'italic',
+      },
+      _readOnly: {
+        _hover: {
+          borderColor: 'neutral.90',
+        },
+        background: 'neutral.93',
       },
+      appearance: 'none',
+      background: 'neutral.100',
+      border: '1px solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      boxShadow: 'inner',
+      outline: 0,
+      padding: '0.6875rem',
+      transition: '200ms',
+      width: '100%',
     },
   },
 });

package/src/Components/Form/Input/Input.tsx

@@ -5,11 +5,11 @@ import {
   FormErrorMessage,
   FormHelperText,
   FormLabel,
-  Input as ChakraInput,
-  InputProps as ChakraInputProps,
   forwardRef,
+  Input as ChakraInput,
   InputGroup,
   InputLeftElement,
+  InputProps as ChakraInputProps,
   InputRightAddon,
   InputRightElement,
   SystemStyleObject,
@@ -63,17 +63,17 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
  */
 const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const {
-    'data-testid': dataTestid,
     autoComplete,
     autoFocus,
+    'data-testid': dataTestid,
     errorText,
     helperText,
-    isDisabled,
     infoText,
     infoTooltipProps,
     inputHeight,
     inputRef,
     inputStyle,
+    isDisabled,
     isInvalid,
     isLoading,
     label,
@@ -83,16 +83,16 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     maxLength,
     min,
     minLength,
-    pattern,
-    placeholder,
-    step,
+    name,
     onBlur,
     onChange,
+    pattern,
+    placeholder,
     rightAddon,
     rightAddonPlacement,
     rightIconName,
-    name,
     role,
+    step,
     type,
     value,
     withCounter,
@@ -109,12 +109,12 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     autoComplete,
     autoFocus,
     'data-testid': dataTestid,
-    onBlur,
-    name,
     max,
     maxLength,
     min,
     minLength,
+    name,
+    onBlur,
     pattern,
     placeholder,
     ref: inputRef,
@@ -149,15 +149,15 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
 
   return (
     <FormControl {...formControlProps}>
-      <Box display={showLabel ? 'flex' : 'none'} gap="4" alignItems="center" marginBlockEnd="4">
+      <Box alignItems="center" display={showLabel ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
         {label && (
           <FormLabel
-            requiredIndicator={null as any}
             optionalIndicator={
-              <Text as="span" fontSize="2" color="neutral.40" fontWeight="normal" marginLeft="4px">
+              <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
                 (Optional)
               </Text>
             }
+            requiredIndicator={null as any}
           >
             {label}
           </FormLabel>
@@ -171,10 +171,10 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         {withCounter && maxLength && (
           <Text
             as="span"
-            size="2"
             color="neutral.40"
-            sx={{ fontVariantNumeric: 'tabular-nums' }}
             marginInlineStart="auto"
+            size="2"
+            sx={{ fontVariantNumeric: 'tabular-nums' }}
           >
             {valueLength}/{maxLength}
           </Text>
@@ -185,9 +185,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         {leftIconName && (
           <InputLeftElement
             marginLeft={inputHeight ? (inputHeight - iconSize) / 2 : 12}
+            pointerEvents="none"
             top="50%"
             transform="translateY(-50%)"
-            pointerEvents="none"
           >
             <Icon color={leftIconColor} name={leftIconName} size={`${iconSize}`} />
           </InputLeftElement>
@@ -202,9 +202,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         {!rightAddon && rightIconName && (
           <InputRightElement
             marginRight={inputHeight ? (inputHeight - iconSize) / 2 : 12}
+            pointerEvents="none"
             top="50%"
             transform="translateY(-50%)"
-            pointerEvents="none"
           >
             <Icon name={rightIconName} size={`${iconSize}`} />
           </InputRightElement>