@lifesg/react-design-system 1.0.0-alpha.7 → 1.0.0-alpha.9

package/modal/modal.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ModalProps } from "./types";
-export declare const Modal: ({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, ...otherProps }: ModalProps) => JSX.Element;
+export declare const Modal: ({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, ...otherProps }: ModalProps) => JSX.Element;

package/modal/modal.styles.d.ts

@@ -3,6 +3,7 @@ interface Props {
     show: boolean;
     animationFrom?: ModalAnimationDirection;
     verticalHeight?: number;
+    offsetTop?: number;
 }
 export declare const Container: import("styled-components").StyledComponent<"div", any, Props, never>;
 export {};

package/modal/types.d.ts

@@ -10,6 +10,8 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     rootComponentId?: string | undefined;
     zIndex?: number | undefined;
     onOverlayClick?: () => void | undefined;
+    /** Dismiss keyboard to keep modal in fullscreen */
+    dismissKeyboardOnShow?: boolean;
 }
 export interface ModalBoxProps extends React.HTMLAttributes<HTMLDivElement> {
     children: JSX.Element | JSX.Element[];

package/navbar/index.js

@@ -165,7 +165,7 @@ import e,{css as t,keyframes as n}from"styled-components";import{jsxs as r,jsx a
             `,e.$disableTransition&&(n+=t`
                 transition: none;
             `),n}}
-`,wr=({show:e=!1,rootId:t,onOverlayClick:n,children:r,backgroundOpacity:i,backgroundBlur:l=!0,disableTransition:u=!1,enableOverlayClick:f=!1,zIndex:p,id:h})=>{const[g,m]=c(null),[L,v]=c(),y=C(),$=C(null),b=r&&a.cloneElement(r,{ref:$}),H=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root";s((()=>{if(e){const e=M();if(w(e),!e){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}else if(!y.current){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}),[e]),s((()=>{m(V());const e=M();return w(e),e||S(),()=>{Z("remove")}}),[]);const w=e=>{y.current=e,v(e)},V=()=>document&&t?document.getElementById(t):document?document.body:null,M=()=>document.body.classList.contains(Mr),S=()=>{if(!document.getElementById(Vr)){const e=document.createElement("style");e.id=Vr;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Mr} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${Mr}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},Z=e=>{const t=document.body.classList.contains(Mr);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Mr):document.body.classList.add(Mr)},x=e=>{e.preventDefault();const t=$.current?.firstChild;t&&t.contains(e.target)||n&&f&&n()};return g?d.createPortal(o(br,{id:H,"data-testid":H,$show:e,zIndex:p,$stacked:L,children:r&&o(Hr,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:i||(L?.5:.8),$backgroundBlur:l,$disableTransition:u,$enableOverlayClick:f,onClick:x,children:b})}),g):null},Vr="lifesg-ds-overlay-stylesheet",Mr="lifesg-ds-overlay-open",Sr=e.a`
+`,wr=({show:e=!1,rootId:t,onOverlayClick:n,children:r,backgroundOpacity:i,backgroundBlur:l=!0,disableTransition:u=!1,enableOverlayClick:f=!1,zIndex:p,id:h})=>{const[g,m]=c(null),[L,v]=c(),y=C(),$=C(null),b=r&&a.cloneElement(r,{ref:$}),H=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root";s((()=>{if(e){const e=M();if(w(e),!e){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}else if(!y.current){const e=setTimeout((()=>{Z("remove")}),200);return()=>clearTimeout(e)}}),[e]),s((()=>{m(V());const e=M();return w(e),e||S(),()=>{Z("remove")}}),[]);const w=e=>{y.current=e,v(e)},V=()=>document&&t?document.getElementById(t):document?document.body:null,M=()=>document.body.classList.contains(Mr),S=()=>{if(!document.getElementById(Vr)){const e=document.createElement("style");e.id=Vr;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Mr} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${Mr}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},Z=e=>{const t=document.body.classList.contains(Mr);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Mr):document.body.classList.add(Mr)},x=e=>{e.preventDefault();const t=$.current?.firstChild;t&&t.contains(e.target)||n&&f&&n()};return g?d.createPortal(o(br,{id:H,"data-testid":H,$show:e,zIndex:p,$stacked:L,children:r&&o(Hr,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:i||(L?.5:.8),$backgroundBlur:l,$disableTransition:u,$enableOverlayClick:f,onClick:x,children:b})}),g):null},Vr="lifesg-ds-overlay-stylesheet",Mr="lifesg-ds-overlay-open",Sr=e.a`
     display: flex;
     justify-content: center;
     margin-right: 2rem;