@pallasoft/ps-input-components 1.17.1 → 1.18.1

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

@@ -1,2 +1,9 @@
 import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
-export declare const PsCalendarHeader: ({ decreaseMonth, increaseMonth, monthDate, nextMonthButtonDisabled, prevMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps) => import("react").JSX.Element;
+import { PsCalendarView } from '../constants/ps-calendar-view';
+export interface PsCalendarHeaderProps extends ReactDatePickerCustomHeaderProps {
+    maxDate?: Date;
+    minDate?: Date;
+    onViewChange: (view: PsCalendarView) => void;
+    view: PsCalendarView;
+}
+export declare const PsCalendarHeader: ({ changeMonth, changeYear, decreaseMonth, increaseMonth, maxDate, minDate, monthDate, nextMonthButtonDisabled, onViewChange, prevMonthButtonDisabled, view, }: PsCalendarHeaderProps) => import("react").JSX.Element;

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

@@ -2,8 +2,64 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsCalendarHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_calendar_view_1 = require("../constants/ps-calendar-view");
+const ps_date_input_config_1 = require("../constants/ps-date-input-config");
 const ps_date_input_service_1 = require("../services/ps-date-input-service");
 const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justify-center rounded-lg text-ink/60 transition-colors hover:bg-primary/10 hover:text-ink disabled:cursor-not-allowed disabled:opacity-30';
-const PsCalendarHeader = ({ decreaseMonth, increaseMonth, monthDate, nextMonthButtonDisabled, prevMonthButtonDisabled, }) => ((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": 'Previous month', className: navigationButtonClassName, disabled: prevMonthButtonDisabled, onClick: decreaseMonth, 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.jsx)("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: ps_date_input_service_1.PsDateInputService.monthLabel(monthDate) }), (0, jsx_runtime_1.jsx)("button", { "aria-label": 'Next month', className: navigationButtonClassName, disabled: nextMonthButtonDisabled, onClick: increaseMonth, 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 }) })] }));
+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 [pageYear, setPageYear] = (0, react_1.useState)(year);
+    const years = ps_date_input_service_1.PsDateInputService.yearPage(pageYear);
+    const navigation = {
+        [ps_calendar_view_1.PsCalendarView.day]: {
+            isNextDisabled: nextMonthButtonDisabled,
+            isPreviousDisabled: prevMonthButtonDisabled,
+            next: increaseMonth,
+            nextLabel: 'Next month',
+            previous: decreaseMonth,
+            previousLabel: 'Previous month',
+            title: ps_date_input_service_1.PsDateInputService.monthLabel(monthDate),
+            titleLabel: 'Choose a month',
+            titleView: ps_calendar_view_1.PsCalendarView.month,
+        },
+        [ps_calendar_view_1.PsCalendarView.month]: {
+            isNextDisabled: ps_date_input_service_1.PsDateInputService.isYearOutOfRange(year + 1, minDate, maxDate),
+            isPreviousDisabled: ps_date_input_service_1.PsDateInputService.isYearOutOfRange(year - 1, minDate, maxDate),
+            next: () => changeYear(year + 1),
+            nextLabel: 'Next year',
+            previous: () => changeYear(year - 1),
+            previousLabel: 'Previous year',
+            title: String(year),
+            titleLabel: 'Choose a year',
+            titleView: ps_calendar_view_1.PsCalendarView.year,
+        },
+        [ps_calendar_view_1.PsCalendarView.year]: {
+            isNextDisabled: ps_date_input_service_1.PsDateInputService.isYearOutOfRange(years[years.length - 1] + 1, minDate, maxDate),
+            isPreviousDisabled: ps_date_input_service_1.PsDateInputService.isYearOutOfRange(years[0] - 1, minDate, maxDate),
+            next: () => setPageYear(pageYear + ps_date_input_config_1.PsDateInputConfig.yearsPerPage),
+            nextLabel: 'Later years',
+            previous: () => setPageYear(pageYear - ps_date_input_config_1.PsDateInputConfig.yearsPerPage),
+            previousLabel: 'Earlier years',
+            title: `${years[0]} – ${years[years.length - 1]}`,
+            titleLabel: 'Back to the days',
+            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: () => {
+                            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: () => {
+                        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: () => {
+                        changeYear(candidate);
+                        onViewChange(ps_calendar_view_1.PsCalendarView.month);
+                    }, type: 'button', children: candidate }, candidate))) })) : null] }));
+};
 exports.PsCalendarHeader = PsCalendarHeader;

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

