@beydesign/storybook 0.2.21 → 0.2.23
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 +14 -17
- package/package.json +1 -1
|
@@ -111,17 +111,16 @@ 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: [label && (_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-
|
|
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: [label && (_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-md)', height: '40px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
|
|
115
115
|
? 'var(--color-border-border-component-active)'
|
|
116
116
|
: 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
|
|
117
117
|
? 'var(--color-background-bg-component-disabled)'
|
|
118
|
-
: '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", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}) }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
|
|
118
|
+
: '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: [showLeadingIcon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: getIconComponent(leadingIcon, {
|
|
119
|
+
width: '24px',
|
|
120
|
+
height: '24px',
|
|
121
|
+
color: 'var(--color-foreground-fg-secondary)',
|
|
122
|
+
'aria-hidden': 'true',
|
|
123
|
+
}) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
|
|
125
124
|
flexGrow: 1,
|
|
126
125
|
minWidth: 0,
|
|
127
126
|
textAlign: 'left',
|
|
@@ -156,19 +155,17 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
156
155
|
'aria-hidden': 'true',
|
|
157
156
|
})] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
|
|
158
157
|
border: '1px solid var(--color-border-border-component)',
|
|
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-
|
|
158
|
+
}, 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-md)', height: '40px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
|
|
160
159
|
cursor: 'pointer',
|
|
161
160
|
backgroundColor: highlightedIndex === index
|
|
162
|
-
? 'var(--color-background-bg-
|
|
163
|
-
:
|
|
164
|
-
? 'var(--color-background-bg-element)'
|
|
165
|
-
: 'transparent',
|
|
161
|
+
? 'var(--color-background-bg-secondary-action-hover)'
|
|
162
|
+
: 'transparent',
|
|
166
163
|
'&:hover': {
|
|
167
|
-
backgroundColor: 'var(--color-background-bg-
|
|
164
|
+
backgroundColor: 'var(--color-background-bg-secondary-action-hover)',
|
|
168
165
|
},
|
|
169
166
|
width: '100%',
|
|
170
167
|
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% -
|
|
168
|
+
}, 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% - 28px)", 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(--color-text-text-title)", textStyle: {
|
|
172
169
|
overflow: 'hidden',
|
|
173
170
|
textOverflow: 'ellipsis',
|
|
174
171
|
whiteSpace: 'nowrap',
|
|
@@ -176,8 +173,8 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
176
173
|
}, children: option })] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
|
|
177
174
|
isOptionSelected(option) &&
|
|
178
175
|
getIconComponent('Check', {
|
|
179
|
-
width: '
|
|
180
|
-
height: '
|
|
176
|
+
width: '20px',
|
|
177
|
+
height: '20px',
|
|
181
178
|
color: 'var(--color-foreground-fg-brand-primary)',
|
|
182
179
|
}) })] }, option)))) }) })] }) }));
|
|
183
180
|
};
|