@plexui/ui 0.19.0 → 0.20.0

package/dist/es/components/DataTable/DataTablePagination.js

@@ -1,14 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "@tanstack/react-table";
-import { Button } from "../Button";
-import { ChevronLeftMd, ChevronRightMd } from "../Icon";
-import s from "./DataTable.module.css";
+import { Button } from "../Button/index.js";
+import { ChevronLeftMd, ChevronRightMd } from "../Icon/index.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
+const PAGE_SIZES = [10, 20, 50, 100];
 export const DataTablePagination = ({ table }) => {
     const totalRows = table.getFilteredRowModel().rows.length;
     const { pageIndex, pageSize } = table.getState().pagination;
     const from = pageIndex * pageSize + 1;
     const to = Math.min((pageIndex + 1) * pageSize, totalRows);
-    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
+    // The table's initial and current page sizes are options too, so the select
+    // always shows the real page size and can go back to the initial one
+    const pageSizes = [...new Set([...PAGE_SIZES, table.initialState.pagination.pageSize, pageSize])].sort((a, b) => a - b);
+    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { "aria-label": "Rows per page", className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: pageSizes.map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), "aria-label": "Previous page", children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), "aria-label": "Next page", children: _jsx(ChevronRightMd, {}) })] })] })] }));
 };
 //# sourceMappingURL=DataTablePagination.js.map