@@ -50,7 +50,7 @@ const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, i
             ? 'cursor-not-allowed text-ink/40'
             : option.value === value
                 ? 'bg-primary/10 text-ink'
-                : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), disabled: option.isDisabled, onClick: () => select(option.value, close), role: 'option', type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check })) : null }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block truncate', children: option.label }), groupLabel ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
+                : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), disabled: option.isDisabled, onClick: () => select(option.value, close), role: 'option', type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check })) : null }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: option.label }), groupLabel ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block break-words text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block break-words text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
     return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : ((0, jsx_runtime_1.jsxs)("span", { className: 'ps-input-label block', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })), (0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: selected ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: selected.option.label }), (0, jsx_runtime_1.jsx)("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) }), (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-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: groups.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-1 px-4 py-8 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: ps_cascader_config_1.PsCascaderConfig.emptyLabel }), (0, jsx_runtime_1.jsx)("p", { className: 'text-xs text-ink/55', children: ps_cascader_config_1.PsCascaderConfig.emptyDescription })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'border-b border-line p-2', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [(0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
                                                             ? 'bg-mist text-ink'
                                                             : 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: ps_icons_1.PsIconKey.Chevron })] }, group.key))) }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? ((0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: ps_icons_1.PsIconKey.Chevron }), "All groups"] })) : null, activeGroup

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

@@ -10,6 +10,7 @@ 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_date_input_service_1 = require("../services/ps-date-input-service");
 const ps_calendar_header_1 = require("./ps-calendar-header");
