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

package/lib/components/Directory/NavItem.tsx

@@ -25,13 +25,21 @@ const StyledElement = styled(Block)<{
     $isActive?: boolean
     $tokens: DirectoryTokenType
     $iconOnlyMode?: boolean
+    $hasHierarchyLineInset?: boolean
 }>`
     background-color: ${({ $isActive, $tokens }) =>
         $isActive
             ? $tokens.section.itemList.item.backgroundColor.active
             : $tokens.section.itemList.item.backgroundColor.default};
     border: none;
-    width: 100%;
+    width: ${({ $hasHierarchyLineInset, $tokens }) =>
+        $hasHierarchyLineInset
+            ? `calc(100% - ${$tokens.section.itemList.nested.connector.itemInset})`
+            : '100%'};
+    margin-left: ${({ $hasHierarchyLineInset, $tokens }) =>
+        $hasHierarchyLineInset
+            ? $tokens.section.itemList.nested.connector.itemInset
+            : 0};
     min-width: 0;
     flex-shrink: 0;
     display: flex;
@@ -40,10 +48,15 @@ const StyledElement = styled(Block)<{
         $iconOnlyMode ? 'center' : 'flex-start'};
     gap: ${({ $tokens, $iconOnlyMode }) =>
         $iconOnlyMode ? '0' : $tokens.section.itemList.item.gap};
-    padding: ${({ $tokens, $iconOnlyMode }) =>
+    padding: ${({ $tokens, $iconOnlyMode, $hasHierarchyLineInset }) =>
         $iconOnlyMode
             ? `${$tokens.section.itemList.item.iconOnlyPadding.paddingTop} ${$tokens.section.itemList.item.iconOnlyPadding.paddingRight} ${$tokens.section.itemList.item.iconOnlyPadding.paddingBottom} ${$tokens.section.itemList.item.iconOnlyPadding.paddingLeft}`
-            : `${$tokens.section.itemList.item.padding.y} ${$tokens.section.itemList.item.padding.x}`};
+            : `${$tokens.section.itemList.item.padding.y} ${$tokens.section.itemList.item.padding.x} ${$tokens.section.itemList.item.padding.y} ${
+                  $hasHierarchyLineInset
+                      ? $tokens.section.itemList.nested.connector
+                            .itemPaddingLeft
+                      : $tokens.section.itemList.item.padding.x
+              }`};
     color: ${({ $isActive, $tokens }) =>
         $isActive
             ? $tokens.section.itemList.item.color.active
@@ -116,26 +129,78 @@ const ChevronWrapper = styled(Block)<{
     }
 `
 
-const NestedList = styled(Block)<{ $tokens: DirectoryTokenType }>`
+const NestedList = styled(Block)<{
+    $tokens: DirectoryTokenType
+    $showHierarchyLines?: boolean
+}>`
     width: 100%;
     padding-left: ${({ $tokens }) =>
         $tokens.section.itemList.nested.paddingLeft};
