@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.6

package/lib/components/MenuV2/menuV2.tokens.types.ts

@@ -0,0 +1,110 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+import type { SelectV2ItemStates } from '../SelectV2/selectV2.tokenStates'
+import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types'
+
+type StateToken<T> = Record<SelectV2ItemStates, T>
+
+type MenuV2VariantToken<T> = {
+    [MenuV2ItemVariant.DEFAULT]: T
+    [MenuV2ItemVariant.ACTION]: {
+        [MenuV2ItemActionType.PRIMARY]: T
+        [MenuV2ItemActionType.DANGER]: T
+    }
+}
+
+export type MenuV2TokensType = {
+    backgroundColor: CSSObject['backgroundColor']
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    boxShadow: CSSObject['boxShadow']
+    zIndex: CSSObject['zIndex']
+
+    minWidth: CSSObject['minWidth']
+    maxWidth: CSSObject['maxWidth']
+
+    paddingTop: CSSObject['paddingTop']
+    paddingRight: CSSObject['paddingRight']
+    paddingBottom: CSSObject['paddingBottom']
+    paddingLeft: CSSObject['paddingLeft']
+
+    searchIcon: {
+        width: CSSObject['width']
+    }
+
+    group: {
+        label: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+
+            marginTop: CSSObject['marginTop']
+            marginRight: CSSObject['marginRight']
+            marginBottom: CSSObject['marginBottom']
+            marginLeft: CSSObject['marginLeft']
+        }
+        item: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+
+            marginTop: CSSObject['marginTop']
+            marginRight: CSSObject['marginRight']
+            marginBottom: CSSObject['marginBottom']
+            marginLeft: CSSObject['marginLeft']
+
+            gap: CSSObject['gap']
+            borderRadius: CSSObject['borderRadius']
+
+            backgroundColor: MenuV2VariantToken<
+                StateToken<CSSObject['backgroundColor']>
+            >
+
+            text: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+
+                color: MenuV2VariantToken<StateToken<CSSObject['color']>>
+
+                subText: {
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    lineHeight: CSSObject['lineHeight']
+
+                    color: MenuV2VariantToken<StateToken<CSSObject['color']>>
+                }
+
+                leftSlot: {
+                    maxWidth: CSSObject['maxWidth']
+                    maxHeight: CSSObject['maxHeight']
+                }
+
+                rightChevron: {
+                    color: CSSObject['color']
+                    width: CSSObject['width']
+                }
+            }
+        }
+    }
+    separator: {
+        color: CSSObject['color']
+        height: CSSObject['height']
+
+        marginTop: CSSObject['marginTop']
+        marginRight: CSSObject['marginRight']
+        marginBottom: CSSObject['marginBottom']
+        marginLeft: CSSObject['marginLeft']
+    }
+}
+
+export type ResponsiveMenuV2TokensType = {
+    [key in keyof BreakpointType]: MenuV2TokensType
+}

package/lib/components/Modal/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
-import type { ButtonProps } from '../Button'
-import { SkeletonVariant } from '../Skeleton'
+import type { ButtonProps } from '../Button/types'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 type ModalButtonAction = Omit<ButtonProps, 'buttonGroupPosition'>
 

package/lib/components/Modal/useModal.ts

