@pallasoft/ps-input-components 3.3.4 → 3.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -21,6 +21,7 @@ const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
21
21
|
const inputId = (0, react_1.useId)();
|
|
22
22
|
const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
23
23
|
const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
|
|
24
|
+
const isHydrated = (0, ps_core_components_1.usePsHydrated)();
|
|
24
25
|
const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
|
|
25
26
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
26
27
|
const [view, setView] = (0, react_1.useState)(ps_calendar_view_1.PsCalendarView.day);
|
|
@@ -43,6 +44,7 @@ const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
43
44
|
setUncontrolledValue(nextValue);
|
|
44
45
|
onChange?.(nextValue);
|
|
45
46
|
};
|
|
46
|
-
|
|
47
|
+
const fallback = ((0, jsx_runtime_1.jsx)(ps_date_picker_fallback_1.PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: ps_date_input_service_1.PsDateInputService.display(currentValue) }));
|
|
48
|
+
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: [isHydrated ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: (0, jsx_runtime_1.jsx)(ps_lazy_date_picker_1.PsLazyDatePicker, { 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_date_picker_classes_1.PsDatePickerClasses.control, 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: ps_date_picker_classes_1.PsDatePickerClasses.wrapperOption }) })) : (fallback), (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] }));
|
|
47
49
|
};
|
|
48
50
|
exports.PsDateInput = PsDateInput;
|
|
@@ -22,6 +22,7 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
22
22
|
const inputId = (0, react_1.useId)();
|
|
23
23
|
const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
24
24
|
const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
|
|
25
|
+
const isHydrated = (0, ps_core_components_1.usePsHydrated)();
|
|
25
26
|
const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
|
|
26
27
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
27
28
|
const pickerRef = (0, react_1.useRef)(null);
|
|
@@ -45,9 +46,10 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
45
46
|
setUncontrolledValue(nextValue);
|
|
46
47
|
onChange?.(nextValue);
|
|
47
48
|
};
|
|
48
|
-
|
|
49
|
+
const fallback = ((0, jsx_runtime_1.jsx)(ps_date_picker_fallback_1.PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: currentValue }));
|
|
50
|
+
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: [isHydrated ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: (0, jsx_runtime_1.jsx)(ps_lazy_date_picker_1.PsLazyDatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${ps_date_input_config_1.PsDateInputConfig.pickingClassName}`, className: ps_date_picker_classes_1.PsDatePickerClasses.control, 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) => {
|
|
49
51
|
handleChange(ps_year_input_service_1.PsYearInputService.startOfYear(year));
|
|
50
52
|
pickerRef.current?.setOpen(false);
|
|
51
|
-
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: ps_calendar_view_1.PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: ps_date_picker_classes_1.PsDatePickerClasses.wrapperOption }) }), (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] }));
|
|
53
|
+
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: ps_calendar_view_1.PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: ps_date_picker_classes_1.PsDatePickerClasses.wrapperOption }) })) : (fallback), (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] }));
|
|
52
54
|
};
|
|
53
55
|
exports.PsYearInput = PsYearInput;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Suspense, useEffect, useId, useState } from 'react';
|
|
3
|
-
import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
3
|
+
import { usePsHydrated, usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
4
4
|
import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
|
|
5
5
|
import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
|
|
6
6
|
import { PsCalendarView } from '../constants/ps-calendar-view';
|
|
@@ -18,6 +18,7 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
18
18
|
const inputId = useId();
|
|
19
19
|
const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
20
20
|
const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
|
|
21
|
+
const isHydrated = usePsHydrated();
|
|
21
22
|
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
|
|
22
23
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
23
24
|
const [view, setView] = useState(PsCalendarView.day);
|
|
@@ -40,5 +41,6 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
40
41
|
setUncontrolledValue(nextValue);
|
|
41
42
|
onChange?.(nextValue);
|
|
42
43
|
};
|
|
43
|
-
|
|
44
|
+
const fallback = (_jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: PsDateInputService.display(currentValue) }));
|
|
45
|
+
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: [isHydrated ? (_jsx(Suspense, { fallback: fallback, children: _jsx(PsLazyDatePicker, { autoComplete: 'off', calendarClassName: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), className: PsDatePickerClasses.control, 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: PsDatePickerClasses.wrapperOption }) })) : (fallback), _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] }));
|
|
44
46
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Suspense, useEffect, useId, useRef, useState } from 'react';
|
|
3
|
-
import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
3
|
+
import { usePsHydrated, usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
4
4
|
import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
|
|
5
5
|
import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
|
|
6
6
|
import { PsCalendarView } from '../constants/ps-calendar-view';
|
|
@@ -19,6 +19,7 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
19
19
|
const inputId = useId();
|
|
20
20
|
const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
21
21
|
const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
|
|
22
|
+
const isHydrated = usePsHydrated();
|
|
22
23
|
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
|
|
23
24
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
24
25
|
const pickerRef = useRef(null);
|
|
@@ -42,8 +43,9 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
42
43
|
setUncontrolledValue(nextValue);
|
|
43
44
|
onChange?.(nextValue);
|
|
44
45
|
};
|
|
45
|
-
|
|
46
|
+
const fallback = (_jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: currentValue }));
|
|
47
|
+
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: [isHydrated ? (_jsx(Suspense, { fallback: fallback, children: _jsx(PsLazyDatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${PsDateInputConfig.pickingClassName}`, className: PsDatePickerClasses.control, 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) => {
|
|
46
48
|
handleChange(PsYearInputService.startOfYear(year));
|
|
47
49
|
pickerRef.current?.setOpen(false);
|
|
48
|
-
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: PsDatePickerClasses.wrapperOption }) }), _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] }));
|
|
50
|
+
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: PsDatePickerClasses.wrapperOption }) })) : (fallback), _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] }));
|
|
49
51
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pallasoft/ps-input-components",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@internationalized/date": "^3.12.2",
|
|
62
|
-
"@pallasoft/ps-core-components": "^2.
|
|
62
|
+
"@pallasoft/ps-core-components": "^2.21.0",
|
|
63
63
|
"@pallasoft/ps-icons": "^1.5.4",
|
|
64
64
|
"@pallasoft/ps-models": "^1.4.0",
|
|
65
65
|
"@pallasoft/ps-popovers": "^1.7.0",
|