@codeleap/web 3.18.3 → 3.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.18.3",
+  "version": "3.18.4",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -41,7 +41,8 @@
     "react-window": "1.8.5",
     "slick-carousel": "^1.8.1",
     "url-parse": "^1.5.10",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "zustand": "^4.4.1"
   },
   "peerDependencies": {
     "@codeleap/common": "*",

package/src/components/Drawer/index.tsx

@@ -36,7 +36,6 @@ export type DrawerProps = {
   style?: React.CSSProperties
   animationDuration?: string
   closeButtonProps?: Partial<ActionIconProps>
-  scrollLocked?: boolean
   closeIcon?: IconPlaceholder
   children?: React.ReactNode
 } & ComponentVariants<typeof DrawerPresets> & ComponentCommonProps
@@ -68,7 +67,6 @@ const defaultProps: Partial<DrawerProps> = {
   darkenBackground: true,
   size: '75vw',
   title: null,
-  scrollLocked: false,
   closeIcon: 'x' as IconPlaceholder,
 }
 
@@ -95,11 +93,10 @@ export const Drawer = (props: DrawerProps) => {
     style,
     animationDuration,
     debugName,
-    scrollLocked,
     closeIcon,
   } = allProps as DrawerProps
 
-  usePopState(open, toggle, scrollLocked)
+  usePopState(open, toggle)
 
   const [hiddenStyle, axis, positioning] = resolveHiddenDrawerPosition(position)
 
@@ -134,7 +131,6 @@ export const Drawer = (props: DrawerProps) => {
           visible={open}
           css={variantStyles.overlay}
           onPress={toggle}
-          scrollLocked={scrollLocked}
         />
       )}
 

package/src/components/Modal/index.tsx

@@ -25,17 +25,18 @@ import { ActionIcon, ActionIconProps } from '../ActionIcon'
 import { Scroll } from '../Scroll'
 import { ComponentCommonProps } from '../../types'
 import { Touchable, TouchableProps } from '../Touchable'
+import { modalScrollLock, ModalStore } from '../../lib/modal'
 
 export * from './styles'
 
 export type ModalProps =
   {
-    visible: boolean
+    visible?: boolean
     children?: React.ReactNode
     title?: React.ReactNode | string
     description?: React.ReactNode | string
     renderModalBody?: (props: ModalBodyProps) => React.ReactElement
-    toggle: AnyFunction
+    toggle?: AnyFunction
     styles?: StylesOf<ModalComposition>
     style?: React.CSSProperties
     accessible?: boolean
@@ -56,9 +57,11 @@ export type ModalProps =
     overlayProps?: Partial<OverlayProps>
     zIndex?: number
     withScrollContainer?: boolean
-    scrollLocked?: boolean
+    scrollLock?: boolean
     backdropProps?: Partial<TouchableProps>
     alterHistory?: boolean
+    modalId?: string
+    autoIndex?: boolean
   } & ComponentVariants<typeof ModalPresets> & ComponentCommonProps
 
 function focusModal(event: FocusEvent, id: string) {
@@ -148,7 +151,9 @@ const defaultProps: Partial<ModalProps> = {
   zIndex: null,
   description: null,
   withScrollContainer: false,
-  scrollLocked: true,
+  scrollLock: false,
+  autoIndex: false,
+  alterHistory: false,
 }
 
 export const ModalContent = (
@@ -178,12 +183,15 @@ export const ModalContent = (
     zIndex,
     withScrollContainer,
     debugName,
-    scrollLocked,
     backdropProps = {},
-    alterHistory = false,
+    alterHistory,
+    id: modalId,
+    autoIndex,
     ...props
   } = modalProps
 
+  const index = ModalStore(store => (store.indexes?.[modalId] ?? 0))
+
   const id = useId()
   const modalRef = useRef(null)
   const variantStyles = useDefaultComponentStyle<'u:Modal', typeof ModalPresets>('u:Modal', {
@@ -264,10 +272,11 @@ export const ModalContent = (
       aria-hidden={!visible}
       css={[
         variantStyles.wrapper,
-        _zIndex,
         visible
           ? variantStyles['wrapper:visible']
           : variantStyles['wrapper:hidden'],
+        autoIndex ? { zIndex: index } : {},
+        _zIndex,
       ]}
     >
       <Overlay
@@ -279,7 +288,6 @@ export const ModalContent = (
             ? variantStyles['backdrop:visible']
             : variantStyles['backdrop:hidden'],
         ]}
-        scrollLocked={scrollLocked}
         {...overlayProps}
       />
 
@@ -343,18 +351,24 @@ export const Modal = (props) => {
 
   const {
     accessible,
-    keepMounted,
-    visible,
+    visible: _visible,
+    scrollLock,
+    modalId: _modalId,
+    autoIndex,
+    toggle: _toggle,
   } = allProps
 
-  const modalId = useRef(v4())
+  const modalId = useRef(_modalId ?? v4())
+  const setIndex = ModalStore(store => store.setIndex)
+
+  const visible = TypeGuards.isBoolean(_visible) ? _visible : ModalStore(store => (store.modals?.[_modalId] ?? false))
+  const toggle = TypeGuards.isFunction(_toggle) ? _toggle : ModalStore(store => () => store.toggle(_modalId))
 
   onMount(() => {
     if (accessible) {
-      const currentId = modalId
       const appRoot = document.body
-      appRoot.addEventListener('focusin', (e) => focusModal(e, currentId))
-      return () => appRoot.removeEventListener('focusin', (e) => focusModal(e, currentId))
+      appRoot.addEventListener('focusin', (e) => focusModal(e, modalId.current))
+      return () => appRoot.removeEventListener('focusin', (e) => focusModal(e, modalId.current))
     }
   })
 
@@ -365,16 +379,16 @@ export const Modal = (props) => {
       appRoot.setAttribute('tabindex', `${-1}`)
     }
 
-    if (visible) {
-      document.body.style.overflowY = 'hidden'
-      document.body.style.overflowX = 'hidden'
-    } else {
-      document.body.style.overflowY = 'visible'
-      document.body.style.overflowX = 'hidden'
+    if (scrollLock) modalScrollLock(visible, modalId.current)
+    
+    if (autoIndex) {
+      setTimeout(() => {
+        setIndex(visible, modalId.current)
+      }, visible ? 0 : 500)
     }
   }, [visible])
 
-  const content = <ModalContent {...props} id={modalId.current} />
+  const content = <ModalContent {...props} visible={visible} toggle={toggle} id={modalId.current} />
 
   // if (renderStatus === 'unmounted') return null
 
@@ -388,4 +402,3 @@ export const Modal = (props) => {
 }
 
 Modal.defaultProps = defaultProps
-

package/src/components/Overlay/index.tsx

@@ -14,7 +14,6 @@ export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
   visible?: boolean
   styles?: StylesOf<OverlayComposition>
   onPress?: TouchableProps<'div'>['onClick']
-  scrollLocked?: boolean
 } & ComponentVariants<typeof OverlayPresets> & Omit<ViewProps<T>, 'variants' | 'responsiveVariants'>
 
 export * from './styles'
@@ -25,7 +24,6 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
     responsiveVariants, 
     variants, 
     styles, 
-    scrollLocked = false, 
     ...props 
   } = overlayProps
 
@@ -35,7 +33,7 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
     styles,
   })
 
