@cleartrip/ct-design-modal 4.0.0-TEST.3 → 5.0.0

package/package.json

@@ -1,39 +1,58 @@
 {
   "name": "@cleartrip/ct-design-modal",
-  "version": "4.0.0-TEST.3",
+  "version": "5.0.0",
   "description": "Modal Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-modal.cjs.js",
+  "main": "./dist/ct-design-modal.cjs.js",
+  "react-native": "src/index.native.ts",
   "jsnext:main": "dist/ct-design-modal.esm.js",
   "module": "dist/ct-design-modal.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-modal.esm.js",
+      "default": "./dist/ct-design-modal.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-modal.esm.js": "./dist/ct-design-modal.browser.esm.js",
     "./dist/ct-design-modal.cjs.js": "./dist/ct-design-modal.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-types": "3.20.0",
-    "@cleartrip/ct-design-container": "3.20.0",
-    "@cleartrip/ct-design-use-merge-refs": "3.20.0",
-    "@cleartrip/ct-design-icons": "39.0.0-TEST.3",
-    "@cleartrip/ct-design-typography": "3.21.0",
-    "@cleartrip/ct-design-transition": "4.0.0-TEST.3",
-    "@cleartrip/ct-design-theme": "3.20.0",
-    "@cleartrip/ct-design-portal": "3.20.0",
-    "@cleartrip/ct-design-focus-lock": "3.20.0",
-    "@cleartrip/ct-design-box": "3.20.0",
-    "@cleartrip/ct-design-button": "3.20.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@cleartrip/ct-design-container": "5.0.0",
+    "@cleartrip/ct-design-types": "5.0.0",
+    "@cleartrip/ct-design-transition": "5.0.0",
+    "@cleartrip/ct-design-focus-lock": "5.0.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.0.0",
+    "@cleartrip/ct-design-icons": "5.0.0",
+    "@cleartrip/ct-design-typography": "5.0.0",
+    "@cleartrip/ct-design-box": "5.0.0",
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-button": "5.0.0",
+    "@cleartrip/ct-design-style-manager": "5.0.0",
+    "@cleartrip/ct-design-overlay": "5.0.0",
+    "@cleartrip/ct-design-portal": "5.0.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-icons": "39.0.0-TEST.3"
+    "@emotion/babel-plugin": "^11.12.0",
+    "@cleartrip/ct-design-icons": "5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -44,6 +63,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Backdrop/Backdrop.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+
+import { css } from '@emotion/css';
+import { Transition } from '@cleartrip/ct-design-transition';
+import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { ModalVariant } from '../constants';
+import { getBackdropDynamicStyles, staticBackdropStyles } from './style';
+import { BackdropProps } from './type';
+
+const webStyle = css({
+  position: 'fixed',
+});
+
+const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(
+  (
+    { children, open, transitionDuration, styleConfig, blur, variant = ModalVariant.NEUTRAL, ...rest },
+    forwardedRef,
+  ) => {
+    const dynamicStyles = useStyles(() => ({ root: getBackdropDynamicStyles({ blur, variant }) }), [blur, variant]);
+
+    const className = useWebMergeStyles(
+      [staticBackdropStyles.root, dynamicStyles.root, webStyle, ...(styleConfig?.root ?? [])],
+      [dynamicStyles.root, styleConfig?.root],
+    );
+
+    return (
+      <Transition in={open} timeout={transitionDuration} type='fade'>
+        <div ref={forwardedRef} className={className} {...rest}>
+          {children}
+        </div>
+      </Transition>
+    );
+  },
+);
+
+Backdrop.displayName = 'Backdrop';
+
+export default Backdrop;

package/src/Backdrop/index.ts

@@ -0,0 +1 @@
+export { default } from './Backdrop';

package/src/Backdrop/style.ts

@@ -0,0 +1,18 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { ModalVariant } from '../constants';
+
+export const staticBackdropStyles = makeStyles(() => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: -1,
+    inset: 0,
+  },
+}));
+
+export const getBackdropDynamicStyles = ({ blur, variant }: { blur?: boolean; variant?: `${ModalVariant}` }) => ({
+  backgroundColor: blur ? 'rgba(26, 26, 26, 0.6)' : '',
+  // @ts-ignore
+  backdropFilter: variant !== ModalVariant.DARK && blur ? 'blur(1px)' : 'none',
+});

