@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

package/src/utils/date/getFirstDayOfWeek.ts

@@ -0,0 +1,59 @@
+import { Locale } from '@lumx/react/utils/locale/types';
+
+/** Get first day of week for locale from the browser API */
+export const getFromBrowser = (locale: Locale): number | undefined => {
+    try {
+        const localeMetadata = new Intl.Locale(locale.code) as any;
+        const { firstDay } = localeMetadata.getWeekInfo?.() || localeMetadata.weekInfo;
+        // Sunday is represented as `0` in Date.getDay()
+        if (firstDay === 7) return 0;
+        return firstDay;
+    } catch (e) {
+        return undefined;
+    }
+};
+
+/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
+const FIRST_DAY_FOR_LOCALES = [
+    {
+        // Locales with Sunday as the first day of the week
+        localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
+        firstDay: 0,
+    },
+    {
+        // Locales with Monday as the first day of the week
+        localeRX:
+            /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
+        firstDay: 1,
+    },
+    {
+        // Locales with Saturday as the first day of the week
+        localeRX: /^(ar|fa-ir)$/i,
+        firstDay: 6,
+    },
+];
+
+/** Find first day of week for locale from the constant */
+const getFromConstant = (locale: Locale, searchBy: keyof Locale = 'code'): number | undefined => {
+    // Search for locale (lang + region)
+    for (const { localeRX, firstDay } of FIRST_DAY_FOR_LOCALES) {
+        if (localeRX.test(locale[searchBy] as string)) return firstDay;
+    }
+    // Fallback search for locale lang
+    if (locale.code !== locale.language) {
+        return getFromConstant(locale, 'language');
+    }
+    return undefined;
+};
+
+/**
+ * Get first day of the week for the given locale code (language + region).
+ */
+export const getFirstDayOfWeek = (locale: Locale): number | undefined => {
+    // Get from browser API
+    const firstDay = getFromBrowser(locale);
+    if (firstDay !== undefined) return firstDay;
+
+    // Get from constant
+    return getFromConstant(locale);
+};

package/src/utils/date/getMonthCalendar.test.ts

