@bspk/ui 1.3.3 → 1.3.5

package/src/components/AvatarGroup/Overflow.tsx

@@ -0,0 +1,91 @@
+import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
+import { ListItem } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { Portal } from '-/components/Portal';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle } from '-/utils/scrollListItemsStyle';
+import { useIds } from '-/utils/useIds';
+
+type AvatarGroupOverflowProps = {
+    /** The number of overflow avatars */
+    overflow: number;
+    /** The size of the avatar group */
+    size: SizeVariant;
+    /** The avatars in the overflow */
+    items: AvatarProps[];
+};
+
+export function AvatarGroupOverflow({ items: itemsProp, overflow, size }: AvatarGroupOverflowProps) {
+    const items = useIds(`avatar-overflow`, itemsProp);
+    const menuId = `avatar-overflow-menu-${items[0]?.id}`;
+
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.map((i) => i.id),
+    });
+
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: false,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => closeMenu(),
+        disabled: !open,
+    });
+
+    return (
+        <>
+            <button
+                aria-activedescendant={activeElementId || undefined}
+                aria-controls={open ? menuId : undefined}
+                aria-expanded={open}
+                aria-haspopup="menu"
+                aria-hidden
+                aria-label={`Show ${overflow} more avatar${overflow > 1 ? 's' : ''}`}
+                data-bspk="avatar"
+                data-bspk-owner="avatar-overflow"
+                data-size={size}
+                onBlur={() => closeMenu()}
+                onClick={() => setActiveElementId(activeElementId === null ? items[0]?.id : null)}
+                onKeyDown={handleKeyDown(arrowKeyCallbacks)}
+                ref={elements.setReference}
+                role="combobox"
+            >
+                <span data-overflow-count>+{overflow}</span>
+            </button>
+            {open && (
+                <Portal>
+                    <Menu
+                        id={menuId}
+                        innerRef={elements.setFloating}
+                        role="menu"
+                        style={{
+                            ...floatingStyles,
+                            ...scrollListItemsStyle(5, items.length),
+                            '--list-item-height': `var(--spacing-sizing-12)`,
+                            paddingRight: 'var(--spacing-sizing-04)',
+                        }}
+                        width="fit-content"
+                    >
+                        {items.map((item, index) => (
+                            <ListItem
+                                active={activeElementId === item.id}
+                                key={index}
+                                label={item.name}
+                                leading={<Avatar {...item} hideTooltip size="small" />}
+                            />
+                        ))}
+                    </Menu>
+                </Portal>
+            )}
+        </>
+    );
+}

package/src/components/AvatarGroup/avatar-group.scss

