@pallasoft/ps-input-components 3.3.2 → 3.3.4
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.
- package/dist/components/ps-checkbox.js +1 -1
- package/dist/components/ps-date-input.js +4 -5
- package/dist/components/ps-date-picker-fallback.d.ts +8 -0
- package/dist/components/ps-date-picker-fallback.js +7 -0
- package/dist/components/ps-lazy-date-picker.d.ts +1 -0
- package/dist/components/ps-lazy-date-picker.js +38 -0
- package/dist/components/ps-year-input.js +7 -8
- package/dist/constants/ps-date-input-config.d.ts +1 -0
- package/dist/constants/ps-date-input-config.js +1 -0
- package/dist/constants/ps-date-picker-classes.d.ts +6 -0
- package/dist/constants/ps-date-picker-classes.js +9 -0
- package/dist/esm/components/ps-checkbox.js +1 -1
- package/dist/esm/components/ps-date-input.js +5 -3
- package/dist/esm/components/ps-date-picker-fallback.js +3 -0
- package/dist/esm/components/ps-lazy-date-picker.js +2 -0
- package/dist/esm/components/ps-year-input.js +8 -6
- package/dist/esm/constants/ps-date-input-config.js +1 -0
- package/dist/esm/constants/ps-date-picker-classes.js +6 -0
- package/dist/esm/services/ps-date-input-service.js +6 -0
- package/dist/services/ps-date-input-service.d.ts +1 -0
- package/dist/services/ps-date-input-service.js +6 -0
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
6
6
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
7
7
|
const react_aria_components_1 = require("react-aria-components");
|
|
8
|
-
const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton inline-block h-
|
|
8
|
+
const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton inline-block h-[1.125rem] w-[1.125rem] rounded-[0.35rem]', className), role: 'status', children: (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { "aria-label": children ? undefined : label, className: ps_design_system_1.PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
|
|
9
9
|
? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
|
|
10
10
|
: 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? ((0, jsx_runtime_1.jsx)("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: ps_icons_1.PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));
|
|
11
11
|
exports.PsCheckbox = PsCheckbox;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.PsDateInput = void 0;
|
|
7
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -9,12 +6,14 @@ const react_1 = require("react");
|
|
|
9
6
|
const ps_core_components_1 = require("@pallasoft/ps-core-components");
|
|
10
7
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
11
8
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
12
|
-
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
13
9
|
const ps_calendar_view_1 = require("../constants/ps-calendar-view");
|
|
14
10
|
const ps_date_input_config_1 = require("../constants/ps-date-input-config");
|
|
11
|
+
const ps_date_picker_classes_1 = require("../constants/ps-date-picker-classes");
|
|
15
12
|
const ps_date_input_service_1 = require("../services/ps-date-input-service");
|
|
16
13
|
const ps_calendar_header_1 = require("./ps-calendar-header");
|
|
14
|
+
const ps_date_picker_fallback_1 = require("./ps-date-picker-fallback");
|
|
17
15
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
16
|
+
const ps_lazy_date_picker_1 = require("./ps-lazy-date-picker");
|
|
18
17
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
19
18
|
const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
|
|
20
19
|
if (isLoading)
|
|
@@ -44,6 +43,6 @@ const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
44
43
|
setUncontrolledValue(nextValue);
|
|
45
44
|
onChange?.(nextValue);
|
|
46
45
|
};
|
|
47
|
-
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)(
|
|
46
|
+
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_1.Suspense, { 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) }), 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 }) }), (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] }));
|
|
48
47
|
};
|
|
49
48
|
exports.PsDateInput = PsDateInput;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface PsDatePickerFallbackProps {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
id: string;
|
|
4
|
+
placeholder: string;
|
|
5
|
+
required?: boolean;
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const PsDatePickerFallback: ({ disabled, id, placeholder, required, text, }: PsDatePickerFallbackProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsDatePickerFallback = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const ps_date_picker_classes_1 = require("../constants/ps-date-picker-classes");
|
|
6
|
+
const PsDatePickerFallback = ({ disabled, id, placeholder, required, text, }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_date_picker_classes_1.PsDatePickerClasses.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: ps_date_picker_classes_1.PsDatePickerClasses.inputContainer, children: (0, jsx_runtime_1.jsx)("input", { autoComplete: 'off', className: ps_date_picker_classes_1.PsDatePickerClasses.control, disabled: disabled, id: id, placeholder: placeholder, readOnly: true, required: required, type: 'text', value: text }) }) }));
|
|
7
|
+
exports.PsDatePickerFallback = PsDatePickerFallback;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PsLazyDatePicker: import("react").LazyExoticComponent<typeof import("react-datepicker").DatePicker>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.PsLazyDatePicker = void 0;
|
|
37
|
+
const react_1 = require("react");
|
|
38
|
+
exports.PsLazyDatePicker = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-datepicker'))));
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.PsYearInput = void 0;
|
|
7
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -9,13 +6,15 @@ const react_1 = require("react");
|
|
|
9
6
|
const ps_core_components_1 = require("@pallasoft/ps-core-components");
|
|
10
7
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
11
8
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
12
|
-
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
13
9
|
const ps_calendar_view_1 = require("../constants/ps-calendar-view");
|
|
14
10
|
const ps_date_input_config_1 = require("../constants/ps-date-input-config");
|
|
11
|
+
const ps_date_picker_classes_1 = require("../constants/ps-date-picker-classes");
|
|
15
12
|
const ps_year_input_config_1 = require("../constants/ps-year-input-config");
|
|
16
13
|
const ps_year_input_service_1 = require("../services/ps-year-input-service");
|
|
17
14
|
const ps_calendar_header_1 = require("./ps-calendar-header");
|
|
15
|
+
const ps_date_picker_fallback_1 = require("./ps-date-picker-fallback");
|
|
18
16
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
17
|
+
const ps_lazy_date_picker_1 = require("./ps-lazy-date-picker");
|
|
19
18
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
20
19
|
const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = ps_year_input_config_1.PsYearInputConfig.placeholder, required, value, }) => {
|
|
21
20
|
if (isLoading)
|
|
@@ -46,9 +45,9 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
46
45
|
setUncontrolledValue(nextValue);
|
|
47
46
|
onChange?.(nextValue);
|
|
48
47
|
};
|
|
49
|
-
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)(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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: [(0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ps_date_picker_fallback_1.PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: currentValue }), 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
|
+
handleChange(ps_year_input_service_1.PsYearInputService.startOfYear(year));
|
|
50
|
+
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
52
|
};
|
|
54
53
|
exports.PsYearInput = PsYearInput;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PsDateInputConfig = void 0;
|
|
4
4
|
exports.PsDateInputConfig = {
|
|
5
|
+
displayFormat: 'MMM D, YYYY',
|
|
5
6
|
inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
|
|
6
7
|
monthLabelFormat: 'MMMM YYYY',
|
|
7
8
|
monthShortFormat: 'MMM',
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const PsDatePickerClasses: {
|
|
2
|
+
readonly control: "ps-input-control ps-focus-ring w-full pr-10 text-sm font-semibold";
|
|
3
|
+
readonly inputContainer: "react-datepicker__input-container";
|
|
4
|
+
readonly wrapper: "react-datepicker-wrapper block w-full";
|
|
5
|
+
readonly wrapperOption: "block w-full";
|
|
6
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsDatePickerClasses = void 0;
|
|
4
|
+
exports.PsDatePickerClasses = {
|
|
5
|
+
control: 'ps-input-control ps-focus-ring w-full pr-10 text-sm font-semibold',
|
|
6
|
+
inputContainer: 'react-datepicker__input-container',
|
|
7
|
+
wrapper: 'react-datepicker-wrapper block w-full',
|
|
8
|
+
wrapperOption: 'block w-full',
|
|
9
|
+
};
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
|
|
3
3
|
import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
|
|
4
4
|
import { Checkbox } from 'react-aria-components';
|
|
5
|
-
export const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton inline-block h-
|
|
5
|
+
export const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton inline-block h-[1.125rem] w-[1.125rem] rounded-[0.35rem]', className), role: 'status', children: _jsx("span", { className: 'sr-only', children: label }) })) : (_jsx(Checkbox, { "aria-label": children ? undefined : label, className: PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
|
|
6
6
|
? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
|
|
7
7
|
: 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? (_jsx("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useId, useState } from 'react';
|
|
2
|
+
import { Suspense, useEffect, useId, useState } from 'react';
|
|
3
3
|
import { 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
|
-
import DatePicker from 'react-datepicker';
|
|
7
6
|
import { PsCalendarView } from '../constants/ps-calendar-view';
|
|
8
7
|
import { PsDateInputConfig } from '../constants/ps-date-input-config';
|
|
8
|
+
import { PsDatePickerClasses } from '../constants/ps-date-picker-classes';
|
|
9
9
|
import { PsDateInputService } from '../services/ps-date-input-service';
|
|
10
10
|
import { PsCalendarHeader } from './ps-calendar-header';
|
|
11
|
+
import { PsDatePickerFallback } from './ps-date-picker-fallback';
|
|
11
12
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
13
|
+
import { PsLazyDatePicker } from './ps-lazy-date-picker';
|
|
12
14
|
import { PsRequiredMark } from './ps-required-mark';
|
|
13
15
|
export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
|
|
14
16
|
if (isLoading)
|
|
@@ -38,5 +40,5 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
38
40
|
setUncontrolledValue(nextValue);
|
|
39
41
|
onChange?.(nextValue);
|
|
40
42
|
};
|
|
41
|
-
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(
|
|
43
|
+
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(Suspense, { fallback: _jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: PsDateInputService.display(currentValue) }), 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 }) }), _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] }));
|
|
42
44
|
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { PsDatePickerClasses } from '../constants/ps-date-picker-classes';
|
|
3
|
+
export const PsDatePickerFallback = ({ disabled, id, placeholder, required, text, }) => (_jsx("div", { className: PsDatePickerClasses.wrapper, children: _jsx("div", { className: PsDatePickerClasses.inputContainer, children: _jsx("input", { autoComplete: 'off', className: PsDatePickerClasses.control, disabled: disabled, id: id, placeholder: placeholder, readOnly: true, required: required, type: 'text', value: text }) }) }));
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useId, useRef, useState } from 'react';
|
|
2
|
+
import { Suspense, useEffect, useId, useRef, useState } from 'react';
|
|
3
3
|
import { 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
|
-
import DatePicker from 'react-datepicker';
|
|
7
6
|
import { PsCalendarView } from '../constants/ps-calendar-view';
|
|
8
7
|
import { PsDateInputConfig } from '../constants/ps-date-input-config';
|
|
8
|
+
import { PsDatePickerClasses } from '../constants/ps-date-picker-classes';
|
|
9
9
|
import { PsYearInputConfig } from '../constants/ps-year-input-config';
|
|
10
10
|
import { PsYearInputService } from '../services/ps-year-input-service';
|
|
11
11
|
import { PsCalendarHeader } from './ps-calendar-header';
|
|
12
|
+
import { PsDatePickerFallback } from './ps-date-picker-fallback';
|
|
12
13
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
14
|
+
import { PsLazyDatePicker } from './ps-lazy-date-picker';
|
|
13
15
|
import { PsRequiredMark } from './ps-required-mark';
|
|
14
16
|
export const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = PsYearInputConfig.placeholder, required, value, }) => {
|
|
15
17
|
if (isLoading)
|
|
@@ -40,8 +42,8 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
40
42
|
setUncontrolledValue(nextValue);
|
|
41
43
|
onChange?.(nextValue);
|
|
42
44
|
};
|
|
43
|
-
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(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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: [_jsx(Suspense, { fallback: _jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: currentValue }), 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
|
+
handleChange(PsYearInputService.startOfYear(year));
|
|
47
|
+
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] }));
|
|
47
49
|
};
|
|
@@ -18,6 +18,12 @@ export class PsDateInputService {
|
|
|
18
18
|
? ''
|
|
19
19
|
: Common.DateService.formatDate(date.getTime(), PsDateInputConfig.valueFormat);
|
|
20
20
|
}
|
|
21
|
+
static display(value) {
|
|
22
|
+
const date = PsDateInputService.parse(value);
|
|
23
|
+
return date === null
|
|
24
|
+
? ''
|
|
25
|
+
: Common.DateService.formatDate(date.getTime(), PsDateInputConfig.displayFormat);
|
|
26
|
+
}
|
|
21
27
|
static monthLabel(date) {
|
|
22
28
|
return Common.DateService.formatDate(date.getTime(), PsDateInputConfig.monthLabelFormat);
|
|
23
29
|
}
|
|
@@ -2,6 +2,7 @@ export declare class PsDateInputService {
|
|
|
2
2
|
static parse(value: string | undefined): Date | null;
|
|
3
3
|
static parseBound(value: string | undefined): Date | undefined;
|
|
4
4
|
static format(date: Date | null): string;
|
|
5
|
+
static display(value: string): string;
|
|
5
6
|
static monthLabel(date: Date): string;
|
|
6
7
|
static monthNames(): string[];
|
|
7
8
|
static yearPage(year: number): number[];
|
|
@@ -21,6 +21,12 @@ class PsDateInputService {
|
|
|
21
21
|
? ''
|
|
22
22
|
: ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.valueFormat);
|
|
23
23
|
}
|
|
24
|
+
static display(value) {
|
|
25
|
+
const date = PsDateInputService.parse(value);
|
|
26
|
+
return date === null
|
|
27
|
+
? ''
|
|
28
|
+
: ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.displayFormat);
|
|
29
|
+
}
|
|
24
30
|
static monthLabel(date) {
|
|
25
31
|
return ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.monthLabelFormat);
|
|
26
32
|
}
|