@pallasoft/ps-input-components 1.24.0 → 2.1.0

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

@@ -1,8 +1,11 @@
 import type { ReactNode } from 'react';
 export interface PsComboboxInputProps<T> {
     className?: string;
+    emptyText?: string;
     getItemKey: (item: T) => string;
     getItemLabel: (item: T) => string;
+    hideLabel?: boolean;
+    inputValue?: string;
     isLoading?: boolean;
     items: T[];
     label?: string;
@@ -11,5 +14,6 @@ export interface PsComboboxInputProps<T> {
     placeholder?: string;
     renderItem?: (item: T) => ReactNode;
     required?: boolean;
+    selectedKey?: string | null;
 }
-export declare const PsComboboxInput: <T>({ className, getItemKey, getItemLabel, isLoading, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, }: PsComboboxInputProps<T>) => import("react").JSX.Element;
+export declare const PsComboboxInput: <T>({ className, emptyText, getItemKey, getItemLabel, hideLabel, inputValue, isLoading, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, selectedKey, }: PsComboboxInputProps<T>) => import("react").JSX.Element;

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

@@ -7,8 +7,8 @@ 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 ps_required_mark_1 = require("./ps-required-mark");
-const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, }) => {
+const PsComboboxInput = ({ className, emptyText, getItemKey, getItemLabel, hideLabel = false, inputValue, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, selectedKey, }) => {
     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 : ps_combobox_input_service_1.PsComboboxInputService.getItem(itemsByKey, key)), children: [label ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })) : 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, { allowsEmptyCollection: true, "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), defaultFilter: () => true, inputValue: inputValue, items: items, onInputChange: onInputChange, selectedKey: selectedKey, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : ps_combobox_input_service_1.PsComboboxInputService.getItem(itemsByKey, key)), children: [label && !hideLabel ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })) : null, (0, jsx_runtime_1.jsx)("span", { className: hideLabel || !label ? 'relative block' : '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, renderEmptyState: () => emptyText ? (0, jsx_runtime_1.jsx)("div", { className: 'px-3 py-2 text-sm text-ink/55', children: emptyText }) : null, 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/esm/components/ps-combobox-input.js

@@ -4,7 +4,7 @@ import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { ComboBox, Input, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components';
 import { PsComboboxInputService } from '../services/ps-combobox-input-service';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, }) => {
+export const PsComboboxInput = ({ className, emptyText, getItemKey, getItemLabel, hideLabel = false, inputValue, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, selectedKey, }) => {
     const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
-    return (_jsxs(ComboBox, { className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : PsComboboxInputService.getItem(itemsByKey, key)), children: [label ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })) : null, _jsx("span", { className: 'relative mt-2 block', children: _jsx(Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), _jsx(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 ? (_jsx("div", { className: 'flex items-center justify-center py-4', children: _jsx(PsSpinner, { label: 'Loading results', size: 'small' }) })) : (_jsx(ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, children: (item) => (_jsx(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 (_jsxs(ComboBox, { allowsEmptyCollection: true, "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, inputValue: inputValue, items: items, onInputChange: onInputChange, selectedKey: selectedKey, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : PsComboboxInputService.getItem(itemsByKey, key)), children: [label && !hideLabel ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })) : null, _jsx("span", { className: hideLabel || !label ? 'relative block' : 'relative mt-2 block', children: _jsx(Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), _jsx(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 ? (_jsx("div", { className: 'flex items-center justify-center py-4', children: _jsx(PsSpinner, { label: 'Loading results', size: 'small' }) })) : (_jsx(ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, renderEmptyState: () => emptyText ? _jsx("div", { className: 'px-3 py-2 text-sm text-ink/55', children: emptyText }) : null, children: (item) => (_jsx(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) })) })) })] }));
 };

package/dist/esm/index.js

@@ -45,7 +45,5 @@ export * from './components/ps-date-preset-field';
 export * from './components/ps-select-with-create';
 export * from './constants/ps-select-with-create-config';
 export * from './interfaces/ps-date-preset-data';
-export * from './components/ps-portable-text-editor';
-export * from './portable-text-core/interfaces/ps-portable-text-editor-labels';
 export * from './components/ps-option-card-group';
 export * from './interfaces/ps-option-card-data';

package/dist/esm/portable-text/index.js

@@ -0,0 +1,2 @@
+export * from '../components/ps-portable-text-editor';
+export * from '../portable-text-core/interfaces/ps-portable-text-editor-labels';

package/dist/index.d.ts

@@ -45,8 +45,5 @@ export * from './components/ps-date-preset-field';
 export * from './components/ps-select-with-create';
 export * from './constants/ps-select-with-create-config';
 export * from './interfaces/ps-date-preset-data';
-export * from './components/ps-portable-text-editor';
-export * from './portable-text-core/interfaces/ps-portable-text-editor-labels';
-export type { PortableTextBlock } from '@portabletext/editor';
 export * from './components/ps-option-card-group';
 export * from './interfaces/ps-option-card-data';

package/dist/index.js

@@ -61,7 +61,5 @@ __exportStar(require("./components/ps-date-preset-field"), exports);
 __exportStar(require("./components/ps-select-with-create"), exports);
 __exportStar(require("./constants/ps-select-with-create-config"), exports);
 __exportStar(require("./interfaces/ps-date-preset-data"), exports);
-__exportStar(require("./components/ps-portable-text-editor"), exports);
-__exportStar(require("./portable-text-core/interfaces/ps-portable-text-editor-labels"), exports);
 __exportStar(require("./components/ps-option-card-group"), exports);
 __exportStar(require("./interfaces/ps-option-card-data"), exports);

package/dist/portable-text/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../components/ps-portable-text-editor';
+export * from '../portable-text-core/interfaces/ps-portable-text-editor-labels';
+export type { PortableTextBlock } from '@portabletext/editor';

package/dist/portable-text/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../components/ps-portable-text-editor"), exports);
+__exportStar(require("../portable-text-core/interfaces/ps-portable-text-editor-labels"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.24.0",
+	"version": "2.1.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -19,6 +19,12 @@
 			"require": "./dist/form/index.js",
 			"default": "./dist/form/index.js"
 		},
+		"./portable-text": {
+			"types": "./dist/portable-text/index.d.ts",
+			"module": "./dist/esm/portable-text/index.js",
+			"require": "./dist/portable-text/index.js",
+			"default": "./dist/portable-text/index.js"
+		},
 		"./portable-text-core": {
 			"types": "./dist/portable-text-core/index.d.ts",
 			"module": "./dist/esm/portable-text-core/index.js",
@@ -109,6 +115,9 @@
 			"form": [
 				"./dist/form/index.d.ts"
 			],
+			"portable-text": [
+				"./dist/portable-text/index.d.ts"
+			],
 			"portable-text-core": [
 				"./dist/portable-text-core/index.d.ts"
 			]