@@ -0,0 +1,127 @@
+import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
+import { Locale } from '@lumx/react/utils/locale/types';
+import { getMonthCalendar } from './getMonthCalendar';
+
+describe(getMonthCalendar.name, () => {
+    it('should generate calendar', () => {
+        const referenceDate = new Date('2017-02-03');
+        const french = parseLocale('fr') as Locale;
+        const month = getMonthCalendar(french, referenceDate);
+
+        expect(month).toEqual({
+            weekDays: [
+                { long: 'lundi', letter: 'L', number: 1 },
+                { long: 'mardi', letter: 'M', number: 2 },
+                { long: 'mercredi', letter: 'M', number: 3 },
+                { long: 'jeudi', letter: 'J', number: 4 },
+                { long: 'vendredi', letter: 'V', number: 5 },
+                { long: 'samedi', letter: 'S', number: 6 },
+                { long: 'dimanche', letter: 'D', number: 0 },
+            ],
+            weeks: [
+                {
+                    '3': { date: new Date('2017-02-01') },
+                    '4': { date: new Date('2017-02-02') },
+                    '5': { date: new Date('2017-02-03') },
+                    '6': { date: new Date('2017-02-04') },
+                    '0': { date: new Date('2017-02-05') },
+                },
+                {
+                    '1': { date: new Date('2017-02-06') },
+                    '2': { date: new Date('2017-02-07') },
+                    '3': { date: new Date('2017-02-08') },
+                    '4': { date: new Date('2017-02-09') },
+                    '5': { date: new Date('2017-02-10') },
+                    '6': { date: new Date('2017-02-11') },
+                    '0': { date: new Date('2017-02-12') },
+                },
+                {
+                    '1': { date: new Date('2017-02-13') },
+                    '2': { date: new Date('2017-02-14') },
+                    '3': { date: new Date('2017-02-15') },
+                    '4': { date: new Date('2017-02-16') },
+                    '5': { date: new Date('2017-02-17') },
+                    '6': { date: new Date('2017-02-18') },
+                    '0': { date: new Date('2017-02-19') },
+                },
+                {
+                    '1': { date: new Date('2017-02-20') },
+                    '2': { date: new Date('2017-02-21') },
+                    '3': { date: new Date('2017-02-22') },
+                    '4': { date: new Date('2017-02-23') },
+                    '5': { date: new Date('2017-02-24') },
+                    '6': { date: new Date('2017-02-25') },
+                    '0': { date: new Date('2017-02-26') },
+                },
+                {
+                    '1': { date: new Date('2017-02-27') },
+                    '2': { date: new Date('2017-02-28') },
+                },
+                // Empty row (used for padding to avoid layout shift)
+                {},
+            ],
+        });
+    });
+
+    it('should generate calendar with sunday as start of week and mark dates in range', () => {
+        const referenceDate = new Date('2017-02-03');
+        const minDate = new Date('2017-02-06');
+        const maxDate = new Date('2017-02-10');
+        const englishUS = parseLocale('en-US') as Locale;
+        const month = getMonthCalendar(englishUS, referenceDate, minDate, maxDate);
+
+        expect(month).toEqual({
+            weekDays: [
+                { long: 'Sunday', letter: 'S', number: 0 },
+                { long: 'Monday', letter: 'M', number: 1 },
+                { long: 'Tuesday', letter: 'T', number: 2 },
+                { long: 'Wednesday', letter: 'W', number: 3 },
+                { long: 'Thursday', letter: 'T', number: 4 },
+                { long: 'Friday', letter: 'F', number: 5 },
+                { long: 'Saturday', letter: 'S', number: 6 },
+            ],
+            weeks: [
+                {
+                    '3': { date: new Date('2017-02-01'), isOutOfRange: true },
+                    '4': { date: new Date('2017-02-02'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-03'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-04'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-05'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-06') },
+                    '2': { date: new Date('2017-02-07') },
+                    '3': { date: new Date('2017-02-08') },
+                    '4': { date: new Date('2017-02-09') },
+                    '5': { date: new Date('2017-02-10') },
+                    '6': { date: new Date('2017-02-11'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-12'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-13'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-14'), isOutOfRange: true },
+                    '3': { date: new Date('2017-02-15'), isOutOfRange: true },
+                    '4': { date: new Date('2017-02-16'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-17'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-18'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-19'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-20'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-21'), isOutOfRange: true },
+                    '3': { date: new Date('2017-02-22'), isOutOfRange: true },
+                    '4': { date: new Date('2017-02-23'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-24'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-25'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-26'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-27'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-28'), isOutOfRange: true },
+                },
+                // Empty row (used for padding to avoid layout shift)
+                {},
+            ],
+        });
+    });
+});

package/src/utils/date/getMonthCalendar.ts

@@ -0,0 +1,69 @@
+import last from 'lodash/last';
+
+import { getWeekDays, WeekDayInfo } from '@lumx/react/utils/date/getWeekDays';
+import { Locale } from '@lumx/react/utils/locale/types';
+
+type AnnotatedDay = { date: Date; isOutOfRange?: boolean };
+type AnnotatedWeek = Partial<Record<number, AnnotatedDay>>;
+
+interface MonthCalendar {
+    weekDays: Array<WeekDayInfo>;
+    weeks: Array<AnnotatedWeek>;
+}
+
+/** Up to 6 rows can appear in a month calendar => 4 weeks + 1 start of month partial week + 1 send of month partial week */
+const MONTH_ROW_COUNT = 6;
+
+/**
+ * Get month calendar.
+ * A list of weeks with days indexed by week day number
+ */
+export const getMonthCalendar = (
+    locale: Locale,
+    referenceDate = new Date(),
+    rangeMinDate?: Date,
+    rangeMaxDate?: Date,
+): MonthCalendar => {
+    const month = referenceDate.getMonth();
+    const iterDate = new Date(referenceDate);
+    iterDate.setDate(1);
+
+    const minDate = rangeMinDate && new Date(rangeMinDate);
+    const maxDate = rangeMaxDate && new Date(rangeMaxDate);
+    // Reset time to compare dates only.
+    iterDate.setUTCHours(0, 0, 0, 0);
+    minDate?.setUTCHours(0, 0, 0, 0);
+    maxDate?.setUTCHours(0, 0, 0, 0);
+
+    const weekDays = getWeekDays(locale);
+    const lastDayOfWeek = last(weekDays) as WeekDayInfo;
+
+    const weeks: Array<AnnotatedWeek> = [];
+    let week: AnnotatedWeek = {};
+    let rowCount = 0;
+
+    while (rowCount < MONTH_ROW_COUNT) {
+        const weekDayNumber = iterDate.getDay();
+        const day: AnnotatedDay = { date: new Date(iterDate.getTime()) };
+
+        // If a range is specified, check if the day is out of range.
+        // min and max date are included within the valid range.
+        if ((minDate && iterDate < minDate) || (maxDate && iterDate > maxDate)) {
+            day.isOutOfRange = true;
+        }
+
+        if (iterDate.getMonth() === month) {
+            week[weekDayNumber] = day;
+        }
+
+        if (weekDayNumber === lastDayOfWeek.number) {
+            weeks.push(week);
+            rowCount += 1;
+            week = {};
+        }
+        iterDate.setDate(iterDate.getDate() + 1);
+    }
+    if (Object.keys(week).length) weeks.push(week);
+
+    return { weeks, weekDays };
+};

package/src/utils/date/getWeekDays.test.ts

@@ -0,0 +1,48 @@
+import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
+import { Locale } from '@lumx/react/utils/locale/types';
+import { getWeekDays } from './getWeekDays';
+
+describe(getWeekDays.name, () => {
+    const french = parseLocale('fr') as Locale;
+    const englishUS = parseLocale('en-us') as Locale;
+    const farsi = parseLocale('fa-ir') as Locale;
+
+    it('should list french week days', () => {
+        const weekDays = getWeekDays(french);
+        expect(weekDays).toEqual([
+            { long: 'lundi', letter: 'L', number: 1 },
+            { long: 'mardi', letter: 'M', number: 2 },
+            { long: 'mercredi', letter: 'M', number: 3 },
+            { long: 'jeudi', letter: 'J', number: 4 },
+            { long: 'vendredi', letter: 'V', number: 5 },
+            { long: 'samedi', letter: 'S', number: 6 },
+            { long: 'dimanche', letter: 'D', number: 0 },
+        ]);
+    });
+
+    it('should list US week days', () => {
+        const weekDays = getWeekDays(englishUS);
+        expect(weekDays).toEqual([
+            { long: 'Sunday', letter: 'S', number: 0 },
+            { long: 'Monday', letter: 'M', number: 1 },
+            { long: 'Tuesday', letter: 'T', number: 2 },
+            { long: 'Wednesday', letter: 'W', number: 3 },
+            { long: 'Thursday', letter: 'T', number: 4 },
+            { long: 'Friday', letter: 'F', number: 5 },
+            { long: 'Saturday', letter: 'S', number: 6 },
+        ]);
+    });
+
+    it('should list fa-ir week days', () => {
+        const weekDays = getWeekDays(farsi);
+        expect(weekDays).toEqual([
+            { long: 'شنبه', letter: 'ش', number: 6 },
+            { long: 'یکشنبه', letter: 'ی', number: 0 },
+            { long: 'دوشنبه', letter: 'د', number: 1 },
+            { long: 'سه‌شنبه', letter: 'س', number: 2 },
+            { long: 'چهارشنبه', letter: 'چ', number: 3 },
+            { long: 'پنجشنبه', letter: 'پ', number: 4 },
+            { long: 'جمعه', letter: 'ج', number: 5 },
+        ]);
+    });
+});

package/src/utils/date/getWeekDays.ts

@@ -0,0 +1,34 @@
+import { Locale } from '@lumx/react/utils/locale/types';
+import { getFirstDayOfWeek } from './getFirstDayOfWeek';
+
+export type WeekDayInfo = { letter: string; number: number; long: string };
+
+export const DAYS_PER_WEEK = 7;
+
+/**
+ * List week days (based on locale) with the week day letter (ex: "M" for "Monday") and week day number
+ * (0-based index starting on Sunday).
+ */
+export const getWeekDays = (locale: Locale): Array<WeekDayInfo> => {
+    const iterDate = new Date();
+    const firstDay = getFirstDayOfWeek(locale) ?? 1;
+
+    // Go to start of the week
+    const offset = firstDay - iterDate.getDay();
+    iterDate.setDate(iterDate.getDate() + offset);
+
+    // Iterate through the days of the week
+    const weekDays: Array<WeekDayInfo> = [];
+    for (let i = 0; i < DAYS_PER_WEEK; i++) {
+        // Single letter week day (ex: "M" for "Monday", "L" for "Lundi", etc.)
+        const letter = iterDate.toLocaleDateString(locale.code, { weekday: 'narrow' });
+        // Weed day long notation
+        const long = iterDate.toLocaleDateString(locale.code, { weekday: 'long' });
+        // Day number (1-based index starting on Monday)
+        const number = iterDate.getDay();
+
+        weekDays.push({ letter, number, long });
+        iterDate.setDate(iterDate.getDate() + 1);
+    }
+    return weekDays;
+};

package/src/utils/date/getYearDisplayName.test.ts

@@ -0,0 +1,20 @@
+import { getYearDisplayName } from './getYearDisplayName';
+
+describe(getYearDisplayName, () => {
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        vi.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
+            resolvedOptions: () => ({
+                fallback: 'code',
+                locale: 'fr',
+                style: 'short',
+                type: 'dateTimeField',
+            }),
+            of: () => 'année',
+        }));
+    });
+    it('should return a label', () => {
+        expect(getYearDisplayName('fr-FR')).toEqual('année');
+    });
+});

package/src/utils/date/getYearDisplayName.ts

@@ -0,0 +1,12 @@
+export const getYearDisplayName = (locale: string) => {
+    let label: string | undefined;
+    try {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const displayNames = new Intl.DisplayNames(locale, { type: 'dateTimeField' });
+        label = displayNames.of('year');
+    } catch (error) {
+        label = '';
+    }
+    return label;
+};

package/src/utils/date/isDateValid.test.ts

@@ -0,0 +1,15 @@
+import { isDateValid } from '@lumx/react/utils/date/isDateValid';
+
+describe(isDateValid.name, () => {
+    it('should mark `undefined` as invalid', () => {
+        expect(isDateValid(undefined)).toBe(false);
+    });
+
+    it('should mark invalid date as invalid', () => {
+        expect(isDateValid(new Date('foo'))).toBe(false);
+    });
+
+    it('should mark valid date as valid', () => {
+        expect(isDateValid(new Date())).toBe(true);
+    });
+});

package/src/utils/date/isDateValid.ts

@@ -0,0 +1,4 @@
+/**
+ * Check if given date is valid.
+ */
+export const isDateValid = (date?: Date) => date instanceof Date && !Number.isNaN(date.getTime());

package/src/utils/date/isSameDay.test.ts

@@ -0,0 +1,37 @@
+import { isSameDay } from '@lumx/react/utils/date/isSameDay';
+
+describe(isSameDay, () => {
+    it('should return true for same dates', () => {
+        const date1 = new Date('2023-08-26T12:00:00');
+        const date2 = new Date('2023-08-26T15:30:00');
+        expect(isSameDay(date1, date2)).toBe(true);
+    });
+
+    it('should return false for different dates', () => {
+        const date1 = new Date('2023-08-26T10:00:00');
+        const date2 = new Date('2023-08-27T10:00:00');
+        expect(isSameDay(date1, date2)).toBe(false);
+    });
+
+    it('should handle different months', () => {
+        const date1 = new Date('2023-08-15T08:00:00');
+        const date2 = new Date('2023-09-15T08:00:00');
+        expect(isSameDay(date1, date2)).toBe(false);
+    });
+
+    it('should handle different years', () => {
+        const date1 = new Date('2022-12-25T18:30:00');
+        const date2 = new Date('1923-12-25T18:30:00');
+        expect(isSameDay(date1, date2)).toBe(false);
+    });
+
+    it('should handle invalid date', () => {
+        // Invalid date input are not comparable, so we always return `false`
+        // Undefined date
+        expect(isSameDay(undefined as any, undefined as any)).toBe(false);
+        // Null date
+        expect(isSameDay(null as any, new Date())).toBe(false);
+        // Invalid date
+        expect(isSameDay(new Date('-'), new Date('-'))).toBe(false);
+    });
+});

package/src/utils/date/isSameDay.ts

@@ -0,0 +1,11 @@
+import { isDateValid } from '@lumx/react/utils/date/isDateValid';
+
+/**
+ * Check `date1` is on the same day as `date2`.
+ */
+export const isSameDay = (date1: Date, date2: Date) =>
+    isDateValid(date1) &&
+    isDateValid(date2) &&
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate();

package/src/utils/disabled/DisabledStateContext.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+
+/** Disable state */
+type DisabledStateContextValue =
+    | {
+          state: 'disabled';
+      }
+    | { state: undefined | null };
+
+export const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });
+
+export type DisabledStateProviderProps = DisabledStateContextValue & {
+    children: React.ReactNode;
+};
+
+/**
+ * Disabled state provider.
+ * All nested LumX Design System components inherit this disabled state.
+ */
+export function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {
+    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;
+}
+
+/**
+ * Get DisabledState context value
+ */
+export function useDisabledStateContext(): DisabledStateContextValue {
+    return useContext(DisabledStateContext);
+}

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -0,0 +1,92 @@
+import {
+    Button,
+    Checkbox,
+    Chip,
+    DatePickerField,
+    IconButton,
+    Link,
+    List,
+    ListItem,
+    RadioButton,
+    Switch,
+    TextField,
+    Thumbnail,
+    Uploader,
+} from '@lumx/react';
+import { DisabledStateProvider } from '@lumx/react/utils';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
+import { mdiFoodApple } from '@lumx/icons';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
+
+export default {
+    title: 'LumX components/DisabledStateProvider',
+    component: DisabledStateProvider,
+    argTypes: {
+        state: getSelectArgType(['disabled', undefined]),
+        ...disableArgTypes(['children']),
+    },
+};
+
+/**
+ * Disabling nested children
+ */
+export const Disabled = {
+    args: {
+        state: 'disabled',
+    },
+    render: ({ state }: any) => (
+        <DisabledStateProvider state={state}>
+            <Button>Button</Button>
+            <Button isDisabled>Disabled Button</Button>
+        </DisabledStateProvider>
+    ),
+};
+
+/**
+ * Testing when the context is not active
+ */
+export const NotDisabled = {
+    args: {
+        state: undefined,
+    },
+    render: ({ state }: any) => (
+        <DisabledStateProvider state={state}>
+            <Button>Button</Button>
+            <Button isDisabled>Disabled Button</Button>
+        </DisabledStateProvider>
+    ),
+};
+
+/**
+ * Testing disabling children
+ */
+export const AllComponents = {
+    args: {
+        state: 'disabled',
+    },
+    render: ({ state }: any) => (
+        <DisabledStateProvider state={state}>
+            <Button>Button</Button>
+            <IconButton label="Icon button" icon={mdiFoodApple} />
+            <Checkbox label="Checkbox" />
+            <Chip onClick={() => {}}>Chip</Chip>
+            <DatePickerField
+                label="Date picker field"
+                nextButtonProps={{ label: 'Next' }}
+                previousButtonProps={{ label: 'Previous' }}
+                value={new Date()}
+                onChange={() => {}}
+            />
+            <Link href="https://example.com">Link</Link>
+            <List>
+                <ListItem onItemSelected={() => {}}>Clickable list item</ListItem>
+            </List>
+            <RadioButton label="Radio button" />
+            <Switch>Switch</Switch>
+            <TextField label="texfield" onChange={() => {}} value="" />
+            <Thumbnail alt="Thumbnail" image={LANDSCAPE_IMAGES.landscape1s200} onClick={() => {}} />
+            <Uploader label="Upload a file" fileInputProps={{ onChange: () => {} }} />
+        </DisabledStateProvider>
+    ),
+};

