@pallasoft/ps-input-components 1.20.0 → 1.20.2

package/dist/components/ps-date-preset-field.js

@@ -4,7 +4,7 @@ exports.PsDatePresetField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_date_input_1 = require("./ps-date-input");
 const ps_form_control_1 = require("./ps-form-control");
-const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: errorText, children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), (0, jsx_runtime_1.jsx)("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => ((0, jsx_runtime_1.jsx)("button", { "aria-pressed": preset.date === value, className: preset.date === value
+const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: errorText, children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), (0, jsx_runtime_1.jsx)("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => ((0, jsx_runtime_1.jsx)("button", { "aria-pressed": preset.date !== '' && preset.date === value, className: preset.date !== '' && preset.date === value
                     ? 'ps-focus-ring rounded-full bg-primary px-2.5 py-1 text-xs font-semibold text-white'
                     : 'ps-focus-ring rounded-full border border-line px-2.5 py-1 text-xs font-medium text-ink/70 hover:border-primary/40 hover:text-ink disabled:opacity-40', disabled: presetsDisabled, onClick: () => onChange(preset.date), type: 'button', children: preset.label }, preset.label))) })] }));
 exports.PsDatePresetField = PsDatePresetField;

package/dist/components/ps-year-input.js

@@ -47,7 +47,7 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
         onChange?.(nextValue);
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsxs)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${ps_date_input_config_1.PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: ps_year_input_config_1.PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => ((0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
-                                handleChange(new Date(year, 0, 1));
+                                handleChange(ps_year_input_service_1.PsYearInputService.startOfYear(year));
                                 pickerRef.current?.setOpen(false);
                             }, selectedYear: selected === null ? undefined : selected.getFullYear(), view: ps_calendar_view_1.PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };

package/dist/constants/ps-date-input-config.d.ts

@@ -2,6 +2,7 @@ export declare const PsDateInputConfig: {
     readonly inputFormats: readonly ["MMM d, yyyy", "yyyy-MM-dd", "MM/dd/yyyy", "d MMM yyyy"];
     readonly monthLabelFormat: "MMMM YYYY";
     readonly monthShortFormat: "MMM";
+    readonly monthNameYear: 2000;
     readonly monthsPerYear: 12;
     readonly pickingClassName: "ps-datepicker-picking";
     readonly yearsPerPage: 12;

package/dist/constants/ps-date-input-config.js

@@ -5,6 +5,7 @@ exports.PsDateInputConfig = {
     inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
     monthLabelFormat: 'MMMM YYYY',
     monthShortFormat: 'MMM',
+    monthNameYear: 2000,
     monthsPerYear: 12,
     pickingClassName: 'ps-datepicker-picking',
     yearsPerPage: 12,

package/dist/esm/components/ps-date-preset-field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsDateInput } from './ps-date-input';
 import { PsFormControl } from './ps-form-control';
-export const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), _jsx("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.date === value, className: preset.date === value
+export const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), _jsx("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.date !== '' && preset.date === value, className: preset.date !== '' && preset.date === value
                     ? 'ps-focus-ring rounded-full bg-primary px-2.5 py-1 text-xs font-semibold text-white'
                     : 'ps-focus-ring rounded-full border border-line px-2.5 py-1 text-xs font-medium text-ink/70 hover:border-primary/40 hover:text-ink disabled:opacity-40', disabled: presetsDisabled, onClick: () => onChange(preset.date), type: 'button', children: preset.label }, preset.label))) })] }));

package/dist/esm/components/ps-year-input.js

