@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/lib/components/ModalV2/modalV2.light.tokens.ts

@@ -0,0 +1,183 @@
+import { type FoundationTokenType } from '../../tokens/theme.token'
+import type { ResponsiveModalV2Tokens } from './modalV2.tokens.types'
+
+export const getModalV2LightToken = (
+    foundationToken: FoundationTokenType
+): ResponsiveModalV2Tokens => {
+    return {
+        sm: {
+            paddingTop: foundationToken.unit[16],
+            paddingRight: foundationToken.unit[16],
+            paddingBottom: foundationToken.unit[16],
+            paddingLeft: foundationToken.unit[16],
+            boxShadow: foundationToken.shadows.xs,
+            borderRadius: foundationToken.border.radius[16],
+            backgroundColor: foundationToken.colors.gray[0],
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                offset: foundationToken.unit[16],
+            },
+            skeleton: {
+                header: {
+                    gap: foundationToken.unit[16],
+                    paddingTop: foundationToken.unit[20],
+                    paddingRight: foundationToken.unit[20],
+                    paddingBottom: foundationToken.unit[20],
+                    paddingLeft: foundationToken.unit[20],
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                    width: '60%',
+                    height: 24,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+                body: {
+                    gap: foundationToken.unit[12],
+                    width: '100%',
+                    height: 300,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+            },
+            divider: {
+                borderColor: foundationToken.colors.gray[200],
+            },
+            header: {
+                gap: foundationToken.unit[16],
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                maxHeight: '20vh',
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                borderTopLeftRadius: foundationToken.border.radius[16],
+                borderTopRightRadius: foundationToken.border.radius[16],
+                slot: {
+                    gap: foundationToken.unit[8],
+                },
+                text: {
+                    title: {
+                        color: foundationToken.colors.gray[700],
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                    subtitle: {
+                        color: foundationToken.colors.gray[600],
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[400],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                },
+            },
+
+            body: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                backgroundColor: foundationToken.colors.gray[0],
+            },
+
+            footer: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                borderTop: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                gap: foundationToken.unit[12],
+            },
+            closeButton: {
+                color: foundationToken.colors.gray[500],
+                width: foundationToken.unit[16],
+                height: foundationToken.unit[16],
+            },
+        },
+        lg: {
+            backgroundColor: foundationToken.colors.gray[0],
+            paddingTop: foundationToken.unit[16],
+            paddingRight: foundationToken.unit[16],
+            paddingBottom: foundationToken.unit[16],
+            paddingLeft: foundationToken.unit[16],
+            boxShadow: foundationToken.shadows.lg,
+            borderRadius: foundationToken.border.radius[16],
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                offset: foundationToken.unit[16],
+            },
+            divider: {
+                borderColor: foundationToken.colors.gray[200],
+            },
+            header: {
+                gap: foundationToken.unit[16],
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                maxHeight: '20vh',
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                borderTopLeftRadius: foundationToken.border.radius[16],
+                borderTopRightRadius: foundationToken.border.radius[16],
+                slot: {
+                    gap: foundationToken.unit[8],
+                },
+                text: {
+                    title: {
+                        color: foundationToken.colors.gray[700],
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                    subtitle: {
+                        color: foundationToken.colors.gray[600],
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[400],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                },
+            },
+            skeleton: {
+                header: {
+                    gap: foundationToken.unit[16],
+                    paddingTop: foundationToken.unit[20],
+                    paddingRight: foundationToken.unit[20],
+                    paddingBottom: foundationToken.unit[20],
+                    paddingLeft: foundationToken.unit[20],
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                    width: '60%',
+                    height: 24,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+                body: {
+                    gap: foundationToken.unit[12],
+                    width: '100%',
+                    height: 300,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+            },
+
+            body: {
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                backgroundColor: foundationToken.colors.gray[0],
+            },
+
+            footer: {
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                borderTop: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                gap: foundationToken.unit[16],
+            },
+            closeButton: {
+                color: foundationToken.colors.gray[500],
+                width: foundationToken.unit[16],
+                height: foundationToken.unit[16],
+            },
+        },
+    }
+}

package/lib/components/ModalV2/modalV2.tokens.ts

@@ -0,0 +1,21 @@
+import { type FoundationTokenType } from '../../tokens/theme.token'
+import { Theme } from '../../context/theme.enum'
+import { getModalV2LightToken } from './modalV2.light.tokens'
+import { getModalV2DarkToken } from './modalV2.dark.tokens'
+import type { ResponsiveModalV2Tokens } from './modalV2.tokens.types'
+
+export type {
+    ModalV2State,
+    ModalV2TokensType,
+    ResponsiveModalV2Tokens,
+} from './modalV2.tokens.types'
+
+export const getModalV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveModalV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getModalV2DarkToken(foundationToken)
+    }
+    return getModalV2LightToken(foundationToken)
+}

package/lib/components/ModalV2/modalV2.tokens.types.ts

@@ -0,0 +1,94 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type ModalV2State = 'default'
+
+export type ModalV2TokensType = {
+    boxShadow: CSSObject['boxShadow']
+    borderRadius: CSSObject['borderRadius']
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor']
+        offset: CSSObject['offset']
+    }
+    paddingTop: CSSObject['paddingTop']
+    paddingRight: CSSObject['paddingRight']
+    paddingBottom: CSSObject['paddingBottom']
+    paddingLeft: CSSObject['paddingLeft']
+    backgroundColor: CSSObject['backgroundColor']
+    header: {
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        maxHeight: CSSObject['maxHeight']
+        borderBottom: CSSObject['border']
+        backgroundColor: CSSObject['backgroundColor']
+        borderTopLeftRadius: CSSObject['borderTopLeftRadius']
+        borderTopRightRadius: CSSObject['borderTopRightRadius']
+        slot: {
+            gap: CSSObject['gap']
+        }
+        text: {
+            title: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+            subtitle: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+        }
+    }
+    divider: {
+        borderColor: CSSObject['borderColor']
+    }
+    skeleton: {
+        header: {
+            gap: CSSObject['gap']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            borderBottom: CSSObject['border']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+        }
+        body: {
+            gap: CSSObject['gap']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+        }
+    }
+    body: {
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        backgroundColor: CSSObject['backgroundColor']
+    }
+    footer: {
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        borderTop: CSSObject['border']
+        backgroundColor: CSSObject['backgroundColor']
+        gap: CSSObject['gap']
+    }
+    closeButton: {
+        color: CSSObject['color']
+        width: CSSObject['width']
+        height: CSSObject['height']
+    }
+}
+
+export type ResponsiveModalV2Tokens = {
+    [key in keyof BreakpointType]: ModalV2TokensType
+}

package/lib/components/ModalV2/modalV2.types.ts

@@ -0,0 +1,80 @@
+// Skeleton types
+import { SkeletonVariant } from '../Skeleton'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { ButtonV2Props } from '../ButtonV2'
+import type { CSSObject } from 'styled-components'
+
+export type HeaderSkeletonConfig = {
+    show: boolean
+    showDivider: boolean
+    showCloseButton: boolean
+}
+
+export type BodySkeletonConfig = {
+    show: boolean
+    width: string
+    height: string | number
+}
+
+export type FooterSkeletonConfig = {
+    show: boolean
+    showDivider: boolean
+}
+
+export type ModalV2SkeletonProps = {
+    modalTokens: ModalV2TokensType
+    headerSkeleton?: HeaderSkeletonConfig
+    bodySkeleton?: BodySkeletonConfig
+    footerSkeleton?: FooterSkeletonConfig
+    skeletonVariant: SkeletonVariant
+}
+
+// Modal types - using ButtonV2 props
+export type ModalV2ButtonAction = Omit<ButtonV2Props, 'buttonGroupPosition'>
+
+export type BodySkeletonProps = {
+    show?: boolean
+    width?: string
+    height?: string | number
+}
+
+export type ModalV2BodySkeletonProps = {
+    show?: boolean
+    variant?: SkeletonVariant
+    bodySkeletonProps?: BodySkeletonProps
+}
+
+export type ModalV2Dimensions = {
+    width?: CSSObject['width']
+    height?: CSSObject['height']
+    minWidth?: CSSObject['minWidth']
+    maxWidth?: CSSObject['maxWidth']
+    minHeight?: CSSObject['minHeight']
+    maxHeight?: CSSObject['maxHeight']
+}
+
+export type ModalV2Props = {
+    isOpen: boolean
+    isCustom?: boolean
+    onClose: () => void
+    title?: string
+    subtitle?: string
+    children: ReactNode
+    primaryAction?: ModalV2ButtonAction
+    secondaryAction?: ModalV2ButtonAction
+    showCloseButton?: boolean
+    showHeader?: boolean
+    showFooter?: boolean
+    closeOnBackdropClick?: boolean
+    customHeader?: ReactNode
+    customFooter?: ReactNode
+    headerSlot?: ReactNode
+    showDivider?: boolean
+    dimensions?: ModalV2Dimensions
+    useDrawerOnMobile?: boolean
+    skeleton?: ModalV2BodySkeletonProps
+} & Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children' | 'title' | 'className' | 'style'
+>

package/lib/components/MultiSelect/MultiSelect.tsx

@@ -492,7 +492,8 @@ const MultiSelect = ({
                                                 variant ===
                                                     MultiSelectVariant.CONTAINER &&
                                                 isSmallScreenWithLargeSize &&
-                                                isItemSelected
+                                                isItemSelected &&
+                                                label
                                                     ? paddingY * 1.5
                                                     : 0
                                             }

package/lib/components/MultiSelect/MultiSelectTrigger.tsx

@@ -170,7 +170,8 @@ const MultiSelectTrigger = ({
                         paddingTop={
                             variant === MultiSelectVariant.CONTAINER &&
                             isSmallScreenWithLargeSize &&
-                            isItemSelected
+                            isItemSelected &&
+                            label
                                 ? paddingY * 1.5
                                 : 0
                         }

package/lib/components/MultiSelect/index.ts

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelect } from './MultiSelect'
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelectTrigger } from './MultiSelectTrigger'
 export * from './multiSelect.tokens'
 export * from './types'

package/lib/components/MultiSelectV2/MultiSelectV2Trigger.tsx

@@ -188,7 +188,10 @@ const MultiSelectV2Trigger = ({
                 as="span"
                 textAlign="left"
                 paddingTop={
-                    isContainer && isSmallScreenWithLargeSize && isItemSelected
+                    isContainer &&
+                    isSmallScreenWithLargeSize &&
+                    isItemSelected &&
+                    label
                         ? floatingLabelPaddingTop
                         : 0
                 }

package/lib/components/Popover/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use PopoverV2 instead. */
 export { default as Popover } from './Popover'
 export * from './popover.tokens'
 export * from './types'

package/lib/components/Primitives/Block/Block.tsx

@@ -3,7 +3,7 @@ import styled, { css, type CSSObject } from 'styled-components'
 
 type SpacingValue = string | number
 
-type StateStyles = {
+export type StateStyles = {
     _hover?: StyledBlockProps
     _focus?: StyledBlockProps
     _active?: StyledBlockProps

package/lib/components/ProgressBar/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ProgressBarV2 instead. */
 export { default as ProgressBar } from './ProgressBar'
 export * from './progressbar.tokens'
 export * from './types'

package/lib/components/Radio/index.ts

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use RadioV2 instead. */
 export { default as Radio } from './Radio'
+/** @deprecated Will be deprecated soon. Use RadioV2 instead. */
 export { default as RadioGroup } from './RadioGroup'
 export { RadioSize } from './types'
 export type { RadioProps, RadioGroupProps } from './types'

package/lib/components/Sidebar/Sidebar.tsx

@@ -100,6 +100,14 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
             defaultActiveItem,
             showLeftPanel = true,
             onSidebarStateChange,
+            showHierarchyLines = false,
+            hierarchyLineBorderRadius = 0,
+            expandedItems,
+            defaultExpandedItems,
+            onExpandedItemsChange,
+            onItemExpand,
+            enableVirtualization = false,
+            virtualization,
         },
         ref
     ) => {
@@ -402,6 +410,18 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                                     iconOnlyMode={iconOnlyMode}
                                     footer={footer}
                                     setIsHovering={setIsHovering}
+                                    showHierarchyLines={showHierarchyLines}
+                                    hierarchyLineBorderRadius={
+                                        hierarchyLineBorderRadius
+                                    }
+                                    expandedItems={expandedItems}
+                                    defaultExpandedItems={defaultExpandedItems}
+                                    onExpandedItemsChange={
+                                        onExpandedItemsChange
+                                    }
+                                    onItemExpand={onItemExpand}
+                                    enableVirtualization={enableVirtualization}
+                                    virtualization={virtualization}
                                 />
 
                                 {/* Intermediate Sidebar */}
@@ -491,6 +511,24 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                                             }
                                             iconOnlyMode={false}
                                             footer={footer}
+                                            showHierarchyLines={
+                                                showHierarchyLines
+                                            }
+                                            hierarchyLineBorderRadius={
+                                                hierarchyLineBorderRadius
+                                            }
+                                            expandedItems={expandedItems}
+                                            defaultExpandedItems={
+                                                defaultExpandedItems
+                                            }
+                                            onExpandedItemsChange={
+                                                onExpandedItemsChange
+                                            }
+                                            onItemExpand={onItemExpand}
+                                            enableVirtualization={
+                                                enableVirtualization
+                                            }
+                                            virtualization={virtualization}
                                         />
                                     </Block>
                                 )}

package/lib/components/Sidebar/SidebarContent.tsx

@@ -5,7 +5,7 @@ import Directory from '../Directory/Directory'
 import { normalizeDirectoryData } from '../Directory/utils'
 import SidebarHeader from './SidebarHeader'
 import SidebarFooter from './SidebarFooter'
-import type { DirectoryData } from '../Directory/types'
+import type { DirectoryData, DirectoryProps } from '../Directory/types'
 import type { SidebarMerchantInfo, SidebarStateChangeType } from './types'
 
 const DirectoryContainer = styled(Block)<{
@@ -45,6 +45,14 @@ export type SidebarContentProps = {
     footer?: React.ReactNode
     setIsHovering?: (isHovering: boolean) => void
     sidebarState?: SidebarStateChangeType
+    showHierarchyLines?: DirectoryProps['showHierarchyLines']
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius']
+    expandedItems?: DirectoryProps['expandedItems']
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems']
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange']
+    onItemExpand?: DirectoryProps['onItemExpand']
+    enableVirtualization?: DirectoryProps['enableVirtualization']
+    virtualization?: DirectoryProps['virtualization']
 }
 
 const SidebarContent: React.FC<SidebarContentProps> = ({
@@ -66,6 +74,14 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
     footer,
     setIsHovering,
     sidebarState = 'expanded',
+    showHierarchyLines = false,
+    hierarchyLineBorderRadius = 0,
+    expandedItems,
+    defaultExpandedItems,
+    onExpandedItemsChange,
+    onItemExpand,
+    enableVirtualization = false,
+    virtualization,
 }) => {
     const directoryData = normalizeDirectoryData(data)
 
@@ -114,6 +130,14 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
                     onActiveItemChange={onActiveItemChange}
                     defaultActiveItem={defaultActiveItem}
                     iconOnlyMode={iconOnlyMode}
+                    showHierarchyLines={showHierarchyLines}
+                    hierarchyLineBorderRadius={hierarchyLineBorderRadius}
+                    expandedItems={expandedItems}
+                    defaultExpandedItems={defaultExpandedItems}
+                    onExpandedItemsChange={onExpandedItemsChange}
+                    onItemExpand={onItemExpand}
+                    enableVirtualization={enableVirtualization}
+                    virtualization={virtualization}
                 />
             </DirectoryContainer>
 

package/lib/components/Sidebar/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use SidebarV2 instead. */
 export { default as Sidebar } from './Sidebar'
 export * from './sidebar.tokens'
 export * from './types'

package/lib/components/Sidebar/types.ts

@@ -1,5 +1,9 @@
 import { type ReactNode } from 'react'
-import type { DirectoryData, NavbarItem } from '../Directory/types'
+import type {
+    DirectoryData,
+    DirectoryProps,
+    NavbarItem,
+} from '../Directory/types'
 import type {
     MerchantInfo,
     LeftPanelInfo,
@@ -65,6 +69,14 @@ export type SidebarProps = {
     onActiveItemChange?: (item: string | null) => void
     defaultActiveItem?: string | null
     onHoveringChange?: (isHovering: boolean) => void
+    showHierarchyLines?: DirectoryProps['showHierarchyLines']
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius']
+    expandedItems?: DirectoryProps['expandedItems']
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems']
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange']
+    onItemExpand?: DirectoryProps['onItemExpand']
+    enableVirtualization?: DirectoryProps['enableVirtualization']
+    virtualization?: DirectoryProps['virtualization']
 }
 
 export type MobileNavigationItem = NavbarItem & {

package/lib/components/SidebarV2/SidebarV2.tsx

@@ -71,6 +71,14 @@ const SidebarV2 = forwardRef<HTMLDivElement, SidebarV2Props>(
             onActiveItemChange,
             defaultActiveItem,
             onSidebarStateChange,
+            showHierarchyLines = false,
+            hierarchyLineBorderRadius = 0,
+            expandedItems,
+            defaultExpandedItems,
+            onExpandedItemsChange,
+            onItemExpand,
+            enableVirtualization = false,
+            virtualization,
         },
         ref
     ) => {
@@ -323,6 +331,16 @@ const SidebarV2 = forwardRef<HTMLDivElement, SidebarV2Props>(
                                 setIsHovering={setIsHovering}
                                 sidebarState={sidebarStatus}
                                 tokens={tokens}
+                                showHierarchyLines={showHierarchyLines}
+                                hierarchyLineBorderRadius={
+                                    hierarchyLineBorderRadius
+                                }
+                                expandedItems={expandedItems}
+                                defaultExpandedItems={defaultExpandedItems}
+                                onExpandedItemsChange={onExpandedItemsChange}
+                                onItemExpand={onItemExpand}
+                                enableVirtualization={enableVirtualization}
+                                virtualization={virtualization}
                             />
                         )}
 
@@ -386,6 +404,18 @@ const SidebarV2 = forwardRef<HTMLDivElement, SidebarV2Props>(
                                     footer={footer}
                                     sidebarState={sidebarStatus}
                                     tokens={tokens}
+                                    showHierarchyLines={showHierarchyLines}
+                                    hierarchyLineBorderRadius={
+                                        hierarchyLineBorderRadius
+                                    }
+                                    expandedItems={expandedItems}
+                                    defaultExpandedItems={defaultExpandedItems}
+                                    onExpandedItemsChange={
+                                        onExpandedItemsChange
+                                    }
+                                    onItemExpand={onItemExpand}
+                                    enableVirtualization={enableVirtualization}
+                                    virtualization={virtualization}
                                 />
                             </Block>
                         )}