@bspk/ui 1.2.0 → 1.3.0

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();
+    });
+});

package/src/components/Dialog/Dialog.tsx

@@ -1,13 +1,11 @@
+import './dialog.scss';
 import { FocusTrap } from 'focus-trap-react';
 import { ReactNode, useCallback, useEffect, useRef } from 'react';
-
 import { Portal, PortalProps } from '-/components/Portal';
 import { Scrim } from '-/components/Scrim';
 import { useId } from '-/hooks/useId';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
 
-import './dialog.scss';
-
 export type DialogProps = CommonProps<'id' | 'owner'> &
     Pick<PortalProps, 'container'> & {
         /** The content of the dialog. */
@@ -39,6 +37,20 @@ export type DialogProps = CommonProps<'id' | 'owner'> &
          * @default true
          */
         showScrim?: boolean;
+        /**
+         * If the dialog should take the full width of the screen.
+         *
+         * @default false
+         */
+
+        widthFull?: boolean;
+        /**
+         * If focus trapping should be disabled. Generally this should not be disabled as dialogs should always trap
+         * focus.
+         *
+         * @default false
+         */
+        disableFocusTrap?: boolean;
     };
 
 /**
@@ -74,20 +86,25 @@ export function Dialog({
     open = false,
     placement = 'center',
     showScrim = true,
+    widthFull = false,
     id: idProp,
     owner,
     container,
+    disableFocusTrap,
     ...containerProps
 }: ElementProps<DialogProps, 'div'>) {
     const id = useId(idProp);
     const boxRef = useRef<HTMLDivElement | null>(null);
 
-    const handleKeyDown = useCallback((e: KeyboardEvent) => e.key === 'Escape' && onClose(), [onClose]);
+    const handleKeyDown = useCallback((e: KeyboardEvent) => open && e.key === 'Escape' && onClose(), [onClose, open]);
 
     useEffect(() => {
         document.documentElement.style.overflow = open ? 'hidden' : '';
-        if (open) document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.documentElement.style.overflow = '';
+            document.removeEventListener('keydown', handleKeyDown);
+        };
     }, [handleKeyDown, open]);
 
     return (
@@ -103,13 +120,15 @@ export function Dialog({
                     role="presentation"
                 >
                     <FocusTrap
+                        active={!disableFocusTrap}
                         focusTrapOptions={{
-                            fallbackFocus: () => boxRef.current!,
                             clickOutsideDeactivates: true,
+                            fallbackFocus: () => boxRef.current!,
                         }}
                     >
                         <div
                             data-dialog-box
+                            data-width-full={widthFull}
                             ref={(node) => {
                                 boxRef.current = node;
                             }}

package/src/components/Dialog/DialogExample.tsx

@@ -1,6 +1,8 @@
 import { DialogProps } from '.';
 import { Button } from '-/components/Button';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<DialogProps>[] = [];
 
 export const DialogExample: ComponentExample<DialogProps> = {
     render: ({ props, setState, Component }) => {
@@ -15,4 +17,5 @@ export const DialogExample: ComponentExample<DialogProps> = {
         );
     },
     variants: false,
+    presets,
 };

package/src/components/Dialog/dialog.scss

@@ -1,68 +1,14 @@
 [data-bspk='dialog'] {
-    --width: 600px; // default width for dialog box
-
     position: fixed;
     inset: 0;
     z-index: var(--z-index-dialog);
-    pointer-events: none; // makes scrim clckable
-
-    @keyframes fade-in {
-        0% {
-            opacity: 0;
-            transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
-        }
-
-        100% {
-            opacity: 1;
-            transform: translate(0, 0);
-        }
-    }
-
-    @keyframes placement-left {
-        0% {
-            transform: translateX(-100vw);
-        }
-
-        100% {
-            transform: translateX(0);
-        }
-    }
-
-    @keyframes placement-right {
-        0% {
-            transform: translateX(100vw);
-        }
-
-        100% {
-            transform: translateX(0);
-        }
-    }
-
-    @keyframes placement-top {
-        0% {
-            transform: translateY(-100vh);
-        }
-
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes placement-bottom {
-        0% {
-            transform: translateY(100vh);
-        }
-
-        100% {
-            transform: translateY(0);
-        }
-    }
+    display: flex;
+    pointer-events: none; // makes scrim clickable
 
     [data-dialog-box] {
         pointer-events: all; // allow pointer events on the dialog box
         text-align: start;
         position: relative;
-        border-radius: var(--radius-lg);
         box-shadow: var(--drop-shadow-float);
         background: var(--surface-neutral-t1-base);
         color: var(--foreground-neutral-on-surface);
@@ -103,69 +49,69 @@
     &[data-placement='center'] {
         --box-animation-name: fade-in;
 
-        display: flex;
         justify-content: center;
         align-items: center;
 
         [data-dialog-box] {
-            position: absolute;
+            border-radius: var(--radius-lg);
         }
     }
 
     &[data-placement='bottom'] {
         --box-animation-name: placement-bottom;
 
+        justify-content: center;
+        align-items: end;
+
         [data-dialog-box] {
-            position: absolute;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            width: var(--width);
-            left: calc(50% - var(--width) / 2);
-            transform: translateX(-50%);
-            bottom: 0;
+            border-top-left-radius: var(--radius-lg);
+            border-top-right-radius: var(--radius-lg);
         }
     }
 
     &[data-placement='top'] {
         --box-animation-name: placement-top;
 
+        justify-content: center;
+        align-items: start;
+
         [data-dialog-box] {
-            position: absolute;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            width: var(--width);
-            left: calc(50% - var(--width) / 2);
-            top: 0;
+            border-bottom-left-radius: var(--radius-lg);
+            border-bottom-right-radius: var(--radius-lg);
         }
     }
 
     &[data-placement='left'] {
         --box-animation-name: placement-left;
 
+        justify-content: flex-start;
+
         [data-dialog-box] {
-            position: absolute;
             max-height: unset;
             width: 280px;
             height: 100vh;
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            left: 0;
+            border-bottom-right-radius: var(--radius-lg);
+            border-top-right-radius: var(--radius-lg);
         }
     }
 
     &[data-placement='right'] {
         --box-animation-name: placement-right;
 
+        justify-content: flex-end;
+
         [data-dialog-box] {
-            position: absolute;
             max-height: unset;
             width: 280px;
             height: 100vh;
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-            right: 0;
+            border-bottom-left-radius: var(--radius-lg);
+            border-top-left-radius: var(--radius-lg);
         }
     }
+
+    [data-width-full='true'] {
+        width: 100%;
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,8 @@
+import { Divider } from './Divider';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+
+const TestBed = () => <Divider />;
+
+describe('Divider', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+});

package/src/components/Divider/Divider.tsx

@@ -1,8 +1,7 @@
+import './divider.scss';
 import { ElementProps } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
-import './divider.scss';
-
 export type DividerProps = {
     /**
      * The orientation of the divider.

package/src/components/Divider/DividerExample.tsx

@@ -1,9 +1,12 @@
 import { CSSProperties } from 'react';
 
+import { DividerProps } from './Divider';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const DividerExample: ComponentExample = {
+export const presets: Preset<DividerProps>[] = [];
+
+export const DividerExample: ComponentExample<DividerProps> = {
     render: ({ props, Component }) => {
         const style: CSSProperties =
             props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
@@ -23,4 +26,5 @@ export const DividerExample: ComponentExample = {
             </div>
         );
     },
+    presets,
 };

package/src/components/Divider/divider.scss

@@ -7,7 +7,7 @@
     place-content: stretch stretch;
     margin: 0;
     padding: 0;
-    content: 'hello';
+    content: '';
 
     --length: calc(100% - var(--inset) * 2);
 

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

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