package/src/Backdrop/type.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+import type { Styles } from '@cleartrip/ct-design-types';
+import type { TransitionProps } from '@cleartrip/ct-design-transition';
+import { ModalVariant } from '../constants';
+
+export interface BackdropStyleConfigProps {
+  root?: Styles[];
+}
+
+export type BackdropProps = HTMLAttributes<HTMLDivElement> & {
+  open?: boolean;
+  transitionDuration?: TransitionProps['timeout'];
+  blur?: boolean;
+  /** Dark variant needs a different backdrop treatment (no blur filter). */
+  variant?: `${ModalVariant}`;
+  styleConfig?: BackdropStyleConfigProps;
+};

package/src/Handler.ts

@@ -0,0 +1,78 @@
+type Modal = { ref: HTMLElement | null; prevStyle?: CSSStyleDeclaration };
+
+type Parent = {
+  modals: Modal[];
+  parentNode: Modal;
+};
+
+export default class Handler {
+  // track all the modals mounted
+  private parent: Parent[];
+
+  constructor() {
+    this.parent = [];
+  }
+
+  static handleStyle(parentNode: Modal) {
+    if (parentNode.ref) {
+      parentNode.prevStyle = { ...parentNode.ref.style };
+      // Apply styles here
+      parentNode.ref.style.overflow = 'hidden';
+    }
+  }
+
+  static restoreStyle(parentNode: Modal) {
+    if (parentNode.ref && parentNode.prevStyle) {
+      // remove all styles here
+
+      /**
+       * Case:- In safari browsers undefined is not setting the css for overflow styly so added the "" as a fallback.
+       */
+      parentNode.ref.style.overflow = parentNode.prevStyle.overflow || '';
+    }
+  }
+
+  mount(modal: Modal, parentNode: Modal = { ref: null }) {
+    // add modal with parent
+    if (parentNode.ref) {
+      const parentIndex = this.parent.findIndex((node) => node.parentNode === parentNode);
+      if (parentIndex !== -1) {
+        this.parent[parentIndex].modals.push(modal);
+      } else {
+        this.parent.push({
+          parentNode,
+          modals: [modal],
+        });
+      }
+      Handler.handleStyle(parentNode);
+    } else {
+      // get top modal, if not get the body;
+      const parent = this.getTopModal();
+      parent.modals.push(modal);
+      Handler.handleStyle(parent.parentNode);
+      if (parent.parentNode.ref !== document.body) {
+        this.parent.push({
+          parentNode: modal,
+          modals: [],
+        });
+      } else {
+        this.parent.push(parent);
+      }
+    }
+  }
+
+  getTopModal(): Parent {
+    if (this.parent.length) {
+      return this.parent[this.parent.length - 1];
+    } else {
+      return { parentNode: { ref: document.body, prevStyle: document.body.style }, modals: [] };
+    }
+  }
+
+  remove(modal: Modal) {
+    const parentNode = this.parent.find((node) => node.modals.find((_modal) => _modal.ref === modal.ref));
+    if (parentNode) {
+      Handler.restoreStyle(parentNode.parentNode);
+    }
+  }
+}

package/src/Modal.native.tsx

