@pallasoft/ps-input-components 1.18.1 → 1.18.2

package/dist/components/ps-calendar-header.d.ts

@@ -4,6 +4,8 @@ export interface PsCalendarHeaderProps extends ReactDatePickerCustomHeaderProps
     maxDate?: Date;
     minDate?: Date;
     onViewChange: (view: PsCalendarView) => void;
+    onYearPick?: (year: number) => void;
+    selectedYear?: number;
     view: PsCalendarView;
 }
-export declare const PsCalendarHeader: ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }: PsCalendarHeaderProps) => import("react").JSX.Element;
+export declare const PsCalendarHeader: ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, onYearPick, prevMonthButtonDisabled, selectedYear, view, }: PsCalendarHeaderProps) => import("react").JSX.Element;

package/dist/components/ps-calendar-header.js

@@ -12,8 +12,8 @@ const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justi
 const titleButtonClassName = 'ps-focus-ring flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-semibold text-ink transition-colors hover:bg-primary/10';
 const cellClassName = 'ps-focus-ring flex h-10 items-center justify-center rounded-[0.625rem] text-sm font-medium text-ink transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent';
 const selectedCellClassName = 'bg-primary font-bold text-[var(--ps-color-primary-contrast)] hover:bg-primary';
-const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }) => {
-    const year = monthDate.getFullYear();
+const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, onYearPick, prevMonthButtonDisabled, selectedYear, view, }) => {
+    const year = selectedYear === undefined ? monthDate.getFullYear() : selectedYear;
     const [pageYear, setPageYear] = (0, react_1.useState)(year);
     const years = ps_date_input_service_1.PsDateInputService.yearPage(pageYear);
     const navigation = {
@@ -51,13 +51,17 @@ const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMont
             titleView: ps_calendar_view_1.PsCalendarView.day,
         },
     }[view];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center justify-between gap-2 px-1', children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), (0, jsx_runtime_1.jsxs)("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center justify-between gap-2 px-1', children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), onYearPick === undefined ? ((0, jsx_runtime_1.jsxs)("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
                             setPageYear(year);
                             onViewChange(navigation.titleView);
-                        }, type: 'button', children: [navigation.title, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: ps_icons_1.PsIconKey.ChevronRight })] }), (0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })] }), view === ps_calendar_view_1.PsCalendarView.month ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1', children: ps_date_input_service_1.PsDateInputService.monthNames().map((name, month) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: ps_date_input_service_1.PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
+                        }, type: 'button', children: [navigation.title, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: ps_icons_1.PsIconKey.ChevronRight })] })) : ((0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: navigation.title })), (0, jsx_runtime_1.jsx)("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })] }), view === ps_calendar_view_1.PsCalendarView.month ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1', children: ps_date_input_service_1.PsDateInputService.monthNames().map((name, month) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: ps_date_input_service_1.PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
                         changeMonth(month);
                         onViewChange(ps_calendar_view_1.PsCalendarView.day);
                     }, type: 'button', children: name }, name))) })) : null, view === ps_calendar_view_1.PsCalendarView.year ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1', children: years.map((candidate) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(cellClassName, candidate === year ? selectedCellClassName : undefined), disabled: ps_date_input_service_1.PsDateInputService.isYearOutOfRange(candidate, minDate, maxDate), onClick: () => {
+                        if (onYearPick !== undefined) {
+                            onYearPick(candidate);
+                            return;
+                        }
                         changeYear(candidate);
                         onViewChange(ps_calendar_view_1.PsCalendarView.month);
                     }, type: 'button', children: candidate }, candidate))) })) : null] }));

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

@@ -10,9 +10,11 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const ps_calendar_view_1 = require("../constants/ps-calendar-view");
 const ps_date_input_config_1 = require("../constants/ps-date-input-config");
 const ps_year_input_config_1 = require("../constants/ps-year-input-config");
 const ps_year_input_service_1 = require("../services/ps-year-input-service");
+const ps_calendar_header_1 = require("./ps-calendar-header");
 const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
 const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = ps_year_input_config_1.PsYearInputConfig.placeholder, required, value, }) => {
@@ -23,6 +25,10 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const pickerRef = (0, react_1.useRef)(null);
+    const selected = ps_year_input_service_1.PsYearInputService.parse(currentValue);
+    const minDate = ps_year_input_service_1.PsYearInputService.bound(minYear);
+    const maxDate = ps_year_input_service_1.PsYearInputService.bound(maxYear);
     (0, react_1.useEffect)(() => {
         const existing = document.getElementById(portalId);
         const container = existing ? existing : document.createElement('div');
@@ -40,6 +46,9 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
             setUncontrolledValue(nextValue);
         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', 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: ps_year_input_service_1.PsYearInputService.bound(maxYear), minDate: ps_year_input_service_1.PsYearInputService.bound(minYear), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, required: required, selected: ps_year_input_service_1.PsYearInputService.parse(currentValue), showPopperArrow: false, showYearPicker: true, wrapperClassName: 'block w-full', yearItemNumber: ps_year_input_config_1.PsYearInputConfig.yearsPerPage }), (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] }));
+    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));
+                                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] }));
 };
 exports.PsYearInput = PsYearInput;

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

@@ -1,5 +1,4 @@
 export declare const PsYearInputConfig: {
     readonly format: "yyyy";
     readonly placeholder: "Select a year";
-    readonly yearsPerPage: 12;
 };

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

