@kalyx/react 1.0.0-rc.5 → 1.0.0-rc.7

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @kalyx/react
 
+## 1.0.0-rc.7
+
+### Minor Changes
+
+- 0eca2e8: Two new `DatePicker.Calendar` / `RangePicker.Calendar` props plus an ISO-week utility:
+  - **`showWeekNumber`** — render an ISO 8601 week-number column (1–53) on the left of the grid. The column uses `<th scope="row" aria-hidden="true">` so it doesn't participate in the WAI-ARIA grid data region; keyboard navigation across date cells is unchanged. New className slots: `weekNumberHeader`, `weekNumber`.
+  - **`fixedWeeks`** — when true, always render 6 rows (42 cells) regardless of the month. Useful for popover layouts that need a stable height across month navigation.
+
+  Both also accepted on `CalendarOptions` (the `getCalendarDays` core util gains `fixedWeeks`).
+
+  New core export: **`getISOWeekNumber(iso)`** — pure UTC computation, no date-fns dep. Anchored to the Thursday of the week (so the same week always returns the same number regardless of `weekStartsOn`).
+
+  ```tsx
+  <DatePicker value={date} onChange={setDate}>
+    <DatePicker.Input />
+    <DatePicker.Popover>
+      <DatePicker.Calendar showWeekNumber fixedWeeks />
+    </DatePicker.Popover>
+  </DatePicker>
+  ```
+
+  Bundle impact: +0.46 KB ESM gzip (13.96 → 14.42 KB). Still well under the 15 KB ceiling.
+
+- d62c84e: `DisabledRule` gains a programmatic `filter` variant — pass any predicate `(iso: ISODateString) => boolean` to disable arbitrary days that don't fit the declarative `before` / `after` / `dayOfWeek` / `date` rules.
+
+  ```tsx
+  const holidays = new Set(['2026-01-01T00:00:00.000Z', '2026-12-25T00:00:00.000Z']);
+
+  <DatePicker
+    disabled={[
+      { dayOfWeek: [0, 6] }, // weekends
+      { filter: (iso) => holidays.has(iso) }, // holidays
+    ]}
+  >
+    …
+  </DatePicker>;
+  ```
+
+  The new variant slots into the existing `isDateDisabled` evaluation (short-circuits on first match) and works with keyboard-navigation disabled-skip in `DatePicker.Calendar` / `RangePicker.Calendar` with no further changes. Equivalent to `react-datepicker`'s `filterDate` prop and MUI X DatePicker's `shouldDisableDate`. Bundle impact: 0 KB (still 13.96 KB ESM gzip).
+
+### Patch Changes
+
+- b40080d: Internal: sync the `tsup` onSuccess bundle-size budget from `13 KB` to `15 KB` so the per-build warning matches the actual CI gate (`scripts/check-bundle-size.js`, `pr-check.yml`, `release.yml`). No runtime change; the published artifact is byte-identical.
+
+  This was a leftover from the 13 → 14 → 15 KB ceiling raises during RC (PR #46 / PR #48); only the tsup-side TARGET_KB was missed during those bumps, so local `pnpm build` printed a spurious `⚠️` even though CI passed.
+
+- Updated dependencies [0eca2e8]
+- Updated dependencies [d62c84e]
+  - @kalyx/core@1.0.0-rc.7
+
+## 1.0.0-rc.6
+
+### Patch Changes
+
+- abc56ac: Security: pin transitive `fast-uri` to `>=3.1.2` and `@babel/plugin-transform-modules-systemjs` to `>=7.29.4` via `pnpm.overrides`.
+
+  Resolves three Code Scanning alerts on `pnpm-lock.yaml`:
+  - `fast-uri@3.1.0` — [GHSA-v39h-62p7-jpjc](https://osv.dev/GHSA-v39h-62p7-jpjc) (CVE-2026-6322), first patched in `3.1.2`.
+  - `fast-uri@3.1.0` — [GHSA-q3j6-qgpj-74h6](https://osv.dev/GHSA-q3j6-qgpj-74h6) (CVE-2026-6321), first patched in `3.1.1`.
+  - `@babel/plugin-transform-modules-systemjs@7.29.0` — [GHSA-fv7c-fp4j-7gwp](https://osv.dev/GHSA-fv7c-fp4j-7gwp) (CVE-2026-44728), first patched in `7.29.4` on the 7.x line.
+
+  All three packages are transitive build-time dependencies (ajv → fast-uri, Babel preset-env → systemjs plugin); no public API impact.
+
+- Updated dependencies [abc56ac]
+  - @kalyx/core@1.0.0-rc.6
+
 ## 1.0.0-rc.5
 
 ### Patch Changes

package/dist/index.cjs

@@ -465,6 +465,8 @@ var srOnly = {
 function DatePickerCalendar({
   classNames,
   onTitleClick,
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
@@ -478,10 +480,21 @@ function DatePickerCalendar({
       selected: ctx.value,
       focusedDate,
       disabled,
-      timezone: displayTimezone
+      timezone: displayTimezone,
+      fixedWeeks
     }),
-    [viewMonth, adapter, weekStartsOn, ctx.value, focusedDate, disabled, displayTimezone]
+    [
+      viewMonth,
+      adapter,
+      weekStartsOn,
+      ctx.value,
+      focusedDate,
+      disabled,
+      displayTimezone,
+      fixedWeeks
+    ]
   );
+  const thursdayIndex = weekStartsOn === 0 ? 4 : 3;
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = core.formatMonthYear(year, month, locale);
@@ -622,61 +635,76 @@ function DatePickerCalendar({
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              "aria-colindex": colIndex + 1,
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
             "tr",
             {
               role: "row",
               "aria-rowindex": weekIndex + 2,
               className: classNames?.gridRow,
-              children: week.map((day, colIndex) => {
-                const dayClasses = [
-                  classNames?.day,
-                  day.isSelected && classNames?.daySelected,
-                  day.isToday && classNames?.dayToday,
-                  day.isDisabled && classNames?.dayDisabled,
-                  !day.isCurrentMonth && classNames?.dayOutsideMonth
-                ].filter(Boolean).join(" ") || void 0;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "th",
                   {
-                    role: "gridcell",
-                    "aria-colindex": colIndex + 1,
-                    "aria-selected": day.isSelected || void 0,
-                    "aria-disabled": day.isDisabled || void 0,
-                    "aria-current": day.isToday ? "date" : void 0,
-                    className: classNames?.gridCell,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        tabIndex: day.isFocused ? 0 : -1,
-                        disabled: day.isDisabled,
-                        "data-focused": day.isFocused || void 0,
-                        "data-selected": day.isSelected || void 0,
-                        "data-today": day.isToday || void 0,
-                        "data-outside-month": !day.isCurrentMonth || void 0,
-                        className: dayClasses,
-                        onClick: () => handleDayClick(day),
-                        "aria-label": safeFormatFullDate(day.isoString, locale),
-                        children: day.dayNumber
-                      }
-                    )
-                  },
-                  day.isoString
-                );
-              })
+                    scope: "row",
+                    "aria-hidden": "true",
+                    className: classNames?.weekNumber,
+                    "data-week-number": true,
+                    children: core.getISOWeekNumber(week[thursdayIndex].isoString)
+                  }
+                ) : null,
+                week.map((day, colIndex) => {
+                  const dayClasses = [
+                    classNames?.day,
+                    day.isSelected && classNames?.daySelected,
+                    day.isToday && classNames?.dayToday,
+                    day.isDisabled && classNames?.dayDisabled,
+                    !day.isCurrentMonth && classNames?.dayOutsideMonth
+                  ].filter(Boolean).join(" ") || void 0;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIndex + 1,
+                      "aria-selected": day.isSelected || void 0,
+                      "aria-disabled": day.isDisabled || void 0,
+                      "aria-current": day.isToday ? "date" : void 0,
+                      className: classNames?.gridCell,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: day.isFocused ? 0 : -1,
+                          disabled: day.isDisabled,
+                          "data-focused": day.isFocused || void 0,
+                          "data-selected": day.isSelected || void 0,
+                          "data-today": day.isToday || void 0,
+                          "data-outside-month": !day.isCurrentMonth || void 0,
+                          className: dayClasses,
+                          onClick: () => handleDayClick(day),
+                          "aria-label": safeFormatFullDate(day.isoString, locale),
+                          children: day.dayNumber
+                        }
+                      )
+                    },
+                    day.isoString
+                  );
+                })
+              ]
             },
             weekIndex
           )) })
