@flamingo-stack/openframe-frontend-core 0.0.514 → 0.0.515-1648.4251.1

package/src/components/ui/date-picker.tsx

@@ -7,6 +7,7 @@ import {
   DayPicker,
   type DateRange,
   type DayPickerProps,
+  type Matcher,
 } from "react-day-picker";
 import { useMdUp } from "../../hooks";
 import { cn } from "../../utils/cn";
@@ -94,16 +95,19 @@ const formatDateRange = (
 interface CalendarNavButtonProps {
   direction: "left" | "right";
   onClick?: () => void;
+  /** Set at a `fromDate` / `toDate` bound — there is nothing selectable past it. */
+  disabled?: boolean;
   "aria-label"?: string;
 }
 
-function CalendarNavButton({ direction, onClick, "aria-label": ariaLabel }: CalendarNavButtonProps) {
+function CalendarNavButton({ direction, onClick, disabled, "aria-label": ariaLabel }: CalendarNavButtonProps) {
   return (
     <Button
       type="button"
       variant="outline"
       size="icon"
       onClick={onClick}
+      disabled={disabled}
       aria-label={ariaLabel}
       leftIcon={direction === "left" ? <ChevronLeft className="size-6" /> : <ChevronRight className="size-6" />}
     />
@@ -233,7 +237,21 @@ function DatePickerCalendar({
       mode === "range" && "range-selected"
     ),
     outside: "text-ods-border opacity-50 hover:!bg-transparent",
-    disabled: "text-ods-border cursor-not-allowed hover:!bg-transparent",
+    // Out of bounds: greyed, un-hoverable, and not-allowed under the cursor.
+    //
+    // Every rule here is `!`, and the inner button is targeted explicitly —
+    // neither is decoration. react-day-picker CONCATENATES the modifier's classes
+    // onto the base `day` ones (no tailwind-merge), so `text-ods-text-disabled`
+    // and `text-ods-text-primary` both land on the cell and the winner comes down
+    // to their order in the generated stylesheet, not in the attribute; without
+    // `!` the disabled day rendered in full white, indistinguishable from a
+    // selectable one. The cursor needs the child selector on top of that: it is
+    // the `day_button` INSIDE the cell that carries `cursor-pointer`, and a
+    // `disabled` <button> does not inherit the cell's cursor on its own.
+    disabled: cn(
+      "!text-ods-text-disabled !cursor-not-allowed hover:!bg-transparent",
+      "[&>button]:!cursor-not-allowed [&>button]:!text-ods-text-disabled"
+    ),
     hidden: "invisible",
     // Range styles matching Figma design:
     // - range_start: bright yellow #ffc008, bold, left radius (full radius if single selection)
@@ -257,6 +275,42 @@ function DatePickerCalendar({
       : (selected as DateRange)?.from || today
   );
 
+  /**
+   * `fromDate` / `toDate` → what react-day-picker **v9** actually understands.
+   *
+   * v8 took the bounds as props of those names and both disabled the days
+   * outside them and stopped the navigation there. v9 removed them: they are
+   * typed `@deprecated … has been removed` and the runtime never reads them —
+   * so forwarding them, as this calendar did after the v8 → v9 upgrade, silently
+   * dropped every bound. A "next 30 days" picker happily accepted last year, and
+   * the `disabled` class already defined in `classNames` below never applied to
+   * anything. Same shape of miss as the v8 `classNames` keys called out in
+   * `calendar.tsx` — the other half of that migration.
+   *
+   * The public API is unchanged: consumers keep passing `fromDate`/`toDate`, and
+   * this is the single place either is translated.
+   */
+  const disabledDays = React.useMemo<Matcher[]>(() => {
+    const matchers: Matcher[] = [];
+    if (fromDate) matchers.push({ before: fromDate });
+    if (toDate) matchers.push({ after: toDate });
+    return matchers;
+  }, [fromDate, toDate]);
+
+  // Out-of-bounds days are disabled, not hidden — a month keeps its shape, and
+  // the greyed-out day is what tells the user the bound exists. Navigation stops
+  // at the bound too (v8 did the same): past it there is nothing selectable, so
+  // paging further only walks through dead months. The nav is this component's
+  // own — `hideNavigation` turns off DayPicker's — so the limit is applied here
+  // rather than through `startMonth`/`endMonth`.
+  // Compared as a month ORDINAL, not as dates: the bound falls on some day of
+  // its month, and that month must stay reachable — a `fromDate` of the 20th
+  // still has to let the user page back to that month to pick the 25th.
+  const monthIndex = (date: Date): number => date.getFullYear() * 12 + date.getMonth();
+  const lastVisibleMonth = monthIndex(month) + (monthsToShow === 2 ? 1 : 0);
+  const canGoPrevious = !fromDate || monthIndex(month) > monthIndex(fromDate);
+  const canGoNext = !toDate || lastVisibleMonth < monthIndex(toDate);
+
   const handlePreviousMonth = () => {
     setMonth((prev) => {
       const newMonth = new Date(prev);
@@ -323,6 +377,7 @@ function DatePickerCalendar({
           <CalendarNavButton
             direction="left"
             onClick={handlePreviousMonth}
+            disabled={!canGoPrevious}
             aria-label="Previous month"
           />
           <span className="text-h4 text-ods-text-primary">
@@ -331,6 +386,7 @@ function DatePickerCalendar({
           <CalendarNavButton
             direction="right"
             onClick={handleNextMonth}
+            disabled={!canGoNext}
             aria-label="Next month"
           />
         </div>
@@ -343,8 +399,7 @@ function DatePickerCalendar({
           classNames={classNames}
           showOutsideDays
           fixedWeeks
-          fromDate={fromDate}
-          toDate={toDate}
+          disabled={disabledDays}
           locale={locale}
           hideNavigation
         />
@@ -366,6 +421,7 @@ function DatePickerCalendar({
             <CalendarNavButton
               direction="left"
               onClick={handlePreviousMonth}
+              disabled={!canGoPrevious}
               aria-label="Previous month"
             />
             <span className="text-h4 text-ods-text-primary">
@@ -375,6 +431,7 @@ function DatePickerCalendar({
               <CalendarNavButton
                 direction="right"
                 onClick={handleNextMonth}
+                disabled={!canGoNext}
                 aria-label="Next month"
               />
             )}
@@ -392,8 +449,7 @@ function DatePickerCalendar({
             classNames={classNames}
             showOutsideDays
             fixedWeeks
-            fromDate={fromDate}
-            toDate={toDate}
+            disabled={disabledDays}
             locale={locale}
             hideNavigation
           />
@@ -410,6 +466,7 @@ function DatePickerCalendar({
               <CalendarNavButton
                 direction="right"
                 onClick={handleNextMonth}
+                disabled={!canGoNext}
                 aria-label="Next month"
               />
             </div>
@@ -424,8 +481,7 @@ function DatePickerCalendar({
               classNames={classNames}
               showOutsideDays
               fixedWeeks
-              fromDate={fromDate}
-              toDate={toDate}
+              disabled={disabledDays}
               locale={locale}
               hideNavigation
             />

package/dist/chunk-5BAGE7AI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/chunk-5BAGE7AI.cjs","../src/components/calendar.tsx"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACJA,uCAAA,CAAA;AACA,4CAAA,CAAA;AAJA,2CAAkE;AAClE,kDAA0B;AAyEoB,+CAAA;AArD9C,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,gBAAA,EAAkB,IAAA;AAAA,EAClB,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,uBACE,6BAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,SAAA,EAAW,kCAAA,KAAG,EAAO,SAAS,CAAA;AAAA,MAC9B,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ,mEAAA;AAAA,QACR,KAAA,EAAO,6CAAA;AAAA,QACP,GAAA,EAAK,qEAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOL,eAAA,EAAiB,kCAAA;AAAA,UACf,8CAAA,EAAiB,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,UAAU,CAAC,CAAA;AAAA,UACtD;AAAA,QACF,CAAA;AAAA,QACA,WAAA,EAAa,kCAAA;AAAA,UACX,8CAAA,EAAiB,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,UAAU,CAAC,CAAA;AAAA,UACtD;AAAA,QACF,CAAA;AAAA,QACA,aAAA,EAAe,sCAAA;AAAA,QACf,aAAA,EAAe,+BAAA;AAAA,QACf,UAAA,EAAY,oCAAA;AAAA,QACZ,QAAA,EAAU,EAAA;AAAA,QACV,OAAA,EAAS,kFAAA;AAAA,QACT,IAAA,EAAM,EAAA;AAAA,QACN,GAAA,EAAK,sCAAA;AAAA;AAAA;AAAA,QAGL,UAAA,EAAY,kCAAA;AAAA,UACV,8CAAA,EAAiB,OAAA,EAAS,aAAA,EAAe,IAAA,EAAM,UAAU,CAAC,CAAA;AAAA,UAC1D;AAAA,QACF,CAAA;AAAA,QACA,QAAA,EACE,4FAAA;AAAA,QACF,KAAA,EAAO,8EAAA;AAAA,QACP,OAAA,EAAS,sDAAA;AAAA,QACT,QAAA,EAAU,sFAAA;AAAA,QACV,MAAA,EAAQ,WAAA;AAAA,QACR,GAAG;AAAA,MACL,CAAA;AAAA,MACA,UAAA,EAAY;AAAA;AAAA,QAEV,OAAA,EAAS,CAAC,EAAE,WAAA,EAAa,SAAA,EAAW,iBAAiB,CAAA,EAAA,GAAM;AACzD,UAAA,MAAM,IAAA,EAAM,kCAAA,SAAG,EAAW,gBAAgB,CAAA;AAC1C,UAAA,GAAA,CAAI,YAAA,IAAgB,OAAA,EAAS,uBAAO,6BAAA,yBAAC,EAAA,EAAa,SAAA,EAAW,IAAA,CAAK,CAAA;AAClE,UAAA,GAAA,CAAI,YAAA,IAAgB,IAAA,EAAM,uBAAO,6BAAA,sBAAC,EAAA,EAAU,SAAA,EAAW,IAAA,CAAK,CAAA;AAC5D,UAAA,GAAA,CAAI,YAAA,IAAgB,MAAA,EAAQ,uBAAO,6BAAA,wBAAC,EAAA,EAAY,SAAA,EAAW,IAAA,CAAK,CAAA;AAChE,UAAA,uBAAO,6BAAA,wBAAC,EAAA,EAAY,SAAA,EAAW,IAAA,CAAK,CAAA;AAAA,QACtC;AAAA,MACF,CAAA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN,CAAA;AAEJ;AACA,QAAA,CAAS,YAAA,EAAc,UAAA;ADPvB;AACA;AACE;AACF,4BAAC","file":"/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/chunk-5BAGE7AI.cjs","sourcesContent":[null,"\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../utils/cn\"\nimport { buttonVariants } from \"./ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\n/**\n * ODS-styled DayPicker wrapper.\n *\n * IMPORTANT: the installed react-day-picker is **v9** — the classNames keys\n * below are the v9 vocabulary (`weekdays`/`weekday`/`week`/`day`/`day_button`/\n * `selected`/`disabled`/…). The previous v8 shadcn map (`head_row`, `cell`,\n * `day_selected`, …) was silently IGNORED by v9, which shipped default\n * browser-table chrome: misaligned weekday headers, no disabled styling,\n * wrapping rows on mobile. Do not reintroduce v8 keys.\n *\n * Day-cell display stays `table-cell` (only the inner `day_button` is\n * flex) — converting `<td>`s to inline-flex is what made rows wrap.\n */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"relative flex flex-col md:flex-row gap-[var(--spacing-system-mf)]\",\n        month: \"flex flex-col gap-[var(--spacing-system-s)]\",\n        nav: \"absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between\",\n        // size 'icon-sm' = the lib's fixed 32px icon button (no md: growth —\n        // the DEFAULT size carries `md:h-12`, which tailwind-merge does NOT\n        // drop for a plain `h-8` override and the nav ballooned on desktop).\n        // Boundary-month nav state arrives as BOTH native `disabled` and\n        // `aria-disabled` depending on the react-day-picker code path — style\n        // both (the same pairing buttonSurfaceClasses uses).\n        button_previous: cn(\n          buttonVariants({ variant: \"outline\", size: \"icon-sm\" }),\n          \"bg-transparent opacity-60 hover:opacity-100 disabled:opacity-25 aria-disabled:opacity-25 aria-disabled:pointer-events-none\"\n        ),\n        button_next: cn(\n          buttonVariants({ variant: \"outline\", size: \"icon-sm\" }),\n          \"bg-transparent opacity-60 hover:opacity-100 disabled:opacity-25 aria-disabled:opacity-25 aria-disabled:pointer-events-none\"\n        ),\n        month_caption: \"flex h-8 items-center justify-center\",\n        caption_label: \"text-h6 text-ods-text-primary\",\n        month_grid: \"border-separate border-spacing-y-1\",\n        weekdays: \"\",\n        weekday: \"h-9 w-9 p-0 text-center align-middle text-h6 font-normal text-ods-text-secondary\",\n        week: \"\",\n        day: \"h-9 w-9 p-0 text-center align-middle\",\n        // 'icon-sm' again: a size MUST be passed or the default's `md:h-12` +\n        // `text-h3` leak through and inflate day cells on desktop.\n        day_button: cn(\n          buttonVariants({ variant: \"transparent\", size: \"icon-sm\" }),\n          \"h-9 w-9 rounded-md p-0 text-h6 font-normal text-ods-text-primary\"\n        ),\n        selected:\n          \"[&>button]:bg-ods-accent [&>button]:text-ods-text-on-accent [&>button]:hover:bg-ods-accent\",\n        today: \"[&>button]:text-ods-accent [&[aria-selected]>button]:text-ods-text-on-accent\",\n        outside: \"[&>button]:text-ods-text-muted [&>button]:opacity-50\",\n        disabled: \"[&>button]:text-ods-text-muted [&>button]:opacity-40 [&>button]:hover:bg-transparent\",\n        hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        // v9 passes 'up'/'down' for dropdown captions too — branch all four.\n        Chevron: ({ orientation, className: chevronClassName }) => {\n          const cls = cn(\"h-4 w-4\", chevronClassName)\n          if (orientation === \"right\") return <ChevronRight className={cls} />\n          if (orientation === \"up\") return <ChevronUp className={cls} />\n          if (orientation === \"down\") return <ChevronDown className={cls} />\n          return <ChevronLeft className={cls} />\n        },\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"]}