SOV-631: component fixes for onboarding flow (#70)

* feat: option to disable focus trap on dialog

* fix: input prop and z-index on tooltip

Author: creed-victor

.changeset/cuddly-badgers-look.md

@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+SOV-631: fix input size prop and tooltip z-index

.changeset/rich-bobcats-sing.md

@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+SOV-631: add posibility to disable focus trap from dialog

packages/ui/package.json

@@ -60,8 +60,8 @@
     "jest-canvas-mock": "2.4.0"
   },
   "peerDependencies": {
-    "react": ">=18.2",
-    "react-dom": ">=18.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "files": [
     "dist/index.js",

packages/ui/src/1_atoms/Input/Input.tsx

@@ -7,7 +7,7 @@ import { InputBase, InputBaseProps } from '../InputBase/InputBase';
 import styles from './Input.module.css';
 import { InputSize } from './Input.types';
 
-export type InputProps = Omit<InputBaseProps, 'ref'> & {
+export type InputProps = Omit<InputBaseProps, 'ref' | 'size'> & {
   classNameInput?: string;
   invalid?: boolean;
   dataLayoutId?: string;

packages/ui/src/1_atoms/InputBase/InputBase.tsx

@@ -12,7 +12,10 @@ import debounceCallback from 'lodash.debounce';
 
 import { noop, applyDataAttr } from '../../utils';
 
-export type InputBaseProps = Omit<HTMLProps<HTMLInputElement>, 'ref'> & {
+export type InputBaseProps = Omit<
+  HTMLProps<HTMLInputElement>,
+  'ref' | 'size'
+> & {
   debounce?: number;
   dataLayoutId?: string;
   onChangeText?: (value: string) => void;

packages/ui/src/2_molecules/Dialog/Dialog.tsx

@@ -22,6 +22,7 @@ type DialogProps = {
   onClose?: () => void;
   closeOnEscape?: boolean;
   initialFocusRef?: React.RefObject<HTMLElement>;
+  disableFocusTrap?: boolean;
 };
 
 export const Dialog: IDialogFunctionComponent<DialogProps> = ({
@@ -34,6 +35,7 @@ export const Dialog: IDialogFunctionComponent<DialogProps> = ({
   onClose,
   closeOnEscape = true,
   initialFocusRef,
+  disableFocusTrap,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -90,7 +92,7 @@ export const Dialog: IDialogFunctionComponent<DialogProps> = ({
       <div className={styles.wrapper} {...applyDataAttr(dataLayoutId)}>
         <div className={styles.container}>
           <FocusTrap
-            active={isOpen}
+            active={isOpen && !disableFocusTrap}
             focusTrapOptions={{
               initialFocus: initialFocusRef?.current || undefined,
               fallbackFocus: () => ref.current!,

packages/ui/src/2_molecules/Tooltip/Tooltip.module.css

@@ -1,5 +1,6 @@
 .tooltip {
   @apply bg-gray-10 rounded p-3 text-gray-90 absolute inline-block min-w-5 max-w-72 leading-5 opacity-0;
+  z-index: 999999;
 
   &.bottom,
   &.bottom-start,