@pallasoft/ps-input-components 3.6.0 → 3.7.1

package/dist/components/ps-tag-input.d.ts

@@ -0,0 +1,17 @@
+export interface PsTagInputProps {
+    className?: string;
+    errorText?: string;
+    helperText?: string;
+    hideLabel?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    max?: number;
+    name?: string;
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    removeLabel: (value: string) => string;
+    required?: boolean;
+    values: string[];
+}
+export declare const PsTagInput: ({ className, errorText, helperText, hideLabel, isDisabled, isLoading, label, max, name, onChange, placeholder, removeLabel, required, values, }: PsTagInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTagInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_tag_input_config_1 = require("../constants/ps-tag-input-config");
+const ps_tag_input_service_1 = require("../services/ps-tag-input-service");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
+const ps_form_control_1 = require("./ps-form-control");
+const ps_required_mark_1 = require("./ps-required-mark");
+const PsTagInput = ({ className, errorText, helperText, hideLabel, isDisabled = false, isLoading = false, label, max, name, onChange, placeholder, removeLabel, required, values, }) => {
+    const [draft, setDraft] = (0, react_1.useState)('');
+    const isFull = max !== undefined && values.length >= max;
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
+    const commit = (text) => {
+        if (text.trim() !== '')
+            onChange(ps_tag_input_service_1.PsTagInputService.add(values, text, max));
+        setDraft('');
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === ps_tag_input_config_1.PsTagInputConfig.addKey) {
+            event.preventDefault();
+            commit(draft);
+            return;
+        }
+        if (event.key === ps_tag_input_config_1.PsTagInputConfig.removeKey && draft === '' && values.length > 0)
+            onChange(ps_tag_input_service_1.PsTagInputService.removeLast(values));
+    };
+    return ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { className: className, errorText: errorText, helperText: helperText, children: (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.jsxs)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control flex flex-wrap items-center gap-1.5 py-1.5', hideLabel ? '' : 'mt-2', isDisabled ? 'opacity-60' : ''), children: [values.map((value) => ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsActiveFilterChip, { label: value, onRemove: () => {
+                                if (!isDisabled)
+                                    onChange(ps_tag_input_service_1.PsTagInputService.remove(values, value));
+                            }, removeLabel: removeLabel(value) }, value))), (0, jsx_runtime_1.jsx)("input", { "aria-invalid": errorText ? true : undefined, className: 'min-w-24 flex-1 bg-transparent text-sm font-semibold outline-none placeholder:font-medium placeholder:text-ink/45 disabled:cursor-not-allowed', disabled: isDisabled || isFull, name: name, onBlur: () => commit(draft), onChange: (event) => {
+                                const text = event.target.value;
+                                if (text.includes(ps_tag_input_config_1.PsTagInputConfig.separator))
+                                    commit(text);
+                                else
+                                    setDraft(text);
+                            }, onKeyDown: handleKeyDown, placeholder: values.length === 0 ? placeholder : undefined, value: draft })] })] }) }));
+};
+exports.PsTagInput = PsTagInput;

package/dist/constants/ps-tag-input-config.d.ts

@@ -0,0 +1,5 @@
+export declare const PsTagInputConfig: {
+    readonly addKey: "Enter";
+    readonly removeKey: "Backspace";
+    readonly separator: ",";
+};

package/dist/constants/ps-tag-input-config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTagInputConfig = void 0;
+exports.PsTagInputConfig = {
+    addKey: 'Enter',
+    removeKey: 'Backspace',
+    separator: ',',
+};

package/dist/esm/components/ps-tag-input.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PsActiveFilterChip } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsTagInputConfig } from '../constants/ps-tag-input-config';
+import { PsTagInputService } from '../services/ps-tag-input-service';
+import { PsFieldSkeleton } from './ps-field-skeleton';
+import { PsFormControl } from './ps-form-control';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsTagInput = ({ className, errorText, helperText, hideLabel, isDisabled = false, isLoading = false, label, max, name, onChange, placeholder, removeLabel, required, values, }) => {
+    const [draft, setDraft] = useState('');
+    const isFull = max !== undefined && values.length >= max;
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
+    const commit = (text) => {
+        if (text.trim() !== '')
+            onChange(PsTagInputService.add(values, text, max));
+        setDraft('');
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === PsTagInputConfig.addKey) {
+            event.preventDefault();
+            commit(draft);
+            return;
+        }
+        if (event.key === PsTagInputConfig.removeKey && draft === '' && values.length > 0)
+            onChange(PsTagInputService.removeLast(values));
+    };
+    return (_jsx(PsFormControl, { className: className, errorText: errorText, helperText: helperText, children: _jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("span", { className: PallasoftClassNameService.merge('ps-input-control flex flex-wrap items-center gap-1.5 py-1.5', hideLabel ? '' : 'mt-2', isDisabled ? 'opacity-60' : ''), children: [values.map((value) => (_jsx(PsActiveFilterChip, { label: value, onRemove: () => {
+                                if (!isDisabled)
+                                    onChange(PsTagInputService.remove(values, value));
+                            }, removeLabel: removeLabel(value) }, value))), _jsx("input", { "aria-invalid": errorText ? true : undefined, className: 'min-w-24 flex-1 bg-transparent text-sm font-semibold outline-none placeholder:font-medium placeholder:text-ink/45 disabled:cursor-not-allowed', disabled: isDisabled || isFull, name: name, onBlur: () => commit(draft), onChange: (event) => {
+                                const text = event.target.value;
+                                if (text.includes(PsTagInputConfig.separator))
+                                    commit(text);
+                                else
+                                    setDraft(text);
+                            }, onKeyDown: handleKeyDown, placeholder: values.length === 0 ? placeholder : undefined, value: draft })] })] }) }));
+};