@@ -0,0 +1,210 @@
+import { cloneElement, forwardRef, isValidElement, memo, ReactElement, useCallback, useEffect, useState } from 'react';
+
+import { Keyboard } from 'react-native';
+import Animated, { Easing, SharedValue, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { Overlay } from '@cleartrip/ct-design-overlay';
+import { Portal } from '@cleartrip/ct-design-portal';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Cross, ModalBack } from '@cleartrip/ct-design-icons';
+
+import { ActionButtonVariantsType, IChildProps, IModalProps, ModalVariantTypes } from './type';
+import { ActionButtonAlignment, ActionButtonVariant, ModalPlacement, ModalSize, ModalVariant } from './constants';
+import { getActionButtonAlignment, getModalChildContainerStyle } from './style.native';
+import { MODAL_ANIMATION_DURATION } from './modalUtils';
+
+const staticStyles = makeStyles((theme) => ({
+  modal: {
+    position: 'absolute',
+    height: '100%',
+    margin: 'auto',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContentContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  modalContent: {
+    position: 'relative',
+    overflow: 'scroll',
+    maxWidth: '90%',
+    maxHeight: '90%',
+    width: '90%',
+    margin: 'auto',
+    borderRadius: theme?.border?.radius?.[2],
+    justifyContent: 'center',
+  },
+  overlayStyles: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    top: 0,
+    zIndex: -1,
+    bottom: 0,
+    flex: 1,
+  },
+  modalBody: {
+    backgroundColor: theme?.color?.background?.neutral,
+    borderRadius: theme?.border?.radius?.[12],
+  },
+  actionButtonWrapper: {
+    top: 0,
+    height: 45,
+  },
+  actionButton: {
+    marginLeft: 'auto',
+    alignItems: 'center',
+    backgroundColor: theme?.color?.background?.neutral,
+    borderRadius: theme?.border?.radius?.[16],
+    justifyContent: 'center',
+    height: theme?.size?.[8],
+    width: theme?.size?.[8],
+  },
+}));
+
+const getActionIcon = ({
+  actionButtonType,
+  variant,
+}: {
+  actionButtonType: ActionButtonVariantsType;
+  variant: ModalVariantTypes;
+}): ReactElement => {
+  if (actionButtonType === ActionButtonVariant.BACK) {
+    return <ModalBack />;
+  }
+
+  return <Cross height={24} width={24} crossColor={variant === ModalVariant.DARK ? 'black' : '#1A1A1A'} />;
+};
+
+const Modal = forwardRef<ContainerRef, IModalProps>(
+  (
+    {
+      actionButtonAlignment = ActionButtonAlignment.RIGHT,
+      actionButtonType = ActionButtonVariant.CLOSE,
+      allowBackdropClose = true,
+      animationDuration = MODAL_ANIMATION_DURATION,
+      backDropComponent,
+      blur = true,
+      children,
+      onClose,
+      open = false,
+      placement = ModalPlacement.CENTER,
+      size = ModalSize.MEDIUM,
+      styleConfig,
+      variant = ModalVariant.NEUTRAL,
+    },
+    ref,
+  ) => {
+    const [isModalVisible, setIsModalVisible] = useState<boolean>(open);
+    const CloseIcon: ReactElement = getActionIcon({ actionButtonType, variant });
+    const opacity: SharedValue<number> = useSharedValue(0);
+
+    const {
+      root: customRootStyles = [],
+      backdropStyles: customOverlayStyles = [],
+      modalContentStyles: customModalContentStyles = [],
+    } = styleConfig || {};
+
+    const modalContentAnimatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+    }));
+
+    const actionButtonAlignmentStyles = useStyles(
+      () => ({
+        root: getActionButtonAlignment({ actionButtonAlignment }),
+      }),
+      [actionButtonAlignment],
+    );
+
+    const dynamicModalContainerStyle = useStyles(
+      () => ({
+        root: { justifyContent: placement === 'center' ? 'center' : 'flex-end', zIndex: 1000 },
+      }),
+      [placement],
+    );
+
+    const dynamicModalContentStyles = useStyles(
+      (theme) => ({
+        childContainer: getModalChildContainerStyle({ theme, size, blur }),
+      }),
+      [size, blur],
+    );
+
+    const handleBackdropClose = (): void => {
+      if (allowBackdropClose) {
+        onClose?.();
+        setIsModalVisible(false);
+      }
+    };
+
+    const getModalAnimation = useCallback((): void => {
+      opacity.value = withTiming(opacity.value === 0 ? 1 : 0, {
+        duration: animationDuration,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+      });
+    }, [animationDuration, opacity]);
+
+    useEffect(() => {
+      setIsModalVisible(open);
+      getModalAnimation();
+      if (Keyboard.isVisible()) Keyboard.dismiss();
+      return () => {
+        opacity.value = 0;
+      };
+    }, [open, animationDuration, opacity, getModalAnimation]);
+
+    if (!isModalVisible) {
+      return null;
+    }
+
+    return (
+      <Portal id='global_modal'>
+        <Container
+          styleConfig={{
+            root: [staticStyles.modal, dynamicModalContainerStyle.root, ...customRootStyles],
+          }}
+          ref={ref}
+        >
+          <Animated.View style={[modalContentAnimatedStyle, staticStyles.overlayStyles]}>
+            {backDropComponent || (
+              <Container styleConfig={{ root: [staticStyles.modalContentContainer] }} onClick={handleBackdropClose}>
+                <Overlay blur={blur} styleConfig={{ root: [...customOverlayStyles] }} />
+              </Container>
+            )}
+          </Animated.View>
+
+          <Container
+            styleConfig={{
+              root: [staticStyles.modalContent, dynamicModalContentStyles?.childContainer, ...customModalContentStyles],
+            }}
+          >
+            {actionButtonType !== ActionButtonVariant.NONE ? (
+              <Container styleConfig={{ root: [staticStyles.actionButtonWrapper] }}>
+                <Container
+                  styleConfig={{
+                    root: [staticStyles.actionButton, actionButtonAlignmentStyles.root],
+                  }}
+                  onClick={onClose}
+                >
+                  {CloseIcon}
+                </Container>
+              </Container>
+            ) : null}
+
+            <Container styleConfig={{ root: [staticStyles.modalBody] }}>
+              {isValidElement<IChildProps>(children) && cloneElement(children, { onClose, ...(children.props || {}) })}
+            </Container>
+          </Container>
+        </Container>
+      </Portal>
+    );
+  },
+);
+
+Modal.displayName = 'Modal';
+export default memo(Modal);

