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

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 (92) hide show
  1. package/dist/components/CodeEditor/types.d.ts +22 -2
  2. package/dist/components/CodeEditorV2/CodeEditorV2.d.ts +1 -1
  3. package/dist/components/CodeEditorV2/codeEditorV2.types.d.ts +23 -2
  4. package/dist/components/DataTable/TableBody/types.d.ts +1 -0
  5. package/dist/components/DataTable/TableCell/types.d.ts +1 -0
  6. package/dist/components/DataTable/columnTypes.d.ts +5 -3
  7. package/dist/components/DataTable/dataTable.tokens.d.ts +4 -0
  8. package/dist/components/DataTable/types.d.ts +20 -2
  9. package/dist/components/DataTable/utils.d.ts +4 -3
  10. package/dist/components/MenuV2/MenuV2Content.d.ts +1 -0
  11. package/dist/components/MenuV2/menuV2.types.d.ts +5 -0
  12. package/dist/components/MenuV2/menuV2.utils.d.ts +10 -2
  13. package/dist/components/MultiSelect/MultiSelect.d.ts +1 -1
  14. package/dist/components/MultiSelect/MultiSelectMenu.d.ts +1 -1
  15. package/dist/components/MultiSelect/types.d.ts +2 -0
  16. package/dist/components/MultiSelectV2/MultiSelectV2.d.ts +1 -1
  17. package/dist/components/MultiSelectV2/MultiSelectV2Menu.d.ts +1 -1
  18. package/dist/components/MultiSelectV2/multiSelectV2.types.d.ts +2 -0
  19. package/dist/components/SingleSelect/SingleSelect.d.ts +1 -1
  20. package/dist/components/SingleSelect/SingleSelectMenu.d.ts +2 -1
  21. package/dist/components/SingleSelect/types.d.ts +1 -0
  22. package/dist/components/SingleSelectV2/SingleSelectV2.d.ts +1 -1
  23. package/dist/components/SingleSelectV2/SingleSelectV2Menu.d.ts +1 -1
  24. package/dist/components/SingleSelectV2/singleSelectV2.tokens.types.d.ts +8 -0
  25. package/dist/components/SingleSelectV2/singleSelectV2.types.d.ts +2 -0
  26. package/dist/components/Skeleton/hooks/useSkeletonBase.d.ts +7 -11
  27. package/dist/components/Snackbar/Snackbar.d.ts +1 -1
  28. package/dist/components/Snackbar/snackbar.tokens.d.ts +1 -0
  29. package/dist/components/Snackbar/types.d.ts +2 -0
  30. package/dist/components/StatCardV2/StatCardV2.d.ts +1 -0
  31. package/dist/components/StatCardV2/StatCardV2NoData.d.ts +2 -2
  32. package/dist/components/StatCardV2/statcardV2.types.d.ts +1 -0
  33. package/dist/components/TabsV2/tabsV2.tokens.types.d.ts +3 -0
  34. package/dist/global-utils/GlobalUtils.d.ts +2 -1
  35. package/dist/main.js +27446 -27271
  36. package/dist/{node-CJ_Tft0g.js → node-CovJEwot.js} +65 -25
  37. package/dist/node.js +1 -1
  38. package/dist/{tokens.js → token-engine.js} +1 -1
  39. package/lib/components/Card/Card.tsx +1 -0
  40. package/lib/components/Charts/ChartHeader.tsx +4 -1
  41. package/lib/components/CodeBlock/CodeBlock.tsx +8 -4
  42. package/lib/components/CodeEditor/MonacoEditorWrapper.tsx +6 -2
  43. package/lib/components/CodeEditor/types.ts +52 -2
  44. package/lib/components/CodeEditorV2/MonacoEditor/MonacoEditorWrapper.tsx +6 -2
  45. package/lib/components/CodeEditorV2/codeEditorV2.types.ts +44 -5
  46. package/lib/components/DataTable/DataTable.tsx +2 -0
  47. package/lib/components/DataTable/TableBody/index.tsx +2 -0
  48. package/lib/components/DataTable/TableBody/types.ts +1 -0
  49. package/lib/components/DataTable/TableCell/index.tsx +45 -20
  50. package/lib/components/DataTable/TableCell/types.ts +1 -0
  51. package/lib/components/DataTable/columnTypes.ts +5 -3
  52. package/lib/components/DataTable/dataTable.tokens.ts +15 -0
  53. package/lib/components/DataTable/types.ts +33 -2
  54. package/lib/components/DataTable/utils.ts +91 -5
  55. package/lib/components/DateRangePicker/CalendarGrid.tsx +3 -0
  56. package/lib/components/DateRangePicker/DateRangePicker.tsx +5 -1
  57. package/lib/components/MenuV2/MenuV2.tsx +9 -2
  58. package/lib/components/MenuV2/MenuV2Content.tsx +6 -0
  59. package/lib/components/MenuV2/MenuV2SubMenu.tsx +16 -2
  60. package/lib/components/MenuV2/menuV2.types.ts +11 -0
  61. package/lib/components/MenuV2/menuV2.utils.ts +45 -3
  62. package/lib/components/MultiSelect/MultiSelect.tsx +2 -0
  63. package/lib/components/MultiSelect/MultiSelectMenu.tsx +8 -0
  64. package/lib/components/MultiSelect/types.ts +2 -0
  65. package/lib/components/MultiSelectV2/MultiSelectV2.tsx +2 -0
  66. package/lib/components/MultiSelectV2/MultiSelectV2Menu.tsx +8 -0
  67. package/lib/components/MultiSelectV2/multiSelectV2.types.ts +2 -0
  68. package/lib/components/SingleSelect/SingleSelect.tsx +2 -0
  69. package/lib/components/SingleSelect/SingleSelectMenu.tsx +171 -138
  70. package/lib/components/SingleSelect/types.ts +1 -0
  71. package/lib/components/SingleSelectV2/SingleSelectV2.tsx +2 -0
  72. package/lib/components/SingleSelectV2/SingleSelectV2Menu.tsx +84 -58
  73. package/lib/components/SingleSelectV2/SingleSelectV2Search.tsx +1 -0
  74. package/lib/components/SingleSelectV2/singleSelectV2.dark.tokens.ts +8 -0
  75. package/lib/components/SingleSelectV2/singleSelectV2.light.tokens.ts +8 -0
  76. package/lib/components/SingleSelectV2/singleSelectV2.tokens.types.ts +8 -0
  77. package/lib/components/SingleSelectV2/singleSelectV2.types.ts +2 -0
  78. package/lib/components/Skeleton/hooks/useSkeletonBase.ts +11 -1
  79. package/lib/components/Snackbar/Snackbar.tsx +18 -8
  80. package/lib/components/Snackbar/snackbar.tokens.ts +6 -0
  81. package/lib/components/Snackbar/types.ts +2 -0
  82. package/lib/components/StatCard/StatCard.tsx +39 -2
  83. package/lib/components/StatCardV2/StatCardV2.tsx +8 -6
  84. package/lib/components/StatCardV2/StatCardV2NoData.tsx +8 -6
  85. package/lib/components/StatCardV2/statcardV2.types.ts +1 -0
  86. package/lib/components/TabsV2/TabsV2List.tsx +5 -1
  87. package/lib/components/TabsV2/tabsV2.dark.tokens.ts +12 -0
  88. package/lib/components/TabsV2/tabsV2.light.tokens.ts +12 -0
  89. package/lib/components/TabsV2/tabsV2.tokens.types.ts +3 -0
  90. package/lib/global-utils/GlobalUtils.ts +10 -1
  91. package/package.json +5 -4
  92. package/dist/tokens.d.ts +0 -2
package/lib/components/SingleSelect/SingleSelectMenu.tsx CHANGED
@@ -77,6 +77,7 @@ type SingleSelectMenuProps = {
77
77
  allowCustomValue?: boolean
78
78
  customValueLabel?: string
79
79
  menuId?: string
80
+ menuFooter?: React.ReactNode
80
81
  }
81
82
 
82
83
  type FlattenedItem = {
@@ -128,16 +129,32 @@ const Content = styled(RadixMenu.Content)`
128
129
  border-radius: 8px;
129
130
  box-shadow: ${FOUNDATION_THEME.shadows.sm};
130
131
  z-index: 101;
132
+ display: flex;
133
+ flex-direction: column;
134
+ overflow: hidden;
135
+
136
+ &[data-state='closed'] {
137
+ pointer-events: none;
138
+ }
139
+
140
+ ${dropdownContentAnimations}
141
+ `
142
+
143
+ const ScrollableContent = styled(Block)`
131
144
  overflow-y: auto;
132
145
  overflow-x: hidden;
133
146
  scrollbar-width: none;
134
147
  scrollbar-color: transparent transparent;
148
+ flex-grow: 1;
149
+ min-height: 0;
135
150
 
136
- &[data-state='closed'] {
137
- pointer-events: none;
151
+ &::-webkit-scrollbar {
152
+ display: none;
138
153
  }
154
+ `
139
155
 
140
- ${dropdownContentAnimations}
156
+ const MenuFooter = styled(Block)`
157
+ flex-shrink: 0;
141
158
  `
142
159
 
143
160
  const StyledSubMenu = styled(RadixMenu.Sub)(() => ({
@@ -382,6 +399,7 @@ const SingleSelectMenu = ({
382
399
  },
383
400
  allowCustomValue = false,
384
401
  customValueLabel = 'Specify',
402
+ menuFooter,
385
403
  }: SingleSelectMenuProps) => {
386
404
  const singleSelectTokens =
387
405
  useResponsiveTokens<SingleSelectTokensType>('SINGLE_SELECT')
@@ -622,6 +640,7 @@ const SingleSelectMenu = ({
622
640
  left={0}
623
641
  right={0}
624
642
  zIndex={50}
643
+ flexShrink={0}
625
644
  backgroundColor={
626
645
  FOUNDATION_THEME.colors.gray[0]
627
646
  }
@@ -670,155 +689,169 @@ const SingleSelectMenu = ({
670
689
  />
671
690
  </Block>
672
691
  )}
673
- {items.length === 0 ||
674
- (filteredItems.length === 0 &&
675
- searchText.length > 0) ? (
676
- <Block
677
- display="flex"
678
- justifyContent="center"
679
- alignItems="center"
680
- padding={
681
- singleSelectTokens.menu.item.padding
682
- }
683
- >
684
- <Text
685
- variant="body.md"
686
- color={
687
- singleSelectTokens.menu.item
688
- .optionsLabel.color.default
692
+ <ScrollableContent>
693
+ {items.length === 0 ||
694
+ (filteredItems.length === 0 &&
695
+ searchText.length > 0) ? (
696
+ <Block
697
+ display="flex"
698
+ justifyContent="center"
699
+ alignItems="center"
700
+ padding={
701
+ singleSelectTokens.menu.item.padding
689
702
  }
690
- textAlign="center"
691
703
  >
692
- {items.length === 0
693
- ? 'No items available'
694
- : 'No results found'}
695
- </Text>
696
- </Block>
697
- ) : enableVirtualization &&
698
- filteredItems.length > 0 ? (
699
- <Block
700
- data-element="virtual-list"
701
- padding={FOUNDATION_THEME.unit[6]}
702
- >
703
- <VirtualList
704
- items={flattenedItems}
705
- renderItem={renderVirtualItem}
706
- height={maxMenuHeight - 60}
707
- itemHeight={virtualListItemHeight}
708
- overscan={virtualListOverscan}
709
- onEndReached={onEndReached}
710
- endReachedThreshold={
711
- endReachedThreshold
704
+ <Text
705
+ variant="body.md"
706
+ color={
707
+ singleSelectTokens.menu.item
708
+ .optionsLabel.color.default
709
+ }
710
+ textAlign="center"
711
+ >
712
+ {items.length === 0
713
+ ? 'No items available'
714
+ : 'No results found'}
715
+ </Text>
716
+ </Block>
717
+ ) : enableVirtualization &&
718
+ filteredItems.length > 0 ? (
719
+ <Block
720
+ data-element="virtual-list"
721
+ padding={FOUNDATION_THEME.unit[6]}
722
+ >
723
+ <VirtualList
724
+ items={flattenedItems}
725
+ renderItem={renderVirtualItem}
726
+ height={maxMenuHeight - 60}
727
+ itemHeight={virtualListItemHeight}
728
+ overscan={virtualListOverscan}
729
+ onEndReached={onEndReached}
730
+ endReachedThreshold={
731
+ endReachedThreshold
732
+ }
733
+ hasMore={hasMore}
734
+ isLoading={false}
735
+ />
736
+ </Block>
737
+ ) : (
738
+ <Block
739
+ data-element="menu-content"
740
+ paddingX={
741
+ singleSelectTokens.menu.padding[
742
+ size
743
+ ][variant].x
712
744
  }
713
- hasMore={hasMore}
714
- isLoading={false}
715
- />
716
- </Block>
717
- ) : (
718
- <Block
719
- data-element="menu-content"
720
- paddingX={
721
- singleSelectTokens.menu.padding[size][
722
- variant
723
- ].x
724
- }
725
- paddingY={
726
- singleSelectTokens.menu.padding[size][
727
- variant
728
- ].y
729
- }
730
- style={{
731
- paddingTop: enableSearch
732
- ? 0
733
- : FOUNDATION_THEME.unit[6],
734
- }}
735
- >
736
- {filteredItems.map((group, groupId) => (
737
- <React.Fragment key={groupId}>
738
- {group.groupLabel && (
739
- <Label data-element="menu-group-label">
740
- <Text
741
- fontSize={
742
- singleSelectTokens
743
- .menu.item
744
- .optionsLabel
745
- .fontSize
746
- }
747
- color={
748
- singleSelectTokens
749
- .menu.item
750
- .optionsLabel
751
- .color.default
752
- }
753
- fontWeight={
754
- singleSelectTokens
755
- .menu.item
756
- .optionsLabel
757
- .fontWeight
758
- }
759
- >
760
- {group.groupLabel}
761
- </Text>
762
- </Label>
763
- )}
764
- {group.items.map(
765
- (item, itemIndex) => {
766
- let itemIdx = 0
767
- for (
768
- let i = 0;
769
- i < groupId;
770
- i++
771
- ) {
772
- itemIdx +=
773
- filteredItems[i]
774
- .items.length
775
- }
776
- itemIdx += itemIndex
777
- return (
778
- <Item
779
- key={`${groupId}-${itemIndex}`}
780
- selected={selected}
781
- item={item}
782
- onSelect={onSelect}
783
- singleSelectTokens={
784
- singleSelectTokens
785
- }
786
- index={itemIdx}
787
- />
788
- )
789
- }
790
- )}
791
- {groupId !==
792
- filteredItems.length - 1 &&
793
- group.showSeparator && (
794
- <RadixMenu.Separator
795
- asChild
796
- >
797
- <Block
798
- height={
745
+ paddingY={
746
+ singleSelectTokens.menu.padding[
747
+ size
748
+ ][variant].y
749
+ }
750
+ style={{
751
+ paddingTop: enableSearch
752
+ ? 0
753
+ : FOUNDATION_THEME.unit[6],
754
+ }}
755
+ >
756
+ {filteredItems.map((group, groupId) => (
757
+ <React.Fragment key={groupId}>
758
+ {group.groupLabel && (
759
+ <Label data-element="menu-group-label">
760
+ <Text
761
+ fontSize={
799
762
  singleSelectTokens
800
763
  .menu.item
801
- .seperator
802
- .height
764
+ .optionsLabel
765
+ .fontSize
803
766
  }
804
- backgroundColor={
767
+ color={
805
768
  singleSelectTokens
806
769
  .menu.item
807
- .seperator
770
+ .optionsLabel
808
771
  .color
772
+ .default
809
773
  }
810
- margin={
774
+ fontWeight={
811
775
  singleSelectTokens
812
776
  .menu.item
813
- .seperator
814
- .margin
777
+ .optionsLabel
778
+ .fontWeight
815
779
  }
816
- />
817
- </RadixMenu.Separator>
780
+ >
781
+ {group.groupLabel}
782
+ </Text>
783
+ </Label>
818
784
  )}
819
- </React.Fragment>
820
- ))}
821
- </Block>
785
+ {group.items.map(
786
+ (item, itemIndex) => {
787
+ let itemIdx = 0
788
+ for (
789
+ let i = 0;
790
+ i < groupId;
791
+ i++
792
+ ) {
793
+ itemIdx +=
794
+ filteredItems[i]
795
+ .items
796
+ .length
797
+ }
798
+ itemIdx += itemIndex
799
+ return (
800
+ <Item
801
+ key={`${groupId}-${itemIndex}`}
802
+ selected={
803
+ selected
804
+ }
805
+ item={item}
806
+ onSelect={
807
+ onSelect
808
+ }
809
+ singleSelectTokens={
810
+ singleSelectTokens
811
+ }
812
+ index={itemIdx}
813
+ />
814
+ )
815
+ }
816
+ )}
817
+ {groupId !==
818
+ filteredItems.length - 1 &&
819
+ group.showSeparator && (
820
+ <RadixMenu.Separator
821
+ asChild
822
+ >
823
+ <Block
824
+ height={
825
+ singleSelectTokens
826
+ .menu
827
+ .item
828
+ .seperator
829
+ .height
830
+ }
831
+ backgroundColor={
832
+ singleSelectTokens
833
+ .menu
834
+ .item
835
+ .seperator
836
+ .color
837
+ }
838
+ margin={
839
+ singleSelectTokens
840
+ .menu
841
+ .item
842
+ .seperator
843
+ .margin
844
+ }
845
+ />
846
+ </RadixMenu.Separator>
847
+ )}
848
+ </React.Fragment>
849
+ ))}
850
+ </Block>
851
+ )}
852
+ </ScrollableContent>
853
+ {menuFooter && (
854
+ <MenuFooter>{menuFooter}</MenuFooter>
822
855
  )}
823
856
  </>
824
857
  )}
package/lib/components/SingleSelect/types.ts CHANGED
@@ -138,4 +138,5 @@ export type SingleSelectProps = {
138
138
  singleSelectGroupPosition?: 'center' | 'left' | 'right'
139
139
 
140
140
  allowDeselect?: boolean
141
+ menuFooter?: React.ReactNode
141
142
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onSelect'>
package/lib/components/SingleSelectV2/SingleSelectV2.tsx CHANGED
@@ -64,6 +64,7 @@ const SingleSelectV2 = ({
64
64
  allowCustomValue = false,
65
65
  customValueLabel = 'Specify',
66
66
  singleSelectGroupPosition,
67
+ menuFooter,
67
68
  ...rest
68
69
  }: SingleSelectV2Props) => {
69
70
  const { disabled, name, ...buttonRest } = rest as {
@@ -248,6 +249,7 @@ const SingleSelectV2 = ({
248
249
  allowCustomValue={allowCustomValue}
249
250
  customValueLabel={customValueLabel}
250
251
  menuId={menuId}
252
+ menuFooter={menuFooter}
251
253
  size={size}
252
254
  variant={variant}
253
255
  trigger={
package/lib/components/SingleSelectV2/SingleSelectV2Menu.tsx CHANGED
@@ -41,16 +41,32 @@ import {
41
41
  const Content = styled(RadixMenu.Content)`
42
42
  position: relative;
43
43
  z-index: ${SELECT_V2_MENU_Z_INDEX};
44
+ display: flex;
45
+ flex-direction: column;
46
+ overflow: hidden;
47
+
48
+ &[data-state='closed'] {
49
+ pointer-events: none;
50
+ }
51
+
52
+ ${menuContentAnimations}
53
+ `
54
+
55
+ const ScrollableContent = styled(Block)`
44
56
  overflow-y: auto;
45
57
  overflow-x: hidden;
46
58
  scrollbar-width: none;
47
59
  scrollbar-color: transparent transparent;
60
+ flex-grow: 1;
61
+ min-height: 0;
48
62
 
49
- &[data-state='closed'] {
50
- pointer-events: none;
63
+ &::-webkit-scrollbar {
64
+ display: none;
51
65
  }
66
+ `
52
67
 
53
- ${menuContentAnimations}
68
+ const MenuFooter = styled(Block)`
69
+ flex-shrink: 0;
54
70
  `
55
71
 
56
72
  const SingleSelectV2Menu = ({
@@ -78,6 +94,7 @@ const SingleSelectV2Menu = ({
78
94
  allowCustomValue = false,
79
95
  customValueLabel = 'Specify',
80
96
  menuId,
97
+ menuFooter,
81
98
  }: SingleSelectV2MenuProps) => {
82
99
  const singleSelectTokens =
83
100
  useResponsiveTokens<SingleSelectV2TokensType>('SINGLE_SELECT_V2')
@@ -286,63 +303,72 @@ const SingleSelectV2Menu = ({
286
303
  containerRef={searchContainerRef}
287
304
  />
288
305
 
289
- {showEmptyState ? (
290
- <Block
291
- display="flex"
292
- justifyContent="center"
293
- alignItems="center"
294
- style={{
295
- paddingTop: menuItem.paddingTop,
296
- paddingRight: menuItem.paddingRight,
297
- paddingBottom: menuItem.paddingBottom,
298
- paddingLeft: menuItem.paddingLeft,
299
- }}
300
- >
301
- <Text
302
- variant="body.md"
303
- fontSize={
304
- menuItem.groupLabelText.fontSize
305
- }
306
- fontWeight={
307
- menuItem.groupLabelText.fontWeight
306
+ <ScrollableContent>
307
+ {showEmptyState ? (
308
+ <Block
309
+ display="flex"
310
+ justifyContent="center"
311
+ alignItems="center"
312
+ style={{
313
+ paddingTop: menuItem.paddingTop,
314
+ paddingRight: menuItem.paddingRight,
315
+ paddingBottom:
316
+ menuItem.paddingBottom,
317
+ paddingLeft: menuItem.paddingLeft,
318
+ }}
319
+ >
320
+ <Text
321
+ variant="body.md"
322
+ fontSize={
323
+ menuItem.groupLabelText.fontSize
324
+ }
325
+ fontWeight={
326
+ menuItem.groupLabelText
327
+ .fontWeight
328
+ }
329
+ color={
330
+ menuItem.groupLabelText.color
331
+ .default
332
+ }
333
+ textAlign="center"
334
+ >
335
+ {emptyMessage}
336
+ </Text>
337
+ </Block>
338
+ ) : showVirtualList ? (
339
+ <SingleSelectV2VirtualList
340
+ flattenedItems={flattenedItems}
341
+ selected={selected}
342
+ onSelect={onSelect}
343
+ singleSelectTokens={singleSelectTokens}
344
+ size={size}
345
+ variant={variant}
346
+ virtualViewportHeight={
347
+ adjustedVirtualViewportHeight
308
348
  }
309
- color={
310
- menuItem.groupLabelText.color
311
- .default
349
+ virtualItems={virtualItems}
350
+ totalSize={virtualizer.getTotalSize()}
351
+ measureElement={
352
+ virtualizer.measureElement
312
353
  }
313
- textAlign="center"
314
- >
315
- {emptyMessage}
316
- </Text>
317
- </Block>
318
- ) : showVirtualList ? (
319
- <SingleSelectV2VirtualList
320
- flattenedItems={flattenedItems}
321
- selected={selected}
322
- onSelect={onSelect}
323
- singleSelectTokens={singleSelectTokens}
324
- size={size}
325
- variant={variant}
326
- virtualViewportHeight={
327
- adjustedVirtualViewportHeight
328
- }
329
- virtualItems={virtualItems}
330
- totalSize={virtualizer.getTotalSize()}
331
- measureElement={virtualizer.measureElement}
332
- loadingComponent={loadingComponent}
333
- hasMore={hasMore}
334
- virtualScrollRef={virtualScrollRef}
335
- />
336
- ) : (
337
- <SingleSelectV2List
338
- filteredItems={filteredItems}
339
- selected={selected}
340
- onSelect={onSelect}
341
- singleSelectTokens={singleSelectTokens}
342
- size={size}
343
- variant={variant}
344
- enableSearch={enableSearch}
345
- />
354
+ loadingComponent={loadingComponent}
355
+ hasMore={hasMore}
356
+ virtualScrollRef={virtualScrollRef}
357
+ />
358
+ ) : (
359
+ <SingleSelectV2List
360
+ filteredItems={filteredItems}
361
+ selected={selected}
362
+ onSelect={onSelect}
363
+ singleSelectTokens={singleSelectTokens}
364
+ size={size}
365
+ variant={variant}
366
+ enableSearch={enableSearch}
367
+ />
368
+ )}
369
+ </ScrollableContent>
370
+ {menuFooter && (
371
+ <MenuFooter>{menuFooter}</MenuFooter>
346
372
  )}
347
373
  </>
348
374
  )}
package/lib/components/SingleSelectV2/SingleSelectV2Search.tsx CHANGED
@@ -23,6 +23,7 @@ const SingleSelectV2Search = ({
23
23
  right={0}
24
24
  zIndex={50}
25
25
  backgroundColor={backgroundColor}
26
+ flexShrink={0}
26
27
  >
27
28
  <SearchInput
28
29
  ref={searchInputRef}
package/lib/components/SingleSelectV2/singleSelectV2.dark.tokens.ts CHANGED
@@ -349,6 +349,14 @@ export const getSingleSelectV2DarkTokens = (
349
349
  },
350
350
  iconColor: foundationToken.colors.gray[500],
351
351
  },
352
+ footer: {
353
+ paddingTop: foundationToken.unit[16],
354
+ paddingRight: foundationToken.unit[16],
355
+ paddingBottom: foundationToken.unit[16],
356
+ paddingLeft: foundationToken.unit[16],
357
+ backgroundColor: foundationToken.colors.gray[800],
358
+ borderTop: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[700]}`,
359
+ },
352
360
  },
353
361
 
354
362
  mobilePanel: {
package/lib/components/SingleSelectV2/singleSelectV2.light.tokens.ts CHANGED
@@ -349,6 +349,14 @@ export const getSingleSelectV2LightTokens = (
349
349
  },
350
350
  iconColor: foundationToken.colors.gray[400],
351
351
  },
352
+ footer: {
353
+ paddingTop: foundationToken.unit[16],
354
+ paddingRight: foundationToken.unit[16],
355
+ paddingBottom: foundationToken.unit[16],
356
+ paddingLeft: foundationToken.unit[16],
357
+ backgroundColor: foundationToken.colors.gray[0],
358
+ borderTop: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
359
+ },
352
360
  },
353
361
 
354
362
  mobilePanel: {
package/lib/components/SingleSelectV2/singleSelectV2.tokens.types.ts CHANGED
@@ -167,6 +167,14 @@ export type SingleSelectV2TokensType = {
167
167
  }
168
168
  iconColor: CSSObject['color']
169
169
  }
170
+ footer: {
171
+ paddingTop: CSSObject['paddingTop']
172
+ paddingRight: CSSObject['paddingRight']
173
+ paddingBottom: CSSObject['paddingBottom']
174
+ paddingLeft: CSSObject['paddingLeft']
175
+ backgroundColor: CSSObject['backgroundColor']
176
+ borderTop: CSSObject['borderTop']
177
+ }
170
178
  }
171
179
 
172
180
  mobilePanel: {
package/lib/components/SingleSelectV2/singleSelectV2.types.ts CHANGED
@@ -144,6 +144,7 @@ export type SingleSelectV2MenuProps = {
144
144
  customValueLabel?: string
145
145
 
146
146
  menuId?: string
147
+ menuFooter?: ReactNode
147
148
  }
148
149
  export type SingleSelectV2PropsBase = {
149
150
  label?: string
@@ -194,6 +195,7 @@ export type SingleSelectV2PropsBase = {
194
195
  customValueLabel?: string
195
196
 
196
197
  singleSelectGroupPosition?: 'center' | 'left' | 'right'
198
+ menuFooter?: ReactNode
197
199
  }
198
200
 
199
201
  export type SingleSelectV2Props = Omit<