@@ -1,28 +1,48 @@
 [data-bspk='avatar-group'] {
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
     [data-wrap] {
-        width: 100%;
+        min-width: fit-content;
         display: flex;
         flex-direction: row;
-        align-items: end;
-        justify-content: end;
-        overflow: hidden;
+        align-items: center;
+        justify-content: center;
     }
 
-    [data-gap='01'] {
-        gap: var(--spacing-sizing-01);
-    }
+    // data-gap={variant === 'spread' ? (small ? '01' : '02') : undefined}
+
+    [data-bspk='avatar'] {
+        z-index: 1;
+
+        &:hover {
+            z-index: 2;
+        }
 
-    [data-gap='02'] {
-        gap: var(--spacing-sizing-02);
+        &[data-bspk-owner='avatar-overflow'] {
+            --avatar-border: solid 1px var(--stroke-neutral-low);
+
+            background-color: var(--surface-neutral-t1-base);
+        }
     }
 
-    [data-stacked='02']:not(:last-child) {
-        margin-right: -8px;
+    &[data-variant='spread'] {
+        --avatar-border: none;
+
+        [data-bspk='avatar'] + [data-bspk='avatar'] {
+            margin-left: var(--spacing-sizing-02);
+        }
     }
 
-    [data-stacked='01']:not(:last-child) {
-        margin-right: -4px;
+    &[data-variant='stacked'] {
+        --avatar-border: solid 1px var(--stroke-neutral-low);
+
+        [data-bspk='avatar'] + [data-bspk='avatar'] {
+            margin-left: calc(var(--spacing-sizing-02) * -1);
+        }
     }
 }

package/src/components/Badge/BadgeExample.tsx

@@ -6,7 +6,7 @@ export const BadgeExample: ComponentExample<BadgeProps> = {
     render: ({ props, Component }) => {
         return (
             <Component {...props}>
-                <Avatar image="/profile.jpg" name="Andre Giant" />
+                <Avatar image="/avatar-01.png" name="Andre Giant" />
             </Component>
         );
     },

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -13,7 +13,7 @@ export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
                 {props.outline === true ? (
                     <Button label="Button" size="large" />
                 ) : (
-                    <Avatar image="/profile.jpg" name="Andre Giant" />
+                    <Avatar image="/avatar-01.png" name="Andre Giant" />
                 )}
             </Component>
         );

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,37 +1,14 @@
 import './breadcrumb.scss';
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
-import { Button } from '-/components/Button';
+import { BreadcrumbDropdown, BreadcrumbItem } from './BreadcumbDropdown';
 import { Link } from '-/components/Link';
-import { ListItemMenu, ListItemMenuProps } from '-/components/ListItemMenu';
 import { Txt } from '-/components/Txt';
 import { useId } from '-/hooks/useId';
 import { CommonProps } from '-/types/common';
-import { useIds } from '-/utils/useIds';
-
-export type BreadcrumbItem = {
-    /**
-     * The label of the breadcrumb item.
-     *
-     * @example
-     *     Page 1
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The href of the breadcrumb item.
-     *
-     * @example
-     *     https://bspk.anywhere.re
-     *
-     * @required
-     */
-    href: string;
-};
+import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
 
 export type BreadcrumbProps = CommonProps<'id'> &
-    Pick<ListItemMenuProps, 'scrollLimit'> & {
+    ScrollListItemsStyleProps & {
         /**
          * The array of breadcrumb items.
          *
@@ -86,11 +63,9 @@ export type BreadcrumbProps = CommonProps<'id'> &
  * @name Breadcrumb
  * @phase UXReview
  */
-export function Breadcrumb({ id: propId, items: itemsProp = [], scrollLimit }: BreadcrumbProps) {
+export function Breadcrumb({ id: propId, items = [], scrollLimit }: BreadcrumbProps) {
     const id = useId(propId);
 
-    const items = useIds(`breadcrumb-${id}`, itemsProp);
-
     if (items.length < 2) return null;
 
     return (
@@ -101,33 +76,7 @@ export function Breadcrumb({ id: propId, items: itemsProp = [], scrollLimit }: B
                     <SvgChevronRight aria-hidden />
                 </li>
                 {items.length > 5 ? (
-                    <li>
-                        <ListItemMenu
-                            hideWhenClosed
-                            itemOnClick={({ setShow }) => setShow(false)}
-                            items={items.slice(1, items.length - 1)}
-                            label="Expanded breadcrumb"
-                            owner="Breadcrumb"
-                            placement="bottom"
-                            role="menu"
-                            scrollLimit={scrollLimit}
-                            width="200px"
-                        >
-                            {(triggerProps, { setRef, itemCount }) => (
-                                <Button
-                                    {...triggerProps}
-                                    icon={<SvgMoreHoriz />}
-                                    iconOnly
-                                    innerRef={setRef}
-                                    label={`Access to ${itemCount} pages`}
-                                    onClick={triggerProps.onClick}
-                                    size="small"
-                                    variant="tertiary"
-                                />
-                            )}
-                        </ListItemMenu>
-                        <SvgChevronRight aria-hidden />
-                    </li>
+                    <BreadcrumbDropdown id={id} items={items.slice(1, items.length - 1)} scrollLimit={scrollLimit} />
                 ) : (
                     items.slice(1, items.length - 1).map((item, idx) => (
                         <li key={`Breadcrumb-${idx}`}>

package/src/components/Breadcrumb/BreadcumbDropdown.tsx

@@ -0,0 +1,135 @@
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
+import { Button } from '-/components/Button';
+import { ListItem } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { getElementById } from '-/utils/dom';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+import { useIds } from '-/utils/useIds';
+
+export type BreadcrumbItem = {
+    /**
+     * The label of the breadcrumb item.
+     *
+     * @example
+     *     Page 1
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The href of the breadcrumb item.
+     *
+     * @example
+     *     https://bspk.anywhere.re
+     *
+     * @required
+     */
+    href: string;
+};
+
+type BreadcrumbDropdownProps = ScrollListItemsStyleProps & {
+    items: BreadcrumbItem[];
+    id: string;
+};
+
+export function BreadcrumbDropdown({ items: itemsProp, id, scrollLimit }: BreadcrumbDropdownProps) {
+    const menuId = `${id}-menu`;
+
+    const items = useIds(`breadcrumb-${id}`, itemsProp);
+
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.map((i) => i.id),
+    });
+
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: false,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => closeMenu(),
+        disabled: !open,
+    });
+
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId) getElementById(activeElementId)?.click();
+    };
+
+    return (
+        <li>
+            <Button
+                aria-activedescendant={open ? activeElementId || undefined : undefined}
+                aria-controls={open ? menuId : undefined}
+                aria-expanded={open}
+                aria-haspopup="listbox"
+                aria-owns={menuId}
+                icon={<SvgMoreHoriz />}
+                iconOnly
+                innerRef={elements.setReference}
+                label={`Access to ${items.length} pages`}
+                name={`${name}-country-code`}
+                onClick={(event) => {
+                    const nextOpen = !open;
+                    if (nextOpen) {
+                        setActiveElementId(items[0]?.id || null);
+                    } else {
+                        setActiveElementId(null);
+                    }
+                    event.preventDefault();
+                }}
+                onKeyDown={handleKeyDown(
+                    {
+                        ...arrowKeyCallbacks,
+                        ArrowDown: (event) => {
+                            if (!open) spaceEnter();
+                            arrowKeyCallbacks.ArrowDown?.(event);
+                        },
+                        Space: spaceEnter,
+                        Enter: spaceEnter,
+                        Escape: closeMenu,
+                        'Ctrl+Option+Space': spaceEnter,
+                    },
+                    { preventDefault: true, stopPropagation: true },
+                )}
+                role="combobox"
+                size="small"
+                variant="tertiary"
+            />
+            {open && (
+                <Menu
+                    id={menuId}
+                    innerRef={elements.setFloating}
+                    label="Expanded breadcrumb"
+                    owner="Breadcrumb"
+                    role="menu"
+                    style={{
+                        ...scrollListItemsStyle(scrollLimit, items.length),
+                        ...floatingStyles,
+                        width: 'fit-content',
+                        maxWidth: '300px',
+                        minWidth: '150px',
+                    }}
+                >
+                    {items.map((item) => (
+                        <ListItem key={item.id} {...item} active={activeElementId === item.id} tabIndex={-1} />
+                    ))}
+                </Menu>
+            )}
+            <SvgChevronRight aria-hidden />
+        </li>
+    );
+}

package/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
+export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -53,7 +53,11 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
      */
     variant?: ButtonVariant;
     /**
-     * The width of the button.
+     * Determines how the button uses horizontal space.
+     *
+     * If set to 'fill', options expand to fill the container's width.
+     *
+     * If set to 'hug', options only take up as much space as the content requires.
      *
      * @default hug
      */
@@ -94,7 +98,7 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  * @name Button
  * @phase UXReview
  */
-export function Button<As extends ElementType = 'button'>(
+export function Button<As extends ElementType = ElementType>(
     props: AriaAttributes & ElementProps<ButtonProps<As>, As>,
 ): JSX.Element {
     const {
@@ -111,6 +115,7 @@ export function Button<As extends ElementType = 'button'>(
         children,
         innerRef,
         owner,
+        role,
         ...containerProps
     } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
@@ -152,6 +157,7 @@ export function Button<As extends ElementType = 'button'>(
                 containerProps.onMouseOver?.(e);
             }}
             ref={innerRef}
+            role={role || (As !== 'button' ? 'button' : undefined)}
         >
             {children && typeof children !== 'string' ? (
                 children

package/src/components/Button/button.scss

@@ -111,7 +111,7 @@
 
         background-color: var(--primary-background);
         color: var(--foreground-brand-on-primary);
-        border-radius: var(--radius-sm);
+        border-radius: var(--button-border-radius);
 
         &[disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
@@ -147,13 +147,13 @@
     }
 
     &[data-variant='secondary'] {
-        border: solid 1px var(--stroke-neutral-base);
-        border-radius: var(--radius-sm);
+        border: solid var(--button-border-width) var(--stroke-neutral-base);
+        border-radius: var(--button-border-radius);
         color: var(--foreground-neutral-on-surface-variant-01);
 
         &[disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
-            border: solid 1px var(--stroke-neutral-disabled-light);
+            border: solid var(--button-border-width) var(--stroke-neutral-disabled-light);
         }
 
         &:not([disabled]) {
@@ -176,7 +176,7 @@
         &[data-destructive] {
             background: transparent;
             color: var(--status-error);
-            border: solid 1px var(--status-error);
+            border: solid var(--button-border-width) var(--status-error);
         }
     }
 

package/src/components/Calendar/Calendar.rtl.test.tsx

@@ -0,0 +1,22 @@
+import { format } from 'date-fns';
+import { Calendar } from './Calendar';
+import { presets } from './CalendarExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Calendar (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<Calendar {...preset.propState} onChange={() => {}} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<Calendar {...presets[0].propState} onChange={() => {}} />);
+
+        expect(getByText(format(presets[0].propState.value!, 'MMMM'))).toBeInTheDocument();
+    });
+});
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */