chore: testing

lib/components/ActionSheet/footer/index.tsx

@@ -14,6 +14,7 @@ const Footer = ({
     shouldCloseOnSecondaryButtonClick = true,
     isPrimaryButtonDisabled,
     isSecondaryButtonDisabled,
+    primaryButtonColor = "black-white",
     ...rest
 }: FooterProps) => {
     const { handleClose } = useContext(ActionSheetContext);
@@ -41,7 +42,7 @@ const Footer = ({
             {primaryAction && (
                 <Button
                     onClick={primaryActionHandler}
-                    color="black-white"
+                    color={primaryButtonColor}
                     size="lg"
                     label={primaryAction.content}
                     fullWidth

lib/components/ActionSheet/handle-bar/handle-bar.scss

@@ -1,13 +1,13 @@
 @import "@deriv-com/quill-tokens/dist/breakpoints.scss";
 
 .quill-action-sheet--handle-bar {
-    position: sticky;
     z-index: 1;
     display: flex;
     touch-action: none;
     align-items: center;
     justify-content: center;
     padding-block: var(--component-actionSheet-spacing-padding-sm);
+    cursor: pointer;
 
     &::before {
         content: "";
@@ -29,4 +29,13 @@
         border-radius: var(--component-handle-border-radius);
         background-color: var(--component-handle-bg);
     }
+
+    &--absolute {
+        position: absolute;
+        width: 100%;
+    }
+
+    &--sticky {
+        position: sticky;
+    }
 }

lib/components/ActionSheet/handle-bar/index.tsx

@@ -1,14 +1,20 @@
 import { ComponentProps } from "react";
 import "./handle-bar.scss";
+import clsx from "clsx";
 
-type BarProps = ComponentProps<"div">;
+export interface BarProps extends ComponentProps<"div"> {
+    position?: "sticky" | "absolute";
+}
 
-const HandleBar = (props: BarProps) => {
+const HandleBar = ({ position = "sticky", ...rest }: BarProps) => {
     return (
         <div
-            className="quill-action-sheet--handle-bar"
+            className={clsx(
+                "quill-action-sheet--handle-bar",
+                `quill-action-sheet--handle-bar--${position}`,
+            )}
             data-testid="dt-actionsheet-handle-bar"
-            {...props}
+            {...rest}
         >
             <span className="quill-action-sheet--handle-bar--line" />
         </div>

lib/components/ActionSheet/header/header.scss

@@ -4,7 +4,6 @@
     &--header {
         display: flex;
         flex-direction: column;
-        text-align: center;
 
         &__expandable {
             &--true {
@@ -32,6 +31,10 @@
                 var(--component-actionSheet-spacing-padding-lg);
         }
 
+        &-text {
+            flex-grow: 1;
+        }
+
         &--icon {
             display: flex;
             width: var(--component-button-height-lg);

lib/components/ActionSheet/header/index.tsx

@@ -5,12 +5,14 @@ import { Heading, Text } from "@components/Typography";
 import { IconButton } from "@components/Button";
 import "./header.scss";
 
-interface HeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+export interface HeaderProps
+    extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
     title?: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;
     iconPosition?: "right" | "left";
     closeIcon?: ReactNode;
+    centered?: boolean;
 }
 
 const Header = ({
@@ -20,6 +22,7 @@ const Header = ({
     icon: Icon,
     iconPosition = "right",
     closeIcon: CloseIcon,
+    centered = true,
     ...rest
 }: HeaderProps) => {
     const { expandable } = useContext(ActionSheetContext);
@@ -46,7 +49,14 @@ const Header = ({
                         {Icon}
                     </div>
                 )}
-                {title && <Heading.H5>{title}</Heading.H5>}
+                {title && (
+                    <Heading.H5
+                        centered={centered}
+                        className="quill-action-sheet--title-text"
+                    >
+                        {title}
+                    </Heading.H5>
+                )}
                 {CloseIcon && (
                     <IconButton
                         color="black-white"
@@ -62,7 +72,10 @@ const Header = ({
                 )}
             </div>
             {description && (
-                <Text className="quill-action-sheet--description">
+                <Text
+                    centered={centered}
+                    className="quill-action-sheet--description"
+                >
                     {description}
                 </Text>
             )}

lib/components/ActionSheet/portal/index.tsx

@@ -1,17 +1,21 @@
 import React, { ComponentProps, forwardRef, useContext } from "react";
 import { createPortal } from "react-dom";
 import { CSSTransition } from "react-transition-group";
-import HandleBar from "../handle-bar";
+import HandleBar, { BarProps } from "../handle-bar";
 import "./portal.scss";
 import { useSwipeBlock } from "@hooks/useSwipeBlock";
 import { ActionSheetContext } from "../root";
 import clsx from "clsx";
 
-interface PortalProps extends ComponentProps<"div"> {
+export interface PortalProps extends ComponentProps<"div"> {
     shouldCloseOnDrag?: boolean;
     shouldDetectSwipingOnContainer?: boolean;
     showHandlebar?: boolean;
+    handleBarPosition?: BarProps["position"];
+    handleBarIndex?: number;
     fullHeightOnOpen?: boolean;
+    disableCloseOnOverlay?: boolean;
+    portalId?: string;
 }
 
 const Portal = forwardRef<HTMLDivElement, PortalProps>(
@@ -22,11 +26,18 @@ const Portal = forwardRef<HTMLDivElement, PortalProps>(
             shouldDetectSwipingOnContainer = false,
             showHandlebar = true,
             fullHeightOnOpen = false,
+            disableCloseOnOverlay = false,
+            portalId,
+            handleBarIndex,
+            handleBarPosition,
             ...restProps
         },
         ref,
     ) => {
-        const { show, handleClose, className, position, type, expandable } =
+        const actionSheetRoot =
+            (portalId && document.getElementById(portalId)) || document.body;
+
+        const { show, handleClose, className, position, type } =
             useContext(ActionSheetContext);
         const { height, containerRef, bindHandle, isScrolled, isLg } =
             useSwipeBlock({
@@ -35,6 +46,10 @@ const Portal = forwardRef<HTMLDivElement, PortalProps>(
                 shouldCloseOnDrag,
                 fullHeightOnOpen,
             });
+        const handleModalClose = () => {
+            if (disableCloseOnOverlay) return;
+            handleClose?.();
+        };
 
         return (
             <>
@@ -43,7 +58,7 @@ const Portal = forwardRef<HTMLDivElement, PortalProps>(
                         {show && type === "modal" && (
                             <div
                                 data-testid="dt-actionsheet-overlay"
-                                onClick={handleClose}
+                                onClick={handleModalClose}
                                 className="quill-action-sheet--portal__variant--modal"
                             />
                         )}
@@ -74,25 +89,23 @@ const Portal = forwardRef<HTMLDivElement, PortalProps>(
                                     ref={containerRef}
                                     style={{ height }}
                                     {...(shouldDetectSwipingOnContainer &&
-                                    !isScrolled &&
-                                    !isLg &&
-                                    expandable
-                                        ? bindHandle()
-                                        : {})}
+                                        !isScrolled &&
+                                        !isLg &&
+                                        bindHandle())}
                                 >
                                     {showHandlebar && (
                                         <HandleBar
-                                            {...(expandable || shouldCloseOnDrag
-                                                ? bindHandle()
-                                                : {})}
+                                            {...bindHandle()}
+                                            position={handleBarPosition}
+                                            style={{ zIndex: handleBarIndex }}
                                         />
                                     )}
                                     {children}
                                 </div>
                             </div>
                         </CSSTransition>
                     </React.Fragment>,
-                    document.body,
+                    actionSheetRoot,
                 )}
             </>
         );

lib/components/ActionSheet/types.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 import { ExcludeAllNull, TLeftOrRight } from "../../types";
+import { TButtonColor } from "@components/Button";
 
 interface OpenType {
     isOpen?: boolean | undefined;
@@ -40,6 +41,7 @@ export interface FooterProps
     shouldCloseOnSecondaryButtonClick?: boolean;
     isPrimaryButtonDisabled?: boolean;
     isSecondaryButtonDisabled?: boolean;
+    primaryButtonColor?: TButtonColor;
 }
 
 export type FooterAlignment = FooterProps["alignment"];

lib/components/Atom/dropdown/item-container/index.tsx

@@ -7,7 +7,7 @@ import { createPortal } from "react-dom";
 export interface ItemContainerProps extends Omit<ComponentProps<"div">, "ref"> {
     size?: TMediumSizes;
     height?: TRegularSizes;
-    portalContainer?: Element | DocumentFragment;
+    portalContainer?: Element | DocumentFragment | null;
 }
 
 export const ItemContainer = forwardRef<HTMLDivElement, ItemContainerProps>(

lib/components/Input/base/index.tsx

@@ -129,6 +129,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             allowDecimals = false,
             decimals,
             allowSign = true,
+            autoComplete,
             regex,
             customType,
             noStatusIcon,
@@ -162,6 +163,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         const commonProps = {
             readOnly,
             required,
+            autoComplete,
             value: inputValue,
             placeholder,
             className: clsx(
@@ -393,7 +395,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                             </span>
                             {show_counter && maxLength && (
                                 <span className="message__container__text">
-                                    {inputValue.toString().length}/{maxLength}
+                                    {type === "tel"
+                                        ? inputValue
+                                              .toString()
+                                              .replace(/\s+/g, "").length
+                                        : inputValue.toString().length}
+                                    /{maxLength}
                                 </span>
                             )}
                         </div>

lib/components/Input/custom-dropdown/index.tsx

@@ -30,6 +30,8 @@ export interface TCustomDropdown
     headComponent?: React.ReactNode;
     noActionSheet?: boolean;
     contentAlign?: "left" | "right";
+    noAutoClose?: boolean;
+    withProvider?: boolean;
 }
 
 const CustomDropdownContent = forwardRef<HTMLDivElement, TCustomDropdown>(
@@ -49,6 +51,8 @@ const CustomDropdownContent = forwardRef<HTMLDivElement, TCustomDropdown>(
             headComponent,
             noActionSheet = false,
             contentAlign = "left",
+            noAutoClose = false,
+            disabled,
             ...rest
         },
         ref,
@@ -67,7 +71,10 @@ const CustomDropdownContent = forwardRef<HTMLDivElement, TCustomDropdown>(
         const contentRef = useRef<HTMLDivElement>(null);
 
         const { isOpen, open, close, selectedValue, setSelectedValue } =
-            useDropdown([containerRef, actionSheetRef, contentRef]);
+            useDropdown(
+                [containerRef, actionSheetRef, contentRef],
+                noAutoClose,
+            );
 
         const { isMobile } = useBreakpoints();
 
@@ -76,11 +83,13 @@ const CustomDropdownContent = forwardRef<HTMLDivElement, TCustomDropdown>(
         }, [value]);
 
         const handleInputClick = (e: React.MouseEvent<HTMLDivElement>) => {
-            const input = inputRef.current;
-            input && input?.focus();
-            if (isAutocomplete && isOpen) return;
-            onClickDropdown?.(e);
-            isOpen ? close() : open();
+            if (!disabled) {
+                const input = inputRef.current;
+                input && input?.focus();
+                if (isAutocomplete && isOpen) return;
+                onClickDropdown?.(e);
+                isOpen ? close() : open();
+            }
         };
 
         const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -160,13 +169,17 @@ const CustomDropdownContent = forwardRef<HTMLDivElement, TCustomDropdown>(
 );
 
 export const CustomDropdown = forwardRef<HTMLDivElement, TCustomDropdown>(
-    ({ children, onOpen, onClose, ...rest }, ref) => {
-        return (
+    ({ children, withProvider = true, onOpen, onClose, ...rest }, ref) => {
+        return withProvider ? (
             <DropdownProvider onOpen={onOpen} onClose={onClose}>
                 <CustomDropdownContent ref={ref} {...rest}>
                     {children}
                 </CustomDropdownContent>
             </DropdownProvider>
+        ) : (
+            <CustomDropdownContent ref={ref} {...rest}>
+                {children}
+            </CustomDropdownContent>
         );
     },
 );

lib/components/Input/index.ts

@@ -8,3 +8,4 @@ export * from "./text-field-addon";
 export * from "./date-picker";
 export * from "./custom-dropdown";
 export * from "./wheel-picker";
+export * from "./input-phone-number";