Optionally clamp selected value when min and/or max change (#66)

* Optionally clamp selected value when min and/or max change

* Create eleven-hats-fry.md

.changeset/eleven-hats-fry.md

@@ -0,0 +1,6 @@
+---
+"@tempocal/react": minor
+"@tempocal/www": minor
+---
+
+Optionally clamp selected value when min and/or max change

packages/react/src/useTempocal.ts

@@ -8,6 +8,8 @@ import {
 } from "@tempocal/core";
 import * as React from "react";
 
+export type ClampMode = "always" | "value-change" | "never";
+
 export type DateRange =
   | [undefined, undefined]
   | [Temporal.PlainDate, undefined]
@@ -65,9 +67,9 @@ export function useTempocal<
 }: {
   clampCalendarValue?: boolean;
   clampSelectedValue?: Mode extends "date"
-    ? boolean
+    ? ClampMode
     : Mode extends "datetime"
-    ? boolean
+    ? ClampMode
     : never;
   locale: Locale;
   maxValue?: Temporal.PlainDate | Temporal.PlainDateTime;
@@ -188,7 +190,11 @@ export function useTempocal<
         | DateRange
         | DateTimeRange
     ) => {
-      if (!clampSelectedValue || Array.isArray(nextSelectedValue)) {
+      if (
+        !clampSelectedValue ||
+        clampSelectedValue === "never" ||
+        Array.isArray(nextSelectedValue)
+      ) {
         // @ts-expect-error Help.
         setValue(nextSelectedValue);
 
@@ -280,6 +286,38 @@ export function useTempocal<
     [mode, setValue, updateSelectedValue, value]
   );
 
+  const previousClampSelectedValue = React.useRef(clampSelectedValue);
+  const previousMaxValue = React.useRef(maxValue);
+  const previousMinValue = React.useRef(minValue);
+
+  React.useEffect(() => {
+    if (!clampSelectedValue || !value) {
+      return;
+    }
+
+    if (!maxValue && !minValue) {
+      return;
+    }
+
+    if (clampSelectedValue !== "always") {
+      return;
+    }
+
+    if (
+      clampSelectedValue !== previousClampSelectedValue.current ||
+      maxValue !== previousMaxValue.current ||
+      minValue !== previousMinValue.current
+    ) {
+      updateSelectedValue(value);
+    }
+  });
+
+  React.useEffect(() => {
+    previousClampSelectedValue.current = clampSelectedValue;
+    previousMaxValue.current = maxValue;
+    previousMinValue.current = minValue;
+  });
+
   return {
     calendarProps: {
       locale,

packages/www/examples/DateTimePicker.tsx

@@ -1,6 +1,6 @@
 import { Temporal } from "@js-temporal/polyfill";
 import { temporalToDate } from "@tempocal/core";
-import { Calendar, useTempocal } from "@tempocal/react";
+import { Calendar, ClampMode, useTempocal } from "@tempocal/react";
 import classnames from "classnames";
 import * as React from "react";
 import { CalendarHeader } from "../recipes/CalendarHeader";
@@ -15,7 +15,7 @@ const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
 export function DateTimePicker({
   clampSelectedValue,
 }: {
-  clampSelectedValue: boolean;
+  clampSelectedValue: ClampMode;
 }) {
   const [value, setValue] = React.useState(
     Temporal.PlainDateTime.from({

packages/www/pages/examples/DateTimePicker.tsx

@@ -1,3 +1,4 @@
+import { ClampMode } from "@tempocal/react/dist/tempocal-react";
 import { InferGetStaticPropsType } from "next";
 import * as React from "react";
 import { Checkbox } from "../../components/Checkbox";
@@ -8,7 +9,8 @@ import { fetchFromGitHub } from "../../utils/fetchFromGitHub";
 export default function DateTimePickerPage(
   props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
-  const [clampSelectedValue, setClampSelectedValue] = React.useState(true);
+  const [clampSelectedValue, setClampSelectedValue] =
+    React.useState<ClampMode>("always");
 
   return (
     <Example
@@ -19,13 +21,15 @@ export default function DateTimePickerPage(
       <fieldset className="flex flex-col gap-2">
         <legend className="sr-only">Props</legend>
         <Checkbox
-          checked={clampSelectedValue}
+          checked={clampSelectedValue === "always"}
           hint="When minValue and/or maxValue are set, automatically keep the selected value within those values."
           id="clampSelectedValue"
           label="clampSelectedValue"
           name="clampSelectedValue"
           onChange={() => {
-            setClampSelectedValue((clampSelectedValue) => !clampSelectedValue);
+            setClampSelectedValue((clampSelectedValue) =>
+              clampSelectedValue === "always" ? "never" : "always"
+            );
           }}
         />
       </fieldset>

packages/www/pages/react/useTempocal.tsx

@@ -25,7 +25,7 @@ const {
   onChangeSelectedValue,
 } = useTempocal({
   clampCalendarValue?: boolean;
-  clampSelectedValue?: boolean;
+  clampSelectedValue?: "always" | "value-change" | "never";
   locale: Locale;
   maxValue?: Temporal.PlainDate | Temporal.PlainDateTime;
   minValue?: Temporal.PlainDate | Temporal.PlainDateTime;
@@ -68,7 +68,7 @@ const {
               automatically select 8 AM instead to keep the time within the
               minimum.
             </p>
-            <CodeBlock>{`clampSelectedValue?: boolean`}</CodeBlock>
+            <CodeBlock>{`clampSelectedValue?: "always" | "value-change" | "never"`}</CodeBlock>
           </div>
           <div className="space-y-2">
             <AnchorHeader id="options-locale">locale</AnchorHeader>

packages/www/test/DateTimePicker.test.tsx

@@ -4,7 +4,7 @@ import { DateTimePicker } from "../examples/DateTimePicker";
 
 test("DateTimePicker renders without crashing", () => {
   const { getByText, getByTitle } = render(
-    <DateTimePicker clampSelectedValue />
+    <DateTimePicker clampSelectedValue="always" />
   );
 
   expect(