@bspk/ui 1.1.34 → 1.3.0

package/src/components/ChipSuggestion/ChipSuggestionExample.tsx

@@ -1,25 +1,26 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { ChipSuggestionProps } from '.';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<ChipSuggestionProps>[] = [
+    {
+        label: 'ChipSuggestion example',
+        propState: {
+            label: 'chip option',
+        },
+    },
+    {
+        label: 'disabled',
+        propState: {
+            label: 'chip option',
+            disabled: true,
+        },
+    },
+];
 
 export const ChipSuggestionExample: ComponentExampleFn<ChipSuggestionProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
         return <Component {...props} onClick={() => action('ChipSuggestion clicked!')} />;
     },
-    presets: [
-        {
-            label: 'ChipSuggestion example',
-            propState: {
-                label: 'chip option',
-            },
-        },
-        {
-            label: 'disabled',
-            propState: {
-                label: 'chip option',
-                disabled: true,
-            },
-        },
-    ],
+    presets,
 });

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

@@ -0,0 +1,16 @@
+import { ChipUtility } from './ChipUtility';
+import { presets } from './ChipUtilityExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ChipUtility (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ChipUtility {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<ChipUtility {...presets[0].propState} />);
+
+        expect(getByText('chip')).toBeInTheDocument();
+    });
+});

package/src/components/ChipUtility/ChipUtility.tsx

@@ -1,11 +1,8 @@
+import './chip-utility.scss';
 import { ReactNode, isValidElement } from 'react';
-
 import { Badge, BadgeProps } from '-/components/Badge';
-import { isValidIcon } from '-/utils/children';
-
-import './chip-utility.scss';
 
