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

package/lib/components/Directory/directory.tokens.ts

@@ -107,6 +107,13 @@ export type DirectoryTokenType = {
                     color: CSSObject['color'] // Border line color
                     leftOffset: CSSObject['left'] // Border line left position
                 }
+                connector: {
+                    itemInset: CSSObject['marginLeft'] // Keeps item backgrounds clear of hierarchy lines
+                    itemPaddingLeft: CSSObject['paddingLeft'] // Left padding for nested items when hierarchy lines are visible
+                    elbowTop: CSSObject['top'] // Top offset for the horizontal connector elbow
+                    elbowHeight: CSSObject['height'] // Height of the connector elbow
+                    elbowWidthOffset: CSSObject['width'] // Extra width that carries the elbow closer to the child row
+                }
             }
         }
     }
@@ -195,6 +202,13 @@ export const getDirectoryTokens = (
                             color: foundationToken.colors.gray[200],
                             leftOffset: foundationToken.unit[16],
                         },
+                        connector: {
+                            itemInset: foundationToken.unit[8],
+                            itemPaddingLeft: foundationToken.unit[8],
+                            elbowTop: foundationToken.unit[5],
+                            elbowHeight: foundationToken.unit[10],
+                            elbowWidthOffset: foundationToken.unit[6],
+                        },
                     },
                 },
             },
@@ -275,6 +289,13 @@ export const getDirectoryTokens = (
                             color: foundationToken.colors.gray[200],
                             leftOffset: foundationToken.unit[16],
                         },
+                        connector: {
+                            itemInset: foundationToken.unit[8],
+                            itemPaddingLeft: foundationToken.unit[8],
+                            elbowTop: foundationToken.unit[5],
+                            elbowHeight: foundationToken.unit[10],
+                            elbowWidthOffset: foundationToken.unit[6],
+                        },
                     },
                 },
             },

package/lib/components/Directory/types.ts

