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

package/lib/components/MultiSelectV2/MultiSelectV2Menu.tsx

@@ -69,6 +69,10 @@ const ScrollableContent = styled(Block)(() => ({
     },
 }))
 
+const MenuFooter = styled(Block)`
+    flex-shrink: 0;
+`
+
 const MultiSelectV2Menu = ({
     items,
     selected,
@@ -104,6 +108,7 @@ const MultiSelectV2Menu = ({
     allowCustomValue = false,
     customValueLabel = 'Specify',
     menuId,
+    menuFooter,
 }: MultiSelectV2MenuProps) => {
     const multiSelectTokens =
         useResponsiveTokens<MultiSelectV2TokensType>('MULTI_SELECT_V2')
@@ -467,6 +472,9 @@ const MultiSelectV2Menu = ({
                                     onClose={() => handleOpenChange(false)}
                                 />
                             )}
+                            {menuFooter && (
+                                <MenuFooter>{menuFooter}</MenuFooter>
+                            )}
                         </>
                     )}
                 </Content>

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/MultiSelectV2/multiSelectV2.types.ts

@@ -97,6 +97,7 @@ export type MultiSelectV2MenuProps = {
     allowCustomValue?: boolean
     customValueLabel?: string
     menuId?: string
+    menuFooter?: ReactNode
 }
 
 export type MultiSelectV2MenuRootProps = SelectV2MenuRootPropsBase & {
@@ -170,4 +171,5 @@ export type MultiSelectV2Props = Omit<
     showClearButton?: boolean
     onClearAllClick?: () => void
     multiSelectGroupPosition?: 'center' | 'left' | 'right'
+    menuFooter?: ReactNode
 }

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>
                         )}

package/lib/components/SidebarV2/SidebarV2Panel.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Block from '../Primitives/Block/Block'
 import Directory from '../Directory/Directory'
 import { normalizeDirectoryData } from '../Directory/utils'
-import type { DirectoryData } from '../Directory/types'
+import type { DirectoryData, DirectoryProps } from '../Directory/types'
 import SidebarV2Header from './SidebarV2Header'
 import SidebarV2Footer from './SidebarV2Footer'
 import type { SidebarV2StateChangeType } from './types'
@@ -55,6 +55,14 @@ export type SidebarV2PanelProps = {
     setIsHovering?: (isHovering: boolean) => void
     sidebarState?: SidebarV2StateChangeType
     tokens: SidebarV2TokensType
+    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 SidebarV2Panel = ({
@@ -76,6 +84,14 @@ const SidebarV2Panel = ({
     setIsHovering,
     sidebarState = 'expanded',
     tokens,
+    showHierarchyLines = false,
+    hierarchyLineBorderRadius = 0,
+    expandedItems,
+    defaultExpandedItems,
+    onExpandedItemsChange,
+    onItemExpand,
+    enableVirtualization = false,
+    virtualization,
 }: SidebarV2PanelProps) => {
     const trackHover = shouldTrackHover(setIsHovering)
     const directoryData = normalizeDirectoryData(data)
@@ -126,6 +142,14 @@ const SidebarV2Panel = ({
                     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/SidebarV2/types.ts

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
-import type { DirectoryData } from '../Directory/types'
+import type { DirectoryData, DirectoryProps } from '../Directory/types'
 import type { MerchantInfo } from '../Topbar/types'
 import type { TenantBadge } from '../Sidebar/types'
 
@@ -59,6 +59,14 @@ export type SidebarV2Props = {
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void
     defaultActiveItem?: string | null
+    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 {

package/lib/components/SingleSelect/SingleSelect.tsx

@@ -104,6 +104,7 @@ const SingleSelect = ({
     customValueLabel = 'Specify',
     singleSelectGroupPosition,
     allowDeselect = false,
+    menuFooter,
     ...rest
 }: SingleSelectProps) => {
     const { onFocus, onBlur, ...buttonRest } = rest
@@ -298,6 +299,7 @@ const SingleSelect = ({
                         allowCustomValue={allowCustomValue}
                         customValueLabel={customValueLabel}
                         menuId={menuId}
+                        menuFooter={menuFooter}
                         trigger={
                             customTrigger || (
                                 <PrimitiveButton
@@ -447,7 +449,8 @@ const SingleSelect = ({
                                                 textAlign="left"
                                                 paddingTop={
                                                     isSmallScreenWithLargeSize &&
-                                                    isItemSelected
+                                                    isItemSelected &&
+                                                    label
                                                         ? paddingY * 1.5
                                                         : 0
                                                 }