-export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder' | 'variant'>;
+export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
 
 export type ChipUtilityProps = {
     /**
@@ -24,7 +21,7 @@ export type ChipUtilityProps = {
      * The label of the chip.
      *
      * @example
-     *     'Hello I am Chip';
+     *     Hello I am Chip
      *
      * @required
      */
@@ -77,7 +74,7 @@ export type ChipUtilityProps = {
  * @name ChipUtility
  * @phase Utility
  */
-function ChipUtility({
+export function ChipUtility({
     flat = false,
     disabled = false,
     label,
@@ -89,21 +86,22 @@ function ChipUtility({
 }: ChipUtilityProps) {
     return (
         <button
-            data-bspk="chip-utility"
+            data-bspk-utility="chip-utility"
             data-disabled={disabled || undefined}
             data-flat={flat || undefined}
             data-selected={selected || undefined}
             data-touch-target-parent
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
             <>
-                {isValidIcon(leadingIcon) && isValidElement(leadingIcon) && (
+                {isValidElement(leadingIcon) && (
                     <span aria-hidden="true" data-chip-icon>
                         {leadingIcon}
                     </span>
                 )}
                 <span>{label}</span>
-                {isValidIcon(trailingIcon) && isValidElement(trailingIcon) && (
+                {isValidElement(trailingIcon) && (
                     <span aria-hidden="true" data-chip-icon>
                         {trailingIcon}
                     </span>
@@ -113,7 +111,6 @@ function ChipUtility({
                         count={trailingBadge.count}
                         size={trailingBadge.size}
                         surfaceBorder={trailingBadge.surfaceBorder}
-                        variant={trailingBadge.variant}
                     />
                 )}
             </>
@@ -122,8 +119,4 @@ function ChipUtility({
     );
 }
 
-ChipUtility.bspkName = 'ChipUtility';
-
-export { ChipUtility };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipUtility/ChipUtilityExample.tsx

@@ -1,63 +1,65 @@
-import { ComponentExample } from '-/utils/demo';
+import { BadgeItem, ChipUtilityProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-import { ChipUtilityProps } from '.';
-
-export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
-    presets: [
-        {
-            label: 'Basic',
-            propState: {
-                label: 'chip',
-            },
+export const presets: Preset<ChipUtilityProps>[] = [
+    {
+        label: 'Basic',
+        propState: {
+            label: 'chip',
         },
-        {
-            label: 'Leading Icon',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Add',
-                trailingIcon: '',
-            },
+    },
+    {
+        label: 'Leading Icon',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Add',
+            trailingIcon: '',
         },
-        {
-            label: 'Trailing Icon',
-            propState: {
-                label: 'chip',
-                leadingIcon: '',
-                trailingIcon: 'Add',
-            },
+    },
+    {
+        label: 'Trailing Icon',
+        propState: {
+            label: 'chip',
+            leadingIcon: '',
+            trailingIcon: 'Add',
         },
-        {
-            label: 'Both Icons',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Add',
-                trailingIcon: 'Add',
-            },
+    },
+    {
+        label: 'Both Icons',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Add',
+            trailingIcon: 'Add',
         },
-        {
-            label: 'Invalid Icons',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Bumblebee',
-                trailingIcon: 'Rabbit',
-            },
+    },
+    {
+        label: 'Invalid Icons',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Bumblebee',
+            trailingIcon: 'Rabbit',
         },
-        {
-            label: 'Trailing Badge',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Add',
-                trailingIcon: '',
-                trailingBadge: { count: 2, size: 'x-small' },
-            },
+    },
+    {
+        label: 'Trailing Badge',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Add',
+            trailingIcon: '',
+            trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
-        {
-            label: 'Trailing Badge Icon',
-            propState: {
-                label: 'chip',
-                trailingIcon: 'Cloud',
-                trailingBadge: { count: 2, size: 'x-small' },
-            },
+    },
+    {
+        label: 'Trailing Badge Icon',
+        propState: {
+            label: 'chip',
+            trailingIcon: 'Cloud',
+            trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
-    ],
+    },
+];
+
+export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
+    presets,
 };

package/src/components/ChipUtility/chip-utility.scss

@@ -1,4 +1,4 @@
-[data-bspk='chip-utility'] {
+[data-bspk-utility='chip-utility'] {
     flex-direction: row;
     gap: var(--spacing-sizing-02);
     height: var(--spacing-sizing-08);

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

@@ -0,0 +1,24 @@
+import { DateField } from './DateField';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <DateField
+        aria-label="calendar input"
+        controlId="Example controlId"
+        label="calendar input"
+        name="calendar input"
+        onChange={() => {}}
+        value={new Date()}
+    />
+);
+
+describe('DateField', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('calendar input')).toBeInTheDocument();
+    });
+});

package/src/components/DateField/DateField.tsx

@@ -0,0 +1,58 @@
+import './date-field.scss';
+import { DateInput, DateInputProps } from '-/components/DateInput';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
+
+export type DateFieldProps = FormFieldWrapProps<DateInputProps>;
+/**
+ * An input field that allows a customer to manually type in a specific date or triggers a date picker combobox to
+ * select a date.
+ *
+ * @example
+ *     import { DateField } from '@bspk/ui/DateField';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return (
+ *             <DateField
+ *                 name="calendar input"
+ *                 aria-label="calendar input"
+ *                 label="calendar input"
+ *                 value={date}
+ *                 onChange={setDate}
+ *                 controlId="Example controlId"
+ *             />
+ *         );
+ *     }
+ *
+ * @name DateField
+ * @phase Dev
+ */
+export function DateField({
+    label,
+    errorMessage,
+    helperText,
+    invalid,
+    labelTrailing,
+    required,
+    controlId,
+    ...inputProps
+}: DateFieldProps) {
+    return (
+        <FormField
+            controlId={controlId}
+            data-bspk="date-field"
+            errorMessage={errorMessage}
+            helperText={helperText}
+            invalid={invalid}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => <DateInput {...inputProps} {...fieldProps} aria-label={label} invalid={invalid} />}
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateField/DateFieldExample.tsx

@@ -0,0 +1,13 @@
+import { DateFieldProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<DateFieldProps>[] = [];
+
+export const DateFieldExample: ComponentExample<DateFieldProps> = {
+    defaultState: {},
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => <Component {...props} value={props.value?.getDate ? props.value : undefined} />,
+    sections: [],
+    variants: {},
+};

package/src/components/DateField/date-field.scss

@@ -0,0 +1,8 @@
+[data-bspk='date-field'] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: fit-content;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateField/index.tsx

@@ -0,0 +1 @@
+export * from './DateField';

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

@@ -0,0 +1,17 @@
+import { DateInput } from './DateInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <DateInput aria-label="calendar input" name="calendar input" onChange={() => {}} value={new Date()} />
+);
+
+describe('DateInput', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('calendar input')).toBeInTheDocument();
+    });
+});

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,197 @@
+import './date-input.scss';
+import { SvgEvent } from '@bspk/icons/Event';
+import { format, isValid, parse } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '-/components/Button';
+import { CalendarPicker } from '-/components/CalendarPicker';
+import { Portal } from '-/components/Portal';
+import { TextInput, TextInputProps } from '-/components/TextInput';
+import { useFloating } from '-/hooks/useFloating';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+
+const parsableDate = (dateString: string) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
+
+export type DateInputProps = Pick<
+    TextInputProps,
+    'aria-errormessage' | 'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size'
+> & {
+    /** The value of the calendar input */
+    value: Date | undefined;
+    /** Fires when the date changes with the new date */
+    onChange: (newDate: Date | undefined) => void;
+    /**
+     * If the calendar should close when a date is selected.
+     *
+     * @default true
+     */
+    closeCalendarOnChange?: boolean;
+    /**
+     * The placeholder text for the date input field.
+     *
+     * @default mm/dd/yyyy
+     */
+    placeholder?: string;
+};
+
+/**
+ * An input that allows a customer to manually type in a specific date or triggers a date picker combobox to select a
+ * date.
+ *
+ * @example
+ *     import { DateInput } from '@bspk/ui/DateInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return <DateInput name="calendar input" aria-label="calendar input" value={date} onChange={setDate} />;
+ *     }
+ *
+ * @name DateInput
+ * @phase Utility
+ */
+export function DateInput({
+    value,
+    onChange,
+    disabled,
+    readOnly,
+    closeCalendarOnChange = true,
+    'aria-label': ariaLabel,
+    name,
+    placeholder,
+    invalid,
+    required,
+    size,
+    'aria-errormessage': ariaErrorMessage,
+}: DateInputProps) {
+    const [textValue, setTextValue] = useState(value ? format(value, 'MM/dd/yyyy') : '');
+    const [calendarVisible, setCalendarVisible] = useState(false);
+    const containerRef = useRef<HTMLSpanElement | null>(null);
+
+    useEffect(() => {
+        const formattedValue = value ? format(value, 'MM/dd/yyyy') : '';
+        setTextValue(formattedValue);
+    }, [value]);
+
+    const { elements, floatingStyles } = useFloating({
+        placement: 'bottom',
+        strategy: 'absolute',
+        offsetOptions: 4,
+        refWidth: true,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, containerRef.current],
+        callback: () => setCalendarVisible(false),
+    });
+
+    const isValidDate = (next: string) => {
+        const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
+        return isValid(parsedDate) ? parsedDate : undefined;
+    };
+
+    const validate = () => {
+        let nextDate: Date | undefined;
+        let nextTextValue = '';
+
+        if (parsableDate(textValue)) {
+            nextDate = isValidDate(textValue);
+            if (nextDate) nextTextValue = format(nextDate, 'MM/dd/yyyy');
+        }
+
+        setTextValue(nextTextValue);
+        onChange(nextDate);
+    };
+
+    const handleTextChange = (nextValue: string) => {
+        // Add slashes as the user types
+        if (/^\d{2}$/.test(nextValue) || /^\d{1,2}\/\d{2}$/.test(nextValue)) nextValue = `${nextValue}/`;
+
+        // Remove extra slashes
+        if (nextValue.endsWith('//')) nextValue = nextValue.slice(0, -1);
+
+        setTextValue(nextValue);
+
+        if (parsableDate(nextValue)) {
+            const next = isValidDate(nextValue);
+            if (next) onChange(next);
+        }
+    };
+
+    return (
+        <span data-bspk="date-input" ref={containerRef}>
+            <div
+                ref={(node) => {
+                    elements.setReference(node);
+                }}
+            >
+                <TextInput
+                    aria-errormessage={ariaErrorMessage || undefined}
+                    aria-label={ariaLabel}
+                    disabled={disabled}
+                    invalid={invalid || undefined}
+                    name={name}
+                    onBlur={() => validate()}
+                    onChange={handleTextChange}
+                    onKeyDown={(event) => {
+                        // allow select all and other keyboard shortcuts
+                        if (event.ctrlKey || event.metaKey) {
+                            return;
+                        }
+
+                        // handle backspace and delete to remove the slash and the number before it
+                        if (event.key === 'Backspace' || (event.key === 'Delete' && textValue.endsWith('/'))) {
+                            event.preventDefault();
+                            setTextValue((prev) => prev.slice(0, -2));
+                        }
+
+                        // if a single key and not a number or forward slash ignore
+                        if (event.key.length === 1 && !/[0-9/]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    }}
+                    placeholder={placeholder || 'mm/dd/yyyy'}
+                    readOnly={readOnly}
+                    required={required}
+                    showClearButton={false}
+                    size={size}
+                    trailing={
+                        !disabled &&
+                        !readOnly && (
+                            <Button
+                                icon={<SvgEvent />}
+                                iconOnly
+                                label="Toggle calendar"
+                                onClick={() => setCalendarVisible((prev) => !prev)}
+                                variant="tertiary"
+                            />
+                        )
+                    }
+                    value={textValue}
+                />
+            </div>
+            {calendarVisible && (
+                <Portal>
+                    <div
+                        data-placement="bottom"
+                        ref={(node) => {
+                            elements.setFloating(node);
+                        }}
+                        style={{ ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }}
+                    >
+                        <CalendarPicker
+                            onChange={(next) => {
+                                if (closeCalendarOnChange) setCalendarVisible(false);
+                                onChange(next);
+                            }}
+                            value={value}
+                            variant="elevated"
+                        />
+                    </div>
+                </Portal>
+            )}
+        </span>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateInput/DateInputExample.tsx

@@ -0,0 +1,17 @@
+import { DateInputProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<DateInputProps>[] = [];
+
+export const DateInputExample: ComponentExample<DateInputProps> = {
+    defaultState: {},
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => {
+        const { value, ...restProps } = props;
+
+        return <Component {...restProps} value={value?.getDate ? value : undefined} />;
+    },
+    sections: [],
+    variants: false,
+};

package/src/components/DateInput/date-input.scss

@@ -0,0 +1,13 @@
+[data-bspk='date-input'] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 360px;
+    width: 100%;
+
+    [data-bspk='text-input'] {
+        padding-right: 0;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateInput/index.tsx

@@ -0,0 +1 @@
+export * from './DateInput';

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

@@ -0,0 +1,22 @@
+import { Dialog } from './Dialog';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Dialog disableFocusTrap onClose={() => {}} open>
+        <h1>Dialog Title</h1>* <p>This is the content of the dialog.</p>*{' '}
+        <button onClick={() => {}} type="button">
+            Close
+        </button>
+    </Dialog>
+);
+
+describe('Dialog', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Dialog Title')).toBeInTheDocument();
+    });
+});