package/dist/es/components/DataTable/DataTablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAMtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,iBACE,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,YAEnC,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,YAE/B,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {[10, 20, 50, 100].map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,0DAA0D,CAAA;AAMxE,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;AAEpC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAC1D,4EAA4E;IAC5E,qEAAqE;IACrE,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CACpG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAChB,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,+BACa,eAAe,EAC1B,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,gBACxB,eAAe,YAE1B,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,gBACpB,WAAW,YAEtB,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nconst PAGE_SIZES = [10, 20, 50, 100]\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n  // The table's initial and current page sizes are options too, so the select\n  // always shows the real page size and can go back to the initial one\n  const pageSizes = [...new Set([...PAGE_SIZES, table.initialState.pagination.pageSize, pageSize])].sort(\n    (a, b) => a - b,\n  )\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          aria-label=\"Rows per page\"\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {pageSizes.map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n            aria-label=\"Previous page\"\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n            aria-label=\"Next page\"\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/es/components/DataTable/columnHelpers.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from "../Badge";
-import { CopyTooltip } from "../Tooltip";
-import { Tooltip } from "../Tooltip";
+import { Badge } from "../Badge/index.js";
+import { CopyTooltip } from "../Tooltip/index.js";
+import { Tooltip } from "../Tooltip/index.js";
 export function idCell(accessor) {
     function IdCell({ row }) {
         const value = accessor(row.original);

package/dist/es/components/DataTable/index.js

@@ -1,5 +1,5 @@
-export { DataTable } from "./DataTable";
-export { DataTablePagination } from "./DataTablePagination";
-export { DataTableColumnHeader } from "./DataTableColumnHeader";
-export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers";
+export { DataTable } from "./DataTable.js";
+export { DataTablePagination } from "./DataTablePagination.js";
+export { DataTableColumnHeader } from "./DataTableColumnHeader.js";
+export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/DateInput/DateInput.js

@@ -5,9 +5,9 @@ import { useMaskito } from "@maskito/react";
 import { DateTime } from "luxon";
 import { useEffect, useMemo, useState } from "react";
 import { mergeRefs } from "react-merge-refs";
-import { Input } from "../Input";
+import { Input } from "../Input/index.js";
 export const DateInput = (props) => {
-    const { value, onChange, mode = "dd/mm/yyyy", separator = ".", timeMode, dateTimeSeparator = ", ", timeStep = 0, min, max, clearable = false, placeholder, ref, ...inputProps } = props;
+    const { value, onChange, mode = "dd/mm/yyyy", separator = ".", timeMode, dateTimeSeparator = ", ", timeStep = 0, min, max, clearable = false, placeholder, onBlur, ref, ...inputProps } = props;
     const hasTime = !!timeMode;
     const dateParams = useMemo(() => ({
         mode,
@@ -33,15 +33,17 @@ export const DateInput = (props) => {
         : maskitoDateOptionsGenerator(dateParams), [hasTime, dateParams, dateTimeParams]);
     const maskRef = useMaskito({ options: maskOptions });
     const [inputValue, setInputValue] = useState("");
+    const format = (date) => {
+        if (!date)
+            return "";
+        return hasTime
+            ? maskitoStringifyDateTime(date.toJSDate(), dateTimeParams)
+            : maskitoStringifyDate(date.toJSDate(), dateParams);
+    };
+    const parse = (str) => hasTime ? maskitoParseDateTime(str, dateTimeParams) : maskitoParseDate(str, dateParams);
     const valueMsKey = value?.toMillis() ?? null;
     useEffect(() => {
-        if (!value) {
-            setInputValue("");
-            return;
-        }
-        setInputValue(hasTime
-            ? maskitoStringifyDateTime(value.toJSDate(), dateTimeParams)
-            : maskitoStringifyDate(value.toJSDate(), dateParams));
+        setInputValue(format(value));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [valueMsKey, hasTime, dateParams, dateTimeParams]);
     const handleInput = (evt) => {
@@ -51,13 +53,19 @@ export const DateInput = (props) => {
             onChange(null);
             return;
         }
-        const parsed = hasTime
-            ? maskitoParseDateTime(str, dateTimeParams)
-            : maskitoParseDate(str, dateParams);
+        const parsed = parse(str);
         if (parsed) {
             onChange(DateTime.fromJSDate(parsed));
         }
     };
+    // Text that is not a complete date never reaches onChange, so leaving the
+    // field shows the value again instead of a date the value does not hold
+    const handleBlur = (evt) => {
+        onBlur?.(evt);
+        if (inputValue && !parse(inputValue)) {
+            setInputValue(format(value));
+        }
+    };
     const handleClear = () => {
         setInputValue("");
         onChange(null);
@@ -68,6 +76,6 @@ export const DateInput = (props) => {
             return datePart;
         return `${datePart}${dateTimeSeparator}${timeMode}`;
     }, [mode, separator, hasTime, timeMode, dateTimeSeparator]);
-    return (_jsx(Input, { ...inputProps, ref: mergeRefs([maskRef, ref]), value: inputValue, onInput: handleInput, placeholder: placeholder ?? defaultPlaceholder, onClear: clearable ? handleClear : undefined }));
+    return (_jsx(Input, { ...inputProps, ref: mergeRefs([maskRef, ref]), value: inputValue, onInput: handleInput, onBlur: handleBlur, placeholder: placeholder ?? defaultPlaceholder, onClear: clearable ? handleClear : undefined }));
 };
 //# sourceMappingURL=DateInput.js.map

package/dist/es/components/DateInput/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACL,2BAA2B,EAC3B,+BAA+B,EAC/B,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,GAKzB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAmB,MAAM,UAAU,CAAA;AAmBjD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,YAAY,EACnB,SAAS,GAAG,GAAG,EACf,QAAQ,EACR,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GAAG,CAAC,EACZ,GAAG,EACH,GAAG,EACH,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,GAAG,EACH,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAA;IAE1B,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,SAAS;QACT,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9C,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;KAC/C,CAAC;IACF,uDAAuD;IACvD,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CACpD,CAAA;IAED,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,IAAI;QACd,aAAa,EAAE,SAAS;QACxB,QAAQ,EAAE,QAAQ,IAAI,OAAO;QAC7B,iBAAiB;QACjB,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QACxC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9C,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;KAC/C,CAAC;IACF,uDAAuD;IACvD,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAC3F,CAAA;IAED,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO;QACL,CAAC,CAAC,+BAA+B,CAAC,cAAc,CAAC;QACjD,CAAC,CAAC,2BAA2B,CAAC,UAAU,CAAC,EAC7C,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CACtC,CAAA;IAED,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAA;IAEpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEhD,MAAM,UAAU,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,IAAI,CAAA;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,aAAa,CAAC,EAAE,CAAC,CAAA;YACjB,OAAM;QACR,CAAC;QACD,aAAa,CACX,OAAO;YACL,CAAC,CAAC,wBAAwB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,cAAc,CAAC;YAC5D,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CACvD,CAAA;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAA;IAErD,MAAM,WAAW,GAAG,CAAC,GAAsC,EAAE,EAAE;QAC7D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAA;QACnC,aAAa,CAAC,GAAG,CAAC,CAAA;QAElB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,QAAQ,CAAC,IAAI,CAAC,CAAA;YACd,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,OAAO;YACpB,CAAC,CAAC,oBAAoB,CAAC,GAAG,EAAE,cAAc,CAAC;YAC3C,CAAC,CAAC,gBAAgB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAA;QAErC,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA;QACvC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,EAAE,CAAC,CAAA;QACjB,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChB,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,CAAA;QAC7D,IAAI,CAAC,OAAO;YAAE,OAAO,QAAQ,CAAA;QAC7B,OAAO,GAAG,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,EAAE,CAAA;IACrD,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAE3D,OAAO,CACL,KAAC,KAAK,OACA,UAAU,EACd,GAAG,EAAE,SAAS,CAAC,CAAC,OAAiD,EAAE,GAAG,CAAC,CAAC,EACxE,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,IAAI,kBAAkB,EAC9C,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport {\n  maskitoDateOptionsGenerator,\n  maskitoDateTimeOptionsGenerator,\n  maskitoParseDate,\n  maskitoParseDateTime,\n  maskitoStringifyDate,\n  maskitoStringifyDateTime,\n  type MaskitoDateMode,\n  type MaskitoDateParams,\n  type MaskitoDateTimeParams,\n  type MaskitoTimeMode,\n} from \"@maskito/kit\"\nimport { useMaskito } from \"@maskito/react\"\nimport { DateTime } from \"luxon\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { Input, type InputProps } from \"../Input\"\n\nexport type DateInputProps = {\n  value: DateTime | null\n  onChange: (value: DateTime | null) => void\n  mode?: MaskitoDateMode\n  separator?: string\n  timeMode?: MaskitoTimeMode\n  dateTimeSeparator?: string\n  timeStep?: number\n  min?: DateTime\n  max?: DateTime\n  clearable?: boolean\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<\n  InputProps,\n  \"value\" | \"defaultValue\" | \"onChange\" | \"onInput\" | \"onClear\" | \"ref\" | \"type\" | \"min\" | \"max\"\n>\n\nexport const DateInput = (props: DateInputProps) => {\n  const {\n    value,\n    onChange,\n    mode = \"dd/mm/yyyy\",\n    separator = \".\",\n    timeMode,\n    dateTimeSeparator = \", \",\n    timeStep = 0,\n    min,\n    max,\n    clearable = false,\n    placeholder,\n    ref,\n    ...inputProps\n  } = props\n\n  const hasTime = !!timeMode\n\n  const dateParams = useMemo<MaskitoDateParams>(\n    () => ({\n      mode,\n      separator,\n      ...(min ? { min: min.toJSDate() } : undefined),\n      ...(max ? { max: max.toJSDate() } : undefined),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [mode, separator, min?.toMillis(), max?.toMillis()],\n  )\n\n  const dateTimeParams = useMemo<MaskitoDateTimeParams>(\n    () => ({\n      dateMode: mode,\n      dateSeparator: separator,\n      timeMode: timeMode ?? \"HH:MM\",\n      dateTimeSeparator,\n      ...(timeStep ? { timeStep } : undefined),\n      ...(min ? { min: min.toJSDate() } : undefined),\n      ...(max ? { max: max.toJSDate() } : undefined),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [mode, separator, timeMode, dateTimeSeparator, timeStep, min?.toMillis(), max?.toMillis()],\n  )\n\n  const maskOptions = useMemo(\n    () =>\n      hasTime\n        ? maskitoDateTimeOptionsGenerator(dateTimeParams)\n        : maskitoDateOptionsGenerator(dateParams),\n    [hasTime, dateParams, dateTimeParams],\n  )\n\n  const maskRef = useMaskito({ options: maskOptions })\n\n  const [inputValue, setInputValue] = useState(\"\")\n\n  const valueMsKey = value?.toMillis() ?? null\n  useEffect(() => {\n    if (!value) {\n      setInputValue(\"\")\n      return\n    }\n    setInputValue(\n      hasTime\n        ? maskitoStringifyDateTime(value.toJSDate(), dateTimeParams)\n        : maskitoStringifyDate(value.toJSDate(), dateParams),\n    )\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueMsKey, hasTime, dateParams, dateTimeParams])\n\n  const handleInput = (evt: React.FormEvent<HTMLInputElement>) => {\n    const str = evt.currentTarget.value\n    setInputValue(str)\n\n    if (!str) {\n      onChange(null)\n      return\n    }\n\n    const parsed = hasTime\n      ? maskitoParseDateTime(str, dateTimeParams)\n      : maskitoParseDate(str, dateParams)\n\n    if (parsed) {\n      onChange(DateTime.fromJSDate(parsed))\n    }\n  }\n\n  const handleClear = () => {\n    setInputValue(\"\")\n    onChange(null)\n  }\n\n  const defaultPlaceholder = useMemo(() => {\n    const datePart = mode.replace(/\\//g, separator).toUpperCase()\n    if (!hasTime) return datePart\n    return `${datePart}${dateTimeSeparator}${timeMode}`\n  }, [mode, separator, hasTime, timeMode, dateTimeSeparator])\n\n  return (\n    <Input\n      {...inputProps}\n      ref={mergeRefs([maskRef as unknown as React.Ref<HTMLInputElement>, ref])}\n      value={inputValue}\n      onInput={handleInput}\n      placeholder={placeholder ?? defaultPlaceholder}\n      onClear={clearable ? handleClear : undefined}\n    />\n  )\n}\n"]}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  maskitoDateOptionsGenerator,\n  maskitoDateTimeOptionsGenerator,\n  maskitoParseDate,\n  maskitoParseDateTime,\n  maskitoStringifyDate,\n  maskitoStringifyDateTime,\n  type MaskitoDateMode,\n  type MaskitoDateParams,\n  type MaskitoDateTimeParams,\n  type MaskitoTimeMode,\n} from \"@maskito/kit\"\nimport { useMaskito } from \"@maskito/react\"\nimport { DateTime } from \"luxon\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { Input, type InputProps } from \"../Input\"\n\nexport type DateInputProps = {\n  value: DateTime | null\n  onChange: (value: DateTime | null) => void\n  mode?: MaskitoDateMode\n  separator?: string\n  timeMode?: MaskitoTimeMode\n  dateTimeSeparator?: string\n  timeStep?: number\n  min?: DateTime\n  max?: DateTime\n  clearable?: boolean\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<\n  InputProps,\n  \"value\" | \"defaultValue\" | \"onChange\" | \"onInput\" | \"onClear\" | \"ref\" | \"type\" | \"min\" | \"max\"\n>\n\nexport const DateInput = (props: DateInputProps) => {\n  const {\n    value,\n    onChange,\n    mode = \"dd/mm/yyyy\",\n    separator = \".\",\n    timeMode,\n    dateTimeSeparator = \", \",\n    timeStep = 0,\n    min,\n    max,\n    clearable = false,\n    placeholder,\n    onBlur,\n    ref,\n    ...inputProps\n  } = props\n\n  const hasTime = !!timeMode\n\n  const dateParams = useMemo<MaskitoDateParams>(\n    () => ({\n      mode,\n      separator,\n      ...(min ? { min: min.toJSDate() } : undefined),\n      ...(max ? { max: max.toJSDate() } : undefined),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [mode, separator, min?.toMillis(), max?.toMillis()],\n  )\n\n  const dateTimeParams = useMemo<MaskitoDateTimeParams>(\n    () => ({\n      dateMode: mode,\n      dateSeparator: separator,\n      timeMode: timeMode ?? \"HH:MM\",\n      dateTimeSeparator,\n      ...(timeStep ? { timeStep } : undefined),\n      ...(min ? { min: min.toJSDate() } : undefined),\n      ...(max ? { max: max.toJSDate() } : undefined),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [mode, separator, timeMode, dateTimeSeparator, timeStep, min?.toMillis(), max?.toMillis()],\n  )\n\n  const maskOptions = useMemo(\n    () =>\n      hasTime\n        ? maskitoDateTimeOptionsGenerator(dateTimeParams)\n        : maskitoDateOptionsGenerator(dateParams),\n    [hasTime, dateParams, dateTimeParams],\n  )\n\n  const maskRef = useMaskito({ options: maskOptions })\n\n  const [inputValue, setInputValue] = useState(\"\")\n\n  const format = (date: DateTime | null) => {\n    if (!date) return \"\"\n    return hasTime\n      ? maskitoStringifyDateTime(date.toJSDate(), dateTimeParams)\n      : maskitoStringifyDate(date.toJSDate(), dateParams)\n  }\n\n  const parse = (str: string) =>\n    hasTime ? maskitoParseDateTime(str, dateTimeParams) : maskitoParseDate(str, dateParams)\n\n  const valueMsKey = value?.toMillis() ?? null\n  useEffect(() => {\n    setInputValue(format(value))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueMsKey, hasTime, dateParams, dateTimeParams])\n\n  const handleInput = (evt: React.FormEvent<HTMLInputElement>) => {\n    const str = evt.currentTarget.value\n    setInputValue(str)\n\n    if (!str) {\n      onChange(null)\n      return\n    }\n\n    const parsed = parse(str)\n\n    if (parsed) {\n      onChange(DateTime.fromJSDate(parsed))\n    }\n  }\n\n  // Text that is not a complete date never reaches onChange, so leaving the\n  // field shows the value again instead of a date the value does not hold\n  const handleBlur = (evt: React.FocusEvent<HTMLInputElement>) => {\n    onBlur?.(evt)\n    if (inputValue && !parse(inputValue)) {\n      setInputValue(format(value))\n    }\n  }\n\n  const handleClear = () => {\n    setInputValue(\"\")\n    onChange(null)\n  }\n\n  const defaultPlaceholder = useMemo(() => {\n    const datePart = mode.replace(/\\//g, separator).toUpperCase()\n    if (!hasTime) return datePart\n    return `${datePart}${dateTimeSeparator}${timeMode}`\n  }, [mode, separator, hasTime, timeMode, dateTimeSeparator])\n\n  return (\n    <Input\n      {...inputProps}\n      ref={mergeRefs([maskRef as unknown as React.Ref<HTMLInputElement>, ref])}\n      value={inputValue}\n      onInput={handleInput}\n      onBlur={handleBlur}\n      placeholder={placeholder ?? defaultPlaceholder}\n      onClear={clearable ? handleClear : undefined}\n    />\n  )\n}\n"]}

package/dist/es/components/DateInput/index.js

@@ -1,2 +1,2 @@
-export { DateInput } from "./DateInput";
+export { DateInput } from "./DateInput.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/DatePicker/Calendar.js

@@ -2,23 +2,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateTime, Interval } from "luxon";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { chunkIntoWeeks, getDaysOfMonth, isBefore, isSameDay, isToday } from "../../lib/dateUtils";
-import { waitForAnimationFrame } from "../../lib/helpers";
-import { Button } from "../Button";
-import { ChevronLeft, ChevronRight } from "../Icon";
-import { usePopoverClose } from "../Popover/usePopoverController";
-import { Select } from "../Select";
-import { TransitionGroup } from "../Transition";
-import s from "./Calendar.module.css";
-import { useDateContext } from "./context";
+import { useStableCallback } from "../../hooks/useStableCallback.js";
+import { chunkIntoWeeks, getDaysOfMonth, isAfter, isBefore, isSameDay, isToday, } from "../../lib/dateUtils.js";
+import { waitForAnimationFrame } from "../../lib/helpers.js";
+import { Button } from "../Button/index.js";
+import { ChevronLeft, ChevronRight } from "../Icon/index.js";
+import { usePopoverClose } from "../Popover/usePopoverController.js";
+import { Select } from "../Select/index.js";
+import { TransitionGroup } from "../Transition/index.js";
+import s from "@plexui/styles/components/DatePicker/Calendar.module.css";
+import { useDateContext } from "./context.js";
 const CALENDAR_WIDTH_PX = 210;
 const CALENDAR_GAP_PX = 32;
 const STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX;
 const SHORT_MONTH_NAMES = Array.from({ length: 12 }, (_, i) => DateTime.local(2024, i + 1, 1).monthShort);
+// The day a grid key moves to: a day, a week, the Sunday or Saturday of the
+// week (rows start on Sunday), or a month (Luxon clamps Jan 31 to Feb 28/29)
+const getKeyTarget = (key, day) => {
+    switch (key) {
+        case "ArrowLeft":
+            return day.minus({ days: 1 });
+        case "ArrowRight":
+            return day.plus({ days: 1 });
+        case "ArrowUp":
+            return day.minus({ days: 7 });
+        case "ArrowDown":
+            return day.plus({ days: 7 });
+        case "Home":
+            return day.minus({ days: day.weekday % 7 });
+        case "End":
+            return day.plus({ days: 6 - (day.weekday % 7) });
+        case "PageUp":
+            return day.minus({ months: 1 });
+        case "PageDown":
+            return day.plus({ months: 1 });
+        default:
+            return null;
+    }
+};
+// Whole-day bounds, as the day buttons' disabled state
+const isDayWithinLimits = (day, min, max) => !(min && isBefore(day, min.startOf("day"))) && !(max && isAfter(day, max.endOf("day")));
+const monthIndex = (date) => date.year * 12 + date.month;
 export const DateCalendar = () => {
     const { value, min, max, onChangeRef, captionLayout, showTime, yearRange } = useDateContext();
     const closePopover = usePopoverClose();
     const calendarContainerRef = useRef(null);
+    // The day to focus once a key has moved the view to its month. It lives
+    // here, outside the wrapper that the dropdown layout re-keys
+    const pendingFocusRef = useRef(null);
     const [calendarSteps, setCalendarSteps] = useState(0);
     const [forceRenderIncrement, setForceRenderIncrement] = useState(0);
     const [calendarDate, setCalendarDate] = useState(() => value ?? DateTime.now());
@@ -53,9 +84,18 @@ export const DateCalendar = () => {
             setCalendarDate((dt) => dt.minus({ months: 1 }));
         }
     };
+    // The calendar limits whole days; with a time picker the chosen time on a
+    // min or max day can still cross the bound, so clamp the full date-time
+    const clampToBounds = (dateTime) => {
+        if (min && dateTime.toMillis() < min.toMillis())
+            return min;
+        if (max && dateTime.toMillis() > max.toMillis())
+            return max;
+        return dateTime;
+    };
     const handleDateSelect = (selectedDate) => {
         if (showTime) {
-            onChangeRef.current(selectedDate.set({ hour: pendingHour, minute: pendingMinute }));
+            onChangeRef.current(clampToBounds(selectedDate.set({ hour: pendingHour, minute: pendingMinute })));
         }
         else {
             onChangeRef.current(selectedDate);
@@ -63,10 +103,12 @@ export const DateCalendar = () => {
         }
     };
     const handleTimeChange = (hour, minute) => {
-        setPendingHour(hour);
-        setPendingMinute(minute);
-        if (value) {
-            onChangeRef.current(value.set({ hour, minute }));
+        const next = value ? clampToBounds(value.set({ hour, minute })) : null;
+        // Show the time that was actually applied, even when clamping left value unchanged
+        setPendingHour(next ? next.hour : hour);
+        setPendingMinute(next ? next.minute : minute);
+        if (next) {
+            onChangeRef.current(next);
         }
     };
     const handleDropdownMonthChange = (month) => {
@@ -77,6 +119,66 @@ export const DateCalendar = () => {
         setCalendarDate(DateTime.local(year, calendarDate.month, 1));
         setForceRenderIncrement((c) => c + 1);
     };
+    // Days are named by their full date; skip a calendar that is leaving
+    const focusDay = (day) => {
+        const label = day.toLocaleString(DateTime.DATE_HUGE);
+        const buttons = calendarContainerRef.current?.querySelectorAll(`button[aria-label="${label}"]`);
+        Array.from(buttons ?? [])
+            .find((button) => !button.closest("[data-exiting]"))
+            ?.focus();
+    };
+    // A calendar that is leaving keeps the props it last rendered with, so its
+    // days reach the current state through a stable callback
+    const handleDayKeyDown = useStableCallback((event, day) => {
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        // While a move waits for its month to render, the next key starts from
+        // the day it is moving to (key repeat), not the day that still has focus
+        const target = getKeyTarget(event.key, pendingFocusRef.current ?? day);
+        if (!target) {
+            return;
+        }
+        event.preventDefault();
+        // A disabled day keeps focus where it is
+        if (!isDayWithinLimits(target, min, max)) {
+            return;
+        }
+        const months = monthIndex(target) - monthIndex(calendarDate);
+        if (months === 0) {
+            pendingFocusRef.current = null;
+            focusDay(target);
+            return;
+        }
+        // Step the view like the month buttons; a day within min/max keeps every step in bounds
+        if (months > 0 ? !canGoForward : !canGoBack) {
+            return;
+        }
+        pendingFocusRef.current = target;
+        for (let step = 0; step < Math.abs(months); step++) {
+            if (months > 0) {
+                handleNext();
+            }
+            else {
+                handlePrevious();
+            }
+        }
+    });
+    // Focus a pending day once its month has rendered. New calendars mount
+    // after this render (TransitionGroup), so wait a frame like the height does
+    useEffect(() => {
+        if (!pendingFocusRef.current) {
+            return;
+        }
+        return waitForAnimationFrame(() => {
+            const target = pendingFocusRef.current;
+            pendingFocusRef.current = null;
+            if (target) {
+                focusDay(target);
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when the month changes
+    }, [calendarDate]);
     // Force re-renders when `value` changes out of band from direct user-selection
     useEffect(() => {
         // No-op when value is empty
@@ -125,12 +227,12 @@ export const DateCalendar = () => {
             }
         });
     }, [calendarDate]);
-    return (_jsxs("div", { className: s.CalendarWrapper, children: [_jsxs("div", { ref: calendarContainerRef, className: s.CalendarContainer, "data-dropdown": isDropdown ? "" : undefined, children: [_jsx("div", { className: s.Previous, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handlePrevious, disabled: !canGoBack, children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: s.Next, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handleNext, disabled: !canGoForward, children: _jsx(ChevronRight, {}) }) }), isDropdown && (_jsx(DropdownCaption, { date: calendarDate, onMonthChange: handleDropdownMonthChange, onYearChange: handleDropdownYearChange, min: min, max: max, yearRange: yearRange })), _jsx("div", { className: s.CalendarRange, style: !isDropdown
+    return (_jsxs("div", { className: s.CalendarWrapper, children: [_jsxs("div", { ref: calendarContainerRef, className: s.CalendarContainer, "data-dropdown": isDropdown ? "" : undefined, children: [_jsx("div", { className: s.Previous, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handlePrevious, disabled: !canGoBack, "aria-label": "Previous month", children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: s.Next, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handleNext, disabled: !canGoForward, "aria-label": "Next month", children: _jsx(ChevronRight, {}) }) }), isDropdown && (_jsx(DropdownCaption, { date: calendarDate, onMonthChange: handleDropdownMonthChange, onYearChange: handleDropdownYearChange, min: min, max: max, yearRange: yearRange })), _jsx("div", { className: s.CalendarRange, style: !isDropdown
                             ? { transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)` }
-                            : undefined, children: !isDropdown ? (_jsx(TransitionGroup, { enterDuration: 400, exitDuration: 400, children: _jsx(CalendarView, { stepPosition: calendarSteps, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect, hideMonthLabel: false }, calendarDate.toLocaleString({
+                            : undefined, children: !isDropdown ? (_jsx(TransitionGroup, { enterDuration: 400, exitDuration: 400, children: _jsx(CalendarView, { stepPosition: calendarSteps, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect, onDayKeyDown: handleDayKeyDown, hideMonthLabel: false }, calendarDate.toLocaleString({
                                 month: "long",
                                 year: "numeric",
-                            })) })) : (_jsx(CalendarView, { stepPosition: 0, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect, hideMonthLabel: true }, calendarDate.toLocaleString({
+                            })) })) : (_jsx(CalendarView, { stepPosition: 0, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect, onDayKeyDown: handleDayKeyDown, hideMonthLabel: true }, calendarDate.toLocaleString({
                             month: "long",
                             year: "numeric",
                         }))) })] }), showTime && (_jsx(TimeInput, { hour: pendingHour, minute: pendingMinute, onChange: handleTimeChange }))] }, `stable-view-${forceRenderIncrement}`));
@@ -173,6 +275,8 @@ const TimeInput = ({ hour, minute, onChange }) => {
         setMinuteText(raw);
         if (raw.length === 2) {
             onChange(hour, Math.min(59, Number(raw)));
+            // Show the accepted value: the parent may clamp it to min/max
+            setMinuteText(null);
         }
     };
     const handleMinuteBlur = (e) => {
@@ -181,32 +285,30 @@ const TimeInput = ({ hour, minute, onChange }) => {
         onChange(hour, m);
         setMinuteText(null);
     };
+    // Arrow steps drop the draft text so the field shows the accepted value,
+    // which the parent may have clamped to min/max
     const handleKeyDown = (e, type) => {
         const step = e.shiftKey ? 10 : 1;
         if (e.key === "ArrowUp") {
             e.preventDefault();
             if (type === "hour") {
-                const h = (hour + step) % 24;
-                onChange(h, minute);
-                setHourText(String(h).padStart(2, "0"));
+                onChange((hour + step) % 24, minute);
+                setHourText(null);
             }
             else {
-                const m = (minute + step) % 60;
-                onChange(hour, m);
-                setMinuteText(String(m).padStart(2, "0"));
+                onChange(hour, (minute + step) % 60);
+                setMinuteText(null);
             }
         }
         else if (e.key === "ArrowDown") {
             e.preventDefault();
             if (type === "hour") {
-                const h = (hour - step + 24) % 24;
-                onChange(h, minute);
-                setHourText(String(h).padStart(2, "0"));
+                onChange((hour - step + 24) % 24, minute);
+                setHourText(null);
             }
             else {
-                const m = (minute - step + 60) % 60;
-                onChange(hour, m);
-                setMinuteText(String(m).padStart(2, "0"));
+                onChange(hour, (minute - step + 60) % 60);
+                setMinuteText(null);
             }
         }
     };
@@ -219,7 +321,7 @@ const TimeInput = ({ hour, minute, onChange }) => {
                         }, onKeyDown: (e) => handleKeyDown(e, "minute"), maxLength: 2, "aria-label": "Minute" })] })] }));
 };
 const daysOfTheWeekLabels = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition, hideMonthLabel = false, }) => {
+const CalendarView = ({ date, selectedDate, min, max, onDateSelect, onDayKeyDown, stepPosition, hideMonthLabel = false, }) => {
     // Lock position on mount and don't respond to changes
     const [position] = useState(stepPosition);
     const { startOfMonth, weeks, enabledInterval } = useMemo(() => {
@@ -229,7 +331,9 @@ const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition
         const blankDays = new Array(daysBeforeMonthStart).fill(null);
         const daysInMonth = getDaysOfMonth(monthStart);
         const calendarCells = [...blankDays, ...daysInMonth];
-        const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth);
+        // Cells are start-of-day values and Interval excludes its end, so widen the
+        // bounds to whole days: min/max days themselves stay selectable.
+        const enabledDateInterval = Interval.fromDateTimes((min || monthStart).startOf("day"), (max || endOfMonth).endOf("day"));
         return {
             startOfMonth: monthStart,
             endOfMonth,
@@ -244,7 +348,7 @@ const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition
                     const enabled = enabledInterval.contains(d);
                     const isSelected = enabled && selectedDate && isSameDay(d, selectedDate);
                     const dayIsToday = isToday(d);
-                    return (_jsx("div", { className: s.Day, "data-is-selected": isSelected ? "" : undefined, children: _jsxs("button", { type: "button", className: s.InteractiveDay, disabled: !enabled, onClick: () => d && onDateSelect?.(d), children: [d.day, dayIsToday && _jsx("span", { className: s.TodayDot })] }) }, dayIndex));
+                    return (_jsx("div", { className: s.Day, "data-is-selected": isSelected ? "" : undefined, children: _jsxs("button", { type: "button", className: s.InteractiveDay, disabled: !enabled, "aria-label": d.toLocaleString(DateTime.DATE_HUGE), "aria-pressed": !!isSelected, "aria-current": dayIsToday ? "date" : undefined, onClick: () => d && onDateSelect?.(d), onKeyDown: (event) => d && onDayKeyDown?.(event, d), children: [d.day, dayIsToday && _jsx("span", { className: s.TodayDot })] }) }, dayIndex));
                 }) }, weekIndex)))] }));
 };
 //# sourceMappingURL=Calendar.js.map