@bitrise/bitkit 9.14.0-alpha-chakra.5 → 9.14.0-alpha-chakra.8

package/package.json

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

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -5,6 +5,10 @@ import Dropdown from './Dropdown';
 export default {
   title: 'Components/Dropdown',
   component: Dropdown,
+  args: {
+    isDisabled: false,
+    isLoading: false,
+  },
   argTypes: {
     onChange: {
       action: 'onChange event',

package/src/Components/Dropdown/Dropdown.styles.ts

@@ -1,4 +1,5 @@
 import { ChakraStylesConfig } from 'chakra-react-select';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 import SelectTheme from '../Select/Select.theme';
 
 const controlTextStyle = {
@@ -12,22 +13,19 @@ const controlTextStyle = {
   whiteSpace: 'nowrap',
 };
 
-const getDropdownStyles = (size: 'small' | 'medium'): ChakraStylesConfig => ({
+const getDropdownStyles = (size: 'small' | 'medium', additionalStyle?: SystemStyleObject): ChakraStylesConfig => ({
   container: (_provided, state) => ({
     borderRadius: '4',
     boxShadow: state.isFocused ? 'outline' : 'none',
     position: 'relative',
+    zIndex: state.isFocused ? '1' : '0',
+    ...additionalStyle,
   }),
   control: () => ({
     display: 'flex',
     ...SelectTheme.baseStyle.field,
     ...SelectTheme.sizes[size].field,
-  }),
-  dropdownIndicator: () => ({
-    position: 'absolute',
-    right: '7px',
-    top: '50%',
-    transform: 'translateY(-50%)',
+    paddingRight: '8',
   }),
   groupHeading: () => ({
     display: 'flex',
@@ -46,6 +44,18 @@ const getDropdownStyles = (size: 'small' | 'medium'): ChakraStylesConfig => ({
       bg: 'neutral.90',
     },
   }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  }),
+  loadingIndicator: () => ({
+    color: 'neutral.70',
+    width: '16',
+    height: '16',
+    marginRight: '8',
+  }),
   menu: () => ({
     position: 'absolute',
     transform: 'translateY(8px)',
@@ -60,7 +70,6 @@ const getDropdownStyles = (size: 'small' | 'medium'): ChakraStylesConfig => ({
     padding: '12',
   }),
   placeholder: () => ({
-    color: 'text.secondary',
     ...controlTextStyle,
   }),
   singleValue: () => controlTextStyle,

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import { chakraComponents, ChakraStylesConfig, Props, DropdownIndicatorProps, Select } from 'chakra-react-select';
+import { chakraComponents, ChakraStylesConfig, DropdownIndicatorProps, Props, Select } from 'chakra-react-select';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 import Icon from '../../Old/Icon/Icon';
 import getDropdownStyles from './Dropdown.styles';
 
-export type DropdownProps = {
+export type DropdownProps = Omit<Props, 'defaultValue' | 'onChange'> & {
+  defaultValue?: any;
+  onChange?: ((newValue: any) => void) | undefined;
   size?: 'small' | 'medium';
-} & Props;
+  style?: SystemStyleObject;
+};
 
 const components = {
   DropdownIndicator: (props: DropdownIndicatorProps) => {
@@ -18,21 +22,39 @@ const components = {
 };
 
 const Dropdown = (props: DropdownProps) => {
-  const { defaultValue, onChange, options, placeholder, size = 'medium' } = props;
-  const chakraStyles: ChakraStylesConfig = getDropdownStyles(size);
-
-  return (
-    <Select
-      chakraStyles={chakraStyles}
-      components={components}
-      defaultValue={defaultValue}
-      isSearchable={false}
-      onChange={onChange}
-      options={options}
-      placeholder={placeholder}
-      selectedOptionStyle="check"
-    />
-  );
+  const { defaultValue, isDisabled, isLoading, onChange, options, placeholder, size = 'medium', style } = props;
+  const chakraStyles: ChakraStylesConfig = getDropdownStyles(size, style);
+
+  const defaultValueWithLabel = defaultValue;
+
+  if (!defaultValue?.label && defaultValue?.text) {
+    defaultValueWithLabel.label = defaultValue.text;
+  }
+
+  const mappedOptions = options?.map((opt: any) => {
+    if (!opt.label && opt.text) {
+      return {
+        ...opt,
+        label: opt.text,
+      };
+    }
+    return opt;
+  });
+
+  const properties: Props = {
+    chakraStyles,
+    components,
+    defaultValue,
+    isDisabled: isDisabled || isLoading,
+    isLoading,
+    isSearchable: false,
+    onChange,
+    options: mappedOptions,
+    placeholder,
+    selectedOptionStyle: 'check',
+  };
+
+  return <Select {...properties} />;
 };
 
 Dropdown.defaultProps = {

package/src/old.ts

@@ -61,6 +61,8 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as DotProps } from './Old/Dot/Dot';
 export { default as Dot } from './Old/Dot/Dot';
 
+export type { Props as OldDropdownProps } from './Old/Dropdown/Dropdown';
+
 export type { Props as DropdownButtonProps } from './Old/Dropdown/DropdownButton';
 export { default as DropdownButton } from './Old/Dropdown/DropdownButton';