@bitrise/bitkit 10.23.0-alpha-chakra.1 → 10.23.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.23.0-alpha-chakra.1",
+  "version": "10.23.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -70,7 +70,7 @@
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^28.1.6",
     "@types/luxon": "^2.4.0",
-    "@types/react": "18.0.15",
+    "@types/react": "18.0.18",
     "@types/react-dom": "^18.0.6",
     "@types/vfile-message": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
@@ -104,7 +104,7 @@
     "ts-jest": "^28.0.7",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.2",
     "webpack": "^5.73.0"
   },
   "files": [

package/src/Components/Dropdown/isNodeMatch.ts

@@ -15,12 +15,12 @@ function isNodeMatch(node: ReactNode, filter: string): boolean {
     return node.toLowerCase().includes(filter.toLowerCase());
   }
   if (Array.isArray(node)) {
-    return node.some((child) => isNodeMatch(child, filter));
+    return Array.from(node).some((child) => isNodeMatch(child, filter));
   }
   if ('children' in node) {
     return isNodeMatch(node.children, filter);
   }
-  if (React.isValidElement(node)) {
+  if (React.isValidElement<any>(node)) {
     if (node.type === 'svg') {
       return false;
     }
@@ -30,10 +30,7 @@ function isNodeMatch(node: ReactNode, filter: string): boolean {
     }
     return isNodeMatch(node.props.children, filter);
   }
-  if (Symbol.iterator in node) {
-    return isNodeMatch(Array.from(node), filter);
-  }
-  return false;
+  return isNodeMatch(Array.from(node), filter);
 }
 
 export default isNodeMatch;

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

@@ -14,7 +14,7 @@ const TextareaTheme: ComponentStyleConfig = {
     appearance: 'none',
     lineHeight: 'short',
     verticalAlign: 'top',
-    transition: '100ms',
+    transition: '200ms',
     _placeholder: {
       fontStyle: 'italic',
     },
@@ -24,6 +24,7 @@ const TextareaTheme: ComponentStyleConfig = {
     },
     _focusVisible: {
       boxShadow: 'formFocus',
+      borderColor: 'purple.50',
     },
     _invalid: {
       color: 'red.50',

package/src/Components/Form/Textarea/Textarea.tsx

@@ -10,15 +10,15 @@ import {
   forwardRef,
 } from '@chakra-ui/react';
 
-export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChange' | 'onBlur'> {
+export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
   errorText?: string;
   isLoading?: boolean;
   helperText?: string;
   label?: ReactNode;
   name?: string;
-  onChange?: ChakraTextareaProps['onChange'];
   onBlur?: ChakraTextareaProps['onBlur'];
+  onChange?: ChakraTextareaProps['onChange'];
   value?: ChakraTextareaProps['value'];
 }
 
@@ -35,14 +35,13 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     isLoading,
     label,
     placeholder,
-    onChange,
     onBlur,
+    onChange,
     name,
     value,
     ...rest
   } = props;
   const formControlProps = {
-    display: label || errorText || helperText ? 'block' : 'inline-block',
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
     ...rest,
@@ -50,8 +49,8 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   };
   const textareaProps = {
     'data-testid': dataTestid,
-    onChange,
     onBlur,
+    onChange,
     name,
     placeholder,
     value,

package/src/Components/Select/Select.tsx

@@ -12,13 +12,14 @@ import {
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 
-export interface SelectProps extends Omit<FormControlProps, 'label' | 'onChange'> {
+export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
   errorText?: string;
   helperText?: string;
   isLoading?: boolean;
   label?: ReactNode;
   name?: string;
+  onBlur?: ChakraSelectProps['onBlur'];
   onChange?: ChakraSelectProps['onChange'];
   size?: 'small' | 'medium';
   value?: ChakraSelectProps['value'];
@@ -35,6 +36,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     isLoading,
     label,
     name,
+    onBlur,
     onChange,
     placeholder,
     size,
@@ -43,7 +45,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   } = props;
   const iconSize = size === 'medium' ? '24' : '16';
   const formControlProps = {
-    display: label || errorText || helperText ? 'block' : 'inline-block',
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
     ...rest,
@@ -56,6 +57,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
       <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
     ),
     name,
+    onBlur,
     onChange,
     size,
     value,

package/src/Components/Toggle/Toggle.tsx

@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
 
-export interface ToggleProps extends Omit<FormControlProps, 'label'> {
+export interface ToggleProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
   errorText?: string;
@@ -24,6 +24,7 @@ export interface ToggleProps extends Omit<FormControlProps, 'label'> {
   helperText?: string;
   label?: ReactNode;
   name?: string;
+  onBlur?: SwitchProps['onBlur'];
   onChange?: SwitchProps['onChange'];
   value?: SwitchProps['value'];
 }
@@ -44,12 +45,12 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     isLoading,
     label,
     name,
+    onBlur,
     onChange,
     value,
     ...rest
   } = props;
   const formControlProps = {
-    display: label || errorText || helperText ? 'block' : 'inline-block',
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
     ...rest,
@@ -62,6 +63,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     isChecked,
     isDisabled: isDisabled || isLoading,
     name,
+    onBlur,
     onChange,
     value,
   };

package/src/Foundations/Shadows/Shadows.ts

@@ -5,7 +5,7 @@ const shadows = {
   inner: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset',
   outline: '0 0 0 3px #C289E6',
   tooltip: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)',
-  formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px rgba(146, 71, 194, 0.3)',
+  formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, inset 0 0 0 3px rgba(146, 71, 194, 0.3)',
   none: 'none',
 };