package/dist/esm/constants/ps-tag-input-config.js

@@ -0,0 +1,5 @@
+export const PsTagInputConfig = {
+    addKey: 'Enter',
+    removeKey: 'Backspace',
+    separator: ',',
+};

package/dist/esm/index.js

@@ -11,6 +11,9 @@ export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';
+export * from './components/ps-tag-input';
+export * from './constants/ps-tag-input-config';
+export * from './services/ps-tag-input-service';
 export * from './components/ps-text-area-input';
 export * from './components/ps-text-input';
 export * from './components/ps-toggle';

package/dist/esm/package.json

@@ -1 +1 @@
-{"type":"module"}
+{"type":"module","sideEffects":false}

package/dist/esm/services/ps-tag-input-service.js

@@ -0,0 +1,27 @@
+import { PsTagInputConfig } from '../constants/ps-tag-input-config';
+export class PsTagInputService {
+    static parse(text) {
+        return text
+            .split(PsTagInputConfig.separator)
+            .map((entry) => entry.trim())
+            .filter((entry) => entry !== '');
+    }
+    static add(values, text, max) {
+        const taken = new Set(values.map((value) => value.toLowerCase()));
+        const next = [...values];
+        for (const entry of PsTagInputService.parse(text)) {
+            const key = entry.toLowerCase();
+            if (taken.has(key) || (max !== undefined && next.length >= max))
+                continue;
+            taken.add(key);
+            next.push(entry);
+        }
+        return next;
+    }
+    static remove(values, value) {
+        return values.filter((entry) => entry !== value);
+    }
+    static removeLast(values) {
+        return values.slice(0, values.length - 1);
+    }
+}

package/dist/index.d.ts

@@ -11,6 +11,9 @@ export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';
+export * from './components/ps-tag-input';
+export * from './constants/ps-tag-input-config';
+export * from './services/ps-tag-input-service';
 export * from './components/ps-text-area-input';
 export * from './components/ps-text-input';
 export * from './components/ps-toggle';

package/dist/index.js

@@ -27,6 +27,9 @@ __exportStar(require("./components/ps-field-skeleton"), exports);
 __exportStar(require("./components/ps-form-control"), exports);
 __exportStar(require("./components/ps-multi-select-input"), exports);
 __exportStar(require("./components/ps-select-input"), exports);
+__exportStar(require("./components/ps-tag-input"), exports);
+__exportStar(require("./constants/ps-tag-input-config"), exports);
+__exportStar(require("./services/ps-tag-input-service"), exports);
 __exportStar(require("./components/ps-text-area-input"), exports);
 __exportStar(require("./components/ps-text-input"), exports);
 __exportStar(require("./components/ps-toggle"), exports);

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

@@ -0,0 +1,6 @@
+export declare class PsTagInputService {
+    static parse(text: string): string[];
+    static add(values: string[], text: string, max: number | undefined): string[];
+    static remove(values: string[], value: string): string[];
+    static removeLast(values: string[]): string[];
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTagInputService = void 0;
+const ps_tag_input_config_1 = require("../constants/ps-tag-input-config");
+class PsTagInputService {
+    static parse(text) {
+        return text
+            .split(ps_tag_input_config_1.PsTagInputConfig.separator)
+            .map((entry) => entry.trim())
+            .filter((entry) => entry !== '');
+    }
+    static add(values, text, max) {
+        const taken = new Set(values.map((value) => value.toLowerCase()));
+        const next = [...values];
+        for (const entry of PsTagInputService.parse(text)) {
+            const key = entry.toLowerCase();
+            if (taken.has(key) || (max !== undefined && next.length >= max))
+                continue;
+            taken.add(key);
+            next.push(entry);
+        }
+        return next;
+    }
+    static remove(values, value) {
+        return values.filter((entry) => entry !== value);
+    }
+    static removeLast(values) {
+        return values.slice(0, values.length - 1);
+    }
+}
+exports.PsTagInputService = PsTagInputService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "3.6.0",
+	"version": "3.7.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -45,7 +45,7 @@
 	],
 	"scripts": {
 		"husky:prepare": "npx husky",
-		"build": "tsc && tsc -p tsconfig.esm.json && node -e \"require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module' }))\"",
+		"build": "tsc && tsc -p tsconfig.esm.json && node -e \"require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module', sideEffects: false }))\"",
 		"setup:graphify": "sh scripts/graphify-setup.sh",
 		"update:graphify": "sh scripts/graphify-update.sh",
 		"lint": "npm run lint:eslint",
@@ -61,7 +61,7 @@
 		"@internationalized/date": "^3.12.2",
 		"@pallasoft/ps-core-components": "^2.21.0",
 		"@pallasoft/ps-icons": "^1.5.4",
-		"@pallasoft/ps-models": "^1.4.0",
+		"@pallasoft/ps-models": "^2.0.0",
 		"@pallasoft/ps-popovers": "^1.7.0",
 		"@pallasoft/ps-utilities": "^2.13.0",
 		"@portabletext/schema": "^2.2.4",