@@ -22,6 +22,12 @@ export const useModal = (isOpen: boolean, onClose: () => void) => {
             const container = getPortalContainer()
             setPortalContainer(container)
 
+            document.body.style.setProperty(
+                'pointer-events',
+                'auto',
+                'important'
+            )
+
             let animationFrame2: number | null = null
             const animationFrame1 = requestAnimationFrame(() => {
                 animationFrame2 = requestAnimationFrame(() => {
@@ -44,6 +50,7 @@ export const useModal = (isOpen: boolean, onClose: () => void) => {
                     cancelAnimationFrame(animationFrame2)
                 }
                 document.removeEventListener('keydown', handleEscapeKey)
+                document.body.style.removeProperty('pointer-events')
             }
         } else {
             // Start exit animation

package/lib/components/MultiSelect/MobileMultiSelect.tsx

@@ -11,7 +11,8 @@ import {
 } from '../Drawer'
 import Block from '../Primitives/Block/Block'
 import Text from '../Text/Text'
-import { MultiSelectTrigger, SkeletonVariant } from '../../main'
+import MultiSelectTrigger from './MultiSelectTrigger'
+import type { SkeletonVariant } from '../Skeleton/types'
 import { FOUNDATION_THEME } from '../../tokens'
 import InputLabels from '../Inputs/utils/InputLabels/InputLabels'
 import InputFooter from '../Inputs/utils/InputFooter/InputFooter'

package/lib/components/MultiSelect/MultiSelectMenuItem.tsx

@@ -1,4 +1,5 @@
 import { type MultiSelectMenuItemType } from './types'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: MenuItem renders SubMenu which renders MenuItem
 import MultiSelectSubMenu from './MultiSelectSubMenu'
 import SelectItem, { SelectItemType } from '../Select/SelectItem'
 

package/lib/components/MultiSelect/MultiSelectSubMenu.tsx

@@ -3,6 +3,7 @@ import { FOUNDATION_THEME } from '../../tokens'
 import Block from '../Primitives/Block/Block'
 import { type MultiSelectMenuItemType } from './types'
 import * as RadixMenu from '@radix-ui/react-dropdown-menu'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: SubMenu renders MenuItem which renders SubMenu
 import MultiSelectMenuItem from './MultiSelectMenuItem'
 import { type MultiSelectTokensType } from './multiSelect.tokens'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'

package/lib/components/MultiSelect/types.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
 
 export enum MultiSelectVariant {

package/lib/components/MultiSelectV2/MultiSelectV2MenuItem.tsx

@@ -1,5 +1,6 @@
 import { SelectItemV2 } from '../SelectV2'
 import type { MultiSelectV2ItemType } from './multiSelectV2.types'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: MenuItem renders SubMenu which renders MenuItem
 import MultiSelectV2SubMenu from './MultiSelectV2SubMenu'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import type { MultiSelectV2TokensType } from './multiSelectV2.tokens'

package/lib/components/MultiSelectV2/MultiSelectV2Skeleton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 import Block from '../Primitives/Block/Block'
-import { Skeleton, SkeletonVariant } from '../Skeleton'
+import { Skeleton } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 import type { MultiSelectV2TokensType } from './multiSelectV2.tokens'
 import type { SelectV2SkeletonProps } from '../SelectV2/selectV2.shared.types'
 

package/lib/components/MultiSelectV2/MultiSelectV2SubMenu.tsx

@@ -6,6 +6,7 @@ import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import type { MultiSelectV2TokensType } from './multiSelectV2.tokens'
 import type { MultiSelectV2ItemType } from './multiSelectV2.types'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: SubMenu renders MenuItem which renders SubMenu
 import MultiSelectV2MenuItem from './MultiSelectV2MenuItem'
 
 const MenuItemSlot = ({ slot }: { slot: ReactNode }) => (

package/lib/components/MultiSelectV2/multiSelectV2.dark.tokens.ts

@@ -4,7 +4,7 @@ import {
     MultiSelectV2Size,
     MultiSelectV2Variant,
 } from './multiSelectV2.types'
-import type { ResponsiveMultiSelectV2Tokens } from './multiSelectV2.tokens'
+import type { ResponsiveMultiSelectV2Tokens } from './multiSelectV2.tokens.types'
 
 export const getMultiSelectV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/MultiSelectV2/multiSelectV2.light.tokens.ts

@@ -4,7 +4,7 @@ import {
     MultiSelectV2Size,
     MultiSelectV2Variant,
 } from './multiSelectV2.types'
-import type { ResponsiveMultiSelectV2Tokens } from './multiSelectV2.tokens'
+import type { ResponsiveMultiSelectV2Tokens } from './multiSelectV2.tokens.types'
 
 export const getMultiSelectV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/MultiSelectV2/multiSelectV2.tokens.ts

@@ -1,244 +1,15 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
-import {
-    MultiSelectV2Size,
-    MultiSelectV2SelectionTagType,
-    MultiSelectV2Variant,
-} from './multiSelectV2.types'
 import { Theme } from '../../context/theme.enum'
 import { getMultiSelectV2LightTokens } from './multiSelectV2.light.tokens'
 import { getMultiSelectV2DarkTokens } from './multiSelectV2.dark.tokens'
-import type {
-    SelectV2ItemStates,
-    SelectV2TriggerStates,
-} from '../SelectV2/selectV2.tokenStates'
-
-type StateToken<T> = Record<SelectV2ItemStates, T>
-type TriggerStateToken<T> = Record<SelectV2TriggerStates, T>
-type VariantToken<T> = Record<MultiSelectV2Variant, T>
-type SizeToken<T> = Record<MultiSelectV2Size, T>
-type SelectionTagTypeToken<T> = Record<MultiSelectV2SelectionTagType, T>
-
-export type MultiSelectV2TriggerStates = SelectV2TriggerStates
-
-export type MultiSelectV2ItemStates = SelectV2ItemStates
-
-export type MultiSelectV2TokensType = {
-    gap: CSSObject['gap']
-
-    label: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: StateToken<CSSObject['color']>
-    }
-    subLabel: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: StateToken<CSSObject['color']>
-    }
-    hintText: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: StateToken<CSSObject['color']>
-    }
-    errorMessage: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: CSSObject['color']
-    }
-    required: {
-        color: CSSObject['color']
-    }
-
-    trigger: {
-        height: SizeToken<VariantToken<CSSObject['height']>>
-        padding: SizeToken<
-            VariantToken<{
-                top: CSSObject['paddingTop']
-                right: CSSObject['paddingRight']
-                bottom: CSSObject['paddingBottom']
-                left: CSSObject['paddingLeft']
-            }>
-        >
-        borderRadius: SizeToken<VariantToken<CSSObject['borderRadius']>>
-        boxShadow: VariantToken<CSSObject['boxShadow']>
-        backgroundColor: VariantToken<
-            TriggerStateToken<CSSObject['backgroundColor']>
-        >
-        outline: VariantToken<TriggerStateToken<CSSObject['outline']>>
-        slot: {
-            gap: CSSObject['gap']
-            width: CSSObject['width']
-        }
-        selectionTag: VariantToken<
-            SelectionTagTypeToken<{
-                color: CSSObject['color']
-                backgroundColor: CSSObject['backgroundColor']
-                fontWeight: CSSObject['fontWeight']
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-            }>
-        > & {
-            marginLeft: CSSObject['margin']
-            borderRadius: CSSObject['borderRadius']
-        }
-        chevron: {
-            gap: CSSObject['gap']
-            width: CSSObject['width']
-            height: CSSObject['height']
-            iconSize?: number
-        }
-        clearButton?: {
-            backgroundColor: TriggerStateToken<CSSObject['backgroundColor']>
-            outline: TriggerStateToken<CSSObject['outline']>
-            color: CSSObject['color']
-            width?: CSSObject['width']
-        }
-        floatingLabel: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-        }
-        placeholder: {
-            color: CSSObject['color']
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-        }
-        selectedValue: {
-            color: CSSObject['color']
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-        }
-    }
-
-    menu: {
-        backgroundColor: CSSObject['backgroundColor']
-        border: CSSObject['border']
-        borderRadius: CSSObject['borderRadius']
-        padding: SizeToken<
-            VariantToken<{
-                top: CSSObject['paddingTop']
-                right: CSSObject['paddingRight']
-                bottom: CSSObject['paddingBottom']
-                left: CSSObject['paddingLeft']
-            }>
-        >
-        minWidth: CSSObject['minWidth']
-        scroll: {
-            height: CSSObject['height']
-            maxHeight: CSSObject['maxHeight']
-        }
-        header: {
-            backgroundColor: CSSObject['backgroundColor']
-            borderBottom: CSSObject['borderBottom']
-            selectAllRowPaddingLeft: CSSObject['paddingLeft']
-            selectAllRowPaddingRight: CSSObject['paddingRight']
-        }
-        selectAll: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            borderRadius: CSSObject['borderRadius']
-        }
-        list: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-        }
-        actions: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            gap: CSSObject['gap']
-            backgroundColor: CSSObject['backgroundColor']
-            borderTop: CSSObject['borderTop']
-        }
-        item: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            margin: CSSObject['margin']
-            borderRadius: CSSObject['borderRadius']
-            gap: CSSObject['gap']
-            backgroundColor: StateToken<CSSObject['backgroundColor']>
-            optionsLabel: {
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-                color: StateToken<CSSObject['color']>
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-            }
-            option: {
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-                color: StateToken<CSSObject['color']>
-            }
-            description: {
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-                color: StateToken<CSSObject['color']>
-            }
-            seperator: {
-                color: CSSObject['color']
-                height: CSSObject['height']
-                margin: CSSObject['margin']
-            }
-        }
-    }
-
-    subMenu: {
-        trigger: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            margin: CSSObject['margin']
-            borderRadius: CSSObject['borderRadius']
-        }
-        content: {
-            borderRadius: CSSObject['borderRadius']
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-        }
-    }
-
-    drawer: {
-        header: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            borderBottom: CSSObject['borderBottom']
-        }
-        search: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            marginTop: CSSObject['margin']
-            marginBottom: CSSObject['margin']
-        }
-        content: {
-            gap: CSSObject['gap']
-        }
-    }
-}
-
-export type ResponsiveMultiSelectV2Tokens = {
-    [key in keyof BreakpointType]: MultiSelectV2TokensType
-}
+import type { ResponsiveMultiSelectV2Tokens } from './multiSelectV2.tokens.types'
+
+export type {
+    MultiSelectV2TriggerStates,
+    MultiSelectV2ItemStates,
+    MultiSelectV2TokensType,
+    ResponsiveMultiSelectV2Tokens,
+} from './multiSelectV2.tokens.types'
 
 export const getMultiSelectV2Tokens = (
     foundationToken: FoundationTokenType,