reshaped 3.4.0 → 3.4.2

package/dist/components/Calendar/tests/Calendar.stories.js

@@ -1,3 +1,4 @@
+import { fn, expect, userEvent, within, waitFor } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Calendar from "../index.js";
 export default {
@@ -9,29 +10,239 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="base month">
-			<Calendar defaultMonth={new Date(2023, 11)} onChange={console.log}/>
-		</Example.Item>
-	</Example>);
-export const selection = () => (<Example>
-		<Example.Item title="single">
-			<Calendar defaultMonth={new Date(2023, 11)} defaultValue={new Date(2023, 11, 15)}/>
-		</Example.Item>
-		<Example.Item title="range">
-			<Calendar range defaultMonth={new Date(2023, 11)} defaultValue={{ start: new Date(2023, 11, 15), end: new Date(2023, 11, 18) }}/>
-		</Example.Item>
-	</Example>);
-export const boundaries = () => (<Example>
-		<Example.Item title="min">
-			<Calendar defaultMonth={new Date(2023, 11)} min={new Date(2023, 11, 4)}/>
-		</Example.Item>
-		<Example.Item title="max">
-			<Calendar defaultMonth={new Date(2023, 11)} max={new Date(2023, 11, 20)}/>
-		</Example.Item>
-	</Example>);
-export const translation = () => (<Example>
-		<Example.Item title="NL">
-			<Calendar defaultMonth={new Date(2023, 11)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
-		</Example.Item>
-	</Example>);
+export const defaultMonth = {
+    name: "defaultMonth",
+    render: () => (<Example>
+			<Example.Item title="defaultMonth: 2020 January">
+				<Calendar defaultMonth={new Date(2020, 0)}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const grid = canvas.getByRole("grid");
+        const gridCells = canvas.getAllByRole("gridcell");
+        const dates = canvas.getAllByRole("checkbox");
+        const [prevButton, monthButton, nextButton] = canvas.getAllByRole("button");
+        expect(grid).toBeInTheDocument();
+        expect(gridCells).toHaveLength(31);
+        expect(dates).toHaveLength(31);
+        const focusableDates = dates.filter((el) => {
+            return el.getAttribute("tabIndex") === "0";
+        });
+        // Defaults keyboard focus to the first day of the month
+        expect(focusableDates).toHaveLength(1);
+        expect(focusableDates[0]).toBe(dates[0]);
+        // Default Labels
+        expect(dates[0]).toHaveAccessibleName("Wednesday, January 1");
+        expect(prevButton).toHaveAccessibleName("Previous month");
+        expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
+        expect(nextButton).toHaveAccessibleName("Next month");
+    },
+};
+export const uncontrolled = {
+    name: "defaultValue, range",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="defaultValue">
+				<Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} onChange={args.handleChange}/>
+			</Example.Item>
+			<Example.Item title="defaultValue, range">
+				<Calendar range defaultMonth={new Date(2020, 0)} defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
+        const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
+        const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
+        await userEvent.click(singleCalendarDates[7]);
+        expect(singleCalendarDates[7]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
+        await userEvent.click(rangeCalendarDates[7]);
+        expect(rangeCalendarDates[7]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 8), end: null },
+        });
+        // While selecting end value, clicking on a date < start value should change the start value
+        await userEvent.click(rangeCalendarDates[6]);
+        expect(rangeCalendarDates[6]).toBeChecked();
+        expect(rangeCalendarDates[7]).not.toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 7), end: null },
+        });
+        await userEvent.click(rangeCalendarDates[10]);
+        expect(args.handleChange).toHaveBeenCalledTimes(4);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 7), end: new Date(2020, 0, 11) },
+        });
+        for (let i = 6; i < 10; i++) {
+            expect(rangeCalendarDates[i]).toBeChecked();
+        }
+    },
+};
+export const controlled = {
+    name: "value, range",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="value">
+				<Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 10)} onChange={args.handleChange}/>
+			</Example.Item>
+			<Example.Item title="defaultValue, range">
+				<Calendar range defaultMonth={new Date(2020, 0)} value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
+        const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
+        const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
+        await userEvent.click(singleCalendarDates[7]);
+        expect(singleCalendarDates[7]).not.toBeChecked();
+        expect(singleCalendarDates[9]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
+        await userEvent.click(rangeCalendarDates[7]);
+        expect(rangeCalendarDates[7]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 8), end: null },
+        });
+        // While selecting end value, clicking on a date < start value should change the start value
+        await userEvent.click(rangeCalendarDates[6]);
+        expect(rangeCalendarDates[6]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 7), end: null },
+        });
+        // In controlled mode, clicking on a date > startValue still changes startValue since we're not updating the state
+        await userEvent.click(rangeCalendarDates[10]);
+        expect(args.handleChange).toHaveBeenCalledTimes(4);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 11), end: null },
+        });
+        expect(rangeCalendarDates[6]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
+    },
+};
+export const selectedDates = {
+    name: "selectedDates",
+    render: () => (<Example>
+			<Example.Item title="selectedDates: [4,8]">
+				<Calendar defaultMonth={new Date(2020, 0)} value={null} selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const dates = canvas.getAllByRole("checkbox");
+        expect(dates[3]).toBeChecked();
+        expect(dates[7]).toBeChecked();
+    },
+};
+export const minMax = {
+    name: "min, max",
+    render: () => (<Example>
+			<Example.Item title="min: 4, max: 20">
+				<Calendar defaultMonth={new Date(2020, 0)} min={new Date(2020, 0, 4)} max={new Date(2020, 0, 20)}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const dates = canvas.getAllByRole("checkbox");
+        expect(dates).toHaveLength(17);
+    },
+};
+export const firstWeekDay = {
+    name: "firstWeekDay",
+    render: () => (<Example>
+			<Example.Item title="firstWeekDay: 3 (Wed)">
+				<Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
+			</Example.Item>
+		</Example>),
+};
+export const translation = {
+    name: "render functions",
+    render: () => (<Example>
+			<Example.Item title="translated to NL">
+				<Calendar defaultMonth={new Date(2020, 0)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
+			</Example.Item>
+		</Example>),
+};
+export const ariaLabels = {
+    name: "aria labels",
+    render: () => (<Example>
+			<Example.Item title="aria labels">
+				<Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const buttonEls = canvas.getAllByRole("button");
+        const dateEls = canvas.getAllByRole("checkbox");
+        expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
+        expect(buttonEls[1]).toHaveTextContent("Test month selection");
+        expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
+        expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
+        await userEvent.click(buttonEls[1], { delay: null });
+        const yearButtonEls = canvas.getAllByRole("button");
+        expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
+        expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
+        expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
+    },
+};
+export const monthSelection = {
+    name: "test: month selection",
+    render: () => (<Example>
+			<Example.Item title="month selection">
+				<Calendar defaultMonth={new Date(2020, 1)}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        let buttons = canvas.getAllByRole("button");
+        let monthButton = buttons[1];
+        expect(monthButton).toHaveAccessibleName("February 2020 Select a month");
+        await userEvent.click(monthButton);
+        let months = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
+        expect(months).toHaveLength(12);
+        await userEvent.click(months[0]);
+        buttons = canvas.getAllByRole("button");
+        months = buttons.filter((el) => el.hasAttribute("data-rs-date"));
+        monthButton = buttons[1];
+        expect(months).toHaveLength(0);
+        expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
+    },
+};
+export const keyboardNavigation = {
+    name: "test: keyboard navigation",
+    render: () => (<Example>
+			<Example.Item title="keyboard navigation">
+				<Calendar defaultMonth={new Date(2020, 0)}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        dateEls[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        });
+        await userEvent.keyboard("{ArrowDown/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
+        });
+        await userEvent.keyboard("{ArrowUp/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        });
+        await userEvent.keyboard("{ArrowUp/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
+        });
+    },
+};

