@bspk/ui 1.1.27 → 1.1.28

package/src/ProgressBar.tsx

@@ -35,15 +35,14 @@ export type ProgressBarProps = {
  * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
  * occurring in the background.
  *
- * @name ProgressBar
  * @example
- *      import { ProgressBar } from '@bspk/ui/ProgressBar';
+ *     import { ProgressBar } from '@bspk/ui/ProgressBar';
+ *
+ *     export function Example() {
+ *         return <ProgressBar label="Example label" completion={50} />;
+ *     }
  *
- *      export function Example() {
- *          return (
- *              <ProgressBar label="Example label" completion={50} />
- *          );
- *      }
+ * @name ProgressBar
  */
 function ProgressBar({ size = 'large', completion = 0, align = 'center', label }: ProgressBarProps) {
     const id = useId();

package/src/ProgressCircle.tsx

@@ -26,15 +26,14 @@ export type ProgressCircleProps = {
 /**
  * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
  *
- * @name ProgressCircle
  * @example
- *      import { ProgressCircle } from '@bspk/ui/ProgressCircle';
+ *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
+ *
+ *     export function Example() {
+ *         return <ProgressCircle label="Example label" />;
+ *     }
  *
- *      export function Example() {
- *          return (
- *              <ProgressCircle label="Example label"/>
- *          );
- *      }
+ * @name ProgressCircle
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircleProps) {
     let variant: TxtVariant = 'labels-base';

package/src/ProgressionStepper.tsx

@@ -65,19 +65,14 @@ export type ProgressionStepperProps = {
 /**
  * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
  *
- * @name ProgressionStepper
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
  *     export function Example() {
- *         return (
- *             <ProgressionStepper steps={[
- *                 { name: 'Step 1' },
- *                 { name: 'Step 2' },
- *                 { name: 'Step 3' },
- *             ]} />
- *         );
+ *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *     }
+ *
+ * @name ProgressionStepper
  */
 function ProgressionStepper({
     steps = [],

package/src/RadioGroup.tsx

@@ -33,8 +33,15 @@ export type RadioGroupProps = CommonProps<'name'> & {
      *
      * @example
      *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2', description: 'Description here' },
+     *         {
+     *             value: '1',
+     *             label: 'Option 1',
+     *         },
+     *         {
+     *             value: '2',
+     *             label: 'Option 2',
+     *             description: 'Description here',
+     *         },
      *         { value: '3', label: 'Option 3' },
      *     ];
      *

package/src/SearchBar.tsx

@@ -6,14 +6,10 @@ import { MenuItem, MenuProps, Menu } from './Menu';
 import { Portal } from './Portal';
 import { TextInputProps, TextInput } from './TextInput';
 import { Txt } from './Txt';
-import { useFloatingMenu } from './hooks/useFloatingMenu';
+import { useCombobox } from './hooks/useCombobox';
 import { useId } from './hooks/useId';
-//import { useFloatingMenu } from './hooks/useFloatingMenu';
 
-export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<
-    MenuProps<T>,
-    'itemCount' | 'noResultsMessage'
-> &
+export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'itemCount' | 'noResultsMessage'> &
     Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'size'> & {
         /** The current value of the search bar. */
         value?: string;
@@ -83,8 +79,7 @@ export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<
  *     export function Example() {
  *         const [searchText, setSearchText] = useState<string>('');
  *
- *         const handleItemSelect = (item) =>
- *             console.log('Selected item:', item);
+ *         const handleItemSelect = (item) => console.log('Selected item:', item);
  *
  *         return (
  *             <SearchBar
@@ -129,15 +124,10 @@ function SearchBar({
 }: SearchBarProps) {
     const id = useId(idProp);
     const {
-        triggerProps: {
-            ref: triggerRef,
-            onClick,
-            onKeyDownCapture,
-            ...triggerProps
-        },
+        toggleProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps },
         menuProps,
         closeMenu,
-    } = useFloatingMenu({
+    } = useCombobox({
         placement: 'bottom-start',
     });
 
@@ -162,8 +152,8 @@ function SearchBar({
                     size={size}
                     value={value}
                     {...triggerProps}
-                    onClick={(event) => {
-                        if (items?.length) onClick(event);
+                    onClick={() => {
+                        if (items?.length) onClick();
                     }}
                     onKeyDownCapture={(event) => {
                         const handled = onKeyDownCapture(event);
@@ -196,9 +186,7 @@ function SearchBar({
                         }
                         onChange={(selectedValues, event) => {
                             event?.preventDefault();
-                            const item = items?.find(
-                                (i) => i.value === selectedValues[0],
-                            );
+                            const item = items?.find((i) => i.value === selectedValues[0]);
                             onSelect?.(item);
                             onChange(item?.label || '');
                             closeMenu();

package/src/SegmentedControl.tsx

@@ -8,23 +8,18 @@ import { ElementProps } from './';
 
 export type SegmentedControlOption = {
     /**
-     * The label of the option. This is the text that will be displayed on the
-     * option.
+     * The label of the option. This is the text that will be displayed on the option.
      *
      * @required
      */
     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
      */
     disabled?: boolean;
-    /**
-     * The value of the option. If not provided, the label will be used as the
-     * value.
-     */
+    /** The value of the option. If not provided, the label will be used as the value. */
     value?: string;
     /**
      * The the icon to display before the label.
@@ -42,8 +37,7 @@ export type SegmentedControlOption = {
 
 export type SegmentedControlProps = {
     /**
-     * The options to display. Each option has a label and an optional leading
-     * icon.
+     * The options to display. Each option has a label and an optional leading icon.
      *
      * @example
      *     [
@@ -78,16 +72,15 @@ export type SegmentedControlProps = {
      */
     size?: 'medium' | 'small';
     /**
-     * The width of the options. If set to 'fill', the options will fill the
-     * width of the container. If set to 'hug', the options will be as wide as
-     * their content.
+     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
+     * the options will be as wide as their content.
      *
      * @default hug
      */
     width?: 'fill' | 'hug';
     /**
-     * Determines if the labels of the options should be displayed. If icons are
-     * not provided for every option this is ignored and labels are shown.
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
      *
      * @default true
      */
@@ -131,42 +124,26 @@ function SegmentedControl({
     const options = Array.isArray(optionsProp) ? optionsProp : [];
     useOptionIconsInvalid(options);
 
-    const hideLabels =
-        showLabelsProp === false &&
-        options.every((item) => item.icon && item.label);
+    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
 
     return (
-        <div
-            {...containerProps}
-            data-bspk="segmented-control"
-            data-size={size}
-            data-width={width}
-        >
+        <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
             {options.map((item, index) => {
                 const isActive = item.value === value;
                 return (
                     <Fragment key={item.value}>
-                        <Tooltip
-                            disabled={!hideLabels}
-                            label={item.label}
-                            placement="top"
-                        >
+                        <Tooltip disabled={!hideLabels} label={item.label} placement="top">
                             <button
                                 aria-label={item.label}
                                 data-first={index === 0 || undefined}
-                                data-last={
-                                    index === options.length - 1 || undefined
-                                }
+                                data-last={index === options.length - 1 || undefined}
                                 data-selected={isActive || undefined}
                                 disabled={item.disabled || undefined}
-                                onClick={() =>
-                                    onChange(item.value || item.label)
-                                }
+                                onClick={() => onChange(item.value || item.label)}
                             >
                                 <span data-outer>
                                     <span data-inner>
-                                        {(isActive && item.iconActive) ||
-                                            item.icon}
+                                        {(isActive && item.iconActive) || item.icon}
                                         {!hideLabels && item.label}
                                     </span>
                                 </span>

package/src/Select.tsx

@@ -4,8 +4,8 @@ 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 './';
@@ -119,7 +119,6 @@ function Select({
     invalid,
     errorMessage,
     readOnly,
-    placement = 'bottom',
     name,
     isMulti,
     renderListItem,
@@ -128,14 +127,13 @@ function Select({
 }: 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 selectLabel = isMulti
@@ -154,7 +152,7 @@ function Select({
                 disabled={disabled || readOnly}
                 id={id}
                 style={styleProp}
-                {...triggerProps}
+                {...toggleProps}
             >
                 <ListItem data-placeholder="" label={selectLabel || placeholder} readOnly />
                 <span data-icon>

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>
     );