npm - @juspay/blend-design-system - Versions diffs - 0.0.37-beta.7 → 0.0.37 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (290) hide show

package/lib/components/SingleSelect/SingleSelectMenu.tsx CHANGED Viewed

@@ -77,6 +77,7 @@ type SingleSelectMenuProps = {
     allowCustomValue?: boolean
     customValueLabel?: string
     menuId?: string
+    menuFooter?: React.ReactNode
 }
 type FlattenedItem = {
@@ -128,16 +129,32 @@ const Content = styled(RadixMenu.Content)`
     border-radius: 8px;
     box-shadow: ${FOUNDATION_THEME.shadows.sm};
     z-index: 101;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    &[data-state='closed'] {
+        pointer-events: none;
+    }
+    ${dropdownContentAnimations}
+`
+const ScrollableContent = styled(Block)`
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;
     scrollbar-color: transparent transparent;
+    flex-grow: 1;
+    min-height: 0;
-    &[data-state='closed'] {
-        pointer-events: none;
+    &::-webkit-scrollbar {
+        display: none;
     }
+`
-    ${dropdownContentAnimations}
+const MenuFooter = styled(Block)`
+    flex-shrink: 0;
 `
 const StyledSubMenu = styled(RadixMenu.Sub)(() => ({
@@ -382,6 +399,7 @@ const SingleSelectMenu = ({
     },
     allowCustomValue = false,
     customValueLabel = 'Specify',
+    menuFooter,
 }: SingleSelectMenuProps) => {
     const singleSelectTokens =
         useResponsiveTokens<SingleSelectTokensType>('SINGLE_SELECT')
@@ -622,6 +640,7 @@ const SingleSelectMenu = ({
                                     left={0}
                                     right={0}
                                     zIndex={50}
+                                    flexShrink={0}
                                     backgroundColor={
                                         FOUNDATION_THEME.colors.gray[0]
                                     }
@@ -670,155 +689,169 @@ const SingleSelectMenu = ({
                                     />
                                 </Block>
                             )}
-                            {items.length === 0 ||
-                            (filteredItems.length === 0 &&
-                                searchText.length > 0) ? (
-                                <Block
-                                    display="flex"
-                                    justifyContent="center"
-                                    alignItems="center"
-                                    padding={
-                                        singleSelectTokens.menu.item.padding
-                                    }
-                                >
-                                    <Text
-                                        variant="body.md"
-                                        color={
-                                            singleSelectTokens.menu.item
-                                                .optionsLabel.color.default
+                            <ScrollableContent>
+                                {items.length === 0 ||
+                                (filteredItems.length === 0 &&
+                                    searchText.length > 0) ? (
+                                    <Block
+                                        display="flex"
+                                        justifyContent="center"
+                                        alignItems="center"
+                                        padding={
+                                            singleSelectTokens.menu.item.padding
                                         }
-                                        textAlign="center"
                                     >
-                                        {items.length === 0
-                                            ? 'No items available'
-                                            : 'No results found'}
-                                    </Text>
-                                </Block>
-                            ) : enableVirtualization &&
-                              filteredItems.length > 0 ? (
-                                <Block
-                                    data-element="virtual-list"
-                                    padding={FOUNDATION_THEME.unit[6]}
-                                >
-                                    <VirtualList
-                                        items={flattenedItems}
-                                        renderItem={renderVirtualItem}
-                                        height={maxMenuHeight - 60}
-                                        itemHeight={virtualListItemHeight}
-                                        overscan={virtualListOverscan}
-                                        onEndReached={onEndReached}
-                                        endReachedThreshold={
-                                            endReachedThreshold
+                                        <Text
+                                            variant="body.md"
+                                            color={
+                                                singleSelectTokens.menu.item
+                                                    .optionsLabel.color.default
+                                            }
+                                            textAlign="center"
+                                        >
+                                            {items.length === 0
+                                                ? 'No items available'
+                                                : 'No results found'}
+                                        </Text>
+                                    </Block>
+                                ) : enableVirtualization &&
+                                  filteredItems.length > 0 ? (
+                                    <Block
+                                        data-element="virtual-list"
+                                        padding={FOUNDATION_THEME.unit[6]}
+                                    >
+                                        <VirtualList
+                                            items={flattenedItems}
+                                            renderItem={renderVirtualItem}
+                                            height={maxMenuHeight - 60}
+                                            itemHeight={virtualListItemHeight}
+                                            overscan={virtualListOverscan}
+                                            onEndReached={onEndReached}
+                                            endReachedThreshold={
+                                                endReachedThreshold
+                                            }
+                                            hasMore={hasMore}
+                                            isLoading={false}
+                                        />
+                                    </Block>
+                                ) : (
+                                    <Block
+                                        data-element="menu-content"
+                                        paddingX={
+                                            singleSelectTokens.menu.padding[
+                                                size
+                                            ][variant].x
                                         }
-                                        hasMore={hasMore}
-                                        isLoading={false}
-                                    />
-                                </Block>
-                            ) : (
-                                <Block
-                                    data-element="menu-content"
-                                    paddingX={
-                                        singleSelectTokens.menu.padding[size][
-                                            variant
-                                        ].x
-                                    }
-                                    paddingY={
-                                        singleSelectTokens.menu.padding[size][
-                                            variant
-                                        ].y
-                                    }
-                                    style={{
-                                        paddingTop: enableSearch
-                                            ? 0
-                                            : FOUNDATION_THEME.unit[6],
-                                    }}
-                                >
-                                    {filteredItems.map((group, groupId) => (
-                                        <React.Fragment key={groupId}>
-                                            {group.groupLabel && (
-                                                <Label data-element="menu-group-label">
-                                                    <Text
-                                                        fontSize={
-                                                            singleSelectTokens
-                                                                .menu.item
-                                                                .optionsLabel
-                                                                .fontSize
-                                                        }
-                                                        color={
-                                                            singleSelectTokens
-                                                                .menu.item
-                                                                .optionsLabel
-                                                                .color.default
-                                                        }
-                                                        fontWeight={
-                                                            singleSelectTokens
-                                                                .menu.item
-                                                                .optionsLabel
-                                                                .fontWeight
-                                                        }
-                                                    >
-                                                        {group.groupLabel}
-                                                    </Text>
-                                                </Label>
-                                            )}
-                                            {group.items.map(
-                                                (item, itemIndex) => {
-                                                    let itemIdx = 0
-                                                    for (
-                                                        let i = 0;
-                                                        i < groupId;
-                                                        i++
-                                                    ) {
-                                                        itemIdx +=
-                                                            filteredItems[i]
-                                                                .items.length
-                                                    }
-                                                    itemIdx += itemIndex
-                                                    return (
-                                                        <Item
-                                                            key={`${groupId}-${itemIndex}`}
-                                                            selected={selected}
-                                                            item={item}
-                                                            onSelect={onSelect}
-                                                            singleSelectTokens={
-                                                                singleSelectTokens
-                                                            }
-                                                            index={itemIdx}
-                                                        />
-                                                    )
-                                                }
-                                            )}
-                                            {groupId !==
-                                                filteredItems.length - 1 &&
-                                                group.showSeparator && (
-                                                    <RadixMenu.Separator
-                                                        asChild
-                                                    >
-                                                        <Block
-                                                            height={
+                                        paddingY={
+                                            singleSelectTokens.menu.padding[
+                                                size
+                                            ][variant].y
+                                        }
+                                        style={{
+                                            paddingTop: enableSearch
+                                                ? 0
+                                                : FOUNDATION_THEME.unit[6],
+                                        }}
+                                    >
+                                        {filteredItems.map((group, groupId) => (
+                                            <React.Fragment key={groupId}>
+                                                {group.groupLabel && (
+                                                    <Label data-element="menu-group-label">
+                                                        <Text
+                                                            fontSize={
                                                                 singleSelectTokens
                                                                     .menu.item
-                                                                    .seperator
-                                                                    .height
+                                                                    .optionsLabel
+                                                                    .fontSize
                                                             }
-                                                            backgroundColor={
+                                                            color={
                                                                 singleSelectTokens
                                                                     .menu.item
-                                                                    .seperator
+                                                                    .optionsLabel
                                                                     .color
+                                                                    .default
                                                             }
-                                                            margin={
+                                                            fontWeight={
                                                                 singleSelectTokens
                                                                     .menu.item
-                                                                    .seperator
-                                                                    .margin
+                                                                    .optionsLabel
+                                                                    .fontWeight
                                                             }
-                                                        />
-                                                    </RadixMenu.Separator>
+                                                        >
+                                                            {group.groupLabel}
+                                                        </Text>
+                                                    </Label>
                                                 )}
-                                        </React.Fragment>
-                                    ))}
-                                </Block>
+                                                {group.items.map(
+                                                    (item, itemIndex) => {
+                                                        let itemIdx = 0
+                                                        for (
+                                                            let i = 0;
+                                                            i < groupId;
+                                                            i++
+                                                        ) {
+                                                            itemIdx +=
+                                                                filteredItems[i]
+                                                                    .items
+                                                                    .length
+                                                        }
+                                                        itemIdx += itemIndex
+                                                        return (
+                                                            <Item
+                                                                key={`${groupId}-${itemIndex}`}
+                                                                selected={
+                                                                    selected
+                                                                }
+                                                                item={item}
+                                                                onSelect={
+                                                                    onSelect
+                                                                }
+                                                                singleSelectTokens={
+                                                                    singleSelectTokens
+                                                                }
+                                                                index={itemIdx}
+                                                            />
+                                                        )
+                                                    }
+                                                )}
+                                                {groupId !==
+                                                    filteredItems.length - 1 &&
+                                                    group.showSeparator && (
+                                                        <RadixMenu.Separator
+                                                            asChild
+                                                        >
+                                                            <Block
+                                                                height={
+                                                                    singleSelectTokens
+                                                                        .menu
+                                                                        .item
+                                                                        .seperator
+                                                                        .height
+                                                                }
+                                                                backgroundColor={
+                                                                    singleSelectTokens
+                                                                        .menu
+                                                                        .item
+                                                                        .seperator
+                                                                        .color
+                                                                }
+                                                                margin={
+                                                                    singleSelectTokens
+                                                                        .menu
+                                                                        .item
+                                                                        .seperator
+                                                                        .margin
+                                                                }
+                                                            />
+                                                        </RadixMenu.Separator>
+                                                    )}
+                                            </React.Fragment>
+                                        ))}
+                                    </Block>
+                                )}
+                            </ScrollableContent>
+                            {menuFooter && (
+                                <MenuFooter>{menuFooter}</MenuFooter>
                             )}
                         </>
                     )}

package/lib/components/SingleSelect/SingleSelectTrigger.tsx CHANGED Viewed

@@ -130,7 +130,9 @@ const SingleSelectTrigger = ({
                             as="span"
                             textAlign="left"
                             paddingTop={
-                                isSmallScreenWithLargeSize && isItemSelected
+                                isSmallScreenWithLargeSize &&
+                                isItemSelected &&
+                                label
                                     ? paddingY * 1.5
                                     : 0
                             }

package/lib/components/SingleSelect/index.ts CHANGED Viewed

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

package/lib/components/SingleSelect/types.ts CHANGED Viewed

@@ -138,4 +138,5 @@ export type SingleSelectProps = {
     singleSelectGroupPosition?: 'center' | 'left' | 'right'
     allowDeselect?: boolean
+    menuFooter?: React.ReactNode
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onSelect'>

package/lib/components/SingleSelectV2/SingleSelectV2.tsx CHANGED Viewed

@@ -64,6 +64,7 @@ const SingleSelectV2 = ({
     allowCustomValue = false,
     customValueLabel = 'Specify',
     singleSelectGroupPosition,
+    menuFooter,
     ...rest
 }: SingleSelectV2Props) => {
     const { disabled, name, ...buttonRest } = rest as {
@@ -248,6 +249,7 @@ const SingleSelectV2 = ({
                         allowCustomValue={allowCustomValue}
                         customValueLabel={customValueLabel}
                         menuId={menuId}
+                        menuFooter={menuFooter}
                         size={size}
                         variant={variant}
                         trigger={

package/lib/components/SingleSelectV2/SingleSelectV2Menu.tsx CHANGED Viewed

@@ -41,16 +41,32 @@ import {
 const Content = styled(RadixMenu.Content)`
     position: relative;
     z-index: ${SELECT_V2_MENU_Z_INDEX};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    &[data-state='closed'] {
+        pointer-events: none;
+    }
+    ${menuContentAnimations}
+`
+const ScrollableContent = styled(Block)`
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;
     scrollbar-color: transparent transparent;
+    flex-grow: 1;
+    min-height: 0;
-    &[data-state='closed'] {
-        pointer-events: none;
+    &::-webkit-scrollbar {
+        display: none;
     }
+`
-    ${menuContentAnimations}
+const MenuFooter = styled(Block)`
+    flex-shrink: 0;
 `
 const SingleSelectV2Menu = ({
@@ -78,6 +94,7 @@ const SingleSelectV2Menu = ({
     allowCustomValue = false,
     customValueLabel = 'Specify',
     menuId,
+    menuFooter,
 }: SingleSelectV2MenuProps) => {
     const singleSelectTokens =
         useResponsiveTokens<SingleSelectV2TokensType>('SINGLE_SELECT_V2')
@@ -286,63 +303,72 @@ const SingleSelectV2Menu = ({
                                 containerRef={searchContainerRef}
                             />
-                            {showEmptyState ? (
-                                <Block
-                                    display="flex"
-                                    justifyContent="center"
-                                    alignItems="center"
-                                    style={{
-                                        paddingTop: menuItem.paddingTop,
-                                        paddingRight: menuItem.paddingRight,
-                                        paddingBottom: menuItem.paddingBottom,
-                                        paddingLeft: menuItem.paddingLeft,
-                                    }}
-                                >
-                                    <Text
-                                        variant="body.md"
-                                        fontSize={
-                                            menuItem.groupLabelText.fontSize
-                                        }
-                                        fontWeight={
-                                            menuItem.groupLabelText.fontWeight
+                            <ScrollableContent>
+                                {showEmptyState ? (
+                                    <Block
+                                        display="flex"
+                                        justifyContent="center"
+                                        alignItems="center"
+                                        style={{
+                                            paddingTop: menuItem.paddingTop,
+                                            paddingRight: menuItem.paddingRight,
+                                            paddingBottom:
+                                                menuItem.paddingBottom,
+                                            paddingLeft: menuItem.paddingLeft,
+                                        }}
+                                    >
+                                        <Text
+                                            variant="body.md"
+                                            fontSize={
+                                                menuItem.groupLabelText.fontSize
+                                            }
+                                            fontWeight={
+                                                menuItem.groupLabelText
+                                                    .fontWeight
+                                            }
+                                            color={
+                                                menuItem.groupLabelText.color
+                                                    .default
+                                            }
+                                            textAlign="center"
+                                        >
+                                            {emptyMessage}
+                                        </Text>
+                                    </Block>
+                                ) : showVirtualList ? (
+                                    <SingleSelectV2VirtualList
+                                        flattenedItems={flattenedItems}
+                                        selected={selected}
+                                        onSelect={onSelect}
+                                        singleSelectTokens={singleSelectTokens}
+                                        size={size}
+                                        variant={variant}
+                                        virtualViewportHeight={
+                                            adjustedVirtualViewportHeight
                                         }
-                                        color={
-                                            menuItem.groupLabelText.color
-                                                .default
+                                        virtualItems={virtualItems}
+                                        totalSize={virtualizer.getTotalSize()}
+                                        measureElement={
+                                            virtualizer.measureElement
                                         }
-                                        textAlign="center"
-                                    >
-                                        {emptyMessage}
-                                    </Text>
-                                </Block>
-                            ) : showVirtualList ? (
-                                <SingleSelectV2VirtualList
-                                    flattenedItems={flattenedItems}
-                                    selected={selected}
-                                    onSelect={onSelect}
-                                    singleSelectTokens={singleSelectTokens}
-                                    size={size}
-                                    variant={variant}
-                                    virtualViewportHeight={
-                                        adjustedVirtualViewportHeight
-                                    }
-                                    virtualItems={virtualItems}
-                                    totalSize={virtualizer.getTotalSize()}
-                                    measureElement={virtualizer.measureElement}
-                                    loadingComponent={loadingComponent}
-                                    hasMore={hasMore}
-                                    virtualScrollRef={virtualScrollRef}
-                                />
-                            ) : (
-                                <SingleSelectV2List
-                                    filteredItems={filteredItems}
-                                    selected={selected}
-                                    onSelect={onSelect}
-                                    singleSelectTokens={singleSelectTokens}
-                                    size={size}
-                                    variant={variant}
-                                    enableSearch={enableSearch}
-                                />
+                                        loadingComponent={loadingComponent}
+                                        hasMore={hasMore}
+                                        virtualScrollRef={virtualScrollRef}
+                                    />
+                                ) : (
+                                    <SingleSelectV2List
+                                        filteredItems={filteredItems}
+                                        selected={selected}
+                                        onSelect={onSelect}
+                                        singleSelectTokens={singleSelectTokens}
+                                        size={size}
+                                        variant={variant}
+                                        enableSearch={enableSearch}
+                                    />
+                                )}
+                            </ScrollableContent>
+                            {menuFooter && (
+                                <MenuFooter>{menuFooter}</MenuFooter>
                             )}
                         </>
                     )}

package/lib/components/SingleSelectV2/SingleSelectV2Search.tsx CHANGED Viewed

@@ -23,6 +23,7 @@ const SingleSelectV2Search = ({
             right={0}
             zIndex={50}
             backgroundColor={backgroundColor}
+            flexShrink={0}
         >
             <SearchInput
                 ref={searchInputRef}

package/lib/components/SingleSelectV2/SingleSelectV2Trigger.tsx CHANGED Viewed

@@ -197,7 +197,9 @@ const SingleSelectV2Trigger = ({
                         as="span"
                         textAlign="left"
                         paddingTop={
-                            isSmallScreenWithLargeSize && isItemSelected
+                            isSmallScreenWithLargeSize &&
+                            isItemSelected &&
+                            label
                                 ? paddingTop * 1.5
                                 : 0
                         }

package/lib/components/SingleSelectV2/singleSelectV2.dark.tokens.ts CHANGED Viewed

@@ -349,6 +349,14 @@ export const getSingleSelectV2DarkTokens = (
                 },
                 iconColor: foundationToken.colors.gray[500],
             },
+            footer: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                backgroundColor: foundationToken.colors.gray[800],
+                borderTop: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[700]}`,
+            },
         },
         mobilePanel: {

package/lib/components/SingleSelectV2/singleSelectV2.light.tokens.ts CHANGED Viewed

@@ -349,6 +349,14 @@ export const getSingleSelectV2LightTokens = (
                 },
                 iconColor: foundationToken.colors.gray[400],
             },
+            footer: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                backgroundColor: foundationToken.colors.gray[0],
+                borderTop: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+            },
         },
         mobilePanel: {

package/lib/components/SingleSelectV2/singleSelectV2.tokens.types.ts CHANGED Viewed

@@ -167,6 +167,14 @@ export type SingleSelectV2TokensType = {
             }
             iconColor: CSSObject['color']
         }
+        footer: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            backgroundColor: CSSObject['backgroundColor']
+            borderTop: CSSObject['borderTop']
+        }
     }
     mobilePanel: {