package/src/Modal.tsx

@@ -0,0 +1,234 @@
+import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { CSSProperties } from 'react';
+import { getModalSizeStyles } from './style';
+import { IModalProps } from './type';
+import { ModalPlacement, ModalSize, ModalVariant } from './constants';
+import { Portal } from '@cleartrip/ct-design-portal';
+import { FocusLock } from '@cleartrip/ct-design-focus-lock';
+import { Transition } from '@cleartrip/ct-design-transition';
+import Backdrop from './Backdrop';
+import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import ModalContext from './ModalContext';
+import Handler from './Handler';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
+
+const staticModalStyles = makeStyles(() => ({
+  modalContainer: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    margin: 'auto',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+  },
+  outerContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+}));
+
+const handler = new Handler();
+const DEFAULT_ANIMATION_TIME = 350;
+
+const Modal = forwardRef<ContainerRef, IModalProps>(
+  (
+    {
+      children,
+      insidePortal = true,
+      open = false,
+      onClose,
+      onKeyDown,
+      hideCrossIcon,
+      footerAlignment,
+      size = 'MEDIUM',
+      allowBackdropClose = true,
+      blur = true,
+      backDropComponent,
+      animationDuration = DEFAULT_ANIMATION_TIME,
+      placement = 'center',
+      bottomMargin,
+      variant,
+      styleConfig = {},
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const { backdropStyles = [], modalContentStyles = [], root: rootStyles = [] } = styleConfig;
+    const overflowY: CSSProperties['overflowY'] = 'auto';
+    const isFullScreen = size === ModalSize.FULL_SCREEN;
+
+    const dynamicStyles = useStyles(
+      (theme) => ({
+        modalContainer: {
+          position: 'relative',
+          zIndex: theme.zIndex.modal,
+          overflowY,
+          display: 'flex',
+          flexDirection: 'column',
+          margin: 'auto',
+          height: '100%',
+          width: '100%',
+          justifyContent: placement === ModalPlacement.BOTTOM ? 'flex-end' : ModalPlacement.CENTER,
+          alignItems: ModalPlacement.CENTER,
+          paddingBottom: placement === ModalPlacement.BOTTOM ? bottomMargin || 188 : 0,
+        },
+        outerContainer: {
+          zIndex: theme.zIndex.modal,
+          /**
+           * Web only properties
+           */
+          ...(isFullScreen ? { height: '100vh' as unknown as number, width: '100vw' as unknown as number } : {}),
+        },
+        childContainer: {
+          boxSizing: 'content-box',
+          borderRadius: size === ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
+          borderBottomLeftRadius: size === ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
+          borderBottomRightRadius: size === ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
+          backgroundColor:
+            variant === ModalVariant.DARK ? theme.color.background.defaultDarkest : theme.color.background.neutral,
+          overflowY,
+          maxHeight:
+            size === ModalSize.FULL_SCREEN
+              ? ('100vh' as unknown as number)
+              : (`calc(100vh - 64px)` as unknown as number),
+          boxShadow: blur
+            ? `${theme.elevation.modalBlurLight}, ${theme.elevation.modalBlurMedium}, ${theme.elevation.modalBlurHeavy}`
+            : 'none',
+        },
+      }),
+      [size, overflowY, placement, bottomMargin, isFullScreen, blur, variant],
+    );
+
+    const webDynamicStyles = useMemo(() => {
+      const styles = getModalSizeStyles(size);
+      return css(styles);
+    }, [size]);
+
+    const modalContainerClass = useWebMergeStyles(
+      [staticModalStyles.modalContainer, dynamicStyles.modalContainer, webDynamicStyles, ...rootStyles],
+      [dynamicStyles.modalContainer, rootStyles, webDynamicStyles],
+    );
+    const modalRef = useRef<HTMLDivElement | null>(null);
+    const containerRef = useRef<{ modalRef?: typeof modalRef.current }>({});
+    const [isOpen, setIsOpen] = useState(open);
+
+    const handleRef = useMergeRefs(forwardedRef, modalRef);
+
+    useLayoutEffect(() => {
+      let timeoutId: NodeJS.Timeout | null = null;
+      if (!open) {
+        // to add closing animation
+        timeoutId = setTimeout(() => setIsOpen(false), animationDuration);
+      } else {
+        setIsOpen(true);
+      }
+
+      return () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        timeoutId && clearTimeout(timeoutId);
+      };
+    }, [open, animationDuration]);
+
+    useEffect(() => {
+      if (modalRef.current) {
+        modalRef.current.scrollTop = 0;
+      }
+      if (open) {
+        containerRef.current.modalRef = modalRef.current;
+        handler.mount({ ref: containerRef.current.modalRef });
+      }
+
+      return () => {
+        if (open) {
+          handler.remove({ ref: containerRef.current.modalRef || null });
+          // @ts-ignore
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          containerRef.current.modalRef = modalRef.current;
+        }
+      };
+    }, [open]);
+
+    const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (allowBackdropClose && onClose) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      if (event.key !== 'Escape') {
+        return;
+      }
+
+      event.stopPropagation();
+      if (onClose) {
+        onClose();
+      }
+    };
+
+    if (!isOpen || !React.isValidElement(children)) {
+      return null;
+    }
+
+    // TODO Focus trap breaks height sequence
+    const modalElement = (
+      <FocusLock>
+        <Container
+          styleConfig={{
+            root: [staticModalStyles.outerContainer, dynamicStyles.outerContainer],
+          }}
+          {...rest}
+        >
+          <div className={modalContainerClass} onKeyDown={handleKeyDown} ref={handleRef}>
+            {backDropComponent || (
+              <Backdrop
+                open={open}
+                blur={blur}
+                transitionDuration={350}
+                onClick={handleBackdropClick}
+                variant={variant}
+                styleConfig={{ root: backdropStyles }}
+              />
+            )}
+            <Transition
+              type={isFullScreen ? 'slide' : 'fade'}
+              slideDirection='up'
+              in={open}
+              timeout={animationDuration}
+            >
+              <Container
+                styleConfig={{
+                  root: [dynamicStyles.childContainer, ...modalContentStyles],
+                }}
+              >
+                <ModalContext.Provider value={{ footerAlignment, hideCrossIcon, onClose, size }}>
+                  {React.cloneElement(children, { ...children.props, onClose })}
+                </ModalContext.Provider>
+              </Container>
+            </Transition>
+          </div>
+        </Container>
+      </FocusLock>
+    );
+
+    if (insidePortal) {
+      return <Portal id='global_modal'>{modalElement}</Portal>;
+    }
+
+    return modalElement;
+  },
+);
+
+Modal.displayName = 'Modal';
+export default Modal;