@beydesign/storybook 0.2.27 → 0.2.29

package/dist/stories/Form/Dropdown.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DropdownProps } from './types';
-export declare const Dropdown: React.FC<DropdownProps>;
+export declare const Dropdown: <T extends string = string>({ disabled, placeholder, label, showLeadingIcon, leadingIcon, showClear, options, required, showCheckboxes, showTicks, onEndReached, isLoadingMore, ...props }: DropdownProps<T>) => React.JSX.Element;

package/dist/stories/Form/Dropdown.js

@@ -5,7 +5,7 @@ import { Box, CircularProgress, ClickAwayListener, Popper, } from '@mui/material
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
 import { Checkbox } from './Checkbox';
-import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { Avatar, AvatarSize, Badge, BadgeColor, BadgeSize } from '../UI';
 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 }) => {
     const [open, setOpen] = useState(false);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
@@ -36,6 +36,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
     // trigger renders the rich "Avatar leading" layout; otherwise it falls back to
     // the plain joined-label text (preserving the original behavior).
     const hasRichSelection = selectedOptions.some((option) => option.avatar || option.badge);
+    const hasAvatarOption = normalizedOptions.some((option) => option.avatar);
     const hasSelection = selectedOptions.length > 0;
     // Plain-text representation of the selection, used for the non-rich trigger.
     const displayValue = useMemo(() => selectedOptions.map((option) => option.label).join(', '), [selectedOptions]);
@@ -151,10 +152,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                         ? 'var(--color-border-border-brand)'
                         : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
                         ? 'var(--color-background-bg-component-disabled)'
-                        : '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: [selectedOptions[0].avatar && (_jsx(Box, { component: "img", src: selectedOptions[0].avatar, alt: "", width: "24px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)", flexShrink: 0, sx: {
-                                            objectFit: 'cover',
-                                            border: '0.5px solid var(--color-border-border-divider)',
-                                        } })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                        : '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: {
                                             minWidth: 0,
                                             textAlign: 'left',
                                             overflow: 'hidden',
@@ -210,10 +208,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                     },
                                     width: '100%',
                                     boxSizing: 'border-box',