@@ -41,7 +41,7 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
         onChange?.(nextValue);
     };
     return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [_jsx(DatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
-                                handleChange(new Date(year, 0, 1));
+                                handleChange(PsYearInputService.startOfYear(year));
                                 pickerRef.current?.setOpen(false);
                             }, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: PsIconKey.Calendar }), name ? _jsx("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };

package/dist/esm/constants/ps-date-input-config.js

@@ -2,6 +2,7 @@ export const PsDateInputConfig = {
     inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
     monthLabelFormat: 'MMMM YYYY',
     monthShortFormat: 'MMM',
+    monthNameYear: 2000,
     monthsPerYear: 12,
     pickingClassName: 'ps-datepicker-picking',
     yearsPerPage: 12,

package/dist/esm/services/ps-date-input-service.js

@@ -22,15 +22,16 @@ export class PsDateInputService {
         return Common.DateService.formatDate(date.getTime(), PsDateInputConfig.monthLabelFormat);
     }
     static monthNames() {
-        return Array.from({ length: PsDateInputConfig.monthsPerYear }, (_, month) => Common.DateService.formatDate(new Date(2000, month, 1).getTime(), PsDateInputConfig.monthShortFormat));
+        return Array.from({ length: PsDateInputConfig.monthsPerYear }, (_, month) => Common.DateService.formatDate(Common.DateService.fromParts(PsDateInputConfig.monthNameYear, month, 1).valueOf(), PsDateInputConfig.monthShortFormat));
     }
     static yearPage(year) {
         const start = year - Math.floor(PsDateInputConfig.yearsPerPage / 2);
         return Array.from({ length: PsDateInputConfig.yearsPerPage }, (_, index) => start + index);
     }
     static isMonthOutOfRange(year, month, min, max) {
-        const first = new Date(year, month, 1);
-        const last = new Date(year, month + 1, 0);
+        const start = Common.DateService.fromParts(year, month, 1);
+        const first = start.toDate();
+        const last = start.endOf('month').startOf('day').toDate();
         return (min !== undefined && last < min) || (max !== undefined && first > max);
     }
     static isYearOutOfRange(year, min, max) {

package/dist/esm/services/ps-year-input-service.js

@@ -1,8 +1,9 @@
+import { Common } from '@pallasoft/ps-utilities';
 export class PsYearInputService {
     static parse(value) {
         if (value === undefined || !/^\d{4}$/.test(value))
             return null;
-        return new Date(Number(value), 0, 1);
+        return PsYearInputService.startOfYear(Number(value));
     }
     static format(date) {
         return date === null ? '' : String(date.getFullYear());
@@ -10,6 +11,9 @@ export class PsYearInputService {
     static bound(year) {
         if (year === undefined)
             return undefined;
-        return new Date(year, 0, 1);
+        return PsYearInputService.startOfYear(year);
+    }
+    static startOfYear(year) {
+        return Common.DateService.fromParts(year, 0, 1).toDate();
     }
 }

package/dist/services/ps-date-input-service.js

@@ -25,15 +25,16 @@ class PsDateInputService {
         return ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.monthLabelFormat);
     }
     static monthNames() {
-        return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.monthsPerYear }, (_, month) => ps_utilities_1.Common.DateService.formatDate(new Date(2000, month, 1).getTime(), ps_date_input_config_1.PsDateInputConfig.monthShortFormat));
+        return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.monthsPerYear }, (_, month) => ps_utilities_1.Common.DateService.formatDate(ps_utilities_1.Common.DateService.fromParts(ps_date_input_config_1.PsDateInputConfig.monthNameYear, month, 1).valueOf(), ps_date_input_config_1.PsDateInputConfig.monthShortFormat));
     }
     static yearPage(year) {
         const start = year - Math.floor(ps_date_input_config_1.PsDateInputConfig.yearsPerPage / 2);
         return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.yearsPerPage }, (_, index) => start + index);
     }
     static isMonthOutOfRange(year, month, min, max) {
-        const first = new Date(year, month, 1);
-        const last = new Date(year, month + 1, 0);
+        const start = ps_utilities_1.Common.DateService.fromParts(year, month, 1);
+        const first = start.toDate();
+        const last = start.endOf('month').startOf('day').toDate();
         return (min !== undefined && last < min) || (max !== undefined && first > max);
     }
     static isYearOutOfRange(year, min, max) {

package/dist/services/ps-year-input-service.d.ts

@@ -2,4 +2,5 @@ export declare class PsYearInputService {
     static parse(value: string | undefined): Date | null;
     static format(date: Date | null): string;
     static bound(year: number | undefined): Date | undefined;
+    static startOfYear(year: number): Date;
 }

package/dist/services/ps-year-input-service.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsYearInputService = void 0;
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 class PsYearInputService {
     static parse(value) {
         if (value === undefined || !/^\d{4}$/.test(value))
             return null;
-        return new Date(Number(value), 0, 1);
+        return PsYearInputService.startOfYear(Number(value));
     }
     static format(date) {
         return date === null ? '' : String(date.getFullYear());
@@ -13,7 +14,10 @@ class PsYearInputService {
     static bound(year) {
         if (year === undefined)
             return undefined;
-        return new Date(year, 0, 1);
+        return PsYearInputService.startOfYear(year);
+    }
+    static startOfYear(year) {
+        return ps_utilities_1.Common.DateService.fromParts(year, 0, 1).toDate();
     }
 }
 exports.PsYearInputService = PsYearInputService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.20.0",
+	"version": "1.20.2",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -41,7 +41,7 @@
 		"@pallasoft/ps-core-components": "^2.10.0",
 		"@pallasoft/ps-design-system": "^1.5.0",
 		"@pallasoft/ps-icons": "^1.5.4",
-		"@pallasoft/ps-utilities": "^2.8.0",
+		"@pallasoft/ps-utilities": "^2.13.0",
 		"libphonenumber-js": "^1.13.13",
 		"react-aria-components": "^1.19.0",
 		"react-datepicker": "^9.1.0"