reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,303 +1,297 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.valueChanges = exports.formControl = exports.className = exports.step = exports.clampOnBlur = exports.minMax = exports.value = exports.defaultValue = exports.disabled = exports.size = exports.variant = void 0;
-const test_1 = require("storybook/test");
-const FormControl_1 = __importDefault(require("../../../components/FormControl"));
-const NumberField_1 = __importDefault(require("../../../components/NumberField"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import FormControl from "../../../components/FormControl/index.js";
+import NumberField from "../../../components/NumberField/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/NumberField",
-    component: NumberField_1.default,
+    component: NumberField,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/number-field",
         },
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="variant: outline">
-					<NumberField_1.default name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="variant: faded">
-					<NumberField_1.default variant="faded" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="variant: headless">
-					<NumberField_1.default variant="headless" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        return (<Example>
+				<Example.Item title="variant: outline">
+					<NumberField name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="variant: faded">
+					<NumberField variant="faded" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="variant: headless">
+					<NumberField variant="headless" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvas }) => {
         const input = canvas.getAllByRole("textbox")[0];
         const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
-        (0, test_1.expect)(input).toHaveAttribute("name", "test-name");
-        (0, test_1.expect)(increaseButton).toHaveAccessibleName("Increase");
-        (0, test_1.expect)(decreaseButton).toHaveAccessibleName("Decrease");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(increaseButton).toHaveAccessibleName("Increase");
+        expect(decreaseButton).toHaveAccessibleName("Decrease");
     },
 };
-exports.size = {
+export const size = {
     name: "size",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="size: small">
-					<NumberField_1.default size="small" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" suffix="m2" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="size: medium">
-					<NumberField_1.default size="medium" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="size: large">
-					<NumberField_1.default size="large" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="size: xlarge">
-					<NumberField_1.default size="xlarge" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        return (<Example>
+				<Example.Item title="size: small">
+					<NumberField size="small" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" suffix="m2" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="size: medium">
+					<NumberField size="medium" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="size: large">
+					<NumberField size="large" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="size: xlarge">
+					<NumberField size="xlarge" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<NumberField_1.default name="test-name" onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" disabled inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<NumberField name="test-name" onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" disabled inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
         const increaseButton = document.querySelector('[aria-label="Increase"]');
         const decreaseButton = document.querySelector('[aria-label="Decrease"]');
-        (0, test_1.expect)(input).toBeDisabled();
-        await test_1.userEvent.click(increaseButton);
-        (0, test_1.expect)(args.handleChange).not.toHaveBeenCalled();
-        await test_1.userEvent.click(decreaseButton);
-        (0, test_1.expect)(args.handleChange).not.toHaveBeenCalled();
+        expect(input).toBeDisabled();
+        await userEvent.click(increaseButton);
+        expect(args.handleChange).not.toHaveBeenCalled();
+        await userEvent.click(decreaseButton);
+        expect(args.handleChange).not.toHaveBeenCalled();
     },
 };
-exports.defaultValue = {
+export const defaultValue = {
     name: "defaultValue, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<NumberField_1.default name="test-name" defaultValue={2} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<NumberField name="test-name" defaultValue={2} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
         const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
-        (0, test_1.expect)(input).toHaveValue("2");
+        expect(input).toHaveValue("2");
         input.focus();
-        await test_1.userEvent.keyboard("3");
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 23,
         });
-        (0, test_1.expect)(input).toHaveValue("23");
-        await test_1.userEvent.click(increaseButton);
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(2);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        expect(input).toHaveValue("23");
+        await userEvent.click(increaseButton);
+        expect(args.handleChange).toBeCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 24,
         });
-        (0, test_1.expect)(input).toHaveValue("24");
-        await test_1.userEvent.click(decreaseButton);
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(3);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        expect(input).toHaveValue("24");
+        await userEvent.click(decreaseButton);
+        expect(args.handleChange).toBeCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 23,
         });
-        (0, test_1.expect)(input).toHaveValue("23");
+        expect(input).toHaveValue("23");
     },
 };
-exports.value = {
+export const value = {
     name: "value, controlled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<NumberField_1.default name="test-name" value={2} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<NumberField name="test-name" value={2} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
         const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
-        (0, test_1.expect)(input).toHaveValue("2");
+        expect(input).toHaveValue("2");
         input.focus();
-        await test_1.userEvent.keyboard("3");
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 23,
         });