package/dist/components/Card/Card.d.ts

@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
     href?: string;
     as?: keyof React.JSX.IntrinsicElements | undefined;
     className?: import("../../types/global").ClassName;
-    attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "onToggle" | "value" | "type" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+    attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "onToggle" | "value" | "type" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
         ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     }) | undefined)) | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Card/Card.js

@@ -10,10 +10,8 @@ import getHeightStyles from "../../styles/height/index.js";
 const Card = forwardRef((props, ref) => {
     const { padding = 4 } = props;
     const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", } = props;
     const isActionable = !!href || !!onClick;
     const radiusStyles = getRadiusStyles("medium");

package/dist/components/Card/tests/Card.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         href?: string;
         as?: keyof React.JSX.IntrinsicElements | undefined;
         className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
             ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Card/tests/Card.test.stories.d.ts

@@ -13,7 +13,7 @@ declare const _default: {
         href?: string;
         as?: keyof React.JSX.IntrinsicElements | undefined;
         className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
             ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Carousel/Carousel.js

@@ -6,7 +6,6 @@ import View from "../View/index.js";
 import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import CarouselControl from "./CarouselControl.js";
-import * as T from "./Carousel.types.js";
 import s from "./Carousel.module.css";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
@@ -112,6 +111,6 @@ const Carousel = (props) => {
             ...responsiveVariables("--rs-carousel-items", visibleItems),
             ...responsiveVariables("--rs-carousel-bleed", bleed),
             ...attributes?.style,
-        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
+        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: "back", scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: "forward", scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
 };
 export default Carousel;

package/dist/components/Carousel/Carousel.types.d.ts

@@ -5,12 +5,8 @@ export type Instance = {
     navigateForward: () => void;
     navigateTo: (index: number) => void;
 } | undefined;
-export declare enum ControlType {
-    back = "back",
-    forward = "forward"
-}
 export type ControlProps = {
-    type: ControlType;
+    type: "back" | "forward";
     scrollElRef: React.RefObject<HTMLElement | null>;
     scrollPosition: number;
     onClick: () => void;

package/dist/components/Carousel/Carousel.types.js

@@ -1,5 +1 @@
-export var ControlType;
-(function (ControlType) {
-    ControlType["back"] = "back";
-    ControlType["forward"] = "forward";
-})(ControlType || (ControlType = {}));
+export {};

package/dist/components/Carousel/CarouselControl.js

@@ -6,14 +6,13 @@ import Button from "../Button/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import * as T from "./Carousel.types.js";
 import s from "./Carousel.module.css";
 const CarouselControl = (props) => {
     const { type, scrollElRef, scrollPosition, onClick, isRTL, mounted } = props;
     const [visible, setVisible] = React.useState(false);
     const [rendered, setRendered] = React.useState(false);
-    const isNext = type === T.ControlType.forward;
-    const isDisplayedAsNext = type === (isRTL ? T.ControlType.back : T.ControlType.forward);
+    const isNext = type === "forward";
+    const isDisplayedAsNext = type === (isRTL ? "back" : "forward");
     const controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
     useIsomorphicLayoutEffect(() => {
         const scrollEl = scrollElRef.current;

package/dist/components/FormControl/FormControl.context.d.ts

@@ -57,6 +57,8 @@ export declare const useFormControl: () => {
         inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -264,6 +266,8 @@ export declare const useFormControl: () => {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;

package/dist/components/Grid/Grid.js

@@ -4,7 +4,10 @@ import getAlignStyles from "../../styles/align/index.js";
 import getJustifyStyles from "../../styles/justify/index.js";
 import s from "./Grid.module.css";
 const GridItem = (props) => {
-    const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, as: TagName = "div", attributes, } = props;
+    const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    as: TagName = "div", attributes, } = props;
     const itemClassNames = classNames(s.item, className);
     const resolvedColSpan = responsivePropDependency(colSpan, (value) => value && `span ${value}`);
     const resolvedRowSpan = responsivePropDependency(rowSpan, (value) => value && `span ${value}`);
@@ -22,7 +25,10 @@ const GridItem = (props) => {
     return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
 };
 const Grid = (props) => {
-    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, as: TagName = "div", attributes, } = props;
+    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, 
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    as: TagName = "div", attributes, } = props;
     const alignStyles = getAlignStyles(align);
     const justifyStyles = getJustifyStyles(justify);
     const resolvedRows = responsivePropDependency(rows, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);

package/dist/components/Icon/Icon.js

@@ -7,9 +7,7 @@ const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
     const heightStyles = getHeightStyles(size);
     const rootClassName = classNames(s.root, className, heightStyles?.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
-    const icon = React.isValidElement(Component) ? (Component) : (
-    // @ts-ignore
-    _jsx(Component, {}));
+    const icon = React.isValidElement(Component) ? Component : _jsx(Component, {});
     const style = { ...attributes?.style, ...heightStyles?.variables };
     return (
     // All icons are decorative, a11y attributes should be set for buttons wrapping them

package/dist/components/PinField/PinFieldControlled.js

@@ -111,7 +111,6 @@ const PinFieldControlled = (props) => {
          */
         inputRef.current.value = updatedValue;
         inputRef.current.selectionEnd = focusedIndex;
-        inputRef.current.selectionStart = inputRef.current.selectionStart;
     };
     const handleInput = (event) => {
         const el = event.target;

package/dist/components/Resizable/Resizable.js

@@ -21,6 +21,7 @@ const PrivateResizableHandle = (props) => {
             tabIndex: 0,
             "aria-hidden": true,
             ref: (el) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 ref.current = el;
             },

package/dist/components/Slider/SliderControlled.js

@@ -84,18 +84,24 @@ const SliderControlled = (props) => {
         if (!range)
             return;
         const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-        // @ts-ignore - creating refs out of handler props loses connection to the range flag
+        // Manually controlled resolving of single/range handlers
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         method?.({ minValue: value, maxValue, name });
     }, [maxValue, name, range, onChangeCommitRef, onChangeRef]);
     const handleMaxChange = React.useCallback((value, options) => {
         if (range) {
             const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-            // @ts-ignore - creating refs out of handler props loses connection to the range flag
+            // Manually controlled resolving of single/range handlers
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             method?.({ minValue: minValue, maxValue: value, name });
             return;
         }
         const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-        // @ts-ignore - creating refs out of handler props loses connection to the range flag
+        // Manually controlled resolving of single/range handlers
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         method?.({ value, name });
     }, [minValue, name, range, onChangeRef, onChangeCommitRef]);
     const handleMouseDown = ({ nativeEvent }) => {

package/dist/components/Stepper/Stepper.js

@@ -22,8 +22,13 @@ const Stepper = (props) => {
     const vertical = direction === "column";
     const length = React.Children.count(children);
     return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false, children: React.Children.map(children, (child, index) => {
-            const itemId = child.props.id || `${index}`;
-            return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...child.props, id: child.props.id || `${index}`, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
+            if (!React.isValidElement(child))
+                return null;
+            if (child.type !== StepperItem)
+                return null;
+            const props = child.props;
+            const itemId = props.id || `${index}`;
+            return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...props, id: itemId, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
         }) }));
 };
 Stepper.Item = StepperItem;