package/src/utils/disabled/index.ts

@@ -0,0 +1,2 @@
+export { useDisableStateProps } from './useDisableStateProps';
+export { DisabledStateProvider, useDisabledStateContext } from './DisabledStateContext';

package/src/utils/disabled/useDisableStateProps.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+import { DisabledStateProvider } from './DisabledStateContext';
+import { useDisableStateProps } from './useDisableStateProps';
+
+describe(useDisableStateProps.name, () => {
+    const setup = (props: any, wrapper?: React.ComponentType) => {
+        const testId = 'test-container';
+        const Component = () => {
+            const { disabledStateProps, otherProps } = useDisableStateProps(props);
+            return <div data-testid={testId} {...otherProps} {...disabledStateProps} />;
+        };
+        const renderResult = render(wrapper ? React.createElement(wrapper, undefined, <Component />) : <Component />);
+        return { ...renderResult, element: renderResult.getByTestId(testId) };
+    };
+
+    it('should not be disabled by default', () => {
+        const { element } = setup({});
+        expect(element).not.toHaveAttribute('disabled');
+        expect(element).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    it('should be disabled with `disabled` prop', () => {
+        const { element } = setup({ disabled: true });
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should be disabled with `isDisabled` prop', () => {
+        const { element } = setup({ isDisabled: true });
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should be disabled with `aria-disabled` prop', () => {
+        const { element } = setup({ 'aria-disabled': true });
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should be disabled with `aria-disabled` string prop', () => {
+        const { element } = setup({ 'aria-disabled': 'true' });
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should be disabled with context', () => {
+        const wrapper = ({ children }: any) => (
+            <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+        );
+        const { element } = setup({}, wrapper);
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should prioritize context', () => {
+        const wrapper = ({ children }: any) => (
+            <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+        );
+        const { element } = setup({ disabled: false }, wrapper);
+        expect(element).toHaveAttribute('disabled');
+        expect(element).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    it('should forward onClick when not disabled', () => {
+        const onClick = vi.fn();
+        const { element } = setup({ onClick });
+        fireEvent.click(element);
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should not forward onClick when disabled', () => {
+        const onClick = vi.fn();
+        const { element } = setup({ disabled: true, onClick });
+        fireEvent.click(element);
+        expect(onClick).not.toHaveBeenCalled();
+    });
+});