@bitrise/bitkit 9.31.0 → 9.33.1

package/package.json

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

package/src/Components/Dialog/Dialog.theme.ts

@@ -10,6 +10,7 @@ const DialogTheme: SystemStyleObject = {
       justifyContent: 'center',
       alignItems: 'flex-start',
       overflow: 'auto',
+      zIndex: 1000,
     },
     dialog: {
       borderRadius: '8',
@@ -33,6 +34,7 @@ const DialogTheme: SystemStyleObject = {
     body: {
       flex: 1,
       paddingX: '32',
+      overflow: 'auto',
     },
     footer: {
       display: 'flex',
@@ -59,6 +61,17 @@ const DialogTheme: SystemStyleObject = {
       },
     },
     full: {
+      dialog: {
+        position: 'absolute',
+        margin: '0',
+        width: 'auto',
+        left: '32',
+        right: '32',
+        top: '32',
+        bottom: '32',
+      },
+    },
+    mobile: {
       dialog: {
         maxW: '100vw',
         minH: '100vh',

package/src/Components/Dialog/Dialog.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import {
   Modal,
   ModalOverlay,
@@ -7,6 +6,7 @@ import {
   ModalHeader,
   useBreakpointValue,
   useDisclosure,
+  HTMLChakraProps,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
@@ -25,20 +25,19 @@ export const useDialog = (): DialogState => {
     onOpen,
   };
 };
-export interface DialogProps {
-  children: ReactNode;
+export interface DialogProps extends HTMLChakraProps<'section'> {
   dataTestid?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'full';
   state: DialogState;
   title: string;
 }
 
-const Dialog = ({ children, dataTestid, state, size, title }: DialogProps) => {
-  const dialogSize = useBreakpointValue({ mobile: 'full', desktop: size });
+const Dialog = ({ children, dataTestid, state, size, title, ...rest }: DialogProps) => {
+  const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
     <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
       <ModalOverlay />
-      <ModalContent data-testid={dataTestid}>
+      <ModalContent data-testid={dataTestid} {...rest}>
         <ModalHeader>
           <Text as="h1" size="5">
             {title}

package/src/Components/Select/Select.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Select from './Select';
@@ -36,3 +37,40 @@ WithProps.args = sortObjectByKey({
   ...args,
   placeholder: 'Select build status',
 });
+
+export const Controlled = () => {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  return (
+    <Select w="300px" placeholder="Test holder" value={value} onChange={({ target: { value: val } }) => setValue(val)}>
+      {children}
+    </Select>
+  );
+};
+
+export const WithLoading = () => (
+  <>
+    <Select w="300px" isDisabled placeholder="Test holder">
+      {children}
+    </Select>
+    <Select w="300px" isLoading>
+      {children}
+    </Select>
+  </>
+);
+
+export const WithLoadingOnChange = () => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Select
+      w="240px"
+      isLoading={loading}
+      onChange={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 3000);
+      }}
+    >
+      {children}
+    </Select>
+  );
+};

package/src/Components/Select/Select.tsx

@@ -1,30 +1,43 @@
-import { Select as ChakraSelect, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
+import { forwardRef, Select as ChakraSelect, SelectProps as ChakraSelectProps, Spinner } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 
 export interface SelectProps extends ChakraSelectProps {
   size?: 'small' | 'medium';
+  isLoading?: boolean;
 }
 
-const Select = (props: SelectProps) => {
-  const { size, placeholder, children, ...rest } = props;
+const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
+  const { size, placeholder, children, isDisabled, isLoading, ...rest } = props;
   const iconSize = size === 'medium' ? '24' : '16';
   const properties: ChakraSelectProps = {
-    icon: <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />,
+    icon: isLoading ? (
+      <Spinner width={iconSize} height={iconSize} marginEnd="4" />
+    ) : (
+      <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+    ),
+    isDisabled: isLoading || isDisabled,
     size,
     variant: 'select',
     ...rest,
   };
+  if (placeholder) {
+    if ('value' in properties) {
+      properties.value = properties.value || '';
+    } else {
+      properties.defaultValue = '';
+    }
+  }
   return (
-    <ChakraSelect {...properties}>
+    <ChakraSelect ref={ref} {...properties}>
       {placeholder && (
-        <option selected hidden disabled value="">
+        <option hidden disabled value="">
           {placeholder}
         </option>
       )}
       {children}
     </ChakraSelect>
   );
-};
+});
 
 Select.defaultProps = {
   size: 'medium',