@pallasoft/ps-input-components 1.15.0 → 1.17.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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface PsCascaderOption {
|
|
2
2
|
description?: string;
|
|
3
|
+
isDisabled?: boolean;
|
|
3
4
|
label: string;
|
|
4
5
|
value: string;
|
|
5
6
|
}
|
|
@@ -18,8 +19,9 @@ export interface PsCascaderInputProps {
|
|
|
18
19
|
label: string;
|
|
19
20
|
onChange: (value: string) => void;
|
|
20
21
|
placeholder?: string;
|
|
22
|
+
preferredGroupKey?: string;
|
|
21
23
|
required?: boolean;
|
|
22
24
|
searchPlaceholder?: string;
|
|
23
25
|
value: string;
|
|
24
26
|
}
|
|
25
|
-
export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, isLoading, label, onChange, placeholder, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;
|
|
27
|
+
export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, isLoading, label, onChange, placeholder, preferredGroupKey, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;
|
|
@@ -11,7 +11,7 @@ const ps_cascader_config_1 = require("../constants/ps-cascader-config");
|
|
|
11
11
|
const ps_cascader_service_1 = require("../services/ps-cascader-service");
|
|
12
12
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
13
13
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
14
|
-
const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
|
|
14
|
+
const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', preferredGroupKey, required, searchPlaceholder = 'Search', value, }) => {
|
|
15
15
|
if (isLoading)
|
|
16
16
|
return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
|
|
17
17
|
const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
|
|
@@ -21,15 +21,20 @@ const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, i
|
|
|
21
21
|
const selected = (0, react_1.useMemo)(() => ps_cascader_service_1.PsCascaderService.findSelected(groups, value), [groups, value]);
|
|
22
22
|
const matches = (0, react_1.useMemo)(() => ps_cascader_service_1.PsCascaderService.search(groups, query), [groups, query]);
|
|
23
23
|
const activeGroup = (0, react_1.useMemo)(() => {
|
|
24
|
+
const preferred = preferredGroupKey !== undefined && groups.some((group) => group.key === preferredGroupKey)
|
|
25
|
+
? preferredGroupKey
|
|
26
|
+
: null;
|
|
24
27
|
const key = activeGroupKey
|
|
25
28
|
? activeGroupKey
|
|
26
|
-
:
|
|
27
|
-
?
|
|
28
|
-
:
|
|
29
|
-
?
|
|
30
|
-
:
|
|
29
|
+
: preferred !== null
|
|
30
|
+
? preferred
|
|
31
|
+
: selected
|
|
32
|
+
? selected.group.key
|
|
33
|
+
: groups.length > 0
|
|
34
|
+
? groups[0].key
|
|
35
|
+
: null;
|
|
31
36
|
return groups.find((group) => group.key === key) ?? null;
|
|
32
|
-
}, [activeGroupKey, groups, selected]);
|
|
37
|
+
}, [activeGroupKey, groups, preferredGroupKey, selected]);
|
|
33
38
|
const open = (nextOpen) => {
|
|
34
39
|
setIsOpen(nextOpen);
|
|
35
40
|
if (!nextOpen)
|
|
@@ -41,9 +46,11 @@ const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, i
|
|
|
41
46
|
onChange(nextValue);
|
|
42
47
|
close();
|
|
43
48
|
};
|
|
44
|
-
const renderOption = (option, groupLabel, close) => ((0, jsx_runtime_1.jsxs)("button", { "aria-selected": option.value === value, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-start gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-medium transition-colors', option.
|
|
45
|
-
? '
|
|
46
|
-
:
|
|
49
|
+
const renderOption = (option, groupLabel, close) => ((0, jsx_runtime_1.jsxs)("button", { "aria-disabled": option.isDisabled, "aria-selected": option.value === value, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-start gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-medium transition-colors', option.isDisabled
|
|
50
|
+
? 'cursor-not-allowed text-ink/40'
|
|
51
|
+
: option.value === value
|
|
52
|
+
? 'bg-primary/10 text-ink'
|
|
53
|
+
: 'text-ink/80 hover:bg-mist/60 hover:text-ink'), disabled: option.isDisabled, onClick: () => select(option.value, close), role: 'option', type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check })) : null }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block truncate', children: option.label }), groupLabel ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
|
|
47
54
|
return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : ((0, jsx_runtime_1.jsxs)("span", { className: 'ps-input-label block', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })), (0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: selected ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: selected.option.label }), (0, jsx_runtime_1.jsx)("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 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-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: groups.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-1 px-4 py-8 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: ps_cascader_config_1.PsCascaderConfig.emptyLabel }), (0, jsx_runtime_1.jsx)("p", { className: 'text-xs text-ink/55', children: ps_cascader_config_1.PsCascaderConfig.emptyDescription })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'border-b border-line p-2', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [(0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
|
|
48
55
|
? 'bg-mist text-ink'
|
|
49
56
|
: 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: ps_icons_1.PsIconKey.Chevron })] }, group.key))) }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? ((0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: ps_icons_1.PsIconKey.Chevron }), "All groups"] })) : null, activeGroup
|
|
@@ -8,7 +8,7 @@ import { PsCascaderConfig } from '../constants/ps-cascader-config';
|
|
|
8
8
|
import { PsCascaderService } from '../services/ps-cascader-service';
|
|
9
9
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
10
10
|
import { PsRequiredMark } from './ps-required-mark';
|
|
11
|
-
export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
|
|
11
|
+
export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', preferredGroupKey, required, searchPlaceholder = 'Search', value, }) => {
|
|
12
12
|
if (isLoading)
|
|
13
13
|
return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
|
|
14
14
|
const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
|
|
@@ -18,15 +18,20 @@ export const PsCascaderInput = ({ className, disabled, groups, helperText, hideL
|
|
|
18
18
|
const selected = useMemo(() => PsCascaderService.findSelected(groups, value), [groups, value]);
|
|
19
19
|
const matches = useMemo(() => PsCascaderService.search(groups, query), [groups, query]);
|
|
20
20
|
const activeGroup = useMemo(() => {
|
|
21
|
+
const preferred = preferredGroupKey !== undefined && groups.some((group) => group.key === preferredGroupKey)
|
|
22
|
+
? preferredGroupKey
|
|
23
|
+
: null;
|
|
21
24
|
const key = activeGroupKey
|
|
22
25
|
? activeGroupKey
|
|
23
|
-
:
|
|
24
|
-
?
|
|
25
|
-
:
|
|
26
|
-
?
|
|
27
|
-
:
|
|
26
|
+
: preferred !== null
|
|
27
|
+
? preferred
|
|
28
|
+
: selected
|
|
29
|
+
? selected.group.key
|
|
30
|
+
: groups.length > 0
|
|
31
|
+
? groups[0].key
|
|
32
|
+
: null;
|
|
28
33
|
return groups.find((group) => group.key === key) ?? null;
|
|
29
|
-
}, [activeGroupKey, groups, selected]);
|
|
34
|
+
}, [activeGroupKey, groups, preferredGroupKey, selected]);
|
|
30
35
|
const open = (nextOpen) => {
|
|
31
36
|
setIsOpen(nextOpen);
|
|
32
37
|
if (!nextOpen)
|
|
@@ -38,9 +43,11 @@ export const PsCascaderInput = ({ className, disabled, groups, helperText, hideL
|
|
|
38
43
|
onChange(nextValue);
|
|
39
44
|
close();
|
|
40
45
|
};
|
|
41
|
-
const renderOption = (option, groupLabel, close) => (_jsxs("button", { "aria-selected": option.value === value, className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-start gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-medium transition-colors', option.
|
|
42
|
-
? '
|
|
43
|
-
:
|
|
46
|
+
const renderOption = (option, groupLabel, close) => (_jsxs("button", { "aria-disabled": option.isDisabled, "aria-selected": option.value === value, className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-start gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-medium transition-colors', option.isDisabled
|
|
47
|
+
? 'cursor-not-allowed text-ink/40'
|
|
48
|
+
: option.value === value
|
|
49
|
+
? 'bg-primary/10 text-ink'
|
|
50
|
+
: 'text-ink/80 hover:bg-mist/60 hover:text-ink'), disabled: option.isDisabled, onClick: () => select(option.value, close), role: 'option', type: 'button', children: [_jsx("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Check })) : null }), _jsxs("span", { className: 'min-w-0 flex-1', children: [_jsx("span", { className: 'block truncate', children: option.label }), groupLabel ? (_jsx("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? (_jsx("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
|
|
44
51
|
return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : (_jsxs("span", { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [_jsxs(Button, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [_jsx("span", { className: 'min-w-0 flex-1 truncate', children: selected ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'truncate', children: selected.option.label }), _jsx("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => (_jsx(_Fragment, { children: groups.length === 0 ? (_jsxs("div", { className: 'flex flex-col gap-1 px-4 py-8 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsCascaderConfig.emptyLabel }), _jsx("p", { className: 'text-xs text-ink/55', children: PsCascaderConfig.emptyDescription })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: 'border-b border-line p-2', children: _jsx("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? (_jsxs("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [_jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
|
|
45
52
|
? 'bg-mist text-ink'
|
|
46
53
|
: 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), _jsx("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: PsIconKey.Chevron })] }, group.key))) }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? (_jsxs("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: PsIconKey.Chevron }), "All groups"] })) : null, activeGroup
|