@bspk/ui 1.1.26 → 1.1.28

package/src/{Dropdown.tsx → Select.tsx}

@@ -1,29 +1,29 @@
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 
-import './dropdown.scss';
+import './select.scss';
 import { ListItem } from './ListItem';
 import { Menu, MenuProps } from './Menu';
 import { Portal } from './Portal';
+import { useCombobox } from './hooks/useCombobox';
 import { Placement } from './hooks/useFloating';
-import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 
 import { CommonProps, InvalidPropsLibrary } from './';
 
-export type DropdownOption = Record<string, unknown> & {
+export type SelectOption = Record<string, unknown> & {
     /** The value of the option. */
     value: string;
     /** The label of the option. This is the text that will be displayed on the option. */
     label: string;
 };
 
-export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonProps<
+export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<
     'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
 > &
     InvalidPropsLibrary &
     Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
         /**
-         * Array of options to display in the dropdown
+         * Array of options to display in the select
          *
          * @example
          *     [
@@ -39,7 +39,7 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
          *         { value: '10', label: 'Option 10' },
          *     ];
          *
-         * @type Array<DropdownOption>
+         * @type Array<SelectOption>
          * @required
          */
         options: T[];
@@ -50,18 +50,18 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
          */
         value?: Array<string>;
         /**
-         * Placeholder for the dropdown
+         * Placeholder for the select
          *
          * @default Select one...
          */
         placeholder?: string;
         /**
-         * The placement of the dropdown menu. Will be ignored if the menu is too close to the edge of the screen.
+         * The placement of the select menu. Will be ignored if the menu is too close to the edge of the screen.
          *
          * @default bottom
          */
         placement?: Extract<Placement, 'bottom' | 'top'>;
-        /** The style of the dropdown. */
+        /** The style of the select. */
         style?: React.CSSProperties;
         /**
          * The function to call when the selected values change.
@@ -75,15 +75,15 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
  * A field element that allows users to select one option from a list of available choices. *
  *
  * @example
- *     import { Dropdown } from '@bspk/ui/Dropdown';
+ *     import { Select } from '@bspk/ui/Select';
  *
  *     export function Example() {
  *         const [selected, setSelected] = React.useState<string[]>([]);
  *         return (
- *             <Dropdown
+ *             <Select
  *                 aria-label="Select an option"
  *                 itemCount={5}
- *                 name="example-dropdown"
+ *                 name="example-select"
  *                 onChange={setSelected}
  *                 options={[
  *                     { value: '1', label: 'Option 1' },
@@ -104,9 +104,9 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
  *         );
  *     }
  *
- * @name Dropdown
+ * @name Select
  */
-function Dropdown({
+function Select({
     options = [],
     value: selected,
     onChange,
@@ -119,26 +119,24 @@ function Dropdown({
     invalid,
     errorMessage,
     readOnly,
-    placement = 'bottom',
     name,
     isMulti,
     renderListItem,
     style: styleProp,
     selectAll,
-}: DropdownProps) {
+}: SelectProps) {
     const id = useId(propId);
 
-    const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
-        placement,
-        triggerProps: {
-            disabled,
-            invalid,
-            readOnly,
-            errorMessage,
-        },
+    const { toggleProps, menuProps, closeMenu } = useCombobox({
+        placement: 'bottom',
+        disabled,
+        invalid,
+        readOnly,
+        errorMessage,
+        offsetOptions: 4,
     });
 
-    const dropdownLabel = isMulti
+    const selectLabel = isMulti
         ? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
         : options.find((o) => o.value === selected?.[0])?.label;
 
@@ -147,17 +145,17 @@ function Dropdown({
             <input defaultValue={selected} name={name} type="hidden" />
             <button
                 aria-label={ariaLabel}
-                data-bspk="dropdown"
-                data-empty={dropdownLabel ? undefined : ''}
+                data-bspk="select"
+                data-empty={selectLabel ? undefined : ''}
                 data-invalid={invalid || undefined}
                 data-size={size}
                 disabled={disabled || readOnly}
                 id={id}
                 style={styleProp}
-                {...triggerProps}
+                {...toggleProps}
             >
-                <ListItem data-placeholder="" label={dropdownLabel || placeholder} readOnly />
-                <span data-svg>
+                <ListItem data-placeholder="" label={selectLabel || placeholder} readOnly />
+                <span data-icon>
                     <SvgChevronRight />
                 </span>
             </button>
@@ -182,8 +180,8 @@ function Dropdown({
     );
 }
 
-Dropdown.bspkName = 'Dropdown';
+Select.bspkName = 'Select';
 
-export { Dropdown };
+export { Select };
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/{DropdownField.tsx → SelectField.tsx}

@@ -1,8 +1,8 @@
-import { DropdownProps, Dropdown } from './Dropdown';
 import { FormFieldProps, FormField } from './FormField';
+import { SelectProps, Select } from './Select';
 
-export type DropdownFieldProps = Pick<
-    DropdownProps,
+export type SelectFieldProps = Pick<
+    SelectProps,
     | 'disabled'
     | 'itemCount'
     | 'name'
@@ -19,15 +19,15 @@ export type DropdownFieldProps = Pick<
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
- * This component takes properties from the FormField and Dropdown components.
+ * This component takes properties from the FormField and Select components.
  *
  * @example
- *     import { DropdownField } from '@bspk/ui/DropdownField';
+ *     import { SelectField } from '@bspk/ui/SelectField';
  *
  *     export function Example() {
  *         const [state, setState] = React.useState(['option1']);
  *         return (
- *             <DropdownField
+ *             <SelectField
  *                 controlId="Example controlId"
  *                 label="Example label"
  *                 name="Example name"
@@ -43,23 +43,23 @@ export type DropdownFieldProps = Pick<
  *         );
  *     }
  *
- * @name DropdownField
+ * @name SelectField
  */
-function DropdownField({
+function SelectField({
     label,
     errorMessage: errorMessageProp,
     helperText,
     controlId: id,
     labelTrailing,
     required,
-    ...dropdownProps
-}: DropdownFieldProps) {
-    const errorMessage = (!dropdownProps.readOnly && !dropdownProps.disabled && errorMessageProp) || undefined;
+    ...selectProps
+}: SelectFieldProps) {
+    const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
 
     return (
         <FormField
             controlId={id}
-            data-bspk="dropdown-field"
+            data-bspk="select-field"
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
@@ -67,14 +67,14 @@ function DropdownField({
             required={required}
         >
             {(fieldProps) => (
-                <Dropdown {...dropdownProps} {...fieldProps} aria-label={label} id={id} invalid={!!errorMessage} />
+                <Select {...selectProps} {...fieldProps} aria-label={label} id={id} invalid={!!errorMessage} />
             )}
         </FormField>
     );
 }
 
-DropdownField.bspkName = 'DropdownField';
+SelectField.bspkName = 'SelectField';
 
-export { DropdownField };
+export { SelectField };
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TabGroup.tsx

@@ -22,8 +22,7 @@ export type TabGroupOption = {
      */
     label: string;
     /**
-     * Determines if the element is
-     * [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
      *
      * @default false
      */
@@ -87,15 +86,15 @@ export type TabGroupProps = {
      */
     size?: TabGroupSize;
     /**
-     * When 'fill' the options will fill the width of the container. When 'hug',
-     * the options will be as wide as their content.
+     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
+     * content.
      *
      * @default hug
      */
     width?: 'fill' | 'hug';
     /**
-     * When width is 'hug' this determines if the trailing underline should be
-     * showing. When width is 'fill' this property isn't applicable.
+     * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
+     * property isn't applicable.
      *
      * @default false
      */
@@ -164,10 +163,7 @@ function TabGroup({
                             {(isActive && item.iconActive) || item.icon}
                             {item.label}
                             {item.badge && !item.disabled && !isActive && (
-                                <Badge
-                                    count={item.badge}
-                                    size={TAB_BADGE_SIZES[size]}
-                                />
+                                <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
                             )}
                         </span>
                     </button>

package/src/Tag.tsx

@@ -51,8 +51,7 @@ export type TagProps<As extends ElementType = 'span'> = {
 };
 
 /**
- * A non-interactive visual indicators to draw attention or categorization of a
- * component.
+ * A non-interactive visual indicators to draw attention or categorization of a component.
  *
  * @example
  *     import { Tag } from '@bspk/ui/Tag';

package/src/TextField.tsx

@@ -3,12 +3,7 @@ import { TextInputProps, TextInput } from './TextInput';
 
 import { InvalidPropsLibrary } from '.';
 
-export type TextFieldProps =
-    InvalidPropsLibrary &
-    Pick<
-        FormFieldProps,
-        'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'
-    > &
+export type TextFieldProps = InvalidPropsLibrary &
     Pick<
         TextInputProps,
         | 'autoComplete'
@@ -24,11 +19,11 @@ export type TextFieldProps =
         | 'trailing'
         | 'type'
         | 'value'
-    >;
+    > &
+    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
 
 /**
- * A text input that allows users to enter text, numbers or symbols in a
- * singular line.
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
  *
  * This component takes properties from the FormField and TextInput components.
  *
@@ -61,9 +56,7 @@ function TextField({
     required,
     ...inputProps
 }: TextFieldProps) {
-    const errorMessage =
-        (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) ||
-        undefined;
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
 
     return (
         <FormField
@@ -76,13 +69,7 @@ function TextField({
             required={required}
         >
             {(fieldProps) => (
-                <TextInput
-                    {...inputProps}
-                    {...fieldProps}
-                    aria-label={label}
-                    id={controlId}
-                    required={required}
-                />
+                <TextInput {...inputProps} {...fieldProps} aria-label={label} id={controlId} required={required} />
             )}
         </FormField>
     );

package/src/TextInput.tsx

@@ -1,10 +1,5 @@
 import { SvgCancel } from '@bspk/icons/Cancel';
-import {
-    ChangeEvent,
-    HTMLInputAutoCompleteAttribute,
-    HTMLInputTypeAttribute,
-    ReactNode,
-} from 'react';
+import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
 
 import { useId } from './hooks/useId';
 
@@ -20,14 +15,7 @@ export const DEFAULT = {
 } as const;
 
 export type TextInputProps = CommonProps<
-    | 'aria-label'
-    | 'disabled'
-    | 'id'
-    | 'name'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'value'
+    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
 > &
     InvalidPropsLibrary & {
         /**
@@ -53,8 +41,7 @@ export type TextInputProps = CommonProps<
          */
         type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
         /**
-         * Specifies if user agent has any permission to provide automated
-         * assistance in filling out form field values.
+         * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
          * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
          *
          * @default off
@@ -63,9 +50,8 @@ export type TextInputProps = CommonProps<
     };
 
 /**
- * A text input that allows users to enter text, numbers or symbols in a
- * singular line. This is the base element and is not intended to be used
- * directly. Use the TextField component.
+ * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
+ * not intended to be used directly. Use the TextField component.
  *
  * @example
  *     import { useState } from 'react';
@@ -74,14 +60,7 @@ export type TextInputProps = CommonProps<
  *     export function Example() {
  *         const [value, setValue] = useState<string>('');
  *
- *         return (
- *             <TextInput
- *                 aria-label="Example aria-label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
+ *         return <TextInput aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
  *     }
  *
  * @element

package/src/Textarea.tsx

@@ -11,9 +11,7 @@ const DEFAULT = {
     textSize: 'medium',
 } as const;
 
-export type TextareaProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'
-> &
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> &
     InvalidPropsLibrary & {
         /**
          * Callback when the value of the field changes.
@@ -21,10 +19,7 @@ export type TextareaProps = CommonProps<
          * @type (next: String, Event) => void
          * @required
          */
-        onChange: (
-            next: string,
-            event?: ChangeEvent<HTMLTextAreaElement>,
-        ) => void;
+        onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
         /**
          * The text size of the field.
          *
@@ -72,13 +67,11 @@ export type TextareaProps = CommonProps<
     };
 
 /**
- * A component that allows users to input large amounts of text that could span
- * multiple lines.
+ * A component that allows users to input large amounts of text that could span multiple lines.
  *
- * This component gives you a textarea HTML element that automatically adjusts
- * its height to match the length of the content within maximum and minimum
- * rows. A character counter when a maxLength is set to show the number of
- * characters remaining below the limit.
+ * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
+ * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
+ * remaining below the limit.
  *
  * @example
  *     import { useState } from 'react';
@@ -87,14 +80,7 @@ export type TextareaProps = CommonProps<
  *     export function Example() {
  *         const [value, setValue] = useState<string>('');
  *
- *         return (
- *             <Textarea
- *                 aria-label="Example aria-label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
+ *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
  *     }
  *
  * @element
@@ -119,14 +105,8 @@ function Textarea({
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
     // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(
-        DEFAULT.maxRows,
-        Math.max(minRowsProp, DEFAULT.minRows),
-    );
-    const maxRows = Math.max(
-        DEFAULT.minRows,
-        Math.min(maxRowsProp, DEFAULT.maxRows),
-    );
+    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
+    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
 
     return (
         <div
@@ -155,8 +135,7 @@ function Textarea({
                     const target = event.target as HTMLTextAreaElement;
                     // we know the textarea was resized, so we don't want to auto-size it
                     if (target.style.height) return;
-                    (target.nextSibling as HTMLElement).innerText =
-                        `${target.value}\n`;
+                    (target.nextSibling as HTMLElement).innerText = `${target.value}\n`;
                 }}
                 placeholder={placeholder}
                 ref={innerRef}

package/src/TextareaField.tsx

@@ -3,14 +3,10 @@ import { TextareaProps, Textarea } from './Textarea';
 import { Txt } from './Txt';
 import { tryIntParse } from './utils/tryIntPsrse';
 
-export type TextareaFieldProps = Pick<
-    FormFieldProps,
-    'controlId' | 'errorMessage' | 'helperText' | 'label'
-> &
+export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label'> &
     TextareaProps;
 /**
- * A component that allows users to input large amounts of text that could span
- * multiple lines.
+ * A component that allows users to input large amounts of text that could span multiple lines.
  *
  * This component takes properties from the FormField and Textarea components.
  *
@@ -49,8 +45,7 @@ function TextareaField({
     ...textareaProps
 }: TextareaFieldProps) {
     const maxLength = tryIntParse(maxLengthProp) || -1;
-    const errorMessage =
-        (!readOnly && !disabled && errorMessageProp) || undefined;
+    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
 
     if (typeof onChange !== 'function') return null;
 

package/src/Txt.tsx

@@ -30,8 +30,7 @@ export type TxtProps<As extends ElementType = 'span'> = {
 };
 
 /**
- * A text component that applies the correct font styles based on the variant
- * and size. variant
+ * A text component that applies the correct font styles based on the variant and size. variant
  *
  * @example
  *     import { Txt } from '@bspk/ui/Txt';
@@ -56,11 +55,7 @@ function Txt<As extends ElementType = 'span'>({
     const As: ElementType = as || 'span';
 
     return (
-        <As
-            {...containerProps}
-            data-bspk="txt"
-            style={{ ...styleProp, font: `var(--${variant})` }}
-        >
+        <As {...containerProps} data-bspk="txt" style={{ ...styleProp, font: `var(--${variant})` }}>
             {content}
         </As>
     );