-    margin-top: ${({ $tokens }) => $tokens.section.itemList.nested.marginTop};
+    margin-top: ${({ $tokens, $showHierarchyLines }) =>
+        $showHierarchyLines ? '0' : $tokens.section.itemList.nested.marginTop};
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: ${({ $tokens }) => $tokens.section.itemList.gap};
-
-    & > div:first-child {
-        position: absolute;
-        left: ${({ $tokens }) =>
-            $tokens.section.itemList.nested.border.leftOffset};
-        top: 0;
-        height: 100%;
-        width: ${({ $tokens }) => $tokens.section.itemList.nested.border.width};
-        background-color: ${({ $tokens }) =>
-            $tokens.section.itemList.nested.border.color};
-    }
+    gap: ${({ $tokens, $showHierarchyLines }) =>
+        $showHierarchyLines ? 0 : $tokens.section.itemList.gap};
+`
+
+const NavListItem = styled.li<{
+    $showHierarchyLines?: boolean
+    $isLast?: boolean
+    $tokens: DirectoryTokenType
+    $hierarchyLineBorderRadius: React.CSSProperties['borderRadius']
+}>`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+
+    ${({ $showHierarchyLines, $isLast, $tokens, $hierarchyLineBorderRadius }) =>
+        $showHierarchyLines &&
+        `
+            --directory-connector-elbow-top: ${$tokens.section.itemList.nested.connector.elbowTop};
+
+            padding-bottom: ${$isLast ? '0' : $tokens.section.itemList.gap};
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                pointer-events: none;
+                border-color: ${$tokens.section.itemList.nested.border.color};
+            }
+
+            &::before {
+                left: calc(-1 * ${$tokens.section.itemList.nested.paddingLeft} + ${$tokens.section.itemList.nested.border.leftOffset});
+                top: calc(-1 * ${$tokens.section.itemList.gap});
+                bottom: ${$isLast ? 'calc(100% - var(--directory-connector-elbow-top))' : `calc(-1 * ${$tokens.section.itemList.gap})`};
+                border-left: ${$tokens.section.itemList.nested.border.width} solid ${$tokens.section.itemList.nested.border.color};
+            }
+
+            &::after {
+                left: calc(-1 * ${$tokens.section.itemList.nested.paddingLeft} + ${$tokens.section.itemList.nested.border.leftOffset});
+                top: var(--directory-connector-elbow-top);
+                width: calc(${$tokens.section.itemList.nested.paddingLeft} - ${$tokens.section.itemList.nested.border.leftOffset} + ${$tokens.section.itemList.nested.connector.elbowWidthOffset});
+                height: ${$tokens.section.itemList.nested.connector.elbowHeight};
+                border-left: ${$tokens.section.itemList.nested.border.width} solid ${$tokens.section.itemList.nested.border.color};
+                border-bottom: ${$tokens.section.itemList.nested.border.width} solid ${$tokens.section.itemList.nested.border.color};
+                border-bottom-left-radius: ${addPxToValue($hierarchyLineBorderRadius)};
+            }
+        `}
+`
+
+const NavItemContentFrame = styled.div<{
+    $showHierarchyLines?: boolean
+}>`
+    position: relative;
+    z-index: ${({ $showHierarchyLines }) => ($showHierarchyLines ? 1 : 'auto')};
+`
+
+const NestedListFrame = styled.div`
+    position: relative;
 `
 
 type ActiveItemContextValue = {
@@ -223,6 +288,10 @@ const NavItem = ({
     onNavigate,
     itemPath = item.label,
     iconOnlyMode = false,
+    showHierarchyLines = false,
+    hierarchyLineBorderRadius = 0,
+    isLast = false,
+    isNested = false,
 }: NavItemProps) => {
     const tokens = useResponsiveTokens<DirectoryTokenType>('DIRECTORY')
     const [isExpanded, setIsExpanded] = React.useState(false)
@@ -402,6 +471,7 @@ const NavItem = ({
             $isActive={isActive}
             $tokens={tokens}
             $iconOnlyMode={iconOnlyMode}
+            $hasHierarchyLineInset={showHierarchyLines && isNested}
             {...elementProps}
             ref={refCallback}
             onClick={handleClick}
@@ -436,82 +506,103 @@ const NavItem = ({
     )
 
     return (
-        <li
-            style={{
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'flex-start',
-                alignItems: 'stretch',
-                position: 'relative',
-            }}
+        <NavListItem
+            $showHierarchyLines={showHierarchyLines && isNested}
+            $isLast={isLast}
+            $tokens={tokens}
+            $hierarchyLineBorderRadius={hierarchyLineBorderRadius}
+            data-directory-hierarchy-item={
+                showHierarchyLines && isNested ? 'true' : undefined
+            }
         >
-            {iconOnlyMode && item.leftSlot ? (
-                <TooltipV2 content={item.label} side={TooltipV2Side.RIGHT}>
-                    {itemElement}
-                </TooltipV2>
-            ) : (
-                itemElement
-            )}
+            <NavItemContentFrame $showHierarchyLines={showHierarchyLines}>
+                {iconOnlyMode && item.leftSlot ? (
+                    <TooltipV2 content={item.label} side={TooltipV2Side.RIGHT}>
+                        {itemElement}
+                    </TooltipV2>
+                ) : (
+                    itemElement
+                )}
+            </NavItemContentFrame>
 
             {hasChildren && isExpanded && !iconOnlyMode && (
-                <NestedList
-                    ref={nestedListRef}
-                    as="ul"
-                    $tokens={tokens}
-                    role="list"
-                    aria-label={`${item.label} submenu`}
-                >
-                    {item.items &&
-                        item.items.map((childItem, childIdx) => (
-                            <NavItem
-                                key={childIdx}
-                                item={childItem}
-                                index={childIdx}
-                                itemPath={`${itemPath}/${childItem.label}`}
-                                iconOnlyMode={iconOnlyMode}
-                                onNavigate={(direction, currentIndex) => {
-                                    if (
-                                        direction === 'up' &&
-                                        currentIndex === 0
-                                    ) {
-                                        itemRef.current?.focus()
-                                    } else if (
-                                        direction === 'down' &&
-                                        currentIndex ===
-                                            (item.items?.length || 0) - 1
-                                    ) {
-                                        onNavigate('down', index)
-                                    } else {
-                                        const nextIndex =
-                                            direction === 'up'
-                                                ? Math.max(0, currentIndex - 1)
-                                                : Math.min(
-                                                      (item.items?.length ||
-                                                          0) - 1,
-                                                      currentIndex + 1
-                                                  )
-                                        const nestedItems =
-                                            itemRef.current?.parentElement
-                                                ?.querySelector('ul')
-                                                ?.querySelectorAll('button, a')
+                <NestedListFrame>
+                    <NestedList
+                        ref={nestedListRef}
+                        as="ul"
+                        $tokens={tokens}
+                        $showHierarchyLines={showHierarchyLines}
+                        role="list"
+                        aria-label={`${item.label} submenu`}
+                        data-directory-hierarchy-line={
+                            showHierarchyLines ? 'true' : undefined
+                        }
+                    >
+                        {item.items &&
+                            item.items.map((childItem, childIdx) => (
+                                <NavItem
+                                    key={childIdx}
+                                    item={childItem}
+                                    index={childIdx}
+                                    itemPath={`${itemPath}/${childItem.label}`}
+                                    iconOnlyMode={iconOnlyMode}
+                                    showHierarchyLines={showHierarchyLines}
+                                    hierarchyLineBorderRadius={
+                                        hierarchyLineBorderRadius
+                                    }
+                                    isLast={
+                                        childIdx ===
+                                        (item.items?.length || 0) - 1
+                                    }
+                                    isNested
+                                    onNavigate={(direction, currentIndex) => {
                                         if (
-                                            nestedItems &&
-                                            nestedItems[nextIndex]
+                                            direction === 'up' &&
+                                            currentIndex === 0
                                         ) {
-                                            ;(
-                                                nestedItems[
-                                                    nextIndex
-                                                ] as HTMLElement
-                                            ).focus()
+                                            itemRef.current?.focus()
+                                        } else if (
+                                            direction === 'down' &&
+                                            currentIndex ===
+                                                (item.items?.length || 0) - 1
+                                        ) {
+                                            onNavigate('down', index)
+                                        } else {
+                                            const nextIndex =
+                                                direction === 'up'
+                                                    ? Math.max(
+                                                          0,
+                                                          currentIndex - 1
+                                                      )
+                                                    : Math.min(
+                                                          (item.items?.length ||
+                                                              0) - 1,
+                                                          currentIndex + 1
+                                                      )
+                                            const nestedItems =
+                                                itemRef.current?.parentElement
+                                                    ?.querySelector('ul')
+                                                    ?.querySelectorAll(
+                                                        'button, a'
+                                                    )
+                                            if (
+                                                nestedItems &&
+                                                nestedItems[nextIndex]
+                                            ) {
+                                                ;(
+                                                    nestedItems[
+                                                        nextIndex
+                                                    ] as HTMLElement
+                                                ).focus()
+                                            }
                                         }
-                                    }
-                                }}
-                            />
-                        ))}
-                </NestedList>
+                                    }}
+                                />
+                            ))}
+                    </NestedList>
+                </NestedListFrame>
             )}
-        </li>
+        </NavListItem>
     )
 }
 

package/lib/components/Directory/Section.tsx

@@ -55,6 +55,8 @@ const Section = ({
     onNavigateBetweenSections,
     idPrefix,
     iconOnlyMode = false,
+    showHierarchyLines = false,
+    hierarchyLineBorderRadius = 0,
 }: SectionProps) => {
     const tokens = useResponsiveTokens<DirectoryTokenType>('DIRECTORY')
     const sectionStateContext = useSectionState()
@@ -259,6 +261,13 @@ const Section = ({
                             index={itemIdx}
                             itemPath={item.label}
                             iconOnlyMode={iconOnlyMode}
+                            showHierarchyLines={showHierarchyLines}
+                            hierarchyLineBorderRadius={
+                                hierarchyLineBorderRadius
+                            }
+                            isLast={
+                                itemIdx === (section.items?.length || 0) - 1
+                            }
                             onNavigate={handleItemNavigation}
                         />
                     ))}