diff --git a/package-lock.json b/package-lock.json index 458d7fa9..86876f5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30136,7 +30136,7 @@ "@react-aria/button": "^3.9.5", "@react-aria/calendar": "^3.5.8", "@react-aria/checkbox": "^3.14.3", - "@react-aria/collections": "^3.0.0-alpha.6", + "@react-aria/collections": "3.0.0-beta.1", "@react-aria/combobox": "^3.9.1", "@react-aria/datepicker": "^3.10.1", "@react-aria/dialog": "^3.5.14", @@ -30157,6 +30157,7 @@ "@react-aria/radio": "^3.10.4", "@react-aria/searchfield": "^3.7.5", "@react-aria/select": "^3.14.5", + "@react-aria/selection": "^3.23.1", "@react-aria/separator": "^3.3.13", "@react-aria/switch": "^3.6.4", "@react-aria/table": "^3.14.1", @@ -30167,8 +30168,15 @@ "@react-aria/utils": "^3.24.1", "@react-aria/visually-hidden": "^3.8.12", "@react-stately/flags": "^3.0.3", + "@react-stately/form": "^3.1.2", + "@react-stately/list": "^3.12.0", + "@react-stately/overlays": "^3.6.14", "@react-stately/table": "^3.13.0", "@react-stately/utils": "^3.10.1", + "@react-types/button": "^3.11.0", + "@react-types/combobox": "^3.13.3", + "@react-types/grid": "^3.3.0", + "@react-types/shared": "^3.28.0", "classnames": "^2.3.1", "react-stately": "^3.34.0", "react-transition-group": "^4.4.5", diff --git a/packages/atomic-elements/CHANGELOG.md b/packages/atomic-elements/CHANGELOG.md index 67f9321e..ad2af730 100644 --- a/packages/atomic-elements/CHANGELOG.md +++ b/packages/atomic-elements/CHANGELOG.md @@ -1,5 +1,98 @@ # @atomicjolt/atomic-elements +## 3.8.0 + +### Minor Changes + +- Pin `@react-aria/collections` to `3.0.0-beta.1`, the only version `Table` + actually works with. + + Released as a minor rather than a patch: narrowing the declared range can force + a consumer already resolving 3.1.x back down to `3.0.0-beta.1`, and can conflict + with another dependency that pulls `@react-aria/collections` in through + `react-aria-components`. No public API changed, but the resolved tree does, so + this should not arrive via an auto-merged patch bump. + + The range was `^3.0.0-alpha.6`. A caret on a prerelease permits everything below + 4.0.0, so consumers resolved 3.1.x, where the collections internals were + restructured into a re-export of `react-aria/dist/private/collections`. Under + those versions `Table`'s head/body nodes reach the collection renderer without + the `render` it calls, and any `Table` crashes on mount with + `TypeError: node.render is not a function` — including this package's own + `Table.spec.tsx`, which passes here only because the lockfile holds + 3.0.0-beta.1. + + Verified against a consumer app across every published version: + + | `@react-aria/collections` | `Table` | + | -------------------------- | ------------------------------- | + | 3.0.0-beta.1 | works | + | 3.0.0, 3.0.3, 3.1.0, 3.1.1 | `node.render is not a function` | + + An exact pin is a stopgap: it freezes the package on a prerelease. The real fix + is migrating `Table` to the post-3.0 collections API, which should be tracked + separately. Until then the declared range should at least match what the code + supports, so consumers don't silently resolve a broken tree. + +### Patch Changes + +- Mark the `ComboBox` listbox popover non-modal, so its input stays focusable on + current `react-aria`. + + `ComboBoxField` provided `PopoverContext` without `isNonModal`, so `usePopover` + took its modal branch. That branch used to hide the rest of the page with + `aria-hidden`, which is inert-in-name-only — the trigger's own text input stayed + focusable, so the omission was invisible. Current `@react-aria/overlays` changed + it to `ariaHideOutside([popover], { shouldUseInert: true })`, which applies the + real `inert` attribute to everything outside the popover. That includes the + input that opened the listbox, so the ComboBox becomes impossible to focus or + type into as soon as the menu can open. React Aria Components sets `isNonModal` + on its own ComboBox popover for this reason. + + Verified in headless Chromium against a consumer app with no version overrides + (`@react-aria/combobox` 3.16.1, `react-stately` 3.49.0), clicking the input and + typing: + + | `menuTrigger` | before | after | + | --------------------------- | ------------------------ | ---------------------- | + | `manual` (menu never opens) | focuses, accepts input | focuses, accepts input | + | `input` (the default) | dead — no focus, no text | focuses, accepts input | + | `focus` | dead — no focus, no text | focuses, accepts input | + + Unaffected by the selection props used: `selectedKey`/`onSelectionChange`, + `value`/`onChange`, and passing neither all behaved identically. + + This is what forced consumers to pin the whole `@react-aria/*` tree via + `overrides` to keep `ComboBox` working. `Menu`, `DatePicker` and `Modal` were + already fine on current versions; `Select`/`MultiSelect` are intentionally left + modal, since their trigger is a button and focus moves into the listbox. + +- Declare eight react-aria/react-stately packages the library imports but never + listed as dependencies. They resolved only because this repo's lockfile happened + to hoist them via `react-stately@3.36.1`; consumers whose tree resolves + differently get unresolvable imports. + + Imported at runtime by `dist/esm`: + + - `@react-aria/selection` + - `@react-stately/form` + - `@react-stately/list` + - `@react-stately/overlays` + + Referenced by the emitted `dist/types` (so consumers need them to typecheck — + `@react-types/shared` appears in 25 declaration files): + + - `@react-types/button` + - `@react-types/combobox` + - `@react-types/grid` + - `@react-types/shared` + + `react-stately` dropped its `@react-stately/form` dependency after 3.36.1, so on + a current resolve `MultiSelectField/useMultiSelectState` fails outright with + `Failed to resolve import "@react-stately/form"`. In a downstream app this also + manifested as `CustomSelect` rendering its trigger but never opening; declaring + these fixes it with no version pinning required. + ## 3.7.3 ### Patch Changes diff --git a/packages/atomic-elements/package.json b/packages/atomic-elements/package.json index 136c9a87..89e50db3 100644 --- a/packages/atomic-elements/package.json +++ b/packages/atomic-elements/package.json @@ -1,6 +1,6 @@ { "name": "@atomicjolt/atomic-elements", - "version": "3.7.3", + "version": "3.8.0", "sideEffects": false, "module": "dist/esm/index.js", "main": "dist/cjs/index.js", @@ -21,7 +21,7 @@ "@react-aria/button": "^3.9.5", "@react-aria/calendar": "^3.5.8", "@react-aria/checkbox": "^3.14.3", - "@react-aria/collections": "^3.0.0-alpha.6", + "@react-aria/collections": "3.0.0-beta.1", "@react-aria/combobox": "^3.9.1", "@react-aria/datepicker": "^3.10.1", "@react-aria/dialog": "^3.5.14", @@ -42,6 +42,7 @@ "@react-aria/radio": "^3.10.4", "@react-aria/searchfield": "^3.7.5", "@react-aria/select": "^3.14.5", + "@react-aria/selection": "^3.23.1", "@react-aria/separator": "^3.3.13", "@react-aria/switch": "^3.6.4", "@react-aria/table": "^3.14.1", @@ -52,8 +53,15 @@ "@react-aria/utils": "^3.24.1", "@react-aria/visually-hidden": "^3.8.12", "@react-stately/flags": "^3.0.3", + "@react-stately/form": "^3.1.2", + "@react-stately/list": "^3.12.0", + "@react-stately/overlays": "^3.6.14", "@react-stately/table": "^3.13.0", "@react-stately/utils": "^3.10.1", + "@react-types/button": "^3.11.0", + "@react-types/combobox": "^3.13.3", + "@react-types/grid": "^3.3.0", + "@react-types/shared": "^3.28.0", "classnames": "^2.3.1", "react-stately": "^3.34.0", "react-transition-group": "^4.4.5", diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.spec.tsx b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.spec.tsx index e7f9d2e6..8d12bbcd 100644 --- a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.spec.tsx +++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.spec.tsx @@ -1,6 +1,7 @@ import React from "react"; import { describe, test, expect } from "vitest"; -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { ComboBox } from "."; import { Item } from "../../Collection"; @@ -24,3 +25,35 @@ describe("matches snapshots", () => { expect(result.asFragment()).toMatchSnapshot(); }); }); + +describe("the open listbox", () => { + // A ComboBox keeps focus in its own input while the listbox is open, so its + // popover has to be non-modal. `usePopover`'s modal branch calls + // `ariaHideOutside(..., { shouldUseInert: true })`, which marks everything + // outside the popover `inert` — including the input that opened it, leaving + // it impossible to focus or type in. + test("leaves the input interactive rather than inert", async () => { + const user = userEvent.setup(); + render( + + + Fall + + + Spring + + + ); + + const input = screen.getByRole("combobox"); + await user.click(input); + await user.keyboard("Fa"); + + // `hidden: true` because `ariaHideOutside` marks the surrounding nodes + // aria-hidden, which the accessible queries otherwise filter out. + expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument(); + expect(input.closest("[inert]")).toBeNull(); + expect(document.activeElement).toBe(input); + expect(input).toHaveValue("Fa"); + }); +}); diff --git a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx index acdf5971..251f279a 100644 --- a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx @@ -126,6 +126,14 @@ function ComboBoxFieldInner( triggerRef: inputWrapperRef.current ? inputWrapperRef : inputRef, isOpen: state.isOpen, variant: "listbox", + // A ComboBox keeps focus in its own text input while the listbox + // is open, so its popover must not be modal. `usePopover`'s modal + // branch calls `ariaHideOutside(..., { shouldUseInert: true })`, + // which marks everything outside the popover `inert` — including + // the input that opened it, leaving it impossible to focus or + // type in. React Aria Components sets this on ComboBox popovers + // for the same reason. + isNonModal: true, }, ], [ListBoxContext.Provider, listBoxProps], diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx index cf1500db..75755314 100644 --- a/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx +++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx @@ -3,9 +3,12 @@ import { render } from "@testing-library/react"; import { parseDate } from "@internationalized/date"; import { DateField } from "."; import { Label, Message, ErrorMessage, ComboInput } from "../"; +import { freezeTime } from "../../../test/freezeTime"; describe("DateField", () => { describe("matches snapshots", () => { + freezeTime(); + test("basic composition", () => { const result = render( diff --git a/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap index 3784f9f4..72a0ad47 100644 --- a/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap +++ b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap @@ -26,7 +26,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = ` aria-labelledby="react-aria-:r5: react-aria-:r1:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -51,9 +51,9 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
matches snapshots > basic composition 1`] = ` aria-labelledby="react-aria-:rd: react-aria-:r1:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -131,7 +131,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = ` aria-labelledby="react-aria-:r1i: react-aria-:r1e:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" class="sc-iCECmn cMzUyD aje-input__segment placeholder" contenteditable="false" @@ -152,9 +152,9 @@ exports[`DateField > matches snapshots > disabled state 1`] = ` aria-disabled="true" aria-label="day, " aria-labelledby="react-aria-:r1m: react-aria-:r1e:" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" class="sc-iCECmn cMzUyD aje-input__segment placeholder" contenteditable="false" @@ -177,7 +177,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = ` aria-labelledby="react-aria-:r1q: react-aria-:r1e:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" class="sc-iCECmn cMzUyD aje-input__segment placeholder" contenteditable="false" @@ -222,7 +222,7 @@ exports[`DateField > matches snapshots > required state 1`] = ` aria-required="true" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -248,9 +248,9 @@ exports[`DateField > matches snapshots > required state 1`] = ` aria-label="day, " aria-labelledby="react-aria-:r25: react-aria-:r1t:" aria-required="true" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -278,7 +278,7 @@ exports[`DateField > matches snapshots > required state 1`] = ` aria-required="true" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -326,7 +326,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = ` aria-labelledby="react-aria-:r2g: react-aria-:r2c:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -351,9 +351,9 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
matches snapshots > with granularity hour 1`] = ` aria-labelledby="react-aria-:r2o: react-aria-:r2c:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -503,7 +503,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = ` aria-labelledby="react-aria-:r13: react-aria-:rv:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -530,9 +530,9 @@ exports[`DateField > matches snapshots > with message and error 1`] = ` aria-invalid="true" aria-label="day, " aria-labelledby="react-aria-:r17: react-aria-:rv:" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" @@ -561,7 +561,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = ` aria-labelledby="react-aria-:r1b: react-aria-:rv:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-iCECmn cMzUyD aje-input__segment placeholder" diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx index 9bdbbe0f..c3273799 100644 --- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx +++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx @@ -2,9 +2,12 @@ import { describe, test, expect } from "vitest"; import { render } from "@testing-library/react"; import { parseDate, now, getLocalTimeZone } from "@internationalized/date"; import { DateInput } from "."; +import { freezeTime } from "../../../../test/freezeTime"; describe("DateInput", () => { describe("matches snapshots", () => { + freezeTime(); + const shared = { label: "Date Input", message: "Select a date", diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap index c355f9da..2d9ae34a 100644 --- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap +++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap @@ -35,7 +35,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = ` aria-labelledby="react-aria-:r79: react-aria-:r75:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -60,9 +60,9 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
matches snapshots > 24 hour cycle 1`] = ` aria-labelledby="react-aria-:r7h: react-aria-:r75:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -185,7 +185,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = ` aria-labelledby="react-aria-:r1i: react-aria-:r1e:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -210,9 +210,9 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
matches snapshots > day granularity 1`] = ` aria-labelledby="react-aria-:r1q: react-aria-:r1e:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -296,7 +296,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = ` aria-labelledby="react-aria-:r5: react-aria-:r1:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -321,9 +321,9 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
matches snapshots > default variant 1`] = ` aria-labelledby="react-aria-:rd: react-aria-:r1:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -411,7 +411,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = ` aria-labelledby="react-aria-:r4u: react-aria-:r4q:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" contenteditable="false" @@ -432,9 +432,9 @@ exports[`DateInput > matches snapshots > disabled state 1`] = ` aria-disabled="true" aria-label="day, " aria-labelledby="react-aria-:r52: react-aria-:r4q:" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" contenteditable="false" @@ -457,7 +457,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = ` aria-labelledby="react-aria-:r56: react-aria-:r4q:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" contenteditable="false" @@ -509,7 +509,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = ` aria-labelledby="react-aria-:r21: react-aria-:r1t:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -534,9 +534,9 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
matches snapshots > hour granularity 1`] = ` aria-labelledby="react-aria-:r29: react-aria-:r1t:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -688,7 +688,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = ` aria-labelledby="react-aria-:r6b: react-aria-:r67:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -715,9 +715,9 @@ exports[`DateInput > matches snapshots > invalid state 1`] = ` aria-invalid="true" aria-label="day, " aria-labelledby="react-aria-:r6f: react-aria-:r67:" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -746,7 +746,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = ` aria-labelledby="react-aria-:r6j: react-aria-:r67:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -809,7 +809,7 @@ exports[`DateInput > matches snapshots > large size 1`] = ` aria-labelledby="react-aria-:r8u: react-aria-:r8q:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -834,9 +834,9 @@ exports[`DateInput > matches snapshots > large size 1`] = `
matches snapshots > large size 1`] = ` aria-labelledby="react-aria-:r96: react-aria-:r8q:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -920,7 +920,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = ` aria-labelledby="react-aria-:r8f: react-aria-:r8b:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -945,9 +945,9 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
matches snapshots > medium size 1`] = ` aria-labelledby="react-aria-:r8n: react-aria-:r8b:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1017,7 +1017,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = ` aria-labelledby="react-aria-:rb9: react-aria-:rb5:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1042,9 +1042,9 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
matches snapshots > minimal props 1`] = ` aria-labelledby="react-aria-:rbh: react-aria-:rb5:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1128,7 +1128,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = ` aria-labelledby="react-aria-:r2s: react-aria-:r2o:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1153,9 +1153,9 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
matches snapshots > minute granularity 1`] = ` aria-labelledby="react-aria-:r34: react-aria-:r2o:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1334,7 +1334,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = ` aria-readonly="true" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" contenteditable="false" @@ -1356,9 +1356,9 @@ exports[`DateInput > matches snapshots > readonly state 1`] = ` aria-label="day, " aria-labelledby="react-aria-:r60: react-aria-:r5o:" aria-readonly="true" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" contenteditable="false" @@ -1382,7 +1382,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = ` aria-readonly="true" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" contenteditable="false" @@ -1438,7 +1438,7 @@ exports[`DateInput > matches snapshots > required state 1`] = ` aria-required="true" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1464,9 +1464,9 @@ exports[`DateInput > matches snapshots > required state 1`] = ` aria-label="day, " aria-labelledby="react-aria-:r5h: react-aria-:r59:" aria-required="true" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1494,7 +1494,7 @@ exports[`DateInput > matches snapshots > required state 1`] = ` aria-required="true" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1551,7 +1551,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = ` aria-labelledby="react-aria-:r3r: react-aria-:r3n:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1576,9 +1576,9 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
matches snapshots > second granularity 1`] = ` aria-labelledby="react-aria-:r43: react-aria-:r3n:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1781,7 +1781,7 @@ exports[`DateInput > matches snapshots > small size 1`] = ` aria-labelledby="react-aria-:r80: react-aria-:r7s:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -1806,9 +1806,9 @@ exports[`DateInput > matches snapshots > small size 1`] = `
matches snapshots > small size 1`] = ` aria-labelledby="react-aria-:r88: react-aria-:r7s:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2000,7 +2000,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = ` aria-labelledby="react-aria-:r6q: react-aria-:r6m:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2025,9 +2025,9 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
matches snapshots > with leading zeros 1`] = ` aria-labelledby="react-aria-:r72: react-aria-:r6m:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2111,7 +2111,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = ` aria-labelledby="react-aria-:r9d: react-aria-:r99:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2136,9 +2136,9 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
matches snapshots > with min and max values 1`] = ` aria-labelledby="react-aria-:r9l: react-aria-:r99:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2330,7 +2330,7 @@ exports[`DateInput > matches snapshots > without error 1`] = ` aria-labelledby="react-aria-:raq: react-aria-:ram:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2355,9 +2355,9 @@ exports[`DateInput > matches snapshots > without error 1`] = `
matches snapshots > without error 1`] = ` aria-labelledby="react-aria-:rb2: react-aria-:ram:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2435,7 +2435,7 @@ exports[`DateInput > matches snapshots > without label 1`] = ` aria-labelledby="react-aria-:r9s: react-aria-:r9o:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2460,9 +2460,9 @@ exports[`DateInput > matches snapshots > without label 1`] = `
matches snapshots > without label 1`] = ` aria-labelledby="react-aria-:ra4: react-aria-:r9o:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2538,7 +2538,7 @@ exports[`DateInput > matches snapshots > without message 1`] = ` aria-labelledby="react-aria-:rab: react-aria-:ra7:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" @@ -2563,9 +2563,9 @@ exports[`DateInput > matches snapshots > without message 1`] = `
matches snapshots > without message 1`] = ` aria-labelledby="react-aria-:raj: react-aria-:ra7:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-fFCZOx dVqKiC aje-input__segment placeholder" diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx index e6a98727..04a605a3 100644 --- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx +++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx @@ -2,9 +2,12 @@ import { describe, test, expect } from 'vitest'; import { render } from '@testing-library/react'; import { parseDate, now, getLocalTimeZone } from '@internationalized/date'; import { DatePicker } from '.'; +import { freezeTime } from '../../../../test/freezeTime'; describe('DatePicker', () => { describe('matches snapshots', () => { + freezeTime(); + const shared = { label: 'Date Picker', message: 'Select a date', diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap index eddf3961..66e7388c 100644 --- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap +++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap @@ -37,7 +37,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = ` aria-labelledby="react-aria-:rah: react-aria-:ra8:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -62,9 +62,9 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
matches snapshots > 24 hour cycle 1`] = ` aria-labelledby="react-aria-:rap: react-aria-:ra8:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -210,7 +210,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = ` aria-labelledby="react-aria-:r2i: react-aria-:r29:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -235,9 +235,9 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
matches snapshots > day granularity 1`] = ` aria-labelledby="react-aria-:r2q: react-aria-:r29:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -344,7 +344,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = ` aria-labelledby="react-aria-:rd: react-aria-:r4:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -369,9 +369,9 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
matches snapshots > default variant 1`] = ` aria-labelledby="react-aria-:rl: react-aria-:r4:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -481,7 +481,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = ` aria-labelledby="react-aria-:r6u: react-aria-:r6l:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" contenteditable="false" @@ -502,9 +502,9 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = ` aria-disabled="true" aria-label="day, " aria-labelledby="react-aria-:r72: react-aria-:r6l:" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" contenteditable="false" @@ -527,7 +527,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = ` aria-labelledby="react-aria-:r76: react-aria-:r6l:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" contenteditable="false" @@ -602,7 +602,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = ` aria-labelledby="react-aria-:r39: react-aria-:r30:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -627,9 +627,9 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
matches snapshots > hour granularity 1`] = ` aria-labelledby="react-aria-:r3h: react-aria-:r30:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -804,7 +804,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = ` aria-labelledby="react-aria-:r93: react-aria-:r8q:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -831,9 +831,9 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = ` aria-invalid="true" aria-label="day, " aria-labelledby="react-aria-:r97: react-aria-:r8q:" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -862,7 +862,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = ` aria-labelledby="react-aria-:r9b: react-aria-:r8q:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -948,7 +948,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = ` aria-labelledby="react-aria-:rf3: react-aria-:req:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -973,9 +973,9 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
matches snapshots > large calendar size 1`] = ` aria-labelledby="react-aria-:rfb: react-aria-:req:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1082,7 +1082,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = ` aria-labelledby="react-aria-:rcu: react-aria-:rcl:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1107,9 +1107,9 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
matches snapshots > large size 1`] = ` aria-labelledby="react-aria-:rd6: react-aria-:rcl:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1216,7 +1216,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = ` aria-labelledby="react-aria-:rec: react-aria-:re3:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1241,9 +1241,9 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
matches snapshots > medium calendar size 1`] = ` aria-labelledby="react-aria-:rek: react-aria-:re3:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1350,7 +1350,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = ` aria-labelledby="react-aria-:rc7: react-aria-:rbu:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1375,9 +1375,9 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
matches snapshots > medium size 1`] = ` aria-labelledby="react-aria-:rcf: react-aria-:rbu:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1475,7 +1475,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = ` aria-labelledby="react-aria-:rim: react-aria-:rii:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1500,9 +1500,9 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
matches snapshots > minimal props 1`] = ` aria-labelledby="react-aria-:riu: react-aria-:rii:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1608,7 +1608,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = ` aria-labelledby="react-aria-:r4c: react-aria-:r43:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1633,9 +1633,9 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
matches snapshots > minute granularity 1`] = ` aria-labelledby="react-aria-:r4k: react-aria-:r43:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1837,7 +1837,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = ` aria-readonly="true" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" contenteditable="false" @@ -1859,9 +1859,9 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = ` aria-label="day, " aria-labelledby="react-aria-:r8g: react-aria-:r83:" aria-readonly="true" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" contenteditable="false" @@ -1885,7 +1885,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = ` aria-readonly="true" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" contenteditable="false" @@ -1964,7 +1964,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = ` aria-required="true" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -1990,9 +1990,9 @@ exports[`DatePicker > matches snapshots > required state 1`] = ` aria-label="day, " aria-labelledby="react-aria-:r7p: react-aria-:r7c:" aria-required="true" - aria-valuemax="30" + aria-valuemax="31" aria-valuemin="1" - aria-valuenow="18" + aria-valuenow="15" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2020,7 +2020,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = ` aria-required="true" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2100,7 +2100,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = ` aria-labelledby="react-aria-:r5j: react-aria-:r5a:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2125,9 +2125,9 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
matches snapshots > second granularity 1`] = ` aria-labelledby="react-aria-:r5r: react-aria-:r5a:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2353,7 +2353,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = ` aria-labelledby="react-aria-:rdl: react-aria-:rdc:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2378,9 +2378,9 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
matches snapshots > small calendar size 1`] = ` aria-labelledby="react-aria-:rdt: react-aria-:rdc:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2487,7 +2487,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = ` aria-labelledby="react-aria-:rbg: react-aria-:rb7:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2512,9 +2512,9 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
matches snapshots > small size 1`] = ` aria-labelledby="react-aria-:rbo: react-aria-:rb7:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2752,7 +2752,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = ` aria-labelledby="react-aria-:r9q: react-aria-:r9h:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2777,9 +2777,9 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
matches snapshots > with leading zeros 1`] = ` aria-labelledby="react-aria-:ra2: react-aria-:r9h:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2886,7 +2886,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = ` aria-labelledby="react-aria-:rfq: react-aria-:rfh:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -2911,9 +2911,9 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
matches snapshots > with min and max values 1`] = ` aria-labelledby="react-aria-:rg2: react-aria-:rfh:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -3151,7 +3151,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = ` aria-labelledby="react-aria-:rhv: react-aria-:rhm:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -3176,9 +3176,9 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
matches snapshots > without error 1`] = ` aria-labelledby="react-aria-:ri7: react-aria-:rhm:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -3283,7 +3283,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = ` aria-labelledby="react-aria-:rgh: react-aria-:rgd:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -3308,9 +3308,9 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
matches snapshots > without label 1`] = ` aria-labelledby="react-aria-:rgp: react-aria-:rgd:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -3410,7 +3410,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = ` aria-labelledby="react-aria-:rh8: react-aria-:rgv:" aria-valuemax="12" aria-valuemin="1" - aria-valuenow="6" + aria-valuenow="3" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" @@ -3435,9 +3435,9 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
matches snapshots > without message 1`] = ` aria-labelledby="react-aria-:rhg: react-aria-:rgv:" aria-valuemax="9999" aria-valuemin="1" - aria-valuenow="2026" + aria-valuenow="2024" aria-valuetext="Empty" autocorrect="off" class="sc-bCgoVd jAtiqP aje-input__segment placeholder" diff --git a/packages/atomic-elements/src/test/freezeTime.ts b/packages/atomic-elements/src/test/freezeTime.ts new file mode 100644 index 00000000..134e6bee --- /dev/null +++ b/packages/atomic-elements/src/test/freezeTime.ts @@ -0,0 +1,24 @@ +import { afterAll, beforeAll, vi } from "vitest"; + +/** Fixed instant used by every test that renders "today". */ +export const FROZEN_NOW = new Date("2024-03-15T12:00:00.000Z"); + +/** + * Freezes the clock for the surrounding `describe` block. + * + * React Aria's date components render the current date into their placeholder + * segments (`aria-valuenow`, `aria-valuemax`, ...), so without this their + * snapshots go stale as soon as the day, month, or month length changes. + * + * Only `Date` is faked — `setTimeout` and friends stay real so testing-library + * and user-event keep working. + */ +export function freezeTime(date: Date = FROZEN_NOW) { + beforeAll(() => { + vi.useFakeTimers({ toFake: ["Date"], now: date }); + }); + + afterAll(() => { + vi.useRealTimers(); + }); +} diff --git a/packages/atomic-elements/vitest.config.ts b/packages/atomic-elements/vitest.config.ts index d43fa87e..dbaa1605 100644 --- a/packages/atomic-elements/vitest.config.ts +++ b/packages/atomic-elements/vitest.config.ts @@ -29,5 +29,10 @@ export default defineConfig({ test: { environment: "jsdom", setupFiles: ["./vitest.setup.ts"], + // Date/time components render in the local zone, so pin it to keep + // snapshots identical across machines and CI. + env: { + TZ: "UTC", + }, }, }); diff --git a/packages/forms/CHANGELOG.md b/packages/forms/CHANGELOG.md index 26336dbf..4c56fc7e 100644 --- a/packages/forms/CHANGELOG.md +++ b/packages/forms/CHANGELOG.md @@ -1,5 +1,14 @@ # @atomicjolt/forms +## 4.0.0 + +### Patch Changes + +- Updated dependencies +- Updated dependencies +- Updated dependencies + - @atomicjolt/atomic-elements@3.8.0 + ## 3.7.3 ### Patch Changes diff --git a/packages/forms/package.json b/packages/forms/package.json index d7fdd29f..74cc99c9 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json @@ -1,6 +1,6 @@ { "name": "@atomicjolt/forms", - "version": "3.7.3", + "version": "4.0.0", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -17,13 +17,13 @@ "prepublishOnly": "npm run build" }, "peerDependencies": { - "@atomicjolt/atomic-elements": "^3.7.3", + "@atomicjolt/atomic-elements": "^3.8.0", "react": "^18 || ^19", "react-dom": "^18 || ^19", "react-hook-form": "^7.47.0" }, "devDependencies": { - "@atomicjolt/atomic-elements": "^3.7.3", + "@atomicjolt/atomic-elements": "^3.8.0", "@types/node": "^20.8.4", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0",