@beydesign/storybook 0.2.28 → 0.2.29
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.
|
@@ -5,7 +5,7 @@ import { Box, CircularProgress, ClickAwayListener, Popper, } from '@mui/material
|
|
|
5
5
|
import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
6
6
|
import { getIconComponent } from '../../utils';
|
|
7
7
|
import { Checkbox } from './Checkbox';
|
|
8
|
-
import { Badge, BadgeColor, BadgeSize } from '../UI';
|
|
8
|
+
import { Avatar, AvatarSize, Badge, BadgeColor, BadgeSize } from '../UI';
|
|
9
9
|
export const Dropdown = ({ disabled = false, placeholder = 'Select an option', label = 'Select', showLeadingIcon = false, leadingIcon = 'List', showClear = true, options, required = false, showCheckboxes = false, showTicks = true, onEndReached, isLoadingMore = false, ...props }) => {
|
|
10
10
|
const [open, setOpen] = useState(false);
|
|
11
11
|
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
@@ -36,6 +36,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
36
36
|
// trigger renders the rich "Avatar leading" layout; otherwise it falls back to
|
|
37
37
|
// the plain joined-label text (preserving the original behavior).
|
|
38
38
|
const hasRichSelection = selectedOptions.some((option) => option.avatar || option.badge);
|
|
39
|
+
const hasAvatarOption = normalizedOptions.some((option) => option.avatar);
|
|
39
40
|
const hasSelection = selectedOptions.length > 0;
|
|
40
41
|
// Plain-text representation of the selection, used for the non-rich trigger.
|
|
41
42
|
const displayValue = useMemo(() => selectedOptions.map((option) => option.label).join(', '), [selectedOptions]);
|
|
@@ -151,10 +152,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
151
152
|
? 'var(--color-border-border-brand)'
|
|
152
153
|
: 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
|
|
153
154
|
? 'var(--color-background-bg-component-disabled)'
|
|
154
|
-
: 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: { boxSizing: 'border-box' }, children: [_jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexGrow: 1, minWidth: 0, overflow: "hidden", children: hasSelection && hasRichSelection ? (_jsxs(_Fragment, { children: [
|
|
155
|
-
objectFit: 'cover',
|
|
156
|
-
border: '0.5px solid var(--color-border-border-divider)',
|
|
157
|
-
} })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
|
|
155
|
+
: 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: { boxSizing: 'border-box' }, children: [_jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexGrow: 1, minWidth: 0, overflow: "hidden", children: hasSelection && (hasRichSelection || hasAvatarOption) ? (_jsxs(_Fragment, { children: [hasAvatarOption && (_jsx(Box, { flexShrink: 0, display: "flex", children: _jsx(Avatar, { image: selectedOptions[0].avatar, text: selectedOptions[0].label, size: AvatarSize.xs, border: true }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
|
|
158
156
|
minWidth: 0,
|
|
159
157
|
textAlign: 'left',
|
|
160
158
|
overflow: 'hidden',
|
|
@@ -210,10 +208,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
210
208
|
},
|
|
211
209
|
width: '100%',
|
|
212
210
|
boxSizing: 'border-box',
|
|
213
|
-
}, role: "option", "aria-selected": isOptionSelected(option.value), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', flexGrow: 1, minWidth: 0, overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option.value), onChange: () => handleOptionSelect(option.value), style: { margin: 0, padding: 0 } }) })),
|
|
214
|
-
objectFit: 'cover',
|
|
215
|
-
border: '0.5px solid var(--color-border-border-divider)',
|
|
216
|
-
} })), _jsx(Box, { flexGrow: 1, minWidth: 0, overflow: "hidden", children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
|
|
211
|
+
}, role: "option", "aria-selected": isOptionSelected(option.value), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', flexGrow: 1, minWidth: 0, overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option.value), onChange: () => handleOptionSelect(option.value), style: { margin: 0, padding: 0 } }) })), hasAvatarOption && (_jsx(Box, { flexShrink: 0, display: "flex", children: _jsx(Avatar, { image: option.avatar, text: option.label, size: AvatarSize.xs, border: true }) })), _jsx(Box, { flexGrow: 1, minWidth: 0, overflow: "hidden", children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
|
|
217
212
|
overflow: 'hidden',
|
|
218
213
|
textOverflow: 'ellipsis',
|
|
219
214
|
whiteSpace: 'nowrap',
|