-                                }, 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 } }) })), option.avatar && (_jsx(Box, { component: "img", src: option.avatar, alt: "", width: "24px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)", flexShrink: 0, sx: {
-                                                    objectFit: 'cover',
-                                                    border: '0.5px solid var(--color-border-border-divider)',
-                                                } })), _jsx(Box, { flexGrow: 1, minWidth: 0, overflow: "hidden", children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                                }, 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: {
                                                         overflow: 'hidden',
                                                         textOverflow: 'ellipsis',
                                                         whiteSpace: 'nowrap',

package/dist/stories/Form/types.d.ts

@@ -248,9 +248,9 @@ export declare enum DropdownType {
  * when present, render a leading avatar and a trailing badge pill (matching the
  * "Avatar leading" variant in Figma).
  */
-export type DropdownOption = {
+export type DropdownOption<T extends string = string> = {
     /** Stable identifier used for selection and returned by onChange */
-    value: string;
+    value: T;
     /** Human-readable text shown for the option */
     label: string;
     /** Optional leading avatar image URL (rendered as a 24px rounded avatar) */
@@ -258,24 +258,30 @@ export type DropdownOption = {
     /** Optional trailing badge pill text (e.g. "Screening Interview") */
     badge?: string;
 };
-type SingleSelectDropdownProps = {
+type SingleSelectDropdownProps<T extends string = string> = {
     /** The value of the selected option */
-    value: string;
+    value: T;
     /** The onChange handler for the selected option */
-    onChange: (value: string) => void;
+    onChange: (value: T) => void;
     /** The type of the dropdown */
     type: DropdownType.SingleSelect;
 };
-type MultiSelectDropdownProps = {
+type MultiSelectDropdownProps<T extends string = string> = {
     /** The value of the selected options */
-    value: string[];
+    value: T[];
     /** The onChange handler for the selected options */
-    onChange: (value: string[]) => void;
+    onChange: (value: T[]) => void;
     /** The type of the dropdown */
     type: DropdownType.MultiSelect;
 };
-type DropdownBaseProps = SingleSelectDropdownProps | MultiSelectDropdownProps;
-export type DropdownProps = DropdownBaseProps & {
+type DropdownBaseProps<T extends string = string> = SingleSelectDropdownProps<T> | MultiSelectDropdownProps<T>;
+/**
+ * Props for the {@link Dropdown}. Generic over the option value type `T`
+ * (constrained to `string`). Leaving `T` unspecified defaults it to `string`,
+ * so existing consumers are unaffected; passing a string-literal union (e.g.
+ * `Dropdown<'a' | 'b'>`) gives type-safe `value`/`onChange` with no casts.
+ */
+export type DropdownProps<T extends string = string> = DropdownBaseProps<T> & {
     /** The label of the dropdown */
     label?: string | null;
     /**
@@ -284,7 +290,7 @@ export type DropdownProps = DropdownBaseProps & {
      * {@link DropdownOption} objects for id-based selection and avatar/badge
      * support.
      */
-    options: string[] | DropdownOption[];
+    options: T[] | DropdownOption<T>[];
     /** The placeholder of the dropdown */
     placeholder?: string;
     /** Whether the dropdown is disabled */

package/dist/stories/UI/Avatar.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AvatarImage, AvatarSize, AvatarStyle } from './types';
+import { AvatarSize, AvatarStyle } from './types';
 import { Avatar as MuiAvatar, } from '@mui/material';
 import { User } from '@phosphor-icons/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getInitials } from '../../utils';
-export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false, image = AvatarImage, size = AvatarSize.xxl, style: customStyle, text = 'Scarlett Johansson', }) => {
+export const Avatar = ({ avatarStyle, border = false, image, size = AvatarSize.xxl, style: customStyle, text, }) => {
+    // When the caller doesn't pin a style, derive it from the data so
+    // `<Avatar image={url} text={name} />` "just works": an image wins, then any
+    // non-empty text renders initials, otherwise the placeholder icon.
+    const resolvedStyle = avatarStyle ??
+        (image?.trim()
+            ? AvatarStyle.Picture
+            : text?.trim()
+                ? AvatarStyle.Letters
+                : AvatarStyle.Placeholder);
     const getDimensions = (avatarSize) => {
         switch (avatarSize) {
             case AvatarSize.xs:
@@ -58,16 +67,16 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
                 ? '1px solid var(--color-border-border-component)'
                 : 'none',
             backgroundColor: 'var(--color-background-bg-card-highlight)',
-            color: getColor(avatarStyle),
+            color: getColor(resolvedStyle),
             fontSize: getTextSize(),
             borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)',
             ...customStyle,
         },
     };
-    if (avatarStyle === AvatarStyle.Letters) {
-        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { size: getTextSize(), weight: TypographyWeight.Medium, children: getInitials(text) }) }));
+    if (resolvedStyle === AvatarStyle.Letters) {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { size: getTextSize(), weight: TypographyWeight.Medium, children: getInitials(text ?? '') }) }));
     }
-    else if (avatarStyle === AvatarStyle.Picture) {
+    else if (resolvedStyle === AvatarStyle.Picture) {
         return _jsx(MuiAvatar, { ...props, src: image });
     }
     else {

package/dist/stories/UI/types.d.ts

@@ -118,8 +118,12 @@ export declare const AvatarImage = "https://encrypted-tbn0.gstatic.com/images?q=
  * Avatar component props
  */
 export type AvatarProps = {
-    /** Style variant of the avatar */
-    avatarStyle: AvatarStyle;
+    /**
+     * Style variant of the avatar. When omitted, it is derived from the data:
+     * `image` present → `Picture`, else non-empty `text` → `Letters`, else
+     * `Placeholder`. Pass explicitly to override the derivation.
+     */
+    avatarStyle?: AvatarStyle;
     /** Text content of the avatar if avatarStyle is Letters */
     text?: string;
     /** Image source of the avatar if avatarStyle is Picture  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.27",
+  "version": "0.2.29",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",