@@ -4,5 +4,4 @@ exports.PsYearInputConfig = void 0;
 exports.PsYearInputConfig = {
     format: 'yyyy',
     placeholder: 'Select a year',
-    yearsPerPage: 12,
 };

package/dist/esm/components/ps-calendar-header.js

@@ -9,8 +9,8 @@ const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justi
 const titleButtonClassName = 'ps-focus-ring flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-semibold text-ink transition-colors hover:bg-primary/10';
 const cellClassName = 'ps-focus-ring flex h-10 items-center justify-center rounded-[0.625rem] text-sm font-medium text-ink transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent';
 const selectedCellClassName = 'bg-primary font-bold text-[var(--ps-color-primary-contrast)] hover:bg-primary';
-export const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }) => {
-    const year = monthDate.getFullYear();
+export const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, onYearPick, prevMonthButtonDisabled, selectedYear, view, }) => {
+    const year = selectedYear === undefined ? monthDate.getFullYear() : selectedYear;
     const [pageYear, setPageYear] = useState(year);
     const years = PsDateInputService.yearPage(pageYear);
     const navigation = {
@@ -48,13 +48,17 @@ export const PsCalendarHeader = ({ changeMonth, changeYear, decreaseMonth, incre
             titleView: PsCalendarView.day,
         },
     }[view];
-    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2 px-1', children: [_jsx("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: PsIconKey.ChevronRight }) }), _jsxs("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
+    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2 px-1', children: [_jsx("button", { "aria-label": navigation.previousLabel, className: navigationButtonClassName, disabled: navigation.isPreviousDisabled, onClick: navigation.previous, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: PsIconKey.ChevronRight }) }), onYearPick === undefined ? (_jsxs("button", { "aria-label": navigation.titleLabel, "aria-live": 'polite', className: titleButtonClassName, onClick: () => {
                             setPageYear(year);
                             onViewChange(navigation.titleView);
-                        }, type: 'button', children: [navigation.title, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: PsIconKey.ChevronRight })] }), _jsx("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.ChevronRight }) })] }), view === PsCalendarView.month ? (_jsx("div", { className: 'grid grid-cols-3 gap-1', children: PsDateInputService.monthNames().map((name, month) => (_jsx("button", { className: PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
+                        }, type: 'button', children: [navigation.title, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 rotate-90 text-ink/50', iconKey: PsIconKey.ChevronRight })] })) : (_jsx("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: navigation.title })), _jsx("button", { "aria-label": navigation.nextLabel, className: navigationButtonClassName, disabled: navigation.isNextDisabled, onClick: navigation.next, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.ChevronRight }) })] }), view === PsCalendarView.month ? (_jsx("div", { className: 'grid grid-cols-3 gap-1', children: PsDateInputService.monthNames().map((name, month) => (_jsx("button", { className: PallasoftClassNameService.merge(cellClassName, month === monthDate.getMonth() ? selectedCellClassName : undefined), disabled: PsDateInputService.isMonthOutOfRange(year, month, minDate, maxDate), onClick: () => {
                         changeMonth(month);
                         onViewChange(PsCalendarView.day);
                     }, type: 'button', children: name }, name))) })) : null, view === PsCalendarView.year ? (_jsx("div", { className: 'grid grid-cols-3 gap-1', children: years.map((candidate) => (_jsx("button", { className: PallasoftClassNameService.merge(cellClassName, candidate === year ? selectedCellClassName : undefined), disabled: PsDateInputService.isYearOutOfRange(candidate, minDate, maxDate), onClick: () => {
+                        if (onYearPick !== undefined) {
+                            onYearPick(candidate);
+                            return;
+                        }
                         changeYear(candidate);
                         onViewChange(PsCalendarView.month);
                     }, type: 'button', children: candidate }, candidate))) })) : null] }));

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import DatePicker from 'react-datepicker';
+import { PsCalendarView } from '../constants/ps-calendar-view';
 import { PsDateInputConfig } from '../constants/ps-date-input-config';
 import { PsYearInputConfig } from '../constants/ps-year-input-config';
 import { PsYearInputService } from '../services/ps-year-input-service';
+import { PsCalendarHeader } from './ps-calendar-header';
 import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
 export const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = PsYearInputConfig.placeholder, required, value, }) => {
@@ -17,6 +19,10 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const pickerRef = useRef(null);
+    const selected = PsYearInputService.parse(currentValue);
+    const minDate = PsYearInputService.bound(minYear);
+    const maxDate = PsYearInputService.bound(maxYear);
     useEffect(() => {
         const existing = document.getElementById(portalId);
         const container = existing ? existing : document.createElement('div');
@@ -34,5 +40,8 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
             setUncontrolledValue(nextValue);
         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', 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: PsYearInputService.bound(maxYear), minDate: PsYearInputService.bound(minYear), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, required: required, selected: PsYearInputService.parse(currentValue), showPopperArrow: false, showYearPicker: true, wrapperClassName: 'block w-full', yearItemNumber: PsYearInputConfig.yearsPerPage }), _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] }));
+    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));
+                                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-year-input-config.js

@@ -1,5 +1,4 @@
 export const PsYearInputConfig = {
     format: 'yyyy',
     placeholder: 'Select a year',
-    yearsPerPage: 12,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.18.1",
+	"version": "1.18.2",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",