@bspk/ui 1.1.26 → 1.1.28

package/src/base.scss

@@ -26,27 +26,40 @@ html:has(body[data-bspk]) {
     scroll-behavior: smooth;
 }
 
-body[data-bspk] {
+:root {
     --z-index-tooltip-popover: 1100;
     --z-index-dialog: 1000;
     --z-index-dropdown: 900;
     --z-index-fab: 800;
     --z-index-navbar: 700;
     --z-index-footer: 600;
+}
 
-    height: 100%;
-    scroll-behavior: smooth;
-
-    @media (prefers-reduced-motion) {
-        [data-animated] {
-            animation: none !important;
-        }
+@media (prefers-reduced-motion) {
+    [data-animated] {
+        animation: none !important;
     }
+}
 
+body[data-bspk] {
+    height: 100%;
+    scroll-behavior: smooth;
     font: var(--body-base);
     background-color: var(--background-base);
     color: var(--foreground-neutral-on-surface);
 
+    /** Remove default input autofill styles */
+    input:-internal-autofill-previewed,
+    input:-internal-autofill-selected,
+    textarea:-internal-autofill-previewed,
+    textarea:-internal-autofill-selected,
+    select:-internal-autofill-previewed,
+    select:-internal-autofill-selected {
+        transition:
+            color calc(infinity * 1s) step-end,
+            background-color calc(infinity * 1s) step-end;
+    }
+
     a {
         color: var(--foreground-link-text-default);
 
@@ -178,73 +191,43 @@ body[data-bspk] {
             color: var(--foreground-neutral-inverse-on-surface) !important;
         }
     }
+}
 
-    /** Remove default input autofill styles */
-    input:-internal-autofill-previewed,
-    input:-internal-autofill-selected,
-    textarea:-internal-autofill-previewed,
-    textarea:-internal-autofill-selected,
-    select:-internal-autofill-previewed,
-    select:-internal-autofill-selected {
-        transition:
-            color calc(infinity * 1s) step-end,
-            background-color calc(infinity * 1s) step-end;
-    }
-
-    [data-sr-only] {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-    }
-
-    ol {
-        list-style-type: decimal;
-
-        li {
-            list-style-type: decimal;
-            margin-left: var(--spacing-sizing-05);
-        }
-    }
+[data-touch-target] {
+    display: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: auto;
+    left: auto;
+}
 
-    ul {
-        list-style-type: disc;
+[data-sr-only] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
 
-        li {
-            list-style-type: disc;
-            margin-left: var(--spacing-sizing-05);
-        }
-    }
+[data-touch-target] ~ * {
+    position: relative;
+    z-index: 2;
+}
 
+/* if touchscreen */
+@media (any-pointer: coarse) {
     [data-touch-target] {
-        display: none;
-        touch-action: manipulation;
-        -webkit-tap-highlight-color: transparent;
-        -webkit-touch-callout: none;
-        user-select: none;
-        position: absolute;
-        z-index: 1;
-        height: 100%;
-        width: 100%;
-        top: auto;
-        left: auto;
-    }
-
-    [data-touch-target] ~ * {
-        position: relative;
-        z-index: 2;
-    }
-
-    /* if touchscreen */
-    @media (any-pointer: coarse) {
-        [data-touch-target] {
-            display: block;
-        }
+        display: block;
     }
 }
 

package/src/demo/ExamplePlaceholder.tsx

@@ -12,7 +12,12 @@ export function ExamplePlaceholder({
     direction = 'row',
     ...props
 }: ElementProps<
-    { hideSize?: boolean; height?: number | string; width?: number | string; direction?: 'column' | 'row' },
+    {
+        hideSize?: boolean;
+        height?: number | string;
+        width?: number | string;
+        direction?: 'column' | 'row';
+    },
     'div'
 >) {
     const ref = useRef<HTMLDivElement | null>(null);

package/src/demo/examples.tsx

@@ -12,7 +12,6 @@ import { BadgeProps } from '../Badge';
 import { BannerAlertProps } from '../BannerAlert';
 import { Button, ButtonProps } from '../Button';
 import { Checkbox } from '../Checkbox';
-import { DropdownOption, DropdownProps } from '../Dropdown';
 import { EmptyStateProps } from '../EmptyState';
 import { Img } from '../Img';
 import { LEADING_COMPONENTS, TRAILING_COMPONENTS, ListItem } from '../ListItem';
@@ -23,6 +22,7 @@ import { ProgressionStepperProps } from '../ProgressionStepper';
 import { Radio } from '../Radio';
 import { SearchBarProps } from '../SearchBar';
 import { SegmentedControlProps } from '../SegmentedControl';
+import { SelectOption, SelectProps } from '../Select';
 import { Switch } from '../Switch';
 import { TabGroupProps } from '../TabGroup';
 import { Tag } from '../Tag';
@@ -146,7 +146,9 @@ export type Preset<P> = {
     isDefault?: boolean;
 };
 
-export type DemoPreset<P = Record<string, unknown>> = Preset<P> & { value: string };
+export type DemoPreset<P = Record<string, unknown>> = Preset<P> & {
+    value: string;
+};
 
 export function createUid(prefix: string = 'uid'): string {
     return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
@@ -309,8 +311,8 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
             );
         },
     },
-    Dropdown: {
-        presets: setPresets<DropdownProps>(() => {
+    Select: {
+        presets: setPresets<SelectProps>(() => {
             return [
                 {
                     label: 'Simple',
@@ -322,11 +324,28 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 },
                 {
                     label: 'Trailing Tags',
-                    state: asProps<DropdownProps<DropdownOption & { tag?: string; tagColor?: ColorVariant }>>({
+                    state: asProps<
+                        SelectProps<
+                            SelectOption & {
+                                tag?: string;
+                                tagColor?: ColorVariant;
+                            }
+                        >
+                    >({
                         options: [
                             //
-                            { value: 'a', label: 'Package A', tag: 'Recommended', tagColor: 'blue' },
-                            { value: 'b', label: 'Package B', tag: 'Best Value', tagColor: 'green' },
+                            {
+                                value: 'a',
+                                label: 'Package A',
+                                tag: 'Recommended',
+                                tagColor: 'blue',
+                            },
+                            {
+                                value: 'b',
+                                label: 'Package B',
+                                tag: 'Best Value',
+                                tagColor: 'green',
+                            },
                             { value: 'c', label: 'Package C' },
                             { value: 'd', label: 'Package D' },
                         ],
@@ -344,7 +363,7 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 },
                 {
                     label: 'Trailing Text',
-                    state: asProps<DropdownProps<DropdownOption & { price: number }>>({
+                    state: asProps<SelectProps<SelectOption & { price: number }>>({
                         options: [
                             //
                             { value: '1', label: 'Option A', price: 400 },
@@ -367,7 +386,7 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 {
                     label: 'Leading Avatar',
                     state: asProps<
-                        DropdownProps<
+                        SelectProps<
                             MenuItem & {
                                 profile: AvatarProps;
                             }
@@ -380,9 +399,21 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                                 label: 'Jessica P.',
                                 profile: { name: 'Jessica P.' },
                             },
-                            { value: 'Louis', label: 'Louis L.', profile: { name: 'Louis L.' } },
-                            { value: 'Harvey', label: 'Harvey S.', profile: { name: 'Harvey S.' } },
-                            { value: 'Mike', label: 'Mike R.', profile: { name: 'Mike R.' } },
+                            {
+                                value: 'Louis',
+                                label: 'Louis L.',
+                                profile: { name: 'Louis L.' },
+                            },
+                            {
+                                value: 'Harvey',
+                                label: 'Harvey S.',
+                                profile: { name: 'Harvey S.' },
+                            },
+                            {
+                                value: 'Mike',
+                                label: 'Mike R.',
+                                profile: { name: 'Mike R.' },
+                            },
                         ],
                         renderListItem: (props) => {
                             return {
@@ -479,7 +510,12 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
         presets: setPresets<PopoverProps>([
             {
                 label: 'With CallToAction',
-                state: { callToAction: { label: 'Click me', onClick: () => action('Call to action clicked!') } },
+                state: {
+                    callToAction: {
+                        label: 'Click me',
+                        onClick: () => action('Call to action clicked!'),
+                    },
+                },
             },
         ]),
     },
@@ -568,9 +604,24 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 label: 'With icons',
                 state: {
                     options: [
-                        { value: '1', label: 'Option 1', icon: <SvgDiamond />, iconActive: <SvgDiamondFill /> },
-                        { value: '2', label: 'Disabled 2', disabled: true, icon: <SvgCircle /> },
-                        { value: '3', label: 'Option 3', icon: <SvgSquare />, iconActive: <SvgSquareFill /> },
+                        {
+                            value: '1',
+                            label: 'Option 1',
+                            icon: <SvgDiamond />,
+                            iconActive: <SvgDiamondFill />,
+                        },
+                        {
+                            value: '2',
+                            label: 'Disabled 2',
+                            disabled: true,
+                            icon: <SvgCircle />,
+                        },
+                        {
+                            value: '3',
+                            label: 'Option 3',
+                            icon: <SvgSquare />,
+                            iconActive: <SvgSquareFill />,
+                        },
                     ],
                 },
             },
@@ -641,9 +692,24 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 label: 'With icons',
                 state: {
                     options: [
-                        { value: '1', label: 'Option 1', icon: <SvgDiamond />, iconActive: <SvgDiamondFill /> },
-                        { value: '2', label: 'Disabled 2', disabled: true, icon: <SvgCircle /> },
-                        { value: '3', label: 'Option 3', icon: <SvgSquare />, iconActive: <SvgSquareFill /> },
+                        {
+                            value: '1',
+                            label: 'Option 1',
+                            icon: <SvgDiamond />,
+                            iconActive: <SvgDiamondFill />,
+                        },
+                        {
+                            value: '2',
+                            label: 'Disabled 2',
+                            disabled: true,
+                            icon: <SvgCircle />,
+                        },
+                        {
+                            value: '3',
+                            label: 'Option 3',
+                            icon: <SvgSquare />,
+                            iconActive: <SvgSquareFill />,
+                        },
                     ],
                 },
             },
@@ -658,8 +724,20 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                             iconActive: <SvgDiamondFill />,
                             badge: 1,
                         },
-                        { value: '2', label: 'Disabled 2', disabled: true, icon: <SvgCircle />, badge: 2 },
-                        { value: '3', label: 'Option 3', icon: <SvgSquare />, iconActive: <SvgSquare />, badge: 3 },
+                        {
+                            value: '2',
+                            label: 'Disabled 2',
+                            disabled: true,
+                            icon: <SvgCircle />,
+                            badge: 2,
+                        },
+                        {
+                            value: '3',
+                            label: 'Option 3',
+                            icon: <SvgSquare />,
+                            iconActive: <SvgSquare />,
+                            badge: 3,
+                        },
                     ],
                 },
             },

package/src/hooks/{useFloatingMenu.ts → useCombobox.ts}

@@ -3,44 +3,31 @@ import { AriaAttributes, useId, useState } from 'react';
 import { CommonProps, InvalidPropsLibrary } from '..';
 import { EVENT_KEY } from '../utils/keyboard';
 
-import { Placement, useFloating } from './useFloating';
+import { useFloating, UseFloatingProps } from './useFloating';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useOutsideClick } from './useOutsideClick';
 
-export type UseFloatingMenuProps = {
-    placement: Placement;
-    triggerProps?: CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary;
-};
+export type UseComboboxProps = CommonProps<'disabled' | 'readOnly'> &
+    InvalidPropsLibrary &
+    Pick<UseFloatingProps, 'offsetOptions' | 'placement' | 'refWidth'>;
 
-export type UseFloatingMenuReturn = {
-    menuProps: {
-        activeIndex: number;
-        'data-placement': Placement | undefined;
-        id: string;
-        innerRef: (node: HTMLElement | null) => void;
-        role: 'listbox';
-        style: React.CSSProperties;
-        tabIndex: number;
-    };
-    triggerProps: {
-        'aria-activedescendant': string | undefined;
-        'aria-controls': string;
-        'aria-expanded': boolean;
-        'aria-haspopup': AriaAttributes['aria-haspopup'];
-        'aria-invalid': boolean | undefined;
-        'aria-owns': string;
-        'aria-readonly': boolean | undefined;
-        'aria-errormessage': string | undefined;
-        role: 'combobox';
-        tabIndex: number;
-        ref: (node: HTMLElement | null) => void;
-        onClick: (event: React.MouseEvent) => void;
-        onKeyDownCapture: (event: React.KeyboardEvent) => boolean;
-    };
-    closeMenu: () => void;
-};
-
-export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProps): UseFloatingMenuReturn {
+/**
+ * Utility hook to manage a combobox component.
+ *
+ * It provides functionality for showing/hiding the menu, handling keyboard navigation, and managing ARIA attributes.
+ *
+ * @param {UseComboboxProps} props - The properties to configure the combobox.
+ * @returns {object} An object containing props for the menu and toggle elements, and a function to close the menu.
+ */
+export function useCombobox({
+    placement = 'bottom',
+    refWidth = true,
+    disabled,
+    errorMessage,
+    invalid,
+    readOnly,
+    offsetOptions,
+}: UseComboboxProps) {
     const menuId = useId();
 
     const [show, setShow] = useState(false);
@@ -50,8 +37,8 @@ export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProp
     const { floatingStyles, middlewareData, elements } = useFloating({
         placement,
         strategy: 'fixed',
-        offsetOptions: 4,
-        refWidth: true,
+        offsetOptions,
+        refWidth,
         hide: !show,
     });
 
@@ -75,15 +62,16 @@ export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProp
             style: floatingStyles,
             tabIndex: -1,
         },
-        triggerProps: {
-            'aria-errormessage': triggerProps?.errorMessage || undefined,
+        toggleProps: {
+            'aria-errormessage': errorMessage || undefined,
             'aria-activedescendant': selectedId || undefined,
             'aria-controls': menuId,
+            'aria-disabled': disabled || undefined,
             'aria-expanded': show,
             'aria-haspopup': 'listbox' as AriaAttributes['aria-haspopup'],
-            'aria-invalid': triggerProps?.invalid || undefined,
+            'aria-invalid': invalid || undefined,
             'aria-owns': menuId,
-            'aria-readonly': triggerProps?.readOnly || undefined,
+            'aria-readonly': readOnly || undefined,
             role: 'combobox',
             tabIndex: 0,
             ref: (node: HTMLElement | null) => elements.setTrigger(node),

package/src/hooks/useFloating.ts

@@ -32,6 +32,45 @@ export type { Placement, Strategy };
 
 const TRANSITION_DELAY = 250;
 
+export type UseFloatingProps = {
+    /**
+     * The preferred placement of the floating element.
+     *
+     * This determines where the floating element will be positioned relative to the reference element.
+     *
+     * @default bottom
+     */
+    placement: Placement;
+    /** A ref object for the arrow element. */
+    arrowRef?: React.MutableRefObject<HTMLElement | null>;
+    /**
+     * The positioning strategy ('absolute' or 'fixed').
+     *
+     * When set to 'fixed', the floating element will be positioned relative to the viewport.
+     *
+     * When set to 'absolute', the floating element will be positioned relative to the nearest positioned ancestor.
+     *
+     * @default fixed
+     */
+    strategy?: Strategy;
+    /**
+     * The offset options for the floating element.
+     *
+     * @default 0
+     */
+    offsetOptions?: OffsetOptions;
+    /**
+     * When set to true, the width of the floating element will match the width of the reference element.
+     *
+     * When set to an HTMLElement, the width of the floating element will match the width of that HTMLElement.
+     *
+     * @default true
+     */
+    refWidth?: HTMLElement | boolean;
+    /** Whether to hide the floating element. */
+    hide?: boolean;
+};
+
 /**
  *
  *
@@ -39,20 +78,13 @@ const TRANSITION_DELAY = 250;
  * @returns
  */
 export function useFloating<TriggerElementType extends HTMLElement>({
-    placement,
+    placement = 'bottom',
     arrowRef,
-    strategy,
+    strategy = 'fixed',
     offsetOptions = 0,
-    refWidth,
+    refWidth = true,
     hide = false,
-}: {
-    placement: Placement;
-    arrowRef?: React.MutableRefObject<HTMLElement | null>;
-    strategy?: Strategy;
-    offsetOptions?: OffsetOptions;
-    refWidth?: boolean;
-    hide?: boolean;
-}) {
+}: UseFloatingProps) {
     const [floatingStyles, setFloatingStylesState] = useState<React.CSSProperties>({
         opacity: 0,
         pointerEvents: 'none',
@@ -72,18 +104,6 @@ export function useFloating<TriggerElementType extends HTMLElement>({
 
     const [floatingElement, setFloatingElement] = useState<HTMLElement | null>(null);
 
-    // const elements: {
-    //   trigger: HTMLElement | null;
-    //   floating: HTMLElement | null;
-    //   setReference: (node: TriggerElementType | null) => void;
-    //   setFloating: (node: HTMLElement | null) => void;
-    // } = {
-    //   trigger: triggerElement,
-    //   floating: floatingElement,
-    //   setReference: setTriggerElement,
-    //   setFloating: setFloatingElement,
-    // };
-
     const computeDebounce = useTimeout();
     const transitionDelay = useTimeout();
 
@@ -129,7 +149,8 @@ export function useFloating<TriggerElementType extends HTMLElement>({
                         size({
                             apply({ rects, elements }: MiddlewareState) {
                                 Object.assign(elements.floating.style, {
-                                    width: `${rects.reference.width}px`,
+                                    width:
+                                        refWidth === true ? `${rects.reference.width}px` : `${refWidth.offsetWidth}px`,
                                 });
                             },
                         }),

package/src/hooks/useKeyboardNavigation.ts

@@ -4,7 +4,7 @@ import { EVENT_KEY } from '../utils/keyboard';
 import { scrollElementIntoView } from '../utils/scrollElementIntoView';
 
 /**
- * This hook provides keyboard navigation for a list of elements. Used inside the Dropdown component.
+ * This hook provides keyboard navigation for a list of elements. Used inside the Select component.
  *
  * @example
  *     import { useRef } from 'react';

package/src/hooks/useOutsideClick.ts

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 /**
- * A hook which calls a method when a click occurs outside of the provided ref. Used inside the Dropdown and Modal
+ * A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
  * components.
  *
  * @example
  *     import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
  *     import React, { useRef, useState } from 'react';
  *
- *     export function Dropdown() {
+ *     export function Example() {
  *     const [isOpen, setIsOpen] = useState(false);
  *     const containerRef = useRef<HTMLDivElement>(null);
  *

package/src/index.ts

@@ -1,7 +1,9 @@
 /**
  * There are no barrel files for this repository.
  *
- * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
+ * Components should be imported directly like "import { Txt } from
+ *
+ * @bspk/ui/Txt".
  */
 
 import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';