@juspay/blend-design-system 0.0.36-beta.2 → 0.0.36
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.
- package/dist/components/MultiSelectV2/MobileMultiSelectV2.d.ts +1 -0
- package/dist/components/MultiSelectV2/MultiSelectV2.d.ts +6 -0
- package/dist/components/MultiSelectV2/MultiSelectV2Menu.d.ts +6 -0
- package/dist/components/MultiSelectV2/MultiSelectV2MenuActions.d.ts +23 -0
- package/dist/components/MultiSelectV2/MultiSelectV2MenuHeader.d.ts +25 -0
- package/dist/components/MultiSelectV2/MultiSelectV2MenuItem.d.ts +11 -0
- package/dist/components/MultiSelectV2/MultiSelectV2MenuItems.d.ts +17 -0
- package/dist/components/MultiSelectV2/MultiSelectV2MenuSearch.d.ts +14 -0
- package/dist/components/MultiSelectV2/MultiSelectV2MenuVirtualList.d.ts +22 -0
- package/dist/components/MultiSelectV2/MultiSelectV2SelectAllItem.d.ts +9 -0
- package/dist/components/MultiSelectV2/MultiSelectV2Skeleton.d.ts +8 -0
- package/dist/components/MultiSelectV2/MultiSelectV2SubMenu.d.ts +9 -0
- package/dist/components/MultiSelectV2/MultiSelectV2Trigger.d.ts +30 -0
- package/dist/components/MultiSelectV2/index.d.ts +14 -0
- package/dist/components/MultiSelectV2/mobile/MobileMultiSelectV2.d.ts +3 -0
- package/dist/components/MultiSelectV2/mobile/mobileMultiSelectV2.utils.d.ts +8 -0
- package/dist/components/MultiSelectV2/multiSelectV2.dark.tokens.d.ts +3 -0
- package/dist/components/MultiSelectV2/multiSelectV2.light.tokens.d.ts +3 -0
- package/dist/components/MultiSelectV2/multiSelectV2.tokens.d.ts +216 -0
- package/dist/components/MultiSelectV2/multiSelectV2.types.d.ts +124 -0
- package/dist/components/MultiSelectV2/utils.d.ts +23 -0
- package/dist/components/PopoverV2/MobilePopoverV2.d.ts +7 -0
- package/dist/components/PopoverV2/PopoverV2.d.ts +23 -0
- package/dist/components/PopoverV2/PopoverV2Footer.d.ts +12 -0
- package/dist/components/PopoverV2/PopoverV2Header.d.ts +14 -0
- package/dist/components/PopoverV2/PopoverV2Skeleton.d.ts +21 -0
- package/dist/components/PopoverV2/index.d.ts +3 -0
- package/dist/components/PopoverV2/popoverV2.dark.tokens.d.ts +3 -0
- package/dist/components/PopoverV2/popoverV2.light.tokens.d.ts +3 -0
- package/dist/components/PopoverV2/popoverV2.token.d.ts +72 -0
- package/dist/components/PopoverV2/popoverV2.types.d.ts +59 -0
- package/dist/components/Select/SelectItem/types.d.ts +2 -0
- package/dist/components/SelectV2/SelectItemV2.d.ts +3 -0
- package/dist/components/SelectV2/index.d.ts +4 -0
- package/dist/components/SelectV2/selectV2.constants.d.ts +7 -0
- package/dist/components/SelectV2/selectV2.shared.types.d.ts +96 -0
- package/dist/components/SelectV2/selectV2.tokenStates.d.ts +2 -0
- package/dist/components/SelectV2/types.d.ts +89 -0
- package/dist/components/SelectV2/useSelectV2MenuBehavior.d.ts +24 -0
- package/dist/components/SingleSelectV2/MobileSingleSelectV2.d.ts +5 -0
- package/dist/components/SingleSelectV2/SingleSelectV2.d.ts +6 -0
- package/dist/components/SingleSelectV2/SingleSelectV2List.d.ts +3 -0
- package/dist/components/SingleSelectV2/SingleSelectV2Menu.d.ts +6 -0
- package/dist/components/SingleSelectV2/SingleSelectV2MenuItems.d.ts +17 -0
- package/dist/components/SingleSelectV2/SingleSelectV2Search.d.ts +3 -0
- package/dist/components/SingleSelectV2/SingleSelectV2Skeleton.d.ts +8 -0
- package/dist/components/SingleSelectV2/SingleSelectV2Trigger.d.ts +28 -0
- package/dist/components/SingleSelectV2/SingleSelectV2VirtualList.d.ts +3 -0
- package/dist/components/SingleSelectV2/index.d.ts +11 -0
- package/dist/components/SingleSelectV2/mobile/SingleSelectV2MobileItem.d.ts +10 -0
- package/dist/components/SingleSelectV2/mobile/singleSelectV2.mobile.utils.d.ts +3 -0
- package/dist/components/SingleSelectV2/singleSelectV2.animations.d.ts +3 -0
- package/dist/components/SingleSelectV2/singleSelectV2.dark.tokens.d.ts +3 -0
- package/dist/components/SingleSelectV2/singleSelectV2.light.tokens.d.ts +3 -0
- package/dist/components/SingleSelectV2/singleSelectV2.tokens.d.ts +162 -0
- package/dist/components/SingleSelectV2/singleSelectV2.types.d.ts +142 -0
- package/dist/components/SingleSelectV2/utils.d.ts +78 -0
- package/dist/context/ThemeContext.d.ts +6 -0
- package/dist/context/useComponentToken.d.ts +4 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.js +29856 -27543
- package/package.json +2 -1
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import { CSSObject } from 'styled-components';
|
|
2
|
+
import { SingleSelectV2Size, SingleSelectV2Variant } from './singleSelectV2.types';
|
|
3
|
+
import { FoundationTokenType } from '../../tokens/theme.token';
|
|
4
|
+
import { BreakpointType } from '../../breakpoints/breakPoints';
|
|
5
|
+
import { Theme } from '../../context/theme.enum';
|
|
6
|
+
import { SelectV2ItemStates, SelectV2TriggerStates } from '../SelectV2/selectV2.tokenStates';
|
|
7
|
+
export type SingleSelectV2ItemStates = SelectV2ItemStates;
|
|
8
|
+
export type SingleSelectV2TriggerStates = SelectV2TriggerStates;
|
|
9
|
+
type StateToken<T> = Record<SingleSelectV2ItemStates, T>;
|
|
10
|
+
type TriggerStateToken<T> = Record<SingleSelectV2TriggerStates, T>;
|
|
11
|
+
type VariantToken<T> = Record<SingleSelectV2Variant, T>;
|
|
12
|
+
type SizeToken<T> = Record<SingleSelectV2Size, T>;
|
|
13
|
+
type SubmenuTriggerStateToken<T> = Record<'default' | 'hover' | 'focus', T>;
|
|
14
|
+
export type SingleSelectV2TokensType = {
|
|
15
|
+
gap: CSSObject['gap'];
|
|
16
|
+
label: {
|
|
17
|
+
fontSize: CSSObject['fontSize'];
|
|
18
|
+
fontWeight: CSSObject['fontWeight'];
|
|
19
|
+
color: StateToken<CSSObject['color']>;
|
|
20
|
+
};
|
|
21
|
+
subLabel: {
|
|
22
|
+
fontSize: CSSObject['fontSize'];
|
|
23
|
+
fontWeight: CSSObject['fontWeight'];
|
|
24
|
+
color: StateToken<CSSObject['color']>;
|
|
25
|
+
};
|
|
26
|
+
hintText: {
|
|
27
|
+
fontSize: CSSObject['fontSize'];
|
|
28
|
+
fontWeight: CSSObject['fontWeight'];
|
|
29
|
+
color: StateToken<CSSObject['color']>;
|
|
30
|
+
};
|
|
31
|
+
errorMessage: {
|
|
32
|
+
fontSize: CSSObject['fontSize'];
|
|
33
|
+
fontWeight: CSSObject['fontWeight'];
|
|
34
|
+
color: CSSObject['color'];
|
|
35
|
+
};
|
|
36
|
+
required: {
|
|
37
|
+
color: CSSObject['color'];
|
|
38
|
+
};
|
|
39
|
+
trigger: {
|
|
40
|
+
height: SizeToken<VariantToken<CSSObject['height']>>;
|
|
41
|
+
padding: SizeToken<VariantToken<{
|
|
42
|
+
top: CSSObject['paddingTop'];
|
|
43
|
+
right: CSSObject['paddingRight'];
|
|
44
|
+
bottom: CSSObject['paddingBottom'];
|
|
45
|
+
left: CSSObject['paddingLeft'];
|
|
46
|
+
}>>;
|
|
47
|
+
borderRadius: SizeToken<VariantToken<CSSObject['borderRadius']>>;
|
|
48
|
+
boxShadow: VariantToken<CSSObject['boxShadow']>;
|
|
49
|
+
backgroundColor: VariantToken<TriggerStateToken<CSSObject['backgroundColor']>>;
|
|
50
|
+
outline: VariantToken<TriggerStateToken<CSSObject['outline']>>;
|
|
51
|
+
slot: {
|
|
52
|
+
gap: CSSObject['gap'];
|
|
53
|
+
width: CSSObject['width'];
|
|
54
|
+
};
|
|
55
|
+
placeholder: {
|
|
56
|
+
color: CSSObject['color'];
|
|
57
|
+
fontSize: CSSObject['fontSize'];
|
|
58
|
+
fontWeight: CSSObject['fontWeight'];
|
|
59
|
+
};
|
|
60
|
+
selectedValue: {
|
|
61
|
+
color: CSSObject['color'];
|
|
62
|
+
fontSize: CSSObject['fontSize'];
|
|
63
|
+
fontWeight: CSSObject['fontWeight'];
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
menu: {
|
|
67
|
+
content: {
|
|
68
|
+
backgroundColor: CSSObject['backgroundColor'];
|
|
69
|
+
border: CSSObject['border'];
|
|
70
|
+
borderRadius: CSSObject['borderRadius'];
|
|
71
|
+
boxShadow: CSSObject['boxShadow'];
|
|
72
|
+
};
|
|
73
|
+
padding: SizeToken<VariantToken<{
|
|
74
|
+
top: CSSObject['paddingTop'];
|
|
75
|
+
right: CSSObject['paddingRight'];
|
|
76
|
+
bottom: CSSObject['paddingBottom'];
|
|
77
|
+
left: CSSObject['paddingLeft'];
|
|
78
|
+
}>>;
|
|
79
|
+
groupLabel: {
|
|
80
|
+
margin: CSSObject['margin'];
|
|
81
|
+
paddingTop: CSSObject['paddingTop'];
|
|
82
|
+
paddingRight: CSSObject['paddingRight'];
|
|
83
|
+
paddingBottom: CSSObject['paddingBottom'];
|
|
84
|
+
paddingLeft: CSSObject['paddingLeft'];
|
|
85
|
+
fontSize: CSSObject['fontSize'];
|
|
86
|
+
fontWeight: CSSObject['fontWeight'];
|
|
87
|
+
color: StateToken<CSSObject['color']>;
|
|
88
|
+
};
|
|
89
|
+
item: {
|
|
90
|
+
paddingTop: CSSObject['paddingTop'];
|
|
91
|
+
paddingRight: CSSObject['paddingRight'];
|
|
92
|
+
paddingBottom: CSSObject['paddingBottom'];
|
|
93
|
+
paddingLeft: CSSObject['paddingLeft'];
|
|
94
|
+
margin: CSSObject['margin'];
|
|
95
|
+
borderRadius: CSSObject['borderRadius'];
|
|
96
|
+
gap: CSSObject['gap'];
|
|
97
|
+
backgroundColor: StateToken<CSSObject['backgroundColor']>;
|
|
98
|
+
groupLabelText: {
|
|
99
|
+
fontSize: CSSObject['fontSize'];
|
|
100
|
+
fontWeight: CSSObject['fontWeight'];
|
|
101
|
+
color: StateToken<CSSObject['color']>;
|
|
102
|
+
};
|
|
103
|
+
option: {
|
|
104
|
+
fontSize: CSSObject['fontSize'];
|
|
105
|
+
fontWeight: CSSObject['fontWeight'];
|
|
106
|
+
color: StateToken<CSSObject['color']>;
|
|
107
|
+
};
|
|
108
|
+
description: {
|
|
109
|
+
fontSize: CSSObject['fontSize'];
|
|
110
|
+
fontWeight: CSSObject['fontWeight'];
|
|
111
|
+
color: StateToken<CSSObject['color']>;
|
|
112
|
+
};
|
|
113
|
+
separator: {
|
|
114
|
+
color: CSSObject['color'];
|
|
115
|
+
height: CSSObject['height'];
|
|
116
|
+
margin: CSSObject['margin'];
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
submenu: {
|
|
120
|
+
trigger: {
|
|
121
|
+
paddingTop: CSSObject['paddingTop'];
|
|
122
|
+
paddingRight: CSSObject['paddingRight'];
|
|
123
|
+
paddingBottom: CSSObject['paddingBottom'];
|
|
124
|
+
paddingLeft: CSSObject['paddingLeft'];
|
|
125
|
+
margin: CSSObject['margin'];
|
|
126
|
+
borderRadius: CSSObject['borderRadius'];
|
|
127
|
+
backgroundColor: SubmenuTriggerStateToken<CSSObject['backgroundColor']>;
|
|
128
|
+
};
|
|
129
|
+
content: {
|
|
130
|
+
backgroundColor: CSSObject['backgroundColor'];
|
|
131
|
+
border: CSSObject['border'];
|
|
132
|
+
borderRadius: CSSObject['borderRadius'];
|
|
133
|
+
paddingTop: CSSObject['paddingTop'];
|
|
134
|
+
paddingRight: CSSObject['paddingRight'];
|
|
135
|
+
paddingBottom: CSSObject['paddingBottom'];
|
|
136
|
+
paddingLeft: CSSObject['paddingLeft'];
|
|
137
|
+
boxShadow: CSSObject['boxShadow'];
|
|
138
|
+
};
|
|
139
|
+
optionText: {
|
|
140
|
+
fontSize: CSSObject['fontSize'];
|
|
141
|
+
fontWeight: CSSObject['fontWeight'];
|
|
142
|
+
color: CSSObject['color'];
|
|
143
|
+
};
|
|
144
|
+
iconColor: CSSObject['color'];
|
|
145
|
+
};
|
|
146
|
+
};
|
|
147
|
+
mobilePanel: {
|
|
148
|
+
header: {
|
|
149
|
+
paddingTop: CSSObject['paddingTop'];
|
|
150
|
+
paddingRight: CSSObject['paddingRight'];
|
|
151
|
+
paddingBottom: CSSObject['paddingBottom'];
|
|
152
|
+
paddingLeft: CSSObject['paddingLeft'];
|
|
153
|
+
borderBottom: CSSObject['borderBottom'];
|
|
154
|
+
};
|
|
155
|
+
};
|
|
156
|
+
};
|
|
157
|
+
export type ResponsiveSingleSelectV2Tokens = {
|
|
158
|
+
[key in keyof BreakpointType]: SingleSelectV2TokensType;
|
|
159
|
+
};
|
|
160
|
+
export type SingleSelectV2MenuItemTokensType = SingleSelectV2TokensType['menu']['item'];
|
|
161
|
+
export declare const getSingleSelectV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveSingleSelectV2Tokens;
|
|
162
|
+
export {};
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { ReactNode, ReactElement, RefObject, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { CSSObject } from 'styled-components';
|
|
3
|
+
import { SingleSelectV2TokensType } from './singleSelectV2.tokens';
|
|
4
|
+
import { SelectV2Alignment, SelectV2FlattenedItemBase, SelectV2BaseItemType, SelectV2MenuRootPropsBase, SelectV2SkeletonProps, SelectV2Side, SelectV2Size, SelectV2Variant } from '../SelectV2/selectV2.shared.types';
|
|
5
|
+
import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
|
|
6
|
+
export { SelectV2Alignment as SingleSelectV2Alignment };
|
|
7
|
+
export { SelectV2Variant as SingleSelectV2Variant };
|
|
8
|
+
export { SelectV2Size as SingleSelectV2Size };
|
|
9
|
+
export { SelectV2Side as SingleSelectV2Side };
|
|
10
|
+
export type { SelectV2SkeletonProps as SingleSelectV2SkeletonProps };
|
|
11
|
+
export type SelectV2MenuDimensions = {
|
|
12
|
+
minWidth?: CSSObject['minWidth'];
|
|
13
|
+
maxWidth?: CSSObject['maxWidth'];
|
|
14
|
+
maxHeight?: CSSObject['maxHeight'];
|
|
15
|
+
};
|
|
16
|
+
export type SelectV2TriggerDimensions = {
|
|
17
|
+
minWidth?: CSSObject['minWidth'];
|
|
18
|
+
maxWidth?: CSSObject['maxWidth'];
|
|
19
|
+
width?: CSSObject['width'];
|
|
20
|
+
};
|
|
21
|
+
export type SelectV2MenuPosition = {
|
|
22
|
+
alignment?: SelectV2Alignment;
|
|
23
|
+
side?: SelectV2Side;
|
|
24
|
+
sideOffset?: number;
|
|
25
|
+
alignOffset?: number;
|
|
26
|
+
};
|
|
27
|
+
export type SelectV2ErrorState = {
|
|
28
|
+
show?: boolean;
|
|
29
|
+
message?: string;
|
|
30
|
+
};
|
|
31
|
+
export type SelectV2SearchConfig = {
|
|
32
|
+
show?: boolean;
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
};
|
|
35
|
+
export type SingleSelectV2ItemType = SelectV2BaseItemType & {
|
|
36
|
+
subMenu?: SingleSelectV2ItemType[];
|
|
37
|
+
};
|
|
38
|
+
export type SingleSelectV2GroupType = {
|
|
39
|
+
groupLabel?: string;
|
|
40
|
+
items: SingleSelectV2ItemType[];
|
|
41
|
+
showSeparator?: boolean;
|
|
42
|
+
};
|
|
43
|
+
export type FlattenedItem = SelectV2FlattenedItemBase<SingleSelectV2ItemType>;
|
|
44
|
+
export type MenuListSharedProps = {
|
|
45
|
+
selected: string;
|
|
46
|
+
onSelect: (value: string) => void;
|
|
47
|
+
singleSelectTokens: SingleSelectV2TokensType;
|
|
48
|
+
size: SelectV2Size;
|
|
49
|
+
variant: SelectV2Variant;
|
|
50
|
+
};
|
|
51
|
+
export type MenuListProps = MenuListSharedProps & {
|
|
52
|
+
filteredItems: SingleSelectV2GroupType[];
|
|
53
|
+
enableSearch?: boolean;
|
|
54
|
+
};
|
|
55
|
+
export type VirtualItemShape = {
|
|
56
|
+
key: string | number | bigint;
|
|
57
|
+
index: number;
|
|
58
|
+
start: number;
|
|
59
|
+
};
|
|
60
|
+
export type VirtualListProps = MenuListSharedProps & {
|
|
61
|
+
flattenedItems: FlattenedItem[];
|
|
62
|
+
virtualViewportHeight: number;
|
|
63
|
+
virtualItems: VirtualItemShape[];
|
|
64
|
+
totalSize: number;
|
|
65
|
+
measureElement: (node: Element | null) => void;
|
|
66
|
+
loadingComponent?: ReactNode;
|
|
67
|
+
hasMore?: boolean;
|
|
68
|
+
virtualScrollRef: RefObject<HTMLDivElement | null>;
|
|
69
|
+
};
|
|
70
|
+
export type MenuSearchProps = {
|
|
71
|
+
enabled?: boolean;
|
|
72
|
+
hasItems: boolean;
|
|
73
|
+
backgroundColor: string;
|
|
74
|
+
searchPlaceholder: string;
|
|
75
|
+
searchText: string;
|
|
76
|
+
onSearchTextChange: (value: string) => void;
|
|
77
|
+
searchInputRef: RefObject<HTMLInputElement | null>;
|
|
78
|
+
containerRef?: RefObject<HTMLDivElement | null>;
|
|
79
|
+
};
|
|
80
|
+
export type MenuRootProps = SelectV2MenuRootPropsBase;
|
|
81
|
+
export type SingleSelectV2MenuProps = {
|
|
82
|
+
items: SingleSelectV2GroupType[];
|
|
83
|
+
selected: string;
|
|
84
|
+
onSelect: (value: string) => void;
|
|
85
|
+
trigger: ReactElement;
|
|
86
|
+
menuDimensions?: SelectV2MenuDimensions;
|
|
87
|
+
search?: SelectV2SearchConfig;
|
|
88
|
+
disabled?: boolean;
|
|
89
|
+
menuPosition?: SelectV2MenuPosition;
|
|
90
|
+
collisionBoundary?: DropdownMenuContentProps['collisionBoundary'];
|
|
91
|
+
open: boolean;
|
|
92
|
+
onOpenChange: (open: boolean) => void;
|
|
93
|
+
size?: SelectV2Size;
|
|
94
|
+
variant?: SelectV2Variant;
|
|
95
|
+
enableVirtualization?: boolean;
|
|
96
|
+
virtualListItemHeight?: number;
|
|
97
|
+
virtualListOverscan?: number;
|
|
98
|
+
onEndReached?: () => void;
|
|
99
|
+
endReachedThreshold?: number;
|
|
100
|
+
hasMore?: boolean;
|
|
101
|
+
loadingComponent?: ReactNode;
|
|
102
|
+
skeleton?: SelectV2SkeletonProps;
|
|
103
|
+
allowCustomValue?: boolean;
|
|
104
|
+
customValueLabel?: string;
|
|
105
|
+
menuId?: string;
|
|
106
|
+
};
|
|
107
|
+
export type SingleSelectV2PropsBase = {
|
|
108
|
+
label?: string;
|
|
109
|
+
subLabel?: string;
|
|
110
|
+
hintText?: string;
|
|
111
|
+
required?: boolean;
|
|
112
|
+
helpIconText?: string;
|
|
113
|
+
placeholder: string;
|
|
114
|
+
size?: SelectV2Size;
|
|
115
|
+
variant?: SelectV2Variant;
|
|
116
|
+
items: SingleSelectV2GroupType[];
|
|
117
|
+
selected: string;
|
|
118
|
+
onSelect: (value: string) => void;
|
|
119
|
+
search?: SelectV2SearchConfig;
|
|
120
|
+
slot?: ReactNode;
|
|
121
|
+
customTrigger?: ReactElement;
|
|
122
|
+
open?: boolean;
|
|
123
|
+
onOpenChange?: (open: boolean) => void;
|
|
124
|
+
usePanelOnMobile?: boolean;
|
|
125
|
+
menuPosition?: SelectV2MenuPosition;
|
|
126
|
+
menuDimensions?: SelectV2MenuDimensions;
|
|
127
|
+
triggerDimensions?: SelectV2TriggerDimensions;
|
|
128
|
+
inline?: boolean;
|
|
129
|
+
error?: SelectV2ErrorState;
|
|
130
|
+
enableVirtualization?: boolean;
|
|
131
|
+
virtualListItemHeight?: number;
|
|
132
|
+
virtualListOverscan?: number;
|
|
133
|
+
onEndReached?: () => void;
|
|
134
|
+
endReachedThreshold?: number;
|
|
135
|
+
hasMore?: boolean;
|
|
136
|
+
loadingComponent?: ReactNode;
|
|
137
|
+
skeleton?: SelectV2SkeletonProps;
|
|
138
|
+
allowCustomValue?: boolean;
|
|
139
|
+
customValueLabel?: string;
|
|
140
|
+
singleSelectGroupPosition?: 'center' | 'left' | 'right';
|
|
141
|
+
};
|
|
142
|
+
export type SingleSelectV2Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className' | 'onSelect' | 'slot'> & SingleSelectV2PropsBase;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SingleSelectV2TokensType } from './singleSelectV2.tokens';
|
|
3
|
+
import { SingleSelectV2Size, SingleSelectV2Variant, FlattenedItem, SingleSelectV2GroupType, SingleSelectV2ItemType, SingleSelectV2SkeletonProps } from './singleSelectV2.types';
|
|
4
|
+
export declare const defaultSingleSelectV2Skeleton: SingleSelectV2SkeletonProps;
|
|
5
|
+
export declare const DROPDOWN_DATA_ATTR: "data-dropdown=\"dropdown\"";
|
|
6
|
+
export declare const MENU_SCROLL_SELECTORS: readonly ["[data-dropdown=\"dropdown\"]", "[role=\"listbox\"]", "[role=\"menu\"]", "[data-radix-popper-content-wrapper]", "[data-radix-dropdown-menu-content]"];
|
|
7
|
+
export declare const DEFAULT_END_REACHED_THRESHOLD = 200;
|
|
8
|
+
export type AriaAttributes = {
|
|
9
|
+
'aria-describedby'?: string;
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
'aria-labelledby'?: string;
|
|
12
|
+
'aria-invalid'?: boolean;
|
|
13
|
+
[key: string]: unknown;
|
|
14
|
+
};
|
|
15
|
+
export type ExtractedAriaProps = {
|
|
16
|
+
'aria-describedby'?: string;
|
|
17
|
+
'aria-label'?: string;
|
|
18
|
+
'aria-labelledby'?: string;
|
|
19
|
+
restProps: Record<string, unknown>;
|
|
20
|
+
};
|
|
21
|
+
export type AccessibilitySetupOptions = {
|
|
22
|
+
name?: string;
|
|
23
|
+
generatedId: string;
|
|
24
|
+
label?: string;
|
|
25
|
+
hintText?: string;
|
|
26
|
+
error?: boolean;
|
|
27
|
+
errorMessage?: string;
|
|
28
|
+
rest?: Record<string, unknown>;
|
|
29
|
+
prefix?: string;
|
|
30
|
+
needsMenuId?: boolean;
|
|
31
|
+
};
|
|
32
|
+
export type AccessibilitySetupResult = {
|
|
33
|
+
uniqueName: string;
|
|
34
|
+
labelId?: string;
|
|
35
|
+
hintTextId?: string;
|
|
36
|
+
errorMessageId?: string;
|
|
37
|
+
menuId?: string;
|
|
38
|
+
ariaAttributes: AriaAttributes;
|
|
39
|
+
};
|
|
40
|
+
export declare function getBorderRadius(size: SingleSelectV2Size, variant: SingleSelectV2Variant, singleSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: SingleSelectV2TokensType): {
|
|
41
|
+
borderRadius: string;
|
|
42
|
+
borderRight?: string;
|
|
43
|
+
};
|
|
44
|
+
export declare function getValueLabelMap(groups: SingleSelectV2GroupType[]): Record<string, string>;
|
|
45
|
+
export declare const generateAccessibilityIds: (uniqueName: string, options: {
|
|
46
|
+
hasLabel?: boolean;
|
|
47
|
+
hasHintText?: boolean;
|
|
48
|
+
hasErrorMessage?: boolean;
|
|
49
|
+
needsMenuId?: boolean;
|
|
50
|
+
}) => {
|
|
51
|
+
labelId?: string;
|
|
52
|
+
hintTextId?: string;
|
|
53
|
+
errorMessageId?: string;
|
|
54
|
+
menuId?: string;
|
|
55
|
+
};
|
|
56
|
+
export declare const extractAriaProps: (rest: Record<string, unknown> | undefined) => ExtractedAriaProps;
|
|
57
|
+
export declare const mergeAriaDescribedBy: (...ids: (string | undefined)[]) => string | undefined;
|
|
58
|
+
export declare const buildAriaAttributes: (options: {
|
|
59
|
+
error?: boolean;
|
|
60
|
+
ariaLabelledBy?: string;
|
|
61
|
+
ariaDescribedBy?: string;
|
|
62
|
+
ariaLabel?: string;
|
|
63
|
+
restProps?: Record<string, unknown>;
|
|
64
|
+
}) => AriaAttributes;
|
|
65
|
+
export declare const setupAccessibility: (options: AccessibilitySetupOptions) => AccessibilitySetupResult;
|
|
66
|
+
export declare function flattenGroups(groups: SingleSelectV2GroupType[]): FlattenedItem[];
|
|
67
|
+
export declare function filterMenuGroups(groups: SingleSelectV2GroupType[], searchText: string): SingleSelectV2GroupType[];
|
|
68
|
+
export declare function filterMenuItem(item: SingleSelectV2ItemType, lower: string): SingleSelectV2ItemType | null;
|
|
69
|
+
export declare function isTooltipWrappingTrigger(trigger: ReactNode): boolean;
|
|
70
|
+
export declare function getMenuItemIndex(filteredGroups: SingleSelectV2GroupType[], groupId: number, itemIndex: number): number;
|
|
71
|
+
export declare const VIRTUAL_ROW_ESTIMATES: {
|
|
72
|
+
readonly label: 32;
|
|
73
|
+
readonly separator: 8;
|
|
74
|
+
readonly item: 38;
|
|
75
|
+
readonly itemWithSubLabel: 58;
|
|
76
|
+
};
|
|
77
|
+
export declare function getVirtualRowEstimate(flattened: FlattenedItem[], index: number): number;
|
|
78
|
+
export declare function getItemOrdinalIndex(flattened: FlattenedItem[], flatIndex: number): number;
|
|
@@ -50,6 +50,8 @@ import { ResponsiveAlertV2Tokens } from '../components/AlertV2/alertV2.tokens';
|
|
|
50
50
|
import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2/accordionV2.tokens';
|
|
51
51
|
import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.tokens';
|
|
52
52
|
import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
|
|
53
|
+
import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens';
|
|
54
|
+
import { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens';
|
|
53
55
|
import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
|
|
54
56
|
import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.tokens';
|
|
55
57
|
import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
|
|
@@ -58,6 +60,7 @@ import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/
|
|
|
58
60
|
import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
|
|
59
61
|
import { ResponsiveTooltipV2Tokens } from '../components/TooltipV2/tooltipV2.tokens';
|
|
60
62
|
import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
|
|
63
|
+
import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
|
|
61
64
|
export type ComponentTokenType = {
|
|
62
65
|
TAGS?: ResponsiveTagTokens;
|
|
63
66
|
SEARCH_INPUT?: ResponsiveSearchInputTokens;
|
|
@@ -109,6 +112,8 @@ export type ComponentTokenType = {
|
|
|
109
112
|
ACCORDIONV2?: ResponsiveAccordionV2Tokens;
|
|
110
113
|
SNACKBARV2?: ResponsiveSnackbarV2Tokens;
|
|
111
114
|
SWITCHV2?: ResponsiveSwitchV2Tokens;
|
|
115
|
+
SINGLE_SELECT_V2?: ResponsiveSingleSelectV2Tokens;
|
|
116
|
+
MULTI_SELECT_V2?: ResponsiveMultiSelectV2Tokens;
|
|
112
117
|
AVATARV2?: ResponsiveAvatarV2Tokens;
|
|
113
118
|
TEXT_INPUTV2?: ResponsiveTextInputV2Tokens;
|
|
114
119
|
CHARTSV2?: ResponsiveChartV2Tokens;
|
|
@@ -116,6 +121,7 @@ export type ComponentTokenType = {
|
|
|
116
121
|
KEYVALUEPAIRV2?: ResponsiveKeyValuePairV2Tokens;
|
|
117
122
|
TOOLTIPV2?: ResponsiveTooltipV2Tokens;
|
|
118
123
|
RADIOV2?: ResponsiveRadioV2Tokens;
|
|
124
|
+
POPOVERV2?: ResponsivePopoverV2Tokens;
|
|
119
125
|
};
|
|
120
126
|
type ThemeContextType = {
|
|
121
127
|
foundationTokens: ThemeType;
|
|
@@ -48,6 +48,8 @@ import { ResponsiveAlertV2Tokens } from '../components/AlertV2';
|
|
|
48
48
|
import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2';
|
|
49
49
|
import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2';
|
|
50
50
|
import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
|
|
51
|
+
import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens';
|
|
52
|
+
import { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens';
|
|
51
53
|
import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
|
|
52
54
|
import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.tokens';
|
|
53
55
|
import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
|
|
@@ -55,4 +57,5 @@ import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token'
|
|
|
55
57
|
import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
|
|
56
58
|
import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
|
|
57
59
|
import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
|
|
58
|
-
|
|
60
|
+
import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
|
|
61
|
+
export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTextInputV2Tokens;
|
package/dist/main.d.ts
CHANGED