@pallasoft/ps-input-components 3.3.4 → 3.4.0
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-date-input.js +3 -1
- package/dist/components/ps-date-preset-field.js +2 -2
- package/dist/components/ps-select-input.d.ts +3 -1
- package/dist/components/ps-select-input.js +3 -2
- package/dist/components/ps-text-input.d.ts +3 -1
- package/dist/components/ps-text-input.js +3 -2
- package/dist/components/ps-toggle.js +1 -1
- package/dist/components/ps-year-input.js +4 -2
- package/dist/constants/ps-input-size-class-names.d.ts +5 -0
- package/dist/constants/ps-input-size-class-names.js +8 -0
- package/dist/esm/components/ps-date-input.js +4 -2
- package/dist/esm/components/ps-date-preset-field.js +2 -2
- package/dist/esm/components/ps-select-input.js +3 -2
- package/dist/esm/components/ps-text-input.js +3 -2
- package/dist/esm/components/ps-toggle.js +1 -1
- package/dist/esm/components/ps-year-input.js +5 -3
- package/dist/esm/constants/ps-input-size-class-names.js +5 -0
- package/package.json +2 -2
|
@@ -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;
|
|
@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const ps_date_input_1 = require("./ps-date-input");
|
|
6
6
|
const ps_form_control_1 = require("./ps-form-control");
|
|
7
7
|
const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: errorText, children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), (0, jsx_runtime_1.jsx)("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => ((0, jsx_runtime_1.jsx)("button", { "aria-pressed": preset.date !== '' && preset.date === value, className: preset.date !== '' && preset.date === value
|
|
8
|
-
? 'ps-focus-ring rounded-ps-control
|
|
9
|
-
: 'ps-focus-ring
|
|
8
|
+
? 'ps-focus-ring ps-control-compact ps-control-padding-compact rounded-ps-control border border-ps-control border-primary bg-primary text-xs font-semibold text-white'
|
|
9
|
+
: 'ps-focus-ring ps-control-compact ps-control-padding-compact ps-control-surface text-xs font-medium text-ink/70 hover:border-primary/40 hover:text-ink disabled:opacity-40', disabled: presetsDisabled, onClick: () => onChange(preset.date), type: 'button', children: preset.label }, preset.label))) })] }));
|
|
10
10
|
exports.PsDatePresetField = PsDatePresetField;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PsInputSizeClassNames } from '../constants/ps-input-size-class-names';
|
|
1
2
|
export interface PsSelectOption {
|
|
2
3
|
description?: string;
|
|
3
4
|
label: string;
|
|
@@ -16,6 +17,7 @@ export interface PsSelectInputProps {
|
|
|
16
17
|
options: PsSelectOption[];
|
|
17
18
|
placeholder?: string;
|
|
18
19
|
required?: boolean;
|
|
20
|
+
controlSize?: keyof typeof PsInputSizeClassNames;
|
|
19
21
|
value?: string;
|
|
20
22
|
}
|
|
21
|
-
export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;
|
|
23
|
+
export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, name, onChange, options, placeholder, required, controlSize, value, }: PsSelectInputProps) => import("react").JSX.Element;
|
|
@@ -7,11 +7,12 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
|
|
|
7
7
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
8
8
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
9
9
|
const react_aria_components_1 = require("react-aria-components");
|
|
10
|
+
const ps_input_size_class_names_1 = require("../constants/ps-input-size-class-names");
|
|
10
11
|
const ps_select_input_service_1 = require("../services/ps-select-input-service");
|
|
11
12
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
12
13
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
13
14
|
const ps_select_option_item_1 = require("./ps-select-option-item");
|
|
14
|
-
const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
|
|
15
|
+
const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, controlSize = 'default', value, }) => {
|
|
15
16
|
if (isLoading)
|
|
16
17
|
return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
|
|
17
18
|
const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(() => ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options));
|
|
@@ -24,6 +25,6 @@ const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabe
|
|
|
24
25
|
setUncontrolledValue(nextValue);
|
|
25
26
|
onChange?.(nextValue);
|
|
26
27
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { 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.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (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-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { 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.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2', ps_input_size_class_names_1.PsInputSizeClassNames[controlSize]), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (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-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
|
|
28
29
|
};
|
|
29
30
|
exports.PsSelectInput = PsSelectInput;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { PsInputSizeClassNames } from '../constants/ps-input-size-class-names';
|
|
2
3
|
export interface PsTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
4
|
helperText?: string;
|
|
4
5
|
hideLabel?: boolean;
|
|
5
6
|
label: string;
|
|
6
7
|
isLoading?: boolean;
|
|
8
|
+
controlSize?: keyof typeof PsInputSizeClassNames;
|
|
7
9
|
}
|
|
8
|
-
export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
|
|
10
|
+
export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, name, onChange, required, controlSize, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
|
|
@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PsTextInput = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
6
|
+
const ps_input_size_class_names_1 = require("../constants/ps-input-size-class-names");
|
|
6
7
|
const ps_date_input_1 = require("./ps-date-input");
|
|
7
8
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
8
9
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
9
|
-
const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, type, value, ...props }) => {
|
|
10
|
+
const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, controlSize = 'default', type, value, ...props }) => {
|
|
10
11
|
if (isLoading)
|
|
11
12
|
return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
|
|
12
13
|
if (type === 'date') {
|
|
@@ -14,6 +15,6 @@ const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
14
15
|
target: { name, value: nextValue },
|
|
15
16
|
}), required: required, value: typeof value === 'string' ? value : undefined }));
|
|
16
17
|
}
|
|
17
|
-
return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', ps_input_size_class_names_1.PsInputSizeClassNames[controlSize], className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
18
19
|
};
|
|
19
20
|
exports.PsTextInput = PsTextInput;
|
|
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PsToggle = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
6
|
-
const PsToggle = ({ description, isChecked, label, name, onChange }) => ((0, jsx_runtime_1.jsxs)("label", { className: 'ps-control flex cursor-pointer items-center justify-between gap-4
|
|
6
|
+
const PsToggle = ({ description, isChecked, label, name, onChange }) => ((0, jsx_runtime_1.jsxs)("label", { className: 'ps-control flex cursor-pointer items-center justify-between gap-4 ps-control-surface px-4 py-3 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary text-ink transition-colors hover:border-primary/35 dark:text-white', children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'block text-sm font-semibold text-current', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400', children: description })) : null] }), (0, jsx_runtime_1.jsx)("input", { checked: isChecked, className: 'sr-only', name: name, onChange: (event) => onChange?.(event.target.checked), type: 'checkbox' }), (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-7 w-12 items-center rounded-full p-1 transition', isChecked ? 'bg-primary' : 'bg-slate-200 dark:bg-slate-700'), children: (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('h-5 w-5 rounded-full bg-white ring-1 ring-black/5 transition dark:ring-white/10', isChecked && 'translate-x-5') }) })] }));
|
|
7
7
|
exports.PsToggle = PsToggle;
|
|
@@ -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
|
};
|
|
@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { PsDateInput } from './ps-date-input';
|
|
3
3
|
import { PsFormControl } from './ps-form-control';
|
|
4
4
|
export const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), _jsx("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.date !== '' && preset.date === value, className: preset.date !== '' && preset.date === value
|
|
5
|
-
? 'ps-focus-ring rounded-ps-control
|
|
6
|
-
: 'ps-focus-ring
|
|
5
|
+
? 'ps-focus-ring ps-control-compact ps-control-padding-compact rounded-ps-control border border-ps-control border-primary bg-primary text-xs font-semibold text-white'
|
|
6
|
+
: 'ps-focus-ring ps-control-compact ps-control-padding-compact ps-control-surface text-xs font-medium text-ink/70 hover:border-primary/40 hover:text-ink disabled:opacity-40', disabled: presetsDisabled, onClick: () => onChange(preset.date), type: 'button', children: preset.label }, preset.label))) })] }));
|
|
@@ -4,11 +4,12 @@ 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
6
|
import { Button, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
|
|
7
|
+
import { PsInputSizeClassNames } from '../constants/ps-input-size-class-names';
|
|
7
8
|
import { PsSelectInputService } from '../services/ps-select-input-service';
|
|
8
9
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
9
10
|
import { PsRequiredMark } from './ps-required-mark';
|
|
10
11
|
import { PsSelectOptionItem } from './ps-select-option-item';
|
|
11
|
-
export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
|
|
12
|
+
export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, controlSize = 'default', value, }) => {
|
|
12
13
|
if (isLoading)
|
|
13
14
|
return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
|
|
14
15
|
const [uncontrolledValue, setUncontrolledValue] = useState(() => PsSelectInputService.getDefaultValue(defaultValue, options));
|
|
@@ -21,5 +22,5 @@ export const PsSelectInput = ({ className, defaultValue, disabled, helperText, h
|
|
|
21
22
|
setUncontrolledValue(nextValue);
|
|
22
23
|
onChange?.(nextValue);
|
|
23
24
|
};
|
|
24
|
-
return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [_jsx(SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), helperText ? (_jsx(Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => _jsx(PsSelectOptionItem, { option: option }) }) })] }));
|
|
25
|
+
return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2', PsInputSizeClassNames[controlSize]), children: [_jsx(SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), helperText ? (_jsx(Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => _jsx(PsSelectOptionItem, { option: option }) }) })] }));
|
|
25
26
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
|
|
3
|
+
import { PsInputSizeClassNames } from '../constants/ps-input-size-class-names';
|
|
3
4
|
import { PsDateInput } from './ps-date-input';
|
|
4
5
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
5
6
|
import { PsRequiredMark } from './ps-required-mark';
|
|
6
|
-
export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, type, value, ...props }) => {
|
|
7
|
+
export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, controlSize = 'default', type, value, ...props }) => {
|
|
7
8
|
if (isLoading)
|
|
8
9
|
return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
|
|
9
10
|
if (type === 'date') {
|
|
@@ -11,5 +12,5 @@ export const PsTextInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
11
12
|
target: { name, value: nextValue },
|
|
12
13
|
}), required: required, value: typeof value === 'string' ? value : undefined }));
|
|
13
14
|
}
|
|
14
|
-
return (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("input", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
15
|
+
return (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("input", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', PsInputSizeClassNames[controlSize], className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
15
16
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
|
|
3
|
-
export const PsToggle = ({ description, isChecked, label, name, onChange }) => (_jsxs("label", { className: 'ps-control flex cursor-pointer items-center justify-between gap-4
|
|
3
|
+
export const PsToggle = ({ description, isChecked, label, name, onChange }) => (_jsxs("label", { className: 'ps-control flex cursor-pointer items-center justify-between gap-4 ps-control-surface px-4 py-3 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary text-ink transition-colors hover:border-primary/35 dark:text-white', children: [_jsxs("span", { children: [_jsx("span", { className: 'block text-sm font-semibold text-current', children: label }), description ? (_jsx("span", { className: 'mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400', children: description })) : null] }), _jsx("input", { checked: isChecked, className: 'sr-only', name: name, onChange: (event) => onChange?.(event.target.checked), type: 'checkbox' }), _jsx("span", { className: PallasoftClassNameService.merge('flex h-7 w-12 items-center rounded-full p-1 transition', isChecked ? 'bg-primary' : 'bg-slate-200 dark:bg-slate-700'), children: _jsx("span", { className: PallasoftClassNameService.merge('h-5 w-5 rounded-full bg-white ring-1 ring-black/5 transition dark:ring-white/10', isChecked && 'translate-x-5') }) })] }));
|
|
@@ -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
|
+
"version": "3.4.0",
|
|
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",
|