@beydesign/storybook 0.0.92 → 0.0.94
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/stories/Form/Dropdown.js +54 -39
- package/package.json +1 -1
|
@@ -111,42 +111,50 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
111
111
|
}
|
|
112
112
|
return Array.isArray(props.value) && props.value.includes(option);
|
|
113
113
|
};
|
|
114
|
-
return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label }), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: '
|
|
114
|
+
return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label }), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
|
|
115
115
|
? 'var(--colors-light-border-border-component-active)'
|
|
116
116
|
: 'var(--colors-light-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
|
|
117
117
|
? 'var(--primitives-desktop-primary-gray-25)'
|
|
118
|
-
: 'var(--primitives-desktop-primary-white-100)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [showLeadingIcon &&
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
118
|
+
: 'var(--primitives-desktop-primary-white-100)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
|
|
119
|
+
getIconComponent(leadingIcon, {
|
|
120
|
+
width: '24px',
|
|
121
|
+
height: '24px',
|
|
122
|
+
color: 'var(--colors-light-foreground-fg-secondary)',
|
|
123
|
+
'aria-hidden': 'true',
|
|
124
|
+
}) }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
|
|
125
|
+
flexGrow: 1,
|
|
126
|
+
minWidth: 0,
|
|
127
|
+
textAlign: 'left',
|
|
128
|
+
overflow: 'hidden',
|
|
129
|
+
textOverflow: 'ellipsis',
|
|
130
|
+
whiteSpace: 'nowrap',
|
|
131
|
+
maxWidth: '100%',
|
|
132
|
+
}, color: value
|
|
125
133
|
? 'var(--colors-light-text-text-title)'
|
|
126
|
-
: 'var(--colors-light-text-text-placeholder)', children: value || placeholder }), !disabled &&
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
134
|
+
: 'var(--colors-light-text-text-placeholder)', children: value || placeholder }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
|
|
135
|
+
showClear &&
|
|
136
|
+
value &&
|
|
137
|
+
getIconComponent('X', {
|
|
138
|
+
width: '24px',
|
|
139
|
+
height: '24px',
|
|
140
|
+
color: 'var(--colors-light-foreground-fg-secondary)',
|
|
141
|
+
onClick: handleClear,
|
|
142
|
+
'aria-label': 'Clear selection',
|
|
143
|
+
role: 'button',
|
|
144
|
+
tabIndex: 0,
|
|
145
|
+
onKeyDown: (e) => {
|
|
146
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
147
|
+
e.preventDefault();
|
|
148
|
+
handleClear(e);
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
}), !disabled &&
|
|
152
|
+
getIconComponent(open ? 'CaretUp' : 'CaretDown', {
|
|
153
|
+
width: '24px',
|
|
154
|
+
height: '24px',
|
|
155
|
+
color: 'var(--colors-light-foreground-fg-secondary)',
|
|
156
|
+
'aria-hidden': 'true',
|
|
157
|
+
})] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
|
|
150
158
|
border: '1px solid var(--colors-light-border-border-component)',
|
|
151
159
|
}, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
|
|
152
160
|
cursor: 'pointer',
|
|
@@ -158,11 +166,18 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
158
166
|
'&:hover': {
|
|
159
167
|
backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
|
|
160
168
|
},
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
169
|
+
width: '100%',
|
|
170
|
+
boxSizing: 'border-box',
|
|
171
|
+
}, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 24px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-title)", textStyle: {
|
|
172
|
+
overflow: 'hidden',
|
|
173
|
+
textOverflow: 'ellipsis',
|
|
174
|
+
whiteSpace: 'nowrap',
|
|
175
|
+
width: '100%',
|
|
176
|
+
}, children: option })] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
|
|
177
|
+
isOptionSelected(option) &&
|
|
178
|
+
getIconComponent('Check', {
|
|
179
|
+
width: '16px',
|
|
180
|
+
height: '16px',
|
|
181
|
+
color: 'var(--colors-light-foreground-fg-brand-primary)',
|
|
182
|
+
}) })] }, option)))) }) })] }) }));
|
|
168
183
|
};
|