-        (0, test_1.expect)(input).toHaveValue("23");
-        await test_1.userEvent.click(increaseButton);
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(2);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        expect(input).toHaveValue("23");
+        await userEvent.click(increaseButton);
+        expect(args.handleChange).toBeCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 24,
         });
-        (0, test_1.expect)(input).toHaveValue("23");
-        await test_1.userEvent.click(decreaseButton);
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(3);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        expect(input).toHaveValue("23");
+        await userEvent.click(decreaseButton);
+        expect(args.handleChange).toBeCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 22,
         });
-        (0, test_1.expect)(input).toHaveValue("23");
+        expect(input).toHaveValue("23");
     },
 };
-exports.minMax = {
+export const minMax = {
     name: "min, max",
-    render: () => (<NumberField_1.default name="test-name" defaultValue={6} min={5} max={10} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: () => (<NumberField name="test-name" defaultValue={6} min={5} max={10} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
         const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
-        (0, test_1.expect)(input).toHaveValue("6");
-        await test_1.userEvent.click(increaseButton);
-        await test_1.userEvent.click(increaseButton);
-        await test_1.userEvent.click(increaseButton);
-        await test_1.userEvent.click(increaseButton);
-        await test_1.userEvent.click(increaseButton);
-        (0, test_1.expect)(input).toHaveValue("10");
-        await test_1.userEvent.click(decreaseButton);
-        await test_1.userEvent.click(decreaseButton);
-        await test_1.userEvent.click(decreaseButton);
-        await test_1.userEvent.click(decreaseButton);
-        await test_1.userEvent.click(decreaseButton);
-        await test_1.userEvent.click(decreaseButton);
-        (0, test_1.expect)(input).toHaveValue("5");
+        expect(input).toHaveValue("6");
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        expect(input).toHaveValue("10");
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        expect(input).toHaveValue("5");
     },
 };
-exports.clampOnBlur = {
+export const clampOnBlur = {
     name: "min, max, clamp on blur",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleBlur: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleBlur: fn(),
     },
     render: (args) => (<>
-			<NumberField_1.default name="test-name" defaultValue={6} min={5} max={10} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label", onBlur: args.handleBlur }}/>
+			<NumberField name="test-name" defaultValue={6} min={5} max={10} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label", onBlur: args.handleBlur }}/>
 			<button type="button">Focusable</button>
 		</>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
         const button = canvas.getByRole("button", { name: "Focusable" });
-        await test_1.userEvent.clear(input);
-        await test_1.userEvent.type(input, "11");
-        (0, test_1.expect)(input).toHaveValue("11");
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        await userEvent.clear(input);
+        await userEvent.type(input, "11");
+        expect(input).toHaveValue("11");
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 11,
         });
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(input).toHaveValue("10");
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        await userEvent.click(button);
+        expect(input).toHaveValue("10");
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 10,
         });
-        (0, test_1.expect)(args.handleBlur).toHaveBeenCalledTimes(1);
-        await test_1.userEvent.clear(input);
-        await test_1.userEvent.type(input, "3");
-        (0, test_1.expect)(input).toHaveValue("3");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(input).toHaveValue("5");
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        expect(args.handleBlur).toHaveBeenCalledTimes(1);
+        await userEvent.clear(input);
+        await userEvent.type(input, "3");
+        expect(input).toHaveValue("3");
+        await userEvent.click(button);
+        expect(input).toHaveValue("5");
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             name: "test-name",
             value: 5,
         });
-        (0, test_1.expect)(args.handleBlur).toHaveBeenCalledTimes(2);
+        expect(args.handleBlur).toHaveBeenCalledTimes(2);
     },
 };