@@ -1339,6 +1367,8 @@ var srOnly2 = {
 function RangePickerCalendar({
   classNames,
   selectionMode = "range",
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
@@ -1364,10 +1394,22 @@ function RangePickerCalendar({
       disabled,
       range: value,
       rangeHover: hoverDate,
-      timezone: displayTimezone
+      timezone: displayTimezone,
+      fixedWeeks
     }),
-    [viewMonth, adapter, weekStartsOn, focusedDate, disabled, value, hoverDate, displayTimezone]
+    [
+      viewMonth,
+      adapter,
+      weekStartsOn,
+      focusedDate,
+      disabled,
+      value,
+      hoverDate,
+      displayTimezone,
+      fixedWeeks
+    ]
   );
+  const thursdayIndex = weekStartsOn === 0 ? 4 : 3;
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = core.formatMonthYear(year, month, locale);
@@ -1531,67 +1573,82 @@ function RangePickerCalendar({
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              "aria-colindex": colIndex + 1,
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
             "tr",
             {
               role: "row",
               "aria-rowindex": weekIndex + 2,
               className: classNames?.gridRow,
-              children: week.map((day, colIndex) => {
-                const dayClasses = [
-                  classNames?.day,
-                  day.isRangeStart && classNames?.dayRangeStart,
-                  day.isRangeEnd && classNames?.dayRangeEnd,
-                  day.isInRange && classNames?.dayInRange,
-                  day.isToday && classNames?.dayToday,
-                  day.isDisabled && classNames?.dayDisabled,
-                  !day.isCurrentMonth && classNames?.dayOutsideMonth
-                ].filter(Boolean).join(" ") || void 0;
-                const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "th",
                   {
-                    role: "gridcell",
-                    "aria-colindex": colIndex + 1,
-                    "aria-selected": isSelected || void 0,
-                    "aria-disabled": day.isDisabled || void 0,
-                    "aria-current": day.isToday ? "date" : void 0,
-                    className: classNames?.gridCell,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        tabIndex: day.isFocused ? 0 : -1,
-                        disabled: day.isDisabled,
-                        "data-focused": day.isFocused || void 0,
-                        "data-range-start": day.isRangeStart || void 0,
-                        "data-range-end": day.isRangeEnd || void 0,
-                        "data-in-range": day.isInRange || void 0,
-                        "data-today": day.isToday || void 0,
-                        "data-outside-month": !day.isCurrentMonth || void 0,
-                        className: dayClasses,
-                        onClick: () => handleDayClick(day),
-                        onMouseEnter: () => handleDayMouseEnter(day),
-                        "aria-label": safeFormatFullDate2(day.isoString, locale),
-                        children: day.dayNumber
-                      }
-                    )
-                  },
-                  day.isoString
-                );
-              })
+                    scope: "row",
+                    "aria-hidden": "true",
+                    className: classNames?.weekNumber,
+                    "data-week-number": true,
+                    children: core.getISOWeekNumber(week[thursdayIndex].isoString)
+                  }
+                ) : null,
+                week.map((day, colIndex) => {
+                  const dayClasses = [
+                    classNames?.day,
+                    day.isRangeStart && classNames?.dayRangeStart,
+                    day.isRangeEnd && classNames?.dayRangeEnd,
+                    day.isInRange && classNames?.dayInRange,
+                    day.isToday && classNames?.dayToday,
+                    day.isDisabled && classNames?.dayDisabled,
+                    !day.isCurrentMonth && classNames?.dayOutsideMonth
+                  ].filter(Boolean).join(" ") || void 0;
+                  const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIndex + 1,
+                      "aria-selected": isSelected || void 0,
+                      "aria-disabled": day.isDisabled || void 0,
+                      "aria-current": day.isToday ? "date" : void 0,
+                      className: classNames?.gridCell,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: day.isFocused ? 0 : -1,
+                          disabled: day.isDisabled,
+                          "data-focused": day.isFocused || void 0,
+                          "data-range-start": day.isRangeStart || void 0,
+                          "data-range-end": day.isRangeEnd || void 0,
+                          "data-in-range": day.isInRange || void 0,
+                          "data-today": day.isToday || void 0,
+                          "data-outside-month": !day.isCurrentMonth || void 0,
+                          className: dayClasses,
+                          onClick: () => handleDayClick(day),
+                          onMouseEnter: () => handleDayMouseEnter(day),
+                          "aria-label": safeFormatFullDate2(day.isoString, locale),
+                          children: day.dayNumber
+                        }
+                      )
+                    },
+                    day.isoString
+                  );
+                })
+              ]
             },
             weekIndex
           )) })