-  usePopState(visible, props.onPress, scrollLocked)
+  usePopState(visible, props.onPress)
 
   const Component = props.onClick || props.onPress ? Touchable : View
 

package/src/index.ts

@@ -10,3 +10,4 @@ export { CreateOSAlert, useGlobalAlertComponent, AlertOutlet } from './lib/OSAle
 export type { GlobalAlertComponentProps, GlobalAlertType } from './lib/OSAlert'
 export * from './lib/keyboard'
 export * from './lib/localStorage'
+export * from './lib/modal'

package/src/lib/modal.ts

@@ -0,0 +1,80 @@
+import { TypeGuards } from '@codeleap/common'
+import { create } from 'zustand'
+
+type TModalStore = { 
+  identifier: string | null
+  indexes: Record<string, number>
+  modals: Record<string, boolean>
+  setIndex: (visible: boolean, modalIdentifier: string) => void
+  toggle: (id: string, to?: boolean) => void
+}
+
+const INDEX = 99
+
+export const ModalStore = create<TModalStore>((set) => ({ 
+  identifier: null,
+  indexes: {},
+  modals: {},
+  setIndex: (visible: boolean, modalIdentifier: string) => set(store => {
+    const indexes = store.indexes
+
+    if (!visible) {
+      indexes[modalIdentifier] = INDEX
+
+      return { indexes }
+    }
+
+    let currentIndex = 0
+
+    for (const key in indexes) {
+      if (indexes[key] > currentIndex) {
+        currentIndex = indexes[key]
+      }
+    }
+
+    indexes[modalIdentifier] = currentIndex + INDEX
+
+    return { indexes }
+  }),
+  toggle: (id: string, to = null) => set(store => {
+    const modals = store.modals
+
+    const hasModal = TypeGuards.isBoolean(modals?.[id])
+    const visible = TypeGuards.isBoolean(to) ? to : (hasModal ? !modals?.[id] : true)
+
+    modals[id] = visible
+
+    return { modals }
+  })
+}))
+
+export function toggleModal(id: string, to: boolean = null) {
+  ModalStore.getState().toggle(id, to)
+}
+
+export function modalScrollLock(to: boolean, modalIdentifier: string) {
+  let modalId = ModalStore.getState().identifier
+
+  const alreadyDifferentOpenedModal = !TypeGuards.isNil(modalId) && modalIdentifier !== modalId
+  
+  if (alreadyDifferentOpenedModal) return
+
+  if (TypeGuards.isNil(modalId) && to === true) {
+    ModalStore.setState({ identifier: modalIdentifier })
+    modalId = modalIdentifier
+  } else if (!TypeGuards.isNil(modalId) && to === false) {
+    ModalStore.setState({ identifier: null })
+  }
+
+  const htmlStyle = document?.documentElement?.style
+
+  if (htmlStyle.overflowX !== 'hidden') {
+    htmlStyle.overflowX = 'hidden'
+  }
+
+  if (to) {
+    htmlStyle.overflowY = 'hidden'
+  } else if (modalIdentifier === modalId && to === false) {
+    htmlStyle.overflowY = 'auto'
+  }
+}

package/src/lib/usePopState.ts

@@ -1,6 +1,6 @@
 import { AnyFunction, useIsomorphicEffect, useUnmount } from '@codeleap/common'
 
-export const usePopState = (dependence: boolean, handler: AnyFunction, scrollLocked = true) => {
+export const usePopState = (dependence: boolean, handler: AnyFunction) => {
   useIsomorphicEffect(() => {
     if (dependence) {
       window.history.pushState(null, null, window.location.pathname)