@@ -23,6 +24,9 @@ const PsDateInput = ({ 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 [view, setView] = (0, react_1.useState)(ps_calendar_view_1.PsCalendarView.day);
+    const minDate = ps_date_input_service_1.PsDateInputService.parseBound(min);
+    const maxDate = ps_date_input_service_1.PsDateInputService.parseBound(max);
     (0, react_1.useEffect)(() => {
         const existing = document.getElementById(portalId);
         const container = existing ? existing : document.createElement('div');
@@ -40,6 +44,6 @@ const PsDateInput = ({ 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_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: ps_date_input_service_1.PsDateInputService.parseBound(max), minDate: ps_date_input_service_1.PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps }), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 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_design_system_1.PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === ps_calendar_view_1.PsCalendarView.day ? undefined : 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_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(ps_calendar_view_1.PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => ((0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 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.PsDateInput = PsDateInput;

package/dist/constants/ps-calendar-view.d.ts

@@ -0,0 +1,6 @@
+export declare const PsCalendarView: {
+    readonly day: "day";
+    readonly month: "month";
+    readonly year: "year";
+};
+export type PsCalendarView = (typeof PsCalendarView)[keyof typeof PsCalendarView];

package/dist/constants/ps-calendar-view.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCalendarView = void 0;
+exports.PsCalendarView = {
+    day: 'day',
+    month: 'month',
+    year: 'year',
+};

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

@@ -1,6 +1,10 @@
 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 monthsPerYear: 12;
+    readonly pickingClassName: "ps-datepicker-picking";
+    readonly yearsPerPage: 12;
     readonly valueFormat: "YYYY-MM-DD";
     readonly placeholder: "Select a date";
     readonly portalId: "ps-floating-root";

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

@@ -4,6 +4,10 @@ exports.PsDateInputConfig = void 0;
 exports.PsDateInputConfig = {
     inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
     monthLabelFormat: 'MMMM YYYY',
+    monthShortFormat: 'MMM',
+    monthsPerYear: 12,
+    pickingClassName: 'ps-datepicker-picking',
+    yearsPerPage: 12,
     valueFormat: 'YYYY-MM-DD',
     placeholder: 'Select a date',
     portalId: 'ps-floating-root',

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

@@ -1,5 +1,61 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsCalendarView } from '../constants/ps-calendar-view';
+import { PsDateInputConfig } from '../constants/ps-date-input-config';
 import { PsDateInputService } from '../services/ps-date-input-service';
 const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justify-center rounded-lg text-ink/60 transition-colors hover:bg-primary/10 hover:text-ink disabled:cursor-not-allowed disabled:opacity-30';
-export const PsCalendarHeader = ({ decreaseMonth, increaseMonth, monthDate, nextMonthButtonDisabled, prevMonthButtonDisabled, }) => (_jsxs("div", { className: 'flex items-center justify-between gap-2 px-1', children: [_jsx("button", { "aria-label": 'Previous month', className: navigationButtonClassName, disabled: prevMonthButtonDisabled, onClick: decreaseMonth, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: PsIconKey.ChevronRight }) }), _jsx("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: PsDateInputService.monthLabel(monthDate) }), _jsx("button", { "aria-label": 'Next month', className: navigationButtonClassName, disabled: nextMonthButtonDisabled, onClick: increaseMonth, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.ChevronRight }) })] }));
+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();
+    const [pageYear, setPageYear] = useState(year);
+    const years = PsDateInputService.yearPage(pageYear);
+    const navigation = {
+        [PsCalendarView.day]: {
+            isNextDisabled: nextMonthButtonDisabled,
+            isPreviousDisabled: prevMonthButtonDisabled,
+            next: increaseMonth,
+            nextLabel: 'Next month',
+            previous: decreaseMonth,
+            previousLabel: 'Previous month',
+            title: PsDateInputService.monthLabel(monthDate),
+            titleLabel: 'Choose a month',
+            titleView: PsCalendarView.month,
+        },
+        [PsCalendarView.month]: {
+            isNextDisabled: PsDateInputService.isYearOutOfRange(year + 1, minDate, maxDate),
+            isPreviousDisabled: PsDateInputService.isYearOutOfRange(year - 1, minDate, maxDate),
+            next: () => changeYear(year + 1),
+            nextLabel: 'Next year',
+            previous: () => changeYear(year - 1),
+            previousLabel: 'Previous year',
+            title: String(year),
+            titleLabel: 'Choose a year',
+            titleView: PsCalendarView.year,
+        },
+        [PsCalendarView.year]: {
+            isNextDisabled: PsDateInputService.isYearOutOfRange(years[years.length - 1] + 1, minDate, maxDate),
+            isPreviousDisabled: PsDateInputService.isYearOutOfRange(years[0] - 1, minDate, maxDate),
+            next: () => setPageYear(pageYear + PsDateInputConfig.yearsPerPage),
+            nextLabel: 'Later years',
+            previous: () => setPageYear(pageYear - PsDateInputConfig.yearsPerPage),
+            previousLabel: 'Earlier years',
+            title: `${years[0]} – ${years[years.length - 1]}`,
+            titleLabel: 'Back to the days',
+            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: () => {
+                            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: () => {
+                        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: () => {
+                        changeYear(candidate);
+                        onViewChange(PsCalendarView.month);
+                    }, type: 'button', children: candidate }, candidate))) })) : null] }));
+};

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

@@ -47,7 +47,7 @@ export const PsCascaderInput = ({ className, disabled, groups, helperText, hideL
             ? 'cursor-not-allowed text-ink/40'
             : option.value === value
                 ? 'bg-primary/10 text-ink'
-                : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), disabled: option.isDisabled, onClick: () => select(option.value, close), role: 'option', type: 'button', children: [_jsx("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Check })) : null }), _jsxs("span", { className: 'min-w-0 flex-1', children: [_jsx("span", { className: 'block truncate', children: option.label }), groupLabel ? (_jsx("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? (_jsx("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
+                : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), disabled: option.isDisabled, onClick: () => select(option.value, close), role: 'option', type: 'button', children: [_jsx("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Check })) : null }), _jsxs("span", { className: 'min-w-0 flex-1', children: [_jsx("span", { className: 'block break-words', children: option.label }), groupLabel ? (_jsx("span", { className: 'mt-0.5 block break-words text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? (_jsx("span", { className: 'mt-0.5 block break-words text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
     return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : (_jsxs("span", { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [_jsxs(Button, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [_jsx("span", { className: 'min-w-0 flex-1 truncate', children: selected ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'truncate', children: selected.option.label }), _jsx("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => (_jsx(_Fragment, { children: groups.length === 0 ? (_jsxs("div", { className: 'flex flex-col gap-1 px-4 py-8 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsCascaderConfig.emptyLabel }), _jsx("p", { className: 'text-xs text-ink/55', children: PsCascaderConfig.emptyDescription })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: 'border-b border-line p-2', children: _jsx("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? (_jsxs("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [_jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
                                                             ? 'bg-mist text-ink'
                                                             : 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), _jsx("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: PsIconKey.Chevron })] }, group.key))) }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? (_jsxs("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: PsIconKey.Chevron }), "All groups"] })) : null, activeGroup

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

@@ -4,6 +4,7 @@ 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 { PsDateInputService } from '../services/ps-date-input-service';
 import { PsCalendarHeader } from './ps-calendar-header';
@@ -17,6 +18,9 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const [view, setView] = useState(PsCalendarView.day);
+    const minDate = PsDateInputService.parseBound(min);
+    const maxDate = PsDateInputService.parseBound(max);
     useEffect(() => {
         const existing = document.getElementById(portalId);
         const container = existing ? existing : document.createElement('div');
@@ -34,5 +38,5 @@ export const PsDateInput = ({ 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: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: PsDateInputService.parseBound(max), minDate: PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => _jsx(PsCalendarHeader, { ...headerProps }), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 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: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 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-calendar-view.js

@@ -0,0 +1,5 @@
+export const PsCalendarView = {
+    day: 'day',
+    month: 'month',
+    year: 'year',
+};

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

@@ -1,6 +1,10 @@
 export const PsDateInputConfig = {
     inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
     monthLabelFormat: 'MMMM YYYY',
+    monthShortFormat: 'MMM',
+    monthsPerYear: 12,
+    pickingClassName: 'ps-datepicker-picking',
+    yearsPerPage: 12,
     valueFormat: 'YYYY-MM-DD',
     placeholder: 'Select a date',
     portalId: 'ps-floating-root',

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

@@ -21,4 +21,20 @@ export class PsDateInputService {
     static monthLabel(date) {
         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));
+    }
+    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);
+        return (min !== undefined && last < min) || (max !== undefined && first > max);
+    }
+    static isYearOutOfRange(year, min, max) {
+        return ((min !== undefined && year < min.getFullYear()) ||
+            (max !== undefined && year > max.getFullYear()));
+    }
 }

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

@@ -3,4 +3,8 @@ export declare class PsDateInputService {
     static parseBound(value: string | undefined): Date | undefined;
     static format(date: Date | null): string;
     static monthLabel(date: Date): string;
+    static monthNames(): string[];
+    static yearPage(year: number): number[];
+    static isMonthOutOfRange(year: number, month: number, min?: Date, max?: Date): boolean;
+    static isYearOutOfRange(year: number, min?: Date, max?: Date): boolean;
 }

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

@@ -24,5 +24,21 @@ class PsDateInputService {
     static monthLabel(date) {
         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));
+    }
+    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);
+        return (min !== undefined && last < min) || (max !== undefined && first > max);
+    }
+    static isYearOutOfRange(year, min, max) {
+        return ((min !== undefined && year < min.getFullYear()) ||
+            (max !== undefined && year > max.getFullYear()));
+    }
 }
 exports.PsDateInputService = PsDateInputService;

package/package.json

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