-exports.step = {
+export const step = {
     name: "step",
-    render: () => (<NumberField_1.default name="test-name" defaultValue={6} step={0.5} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: () => (<NumberField name="test-name" defaultValue={6} step={0.5} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
         const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
-        (0, test_1.expect)(input).toHaveValue("6");
-        await test_1.userEvent.click(increaseButton);
-        (0, test_1.expect)(input).toHaveValue("6.5");
-        await test_1.userEvent.click(decreaseButton);
-        await test_1.userEvent.click(decreaseButton);
-        (0, test_1.expect)(input).toHaveValue("5.5");
+        expect(input).toHaveValue("6");
+        await userEvent.click(increaseButton);
+        expect(input).toHaveValue("6.5");
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        expect(input).toHaveValue("5.5");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<NumberField_1.default className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+			<NumberField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-input-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
     },
 };
-exports.formControl = {
+export const formControl = {
     name: "test: FormControl",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="FormControl">
-				<FormControl_1.default>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<NumberField_1.default name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
-					<FormControl_1.default.Helper>Helper</FormControl_1.default.Helper>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="FormControl">
+				<FormControl>
+					<FormControl.Label>Label</FormControl.Label>
+					<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="FormControl, disabled">
-				<FormControl_1.default disabled>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<NumberField_1.default name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
-					<FormControl_1.default.Helper>Helper</FormControl_1.default.Helper>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="FormControl, disabled">
+				<FormControl disabled>
+					<FormControl.Label>Label</FormControl.Label>
+					<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="FormControl, error">
-				<FormControl_1.default hasError>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<NumberField_1.default name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
-					<FormControl_1.default.Error>Error</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="FormControl, error">
+				<FormControl hasError>
+					<FormControl.Label>Label</FormControl.Label>
+					<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
 };
-exports.valueChanges = {
+export const valueChanges = {
     name: "test: keyboard",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="keyboard">
-				<NumberField_1.default name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="keyboard">
+				<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
         input.focus();
-        await test_1.userEvent.keyboard("-");
-        (0, test_1.expect)(input).toHaveValue("-");
-        await test_1.userEvent.keyboard("1");
-        (0, test_1.expect)(input).toHaveValue("-1");
-        await test_1.userEvent.keyboard("-");
-        (0, test_1.expect)(input).toHaveValue("-1");
-        await test_1.userEvent.keyboard("2");
-        (0, test_1.expect)(input).toHaveValue("-12");
-        await test_1.userEvent.keyboard("{ArrowUp}");
-        (0, test_1.expect)(input).toHaveValue("-11");
-        await test_1.userEvent.keyboard("{ArrowDown}");
-        (0, test_1.expect)(input).toHaveValue("-12");
-        await test_1.userEvent.keyboard(".");
-        (0, test_1.expect)(input).toHaveValue("-12.");
-        await test_1.userEvent.keyboard("3");
-        (0, test_1.expect)(input).toHaveValue("-12.3");
-        await test_1.userEvent.keyboard(".");
-        (0, test_1.expect)(input).toHaveValue("-12.3");
-        await test_1.userEvent.keyboard("-");
-        (0, test_1.expect)(input).toHaveValue("-12.3");
-        await test_1.userEvent.keyboard("{ArrowUp}");
-        await test_1.userEvent.keyboard("{ArrowUp}");
-        await test_1.userEvent.keyboard("{ArrowUp}");
-        await test_1.userEvent.keyboard("{ArrowUp}");
-        await test_1.userEvent.keyboard("{ArrowUp}");
-        (0, test_1.expect)(input).toHaveValue("-7.3");
-        await test_1.userEvent.keyboard("{ArrowDown}");
-        (0, test_1.expect)(input).toHaveValue("-8.3");
+        await userEvent.keyboard("-");
+        expect(input).toHaveValue("-");
+        await userEvent.keyboard("1");
+        expect(input).toHaveValue("-1");
+        await userEvent.keyboard("-");
+        expect(input).toHaveValue("-1");
+        await userEvent.keyboard("2");
+        expect(input).toHaveValue("-12");
+        await userEvent.keyboard("{ArrowUp}");
+        expect(input).toHaveValue("-11");
+        await userEvent.keyboard("{ArrowDown}");
+        expect(input).toHaveValue("-12");
+        await userEvent.keyboard(".");
+        expect(input).toHaveValue("-12.");
+        await userEvent.keyboard("3");
+        expect(input).toHaveValue("-12.3");
+        await userEvent.keyboard(".");
+        expect(input).toHaveValue("-12.3");
+        await userEvent.keyboard("-");
+        expect(input).toHaveValue("-12.3");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        expect(input).toHaveValue("-7.3");
+        await userEvent.keyboard("{ArrowDown}");
+        expect(input).toHaveValue("-8.3");
     },
 };
 // Value change edge cases

package/dist/components/Overlay/Overlay.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Overlay.types";
+import type * as T from "./Overlay.types.js";
 declare const Overlay: React.FC<T.Props>;
 export default Overlay;

package/dist/components/Overlay/Overlay.js

@@ -1,15 +1,15 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { TrapFocus, classNames } from "@reshaped/utilities";
-import Portal from "../../components/_private/Portal";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useHotkeys from "../../hooks/useHotkeys";
-import useIsDismissible from "../../hooks/useIsDismissible";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import useScrollLock from "../../hooks/useScrollLock";
-import useToggle from "../../hooks/useToggle";
-import { onNextFrame, checkTransitions } from "../../utilities/animation";
+import Portal from "../../components/_private/Portal/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsDismissible from "../../hooks/useIsDismissible.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useScrollLock from "../../hooks/useScrollLock.js";
+import useToggle from "../../hooks/useToggle.js";
+import { onNextFrame, checkTransitions } from "../../utilities/animation.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
     const { active, children, transparent, blurred, overflow, onClose, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, contained, className, instanceRef, attributes, } = props;
@@ -21,6 +21,7 @@ const Overlay = (props) => {
     const [animated, setAnimated] = React.useState(false);
     const [offset, setOffset] = React.useState([0, 0]);
     const rootRef = React.useRef(null);
+    const backdropRef = React.useRef(null);
     const scopeRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const { lockScroll, unlockScroll } = useScrollLock({ containerRef });
@@ -125,7 +126,8 @@ const Overlay = (props) => {
         setOpacity: (value) => {
             if (transparent)
                 return;
-            rootRef.current?.style.setProperty("--rs-overlay-opacity", `${value}`);
+            // Applied directly to the backdrop element to keep the style recalculation scoped to it
+            backdropRef.current?.style.setProperty("opacity", `${value}`);
         },
     }), [transparent]);
     if (!rendered || !mounted)
@@ -136,10 +138,9 @@ const Overlay = (props) => {
                 }, style: {
                     "--rs-overlay-offset-x": containerRef ? `${offset[0]}px` : undefined,
                     "--rs-overlay-offset-y": containerRef ? `${offset[1]}px` : undefined,
-                    "--rs-overlay-opacity": transparent ? 0 : undefined,
                 }, 
-                // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
-                role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) }) }));
+                // Clicking the backdrop is a pointer shortcut, keyboard users close it with Escape
+                role: "presentation", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsxs("div", { className: s.wrapper, children: [_jsx("div", { className: s.backdrop, ref: backdropRef }), _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) })] }) })) }) }));
 };
 Overlay.displayName = "Overlay";
 export default Overlay;

