@pallasoft/ps-input-components 1.0.0 → 1.1.1

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsComboboxInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const react_aria_components_1 = require("react-aria-components");
+const ps_combobox_input_service_1 = require("../services/ps-combobox-input-service");
 const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, }) => {
     const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
-    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.get(String(key)) ?? null)), 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) })) })) })] }));
+    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) })) })) })] }));
 };
 exports.PsComboboxInput = PsComboboxInput;

package/dist/components/ps-file-picker.d.ts

@@ -0,0 +1,12 @@
+export interface PsFilePickerProps {
+    accept: string[];
+    acceptLabel: string;
+    className?: string;
+    disabled?: boolean;
+    dropLabel: string;
+    maxSizeBytes?: number;
+    maxSizeLabel?: string;
+    onError?: (message: string) => void;
+    onFileLoad: (file: File) => void;
+}
+export declare const PsFilePicker: ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }: PsFilePickerProps) => import("react").JSX.Element;

package/dist/components/ps-file-picker.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFilePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
+    const acceptAttr = (0, react_1.useMemo)(() => accept.join(','), [accept]);
+    const isAccepted = (candidate) => accept.some((entry) => entry.startsWith('.')
+        ? candidate.name.toLowerCase().endsWith(entry.toLowerCase())
+        : entry === candidate.type);
+    const onFileChange = (event) => {
+        const newFile = event.target.files?.[0];
+        if (!newFile || disabled)
+            return;
+        if (!isAccepted(newFile)) {
+            onError?.('Invalid file type. Please select a supported file.');
+            event.target.value = '';
+            return;
+        }
+        if (maxSizeBytes && newFile.size > maxSizeBytes) {
+            onError?.(maxSizeLabel ? `File is too large. ${maxSizeLabel}.` : 'File is too large.');
+            event.target.value = '';
+            return;
+        }
+        onFileLoad(newFile);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-line p-4 transition-all hover:border-primary/50 hover:bg-primary/5 sm:h-64', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col items-center gap-3 text-center', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: 'upload', className: 'h-8 w-8 text-primary' }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-body-2 font-medium text-ink sm:text-body-1', children: dropLabel }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: "or click to browse your files" }), maxSizeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-3 text-body-3 text-ink/60', children: maxSizeLabel }) : null, (0, jsx_runtime_1.jsxs)("p", { className: 'text-body-3 text-ink/60', children: ["Accepted formats: ", acceptLabel] })] })] }), (0, jsx_runtime_1.jsx)("input", { type: 'file', accept: acceptAttr, className: 'absolute inset-0 h-full w-full cursor-pointer opacity-0', "aria-label": 'File upload', onChange: onFileChange, disabled: disabled, "aria-disabled": disabled })] }));
+};
+exports.PsFilePicker = PsFilePicker;

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

@@ -3,5 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSelectInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsSelectInput = ({ className, defaultValue, disabled, helperText, 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: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: '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 ? (defaultValue ?? options[0]?.value ?? '') : 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)("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-primary', children: "\u2304" })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_select_input_service_1 = require("../services/ps-select-input-service");
+const PsSelectInput = ({ className, defaultValue, disabled, helperText, 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: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: '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
+                        ? ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options)
+                        : 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] }));
 exports.PsSelectInput = PsSelectInput;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
+export * from './components/ps-file-picker';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';

package/dist/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);
+__exportStar(require("./components/ps-file-picker"), exports);
 __exportStar(require("./components/ps-form-control"), exports);
 __exportStar(require("./components/ps-multi-select-input"), exports);
 __exportStar(require("./components/ps-select-input"), exports);

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

@@ -0,0 +1,4 @@
+import type { Key } from 'react';
+export declare class PsComboboxInputService {
+    static getItem<TItem>(itemsByKey: Map<string, TItem>, key: Key): TItem | null;
+}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsComboboxInputService = void 0;
+class PsComboboxInputService {
+    static getItem(itemsByKey, key) {
+        const item = itemsByKey.get(String(key));
+        return item !== null && item !== undefined ? item : null;
+    }
+}
+exports.PsComboboxInputService = PsComboboxInputService;

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

@@ -0,0 +1,4 @@
+import type { PsSelectOption } from '../components/ps-select-input';
+export declare class PsSelectInputService {
+    static getDefaultValue(defaultValue: string | undefined, options: PsSelectOption[]): string;
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSelectInputService = void 0;
+class PsSelectInputService {
+    static getDefaultValue(defaultValue, options) {
+        if (defaultValue !== null && defaultValue !== undefined)
+            return defaultValue;
+        const firstValue = options[0]?.value;
+        return firstValue !== null && firstValue !== undefined ? firstValue : '';
+    }
+}
+exports.PsSelectInputService = PsSelectInputService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.0.0",
+	"version": "1.1.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -29,8 +29,9 @@
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
-		"@pallasoft/ps-core-components": "^1.0.0",
-		"@pallasoft/ps-design-system": "^1.0.0",
+		"@pallasoft/ps-core-components": "^2.0.0",
+		"@pallasoft/ps-design-system": "^1.1.0",
+		"@pallasoft/ps-icons": "^1.1.0",
 		"react-aria-components": "^1.19.0"
 	},
 	"peerDependencies": {
@@ -61,6 +62,8 @@
 		"husky": "^9.1.7",
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.6.2",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0",
 		"semantic-release": "^24.2.0",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.9.3"