@pallasoft/ps-input-components 1.1.0 → 1.2.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-combobox-input.js +3 -2
- package/dist/components/ps-date-input.d.ts +3 -1
- package/dist/components/ps-date-input.js +1 -1
- package/dist/components/ps-file-picker.js +4 -1
- package/dist/components/ps-select-input.d.ts +3 -1
- package/dist/components/ps-select-input.js +5 -1
- package/dist/components/ps-text-input.d.ts +3 -1
- package/dist/components/ps-text-input.js +3 -3
- package/dist/services/ps-combobox-input-service.d.ts +4 -0
- package/dist/services/ps-combobox-input-service.js +10 -0
- package/dist/services/ps-select-input-service.d.ts +4 -0
- package/dist/services/ps-select-input-service.js +12 -0
- package/package.json +4 -2
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PsComboboxInput = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
6
5
|
const ps_core_components_1 = require("@pallasoft/ps-core-components");
|
|
6
|
+
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
7
7
|
const react_aria_components_1 = require("react-aria-components");
|
|
8
|
+
const ps_combobox_input_service_1 = require("../services/ps-combobox-input-service");
|
|
8
9
|
const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, }) => {
|
|
9
10
|
const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
|
|
10
|
-
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : (itemsByKey
|
|
11
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : ps_combobox_input_service_1.PsComboboxInputService.getItem(itemsByKey, key)), children: [label ? (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label', children: label }) : null, (0, jsx_runtime_1.jsx)("span", { className: 'relative mt-2 block', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'w-[--trigger-width] rounded-2xl border border-line bg-white/95 p-1.5 shadow-lg dark:border-white/10 dark:bg-slate-900/95', children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex items-center justify-center py-4', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { label: 'Loading results', size: 'small' }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, children: (item) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-xl px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-slate-50 dark:hover:bg-white/6', id: getItemKey(item), textValue: getItemLabel(item), children: renderItem ? renderItem(item) : getItemLabel(item) })) })) })] }));
|
|
11
12
|
};
|
|
12
13
|
exports.PsComboboxInput = PsComboboxInput;
|
|
@@ -3,10 +3,12 @@ export interface PsDateInputProps {
|
|
|
3
3
|
defaultValue?: string;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
helperText?: string;
|
|
6
|
+
/** Keeps the label for screen readers only, for inputs laid out under a shared column header. */
|
|
7
|
+
hideLabel?: boolean;
|
|
6
8
|
label: string;
|
|
7
9
|
name?: string;
|
|
8
10
|
onChange?: (value: string) => void;
|
|
9
11
|
required?: boolean;
|
|
10
12
|
value?: string;
|
|
11
13
|
}
|
|
12
|
-
export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }: PsDateInputProps) => import("react").JSX.Element;
|
|
14
|
+
export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, value, }: PsDateInputProps) => import("react").JSX.Element;
|
|
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PsDateInput = 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 PsDateInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring
|
|
6
|
+
const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', hideLabel ? '' : 'mt-2'), defaultValue: value === undefined ? defaultValue : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, type: 'date', value: value }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
7
7
|
exports.PsDateInput = PsDateInput;
|
|
@@ -7,11 +7,14 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
|
7
7
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
8
8
|
const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
|
|
9
9
|
const acceptAttr = (0, react_1.useMemo)(() => accept.join(','), [accept]);
|
|
10
|
+
const isAccepted = (candidate) => accept.some((entry) => entry.startsWith('.')
|
|
11
|
+
? candidate.name.toLowerCase().endsWith(entry.toLowerCase())
|
|
12
|
+
: entry === candidate.type);
|
|
10
13
|
const onFileChange = (event) => {
|
|
11
14
|
const newFile = event.target.files?.[0];
|
|
12
15
|
if (!newFile || disabled)
|
|
13
16
|
return;
|
|
14
|
-
if (!
|
|
17
|
+
if (!isAccepted(newFile)) {
|
|
15
18
|
onError?.('Invalid file type. Please select a supported file.');
|
|
16
19
|
event.target.value = '';
|
|
17
20
|
return;
|
|
@@ -8,6 +8,8 @@ export interface PsSelectInputProps {
|
|
|
8
8
|
defaultValue?: string;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
helperText?: string;
|
|
11
|
+
/** Keeps the label for screen readers only, for inputs laid out under a shared column header. */
|
|
12
|
+
hideLabel?: boolean;
|
|
11
13
|
label: string;
|
|
12
14
|
name?: string;
|
|
13
15
|
onChange?: (value: string) => void;
|
|
@@ -16,4 +18,4 @@ export interface PsSelectInputProps {
|
|
|
16
18
|
required?: boolean;
|
|
17
19
|
value?: string;
|
|
18
20
|
}
|
|
19
|
-
export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;
|
|
21
|
+
export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;
|
|
@@ -3,5 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PsSelectInput = 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
|
|
6
|
+
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
7
|
+
const ps_select_input_service_1 = require("../services/ps-select-input-service");
|
|
8
|
+
const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'relative block' : 'relative mt-2 block', children: [(0, jsx_runtime_1.jsxs)("select", { className: 'ps-input-control ps-focus-ring min-h-11 w-full appearance-none pr-10 text-left font-semibold disabled:cursor-not-allowed disabled:opacity-60', defaultValue: value === undefined
|
|
9
|
+
? ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options)
|
|
10
|
+
: undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, value: value, children: [options.length === 0 || !defaultValue ? ((0, jsx_runtime_1.jsx)("option", { disabled: true, value: '', children: placeholder })) : null, options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value)))] }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', iconKey: ps_icons_1.PsIconKey.Chevron, className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary' })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
7
11
|
exports.PsSelectInput = PsSelectInput;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { InputHTMLAttributes } from 'react';
|
|
2
2
|
export interface PsTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
3
|
helperText?: string;
|
|
4
|
+
/** Keeps the label for screen readers only, for inputs laid out under a shared column header. */
|
|
5
|
+
hideLabel?: boolean;
|
|
4
6
|
label: string;
|
|
5
7
|
}
|
|
6
|
-
export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
|
|
8
|
+
export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
|
|
@@ -4,12 +4,12 @@ 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
6
|
const ps_date_input_1 = require("./ps-date-input");
|
|
7
|
-
const PsTextInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }) => {
|
|
7
|
+
const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
|
|
8
8
|
if (type === 'date') {
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, label: label, name: name, onChange: (nextValue) => onChange?.({
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
|
|
10
10
|
target: { name, value: nextValue },
|
|
11
11
|
}), required: required, value: typeof value === 'string' ? value : undefined }));
|
|
12
12
|
}
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge('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] }));
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (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] }));
|
|
14
14
|
};
|
|
15
15
|
exports.PsTextInput = PsTextInput;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsComboboxInputService = void 0;
|
|
4
|
+
class PsComboboxInputService {
|
|
5
|
+
static getItem(itemsByKey, key) {
|
|
6
|
+
const item = itemsByKey.get(String(key));
|
|
7
|
+
return item !== null && item !== undefined ? item : null;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
exports.PsComboboxInputService = PsComboboxInputService;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsSelectInputService = void 0;
|
|
4
|
+
class PsSelectInputService {
|
|
5
|
+
static getDefaultValue(defaultValue, options) {
|
|
6
|
+
if (defaultValue !== null && defaultValue !== undefined)
|
|
7
|
+
return defaultValue;
|
|
8
|
+
const firstValue = options[0]?.value;
|
|
9
|
+
return firstValue !== null && firstValue !== undefined ? firstValue : '';
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
exports.PsSelectInputService = PsSelectInputService;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pallasoft/ps-input-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@internationalized/date": "^3.12.2",
|
|
32
|
-
"@pallasoft/ps-core-components": "^
|
|
32
|
+
"@pallasoft/ps-core-components": "^2.0.0",
|
|
33
33
|
"@pallasoft/ps-design-system": "^1.1.0",
|
|
34
34
|
"@pallasoft/ps-icons": "^1.1.0",
|
|
35
35
|
"react-aria-components": "^1.19.0"
|
|
@@ -62,6 +62,8 @@
|
|
|
62
62
|
"husky": "^9.1.7",
|
|
63
63
|
"lint-staged": "^16.2.7",
|
|
64
64
|
"prettier": "^3.6.2",
|
|
65
|
+
"react": "^19.3.0",
|
|
66
|
+
"react-dom": "^19.3.0",
|
|
65
67
|
"semantic-release": "^24.2.0",
|
|
66
68
|
"ts-node": "^10.9.2",
|
|
67
69
|
"typescript": "^5.9.3"
|