package/dist/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;--rs-overlay-opacity:0;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);background-color:rgb(from var(--rs-color-black) r g b/0);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{--rs-overlay-opacity:1;background-color:rgb(from var(--rs-color-black) r g b/calc(var(--rs-overlay-opacity) * .7));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}
+.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table;position:relative}.backdrop{position:absolute;inset:0;z-index:-1;background-color:rgb(from var(--rs-color-black) r g b/70%);opacity:0;will-change:opacity}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible,.root.--visible .backdrop{opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .backdrop{opacity:0}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated,.root.--animated .backdrop{transition:opacity var(--rs-duration-medium) var(--rs-easing-accelerate)}.root.--animated.--visible,.root.--animated.--visible .backdrop{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type CloseReason = "overlay-click" | "escape-key";
 export type Instance = {
     setOpacity: (value: number) => void;

package/dist/components/Overlay/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Overlay";
-export type { Instance as OverlayInstance, CloseReason as OverlayCloseReason, Props as OverlayProps, } from "./Overlay.types";
+export { default } from "./Overlay.js";
+export type { Instance as OverlayInstance, CloseReason as OverlayCloseReason, Props as OverlayProps, } from "./Overlay.types.js";

package/dist/components/Overlay/index.js

@@ -1 +1 @@
-export { default } from "./Overlay";
+export { default } from "./Overlay.js";

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

@@ -3,7 +3,7 @@ import React from "react";
 import { fn, Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/Overlay").OverlayProps>;
+    component: React.FC<import("../../../components/Overlay/index.js").OverlayProps>;
     parameters: {
         iframe: {
             url: string;