@@ -1,4 +1,16 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, RefObject } from 'react'
+import type { CSSObject } from 'styled-components'
+
+export type DirectoryExpandedItems = Set<string> | string[]
+
+export type DirectoryVirtualizationConfig = {
+    viewportRef?: RefObject<HTMLElement | null>
+    rowHeight?: number
+    sectionHeight?: number
+    viewportHeight?: number
+    overscan?: number
+    threshold?: number
+}
 
 export type DirectoryProps = {
     directoryData: DirectoryData[] | null
@@ -7,6 +19,14 @@ export type DirectoryProps = {
     onActiveItemChange?: (item: string | null) => void
     defaultActiveItem?: string | null
     iconOnlyMode?: boolean
+    showHierarchyLines?: boolean
+    hierarchyLineBorderRadius?: CSSObject['borderRadius']
+    expandedItems?: DirectoryExpandedItems
+    defaultExpandedItems?: DirectoryExpandedItems
+    onExpandedItemsChange?: (items: string[]) => void
+    onItemExpand?: (item: NavbarItem, itemPath: string) => void | Promise<void>
+    enableVirtualization?: boolean
+    virtualization?: DirectoryVirtualizationConfig
 }
 
 export type DirectoryData = {
@@ -41,6 +61,8 @@ export type SectionProps = {
     ) => void
     idPrefix?: string
     iconOnlyMode?: boolean
+    showHierarchyLines?: boolean
+    hierarchyLineBorderRadius?: CSSObject['borderRadius']
 }
 
 export type NavItemProps = {
@@ -49,4 +71,24 @@ export type NavItemProps = {
     onNavigate: (direction: 'up' | 'down', currentIndex: number) => void
     itemPath?: string
     iconOnlyMode?: boolean
+    showHierarchyLines?: boolean
+    hierarchyLineBorderRadius?: CSSObject['borderRadius']
+    isLast?: boolean
+    isNested?: boolean
 }
+
+export type DirectoryFlatRow =
+    | {
+          type: 'section'
+          section: DirectoryData
+          sectionIndex: number
+      }
+    | {
+          type: 'item'
+          item: NavbarItem
+          sectionIndex: number
+          itemPath: string
+          depth: number
+          isLast: boolean
+          ancestorIsLast: boolean[]
+      }

package/lib/components/Directory/utils.ts

@@ -1,9 +1,89 @@
-import type { DirectoryData } from './types'
+import type {
+    DirectoryData,
+    DirectoryExpandedItems,
+    DirectoryFlatRow,
+    NavbarItem,
+} from './types'
 
 export const normalizeDirectoryData = (
     directoryData: DirectoryData[] | null
 ): DirectoryData[] => (Array.isArray(directoryData) ? directoryData : [])
 
+export const normalizeExpandedItems = (
+    expandedItems?: DirectoryExpandedItems
+): Set<string> =>
+    expandedItems ? new Set(Array.from(expandedItems)) : new Set<string>()
+
+const getItemPath = (parentPath: string, item: NavbarItem): string =>
+    parentPath ? `${parentPath}/${item.label}` : item.label
+
+const flattenDirectoryItems = (
+    items: NavbarItem[],
+    expandedItems: Set<string>,
+    rows: DirectoryFlatRow[],
+    sectionIndex: number,
+    parentPath = '',
+    depth = 0,
+    ancestorIsLast: boolean[] = []
+) => {
+    items.forEach((item, index) => {
+        const itemPath = getItemPath(parentPath, item)
+        const hasChildren = !!item.items?.length
+        const isLast = index === items.length - 1
+
+        rows.push({
+            type: 'item',
+            item,
+            sectionIndex,
+            itemPath,
+            depth,
+            isLast,
+            ancestorIsLast,
+        })
+
+        if (hasChildren && expandedItems.has(itemPath) && item.items) {
+            flattenDirectoryItems(
+                item.items,
+                expandedItems,
+                rows,
+                sectionIndex,
+                itemPath,
+                depth + 1,
+                [...ancestorIsLast, isLast]
+            )
+        }
+    })
+}
+
+export const flattenDirectoryData = (
+    directoryData: DirectoryData[],
+    expandedItems: Set<string>,
+    openSections: Set<number>
+): DirectoryFlatRow[] => {
+    const rows: DirectoryFlatRow[] = []
+
+    directoryData.forEach((section, sectionIndex) => {
+        if (section.label) {
+            rows.push({
+                type: 'section',
+                section,
+                sectionIndex,
+            })
+        }
+
+        if (section.items && openSections.has(sectionIndex)) {
+            flattenDirectoryItems(
+                section.items,
+                expandedItems,
+                rows,
+                sectionIndex
+            )
+        }
+    })
+
+    return rows
+}
+
 export const handleSectionNavigation = (
     direction: 'up' | 'down',
     currentIndex: number,

package/lib/components/Drawer/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use DrawerV2 instead. */
 export {
     Drawer,
     DrawerTrigger,

package/lib/components/Inputs/DropdownInput/DropdownInput.tsx

@@ -278,12 +278,16 @@ const DropdownInput = ({
                     paddingInlineStart={paddingInlineStart}
                     paddingInlineEnd={paddingInlineEnd}
                     paddingTop={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY * 1.5
                             : paddingY
                     }
                     paddingBottom={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY / 2
                             : paddingY
                     }

package/lib/components/Inputs/MultiValueInput/index.ts

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

package/lib/components/Inputs/NumberInput/NumberInput.tsx

@@ -276,12 +276,16 @@ const NumberInput = ({
                     aria-describedby={ariaDescribedBy}
                     paddingX={paddingX}
                     paddingTop={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY * 1.5
                             : paddingY
                     }
                     paddingBottom={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY / 2
                             : paddingY
                     }

package/lib/components/Inputs/NumberInput/index.ts

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

package/lib/components/Inputs/OTPInput/index.ts

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

package/lib/components/Inputs/SearchInput/index.ts

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

package/lib/components/Inputs/TextArea/TextArea.tsx

@@ -153,12 +153,14 @@ const TextArea = ({
                     resize={resize}
                     paddingX={paddingX}
                     paddingTop={
-                        isSmallScreen && inputFocusedOrWithValue
+                        label && isSmallScreen && inputFocusedOrWithValue
                             ? paddingY + 14
                             : paddingY
                     }
                     paddingBottom={
-                        isSmallScreen && inputFocusedOrWithValue ? 0 : paddingY
+                        label && isSmallScreen && inputFocusedOrWithValue
+                            ? 0
+                            : paddingY
                     }
                     border={
                         textAreaTokens.inputContainer.border[

package/lib/components/Inputs/TextArea/index.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use TextAreaV2 instead. */
 export { default as TextArea } from './TextArea'
 export * from './types'

package/lib/components/Inputs/TextInput/TextInput.tsx

@@ -319,12 +319,16 @@ const TextInput = ({
                     paddingInlineStart={paddingInlineStart}
                     paddingInlineEnd={paddingInlineEnd}
                     paddingTop={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY * 1.5
                             : paddingY
                     }
                     paddingBottom={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY / 2
                             : paddingY
                     }

package/lib/components/Inputs/TextInput/index.ts

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

package/lib/components/Inputs/UnitInput/UnitInput.tsx

@@ -282,12 +282,16 @@ const UnitInput = ({
                     paddingInlineStart={paddingInlineStart}
                     paddingInlineEnd={paddingInlineEnd}
                     paddingTop={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY * 1.5
                             : paddingY
                     }
                     paddingBottom={
-                        isSmallScreenWithLargeSize && inputFocusedOrWithValue
+                        label &&
+                        isSmallScreenWithLargeSize &&
+                        inputFocusedOrWithValue
                             ? paddingY / 2
                             : paddingY
                     }

package/lib/components/InputsV2/NumberInputV2/NumberInputV2.tsx

@@ -537,12 +537,16 @@ const NumberInputV2 = forwardRef<HTMLInputElement, NumberInputV2Props>(
                         paddingLeft={inputPaddingLeft}
                         paddingRight={inputPaddingRight}
                         paddingTop={
-                            smallScreenLarge && inputFocusedOrWithValue
+                            Boolean(label.text?.trim()) &&
+                            smallScreenLarge &&
+                            inputFocusedOrWithValue
                                 ? paddingY * 1.5
                                 : inputContainerTokens.paddingTop[size]
                         }
                         paddingBottom={
-                            smallScreenLarge && inputFocusedOrWithValue
+                            Boolean(label.text?.trim()) &&
+                            smallScreenLarge &&
+                            inputFocusedOrWithValue
                                 ? paddingY / 2
                                 : inputContainerTokens.paddingBottom[size]
                         }

package/lib/components/InputsV2/TextAreaV2/TextAreaV2.tsx

@@ -85,8 +85,9 @@ const TextAreaV2 = forwardRef<HTMLTextAreaElement, TextAreaV2Props>(
                     size,
                     isSmallScreen,
                     inputFocusedOrWithValue,
+                    hasLabel: Boolean(label),
                 }),
-            [ic, size, isSmallScreen, inputFocusedOrWithValue]
+            [ic, size, isSmallScreen, inputFocusedOrWithValue, label]
         )
 
         const {

package/lib/components/InputsV2/TextAreaV2/utils.ts

@@ -45,18 +45,20 @@ export function getTextAreaInputPadding({
     size,
     isSmallScreen,
     inputFocusedOrWithValue,
+    hasLabel,
 }: {
     inputContainer: TextAreaV2TokensType['inputContainer']
     size: InputSizeV2
     isSmallScreen: boolean
     inputFocusedOrWithValue: boolean
+    hasLabel: boolean
 }): TextAreaInputPadding {
     const paddingTopBase = toPixels(inputContainer.padding.top[size])
     const paddingBottomBase = toPixels(inputContainer.padding.bottom[size])
     const paddingLeft = toPixels(inputContainer.padding.left[size])
     const paddingRight = toPixels(inputContainer.padding.right[size])
 
-    const isFloating = isSmallScreen && inputFocusedOrWithValue
+    const isFloating = hasLabel && isSmallScreen && inputFocusedOrWithValue
     const paddingTop = isFloating
         ? paddingTopBase + paddingTopBase
         : paddingTopBase

package/lib/components/InputsV2/TextInputV2/TextInputV2.tsx

@@ -171,6 +171,7 @@ const TextInputV2 = forwardRef<HTMLInputElement, TextInputV2Props>(
         } = getVerticalInputPadding({
             isSmallScreenWithLargeSize,
             inputFocusedOrWithValue,
+            hasLabel: Boolean(label),
             paddingTop: inputContainerPaddingTop,
             paddingBottom: inputContainerPaddingBottom,
         })

package/lib/components/InputsV2/TextInputV2/utils.ts

@@ -22,23 +22,21 @@ export const getInputState = (
 export const getVerticalInputPadding = ({
     isSmallScreenWithLargeSize,
     inputFocusedOrWithValue,
+    hasLabel,
     paddingTop,
     paddingBottom,
 }: {
     isSmallScreenWithLargeSize: boolean
     inputFocusedOrWithValue: boolean
+    hasLabel: boolean
     paddingTop: number
     paddingBottom: number
 }) => {
-    const top =
-        isSmallScreenWithLargeSize && inputFocusedOrWithValue
-            ? paddingTop * 1.5
-            : paddingTop
+    const shouldFloat =
+        hasLabel && isSmallScreenWithLargeSize && inputFocusedOrWithValue
 
-    const bottom =
-        isSmallScreenWithLargeSize && inputFocusedOrWithValue
-            ? paddingBottom / 2
-            : paddingBottom
+    const top = shouldFloat ? paddingTop * 1.5 : paddingTop
+    const bottom = shouldFloat ? paddingBottom / 2 : paddingBottom
 
     return { top, bottom }
 }