@bspk/ui 1.1.12 → 1.1.14

package/src/TextInput.tsx

@@ -4,38 +4,39 @@ import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, Re
 
 import { useId } from './hooks/useId';
 
-import { ElementProps, CommonProps } from '.';
+import { ElementProps, CommonProps, InvalidPropsLibrary } from '.';
 
 export type TextInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
-> & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    /** The ref of the container. */
-    containerRef?: (node: HTMLElement | null) => void;
-    /** The ref of the input. */
-    inputRef?: (node: HTMLElement | null) => void;
-    /** The trailing element to display in the field. */
-    trailing?: ReactNode;
-    /** The leading element to display in the field. */
-    leading?: ReactNode;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /** The type of the input. */
-    type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
-    /**
-     * 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
-     */
-    autoComplete?: HTMLInputAutoCompleteAttribute;
-};
+    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
+> &
+    InvalidPropsLibrary & {
+        /**
+         * Callback when the value of the field changes.
+         *
+         * @type (next: String, Event) => void
+         * @required
+         */
+        onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+        /** The ref of the container. */
+        containerRef?: (node: HTMLElement | null) => void;
+        /** The ref of the input. */
+        inputRef?: (node: HTMLElement | null) => void;
+        /** The trailing element to display in the field. */
+        trailing?: ReactNode;
+        /** The leading element to display in the field. */
+        leading?: ReactNode;
+        /** The placeholder of the field. */
+        placeholder?: string;
+        /** The type of the input. */
+        type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
+        /**
+         * 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
+         */
+        autoComplete?: HTMLInputAutoCompleteAttribute;
+    };
 
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
@@ -63,6 +64,7 @@ function TextInput({
     disabled,
     autoComplete = 'off',
     containerRef,
+    errorMessage,
     ...otherProps
 }: ElementProps<TextInputProps, 'div'>) {
     const id = useId(idProp);
@@ -82,6 +84,7 @@ function TextInput({
         >
             {leading && <span data-leading>{leading}</span>}
             <input
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 autoComplete={autoComplete}

package/src/Textarea.tsx

@@ -3,55 +3,56 @@ import { ChangeEvent, CSSProperties, Ref } from 'react';
 
 import { useId } from './hooks/useId';
 
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly' | 'required'> & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The size of the field.
-     *
-     * @default medium
-     */
-    size?: 'large' | 'medium' | 'small';
-    /** The value of the field. */
-    value?: string;
-    /**
-     * The textarea control name of the field.
-     *
-     * @required
-     */
-    name: string;
-    /** The ref of the field. */
-    innerRef?: Ref<HTMLTextAreaElement>;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /**
-     * The maximum number of characters that the field will accept.
-     *
-     * @minimum 1
-     */
-    maxLength?: number;
-    /**
-     * The minimum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
-     * to fit the content.
-     *
-     * @minimum 3
-     */
-    minRows?: number;
-    /**
-     * The maximum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
-     * to fit the content.
-     *
-     * @maximum 10
-     */
-    maxRows?: number;
-};
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> &
+    InvalidPropsLibrary & {
+        /**
+         * Callback when the value of the field changes.
+         *
+         * @type (next: String, Event) => void
+         * @required
+         */
+        onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+        /**
+         * The size of the field.
+         *
+         * @default medium
+         */
+        size?: 'large' | 'medium' | 'small';
+        /** The value of the field. */
+        value?: string;
+        /**
+         * The textarea control name of the field.
+         *
+         * @required
+         */
+        name: string;
+        /** The ref of the field. */
+        innerRef?: Ref<HTMLTextAreaElement>;
+        /** The placeholder of the field. */
+        placeholder?: string;
+        /**
+         * The maximum number of characters that the field will accept.
+         *
+         * @minimum 1
+         */
+        maxLength?: number;
+        /**
+         * The minimum number of rows that the textarea should have. If set the textarea will automatically grow and
+         * shrink to fit the content.
+         *
+         * @minimum 3
+         */
+        minRows?: number;
+        /**
+         * The maximum number of rows that the textarea should have. If set the textarea will automatically grow and
+         * shrink to fit the content.
+         *
+         * @maximum 10
+         */
+        maxRows?: number;
+    };
 
 const MIN_ROWS = 3;
 const MAX_ROWS = 10;
@@ -75,6 +76,7 @@ function Textarea({
     id: idProp,
     minRows: minRowsProp = MIN_ROWS,
     maxRows: maxRowsProp = MAX_ROWS,
+    errorMessage,
     ...otherProps
 }: TextareaProps) {
     const id = useId(idProp);
@@ -96,6 +98,7 @@ function Textarea({
         >
             <textarea
                 {...otherProps}
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 id={id}

package/src/form-field.scss

@@ -1,6 +1,7 @@
 [data-bspk='form-field'] {
     box-sizing: border-box;
-    width: 100%;
+    max-width: 100%;
+    width: fit-content;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sizing-01);

package/src/hooks/useFloatingMenu.ts

@@ -1,6 +1,6 @@
 import { AriaAttributes, useId, useState } from 'react';
 
-import { CommonProps } from '..';
+import { CommonProps, InvalidPropsLibrary } from '..';
 import { EVENT_KEY } from '../utils/keyboard';
 
 import { Placement, useFloating } from './useFloating';
@@ -9,7 +9,7 @@ import { useOutsideClick } from './useOutsideClick';
 
 export type UseFloatingMenuProps = {
     placement: Placement;
-    triggerProps?: CommonProps<'disabled' | 'invalid' | 'readOnly'>;
+    triggerProps?: CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary;
 };
 
 export type UseFloatingMenuReturn = {
@@ -30,6 +30,7 @@ export type UseFloatingMenuReturn = {
         'aria-invalid': boolean | undefined;
         'aria-owns': string;
         'aria-readonly': boolean | undefined;
+        'aria-errormessage': string | undefined;
         role: 'combobox';
         tabIndex: number;
         ref: (node: HTMLElement | null) => void;
@@ -75,6 +76,7 @@ export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProp
             tabIndex: -1,
         },
         triggerProps: {
+            'aria-errormessage': triggerProps?.errorMessage || undefined,
             'aria-activedescendant': selectedId || undefined,
             'aria-controls': menuId,
             'aria-expanded': show,

package/src/index.ts

@@ -34,7 +34,8 @@ export type CallToActionButton = {
     size?: ButtonSize;
 };
 
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name', T> &
+export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> &
+    InvalidPropsLibrary &
     Required<CommonProps<'value'>> & {
         /**
          * Marks the control as checked.
@@ -56,6 +57,28 @@ export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElemen
     K
 >;
 
+/**
+ * The props that are common to input elements.
+ *
+ * If an element is invalid it must have an errorMessage.
+ */
+export type InvalidPropsLibrary = {
+    /**
+     * Marks the element as invalid and displays error state theme.
+     *
+     * If the errorMessage is empty the error state theme will not appear.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the element as invalid and displays error message.
+     *
+     * When an element is invalid it must display an error message explaining why it is invalid.
+     */
+    errorMessage?: string;
+};
+
 export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
@@ -89,12 +112,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Marks the element as invalid and displays error state theme.
-     *
-     * @default false
-     */
-    invalid?: boolean;
     /**
      * Determines if the element is [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).
      *
@@ -107,12 +124,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     name: string;
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * When an element is invalid it must display an error message explaining why it is invalid.
-     */
-    errorMessage?: string;
     /**
      * The value of the control.
      *

package/src/inline-alert.scss

@@ -1,7 +1,7 @@
 [data-bspk='inline-alert'] {
     display: flex;
     align-items: start;
-    justify-content: center;
+    justify-content: start;
     flex-direction: row;
     gap: var(--spacing-sizing-02);
 

package/src/number-input.scss

@@ -1,5 +1,5 @@
 [data-bspk='number-input'] {
-    // medium
+    // medium is the default size
     --font: var(--body-base);
     --height: var(--spacing-sizing-10);
     --svg-width: var(--spacing-sizing-05);
@@ -13,10 +13,10 @@
     border: 1px solid var(--stroke-neutral-base);
     border-radius: var(--radius-small);
     background: var(--surface-neutral-t1-base);
+    max-width: 280px;
 
     &:focus-within {
         border-color: var(--stroke-brand-primary);
-        outline: 1px solid var(--stroke-brand-primary);
     }
 
     [data-divider] {
@@ -29,11 +29,13 @@
     }
 
     button {
-        min-width: var(--height);
+        width: var(--height);
+        height: var(--height);
         background: none;
         border: none;
         cursor: pointer;
         font: var(--font);
+        flex-shrink: 0;
 
         svg {
             width: var(--svg-width);
@@ -59,6 +61,7 @@
         padding: 0 var(--spacing-sizing-03);
         background: transparent;
         border: none;
+        flex-grow: 1;
 
         &:focus {
             outline: none;