@bitrise/bitkit 12.30.1 → 12.31.1

package/package.json

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

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -58,6 +58,10 @@ const DropdownTheme = {
           backgroundColor: 'purple.93',
         },
       },
+      _disabled: {
+        color: 'neutral.70',
+        pointerEvents: 'none',
+      },
     },
     options: {
       paddingY: '12',

package/src/Components/Dropdown/DropdownOption.tsx

@@ -10,8 +10,15 @@ export type DropdownOptionProps<T> = {
   children?: ReactNode;
   'aria-label'?: string;
   onClick?: MouseEventHandler<HTMLElement>;
+  isDisabled?: boolean;
 };
-const DropdownOption = <T = string,>({ value = null, children, onClick, ...rest }: DropdownOptionProps<T>) => {
+const DropdownOption = <T = string,>({
+  value = null,
+  children,
+  onClick,
+  isDisabled,
+  ...rest
+}: DropdownOptionProps<T>) => {
   const { item } = useDropdownStyles();
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
@@ -24,6 +31,7 @@ const DropdownOption = <T = string,>({ value = null, children, onClick, ...rest
           ctx.listRef.current[index!] = node;
         }
       }}
+      aria-disabled={isDisabled || undefined}
       {...rest}
       className={cx(
         value === ctx.formValue && 'bitkit-select__option-active',

package/src/Components/Provider/Provider.tsx

@@ -1,18 +1,30 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ChakraProvider } from '@chakra-ui/react';
 import theme from '../../theme';
 
 type ProviderProps = {
   children: ReactNode;
-  toastOffset?: string;
+  toastOptions?: {
+    offsetTop?: string;
+    offsetRight?: string;
+    portalRef: RefObject<HTMLElement>;
+  };
 };
 
-const Provider = ({ children, toastOffset }: ProviderProps) => {
+const Provider = ({ children, toastOptions }: ProviderProps) => {
   return (
     <ChakraProvider
       theme={theme}
       toastOptions={{
-        defaultOptions: toastOffset ? { containerStyle: { transform: `translateY(${toastOffset})` } } : undefined,
+        defaultOptions: {
+          containerStyle: {
+            transform: toastOptions?.offsetTop && `translateY(${toastOptions.offsetTop})`,
+            marginRight: toastOptions?.offsetRight,
+          },
+        },
+        portalProps: {
+          containerRef: toastOptions?.portalRef,
+        },
       }}
     >
       {children}