@pallasoft/ps-input-components 3.3.0 → 3.3.2

package/dist/components/ps-grouped-switcher.js

@@ -32,15 +32,20 @@ const PsGroupedSwitcher = ({ allOption, ariaLabel, className, emptyText, getItem
         setIsOpen(false);
         setQuery('');
     };
-    const onAction = (id) => {
-        const text = String(id);
+    const onSelectionChange = (selection) => {
+        const ids = selection === 'all' ? [] : Array.from(selection);
+        if (ids.length === 0) {
+            choose(selectedKey);
+            return;
+        }
+        const text = String(ids[0]);
         choose(text === ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.allKey ? '' : ps_grouped_switcher_service_1.PsGroupedSwitcherService.itemKey(text));
     };
     return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: (next) => {
             setIsOpen(next);
             if (!next)
                 setQuery('');
-        }, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": ariaLabel, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), (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 })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search })] }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', disallowEmptySelection: true, onAction: onAction, renderEmptyState: () => ((0, jsx_runtime_1.jsx)("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
+        }, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": ariaLabel, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), (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 })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search })] }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', onSelectionChange: onSelectionChange, renderEmptyState: () => ((0, jsx_runtime_1.jsx)("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
                                     isAllSelected
                                         ? ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.allKey
                                         : ps_grouped_switcher_service_1.PsGroupedSwitcherService.selectedOptionId(sections, selectedKey, getItemKey),

package/dist/components/ps-portable-text-editor.d.ts

@@ -3,10 +3,11 @@ import type { PsPortableTextEditorLabels } from '../portable-text-core/interface
 export interface PsPortableTextEditorProps {
     className?: string;
     disabled?: boolean;
+    invalid?: boolean;
     labels?: PsPortableTextEditorLabels;
     minRows?: number;
     onChange: (value: PortableTextBlock[]) => void;
     placeholder?: string;
     value: PortableTextBlock[];
 }
-export declare const PsPortableTextEditor: ({ className, disabled, labels, minRows, onChange, placeholder, value, }: PsPortableTextEditorProps) => import("react").JSX.Element;
+export declare const PsPortableTextEditor: ({ className, disabled, invalid, labels, minRows, onChange, placeholder, value, }: PsPortableTextEditorProps) => import("react").JSX.Element;

package/dist/components/ps-portable-text-editor.js

@@ -8,5 +8,5 @@ const ps_portable_text_core_1 = require("../portable-text-core/components/ps-por
 const ps_portable_text_core_config_1 = require("../portable-text-core/constants/ps-portable-text-core-config");
 const ps_portable_text_editor_service_1 = require("../portable-text-core/services/ps-portable-text-editor-service");
 const ps_portable_text_toolbar_1 = require("./ps-portable-text-toolbar");
-const PsPortableTextEditor = ({ className, disabled = false, labels = ps_portable_text_core_config_1.PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_core_1.PsPortableTextCore, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, className), classNames: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, fallback: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.toolbar, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-9' }) }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, style: { minHeight: ps_portable_text_editor_service_1.PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_1.PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
+const PsPortableTextEditor = ({ className, disabled = false, invalid = false, labels = ps_portable_text_core_config_1.PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_core_1.PsPortableTextCore, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, invalid && ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.invalid, disabled && ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.disabled, className), classNames: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, fallback: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.toolbar, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-9' }) }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, style: { minHeight: ps_portable_text_editor_service_1.PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_1.PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
 exports.PsPortableTextEditor = PsPortableTextEditor;

package/dist/constants/ps-portable-text-editor-config.d.ts

@@ -1,8 +1,10 @@
 export declare const PsPortableTextEditorConfig: {
     readonly classNames: {
-        readonly editable: "ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none";
-        readonly root: "block";
-        readonly toolbar: "flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent";
+        readonly editable: "w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-2 leading-6 text-ink shadow-none outline-none focus:outline-none focus-visible:outline-none";
+        readonly disabled: "cursor-not-allowed opacity-50";
+        readonly invalid: "border-danger";
+        readonly root: "block overflow-hidden rounded-ps-control border border-line bg-white has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary dark:bg-transparent";
+        readonly toolbar: "flex flex-wrap items-center gap-1 border-b border-line p-1";
         readonly button: "ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40";
         readonly buttonActive: "bg-primary text-white hover:bg-primary hover:text-white";
         readonly separator: "mx-1 h-5 w-px bg-line";

package/dist/constants/ps-portable-text-editor-config.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPortableTextEditorConfig = void 0;
 exports.PsPortableTextEditorConfig = {
     classNames: {
-        editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
-        root: 'block',
-        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent',
+        editable: 'w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-2 leading-6 text-ink shadow-none outline-none focus:outline-none focus-visible:outline-none',
+        disabled: 'cursor-not-allowed opacity-50',
+        invalid: 'border-danger',
+        root: 'block overflow-hidden rounded-ps-control border border-line bg-white has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary dark:bg-transparent',
+        toolbar: 'flex flex-wrap items-center gap-1 border-b border-line p-1',
         button: 'ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',

package/dist/esm/components/ps-grouped-switcher.js

@@ -29,15 +29,20 @@ export const PsGroupedSwitcher = ({ allOption, ariaLabel, className, emptyText,
         setIsOpen(false);
         setQuery('');
     };
-    const onAction = (id) => {
-        const text = String(id);
+    const onSelectionChange = (selection) => {
+        const ids = selection === 'all' ? [] : Array.from(selection);
+        if (ids.length === 0) {
+            choose(selectedKey);
+            return;
+        }
+        const text = String(ids[0]);
         choose(text === PsGroupedSwitcherConfig.allKey ? '' : PsGroupedSwitcherService.itemKey(text));
     };
     return (_jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: (next) => {
             setIsOpen(next);
             if (!next)
                 setQuery('');
-        }, children: [_jsxs(Button, { "aria-label": ariaLabel, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [_jsx("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), _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 })] }), _jsx(Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: _jsxs(Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [_jsxs(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [_jsx(Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search })] }), _jsxs(ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', disallowEmptySelection: true, onAction: onAction, renderEmptyState: () => (_jsx("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
+        }, children: [_jsxs(Button, { "aria-label": ariaLabel, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [_jsx("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), _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 })] }), _jsx(Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: _jsxs(Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [_jsxs(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [_jsx(Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search })] }), _jsxs(ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', onSelectionChange: onSelectionChange, renderEmptyState: () => (_jsx("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
                                     isAllSelected
                                         ? PsGroupedSwitcherConfig.allKey
                                         : PsGroupedSwitcherService.selectedOptionId(sections, selectedKey, getItemKey),

package/dist/esm/components/ps-portable-text-editor.js

@@ -5,4 +5,4 @@ import { PsPortableTextCore } from '../portable-text-core/components/ps-portable
 import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
 import { PsPortableTextEditorService } from '../portable-text-core/services/ps-portable-text-editor-service';
 import { PsPortableTextToolbar } from './ps-portable-text-toolbar';
-export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), classNames: PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
+export const PsPortableTextEditor = ({ className, disabled = false, invalid = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, invalid && PsPortableTextEditorConfig.classNames.invalid, disabled && PsPortableTextEditorConfig.classNames.disabled, className), classNames: PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));

package/dist/esm/constants/ps-portable-text-editor-config.js

@@ -1,8 +1,10 @@
 export const PsPortableTextEditorConfig = {
     classNames: {
-        editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
-        root: 'block',
-        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent',
+        editable: 'w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-2 leading-6 text-ink shadow-none outline-none focus:outline-none focus-visible:outline-none',
+        disabled: 'cursor-not-allowed opacity-50',
+        invalid: 'border-danger',
+        root: 'block overflow-hidden rounded-ps-control border border-line bg-white has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary dark:bg-transparent',
+        toolbar: 'flex flex-wrap items-center gap-1 border-b border-line p-1',
         button: 'ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "3.3.0",
+	"version": "3.3.2",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",