@pallasoft/ps-input-components 1.6.1 → 1.8.0

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

@@ -0,0 +1,23 @@
+export interface PsCascaderOption {
+    description?: string;
+    label: string;
+    value: string;
+}
+export interface PsCascaderGroup {
+    key: string;
+    label: string;
+    options: PsCascaderOption[];
+}
+export interface PsCascaderInputProps {
+    className?: string;
+    disabled?: boolean;
+    groups: PsCascaderGroup[];
+    helperText?: string;
+    hideLabel?: boolean;
+    label: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    value: string;
+}
+export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCascaderInput = 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_icons_1 = require("@pallasoft/ps-icons");
+const react_aria_components_1 = require("react-aria-components");
+const ps_cascader_service_1 = require("../services/ps-cascader-service");
+const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', searchPlaceholder = 'Search', value, }) => {
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [activeGroupKey, setActiveGroupKey] = (0, react_1.useState)(null);
+    const selected = (0, react_1.useMemo)(() => ps_cascader_service_1.PsCascaderService.findSelected(groups, value), [groups, value]);
+    const matches = (0, react_1.useMemo)(() => ps_cascader_service_1.PsCascaderService.search(groups, query), [groups, query]);
+    const activeGroup = (0, react_1.useMemo)(() => {
+        const key = activeGroupKey
+            ? activeGroupKey
+            : selected
+                ? selected.group.key
+                : groups.length > 0
+                    ? groups[0].key
+                    : null;
+        return groups.find((group) => group.key === key) ?? null;
+    }, [activeGroupKey, groups, selected]);
+    const open = (nextOpen) => {
+        setIsOpen(nextOpen);
+        if (!nextOpen)
+            return;
+        setQuery('');
+        setActiveGroupKey(selected ? selected.group.key : null);
+    };
+    const select = (nextValue, close) => {
+        onChange(nextValue);
+        close();
+    };
+    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.value === value
+            ? 'bg-primary/10 text-ink'
+            : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), 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));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label block', children: label }), (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.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 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
+                                                        ? 'bg-mist text-ink'
+                                                        : '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 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
+                                                        ? activeGroup.options.map((option) => renderOption(option, null, close))
+                                                        : null] })] })) : ((0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar max-h-72 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: "No matches." })) : (matches.map((match) => renderOption(match.option, match.group.label, close))) }))] })) }) })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper mt-2 block', children: helperText }) : null] }));
+};
+exports.PsCascaderInput = PsCascaderInput;

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

@@ -8,9 +8,9 @@ const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_color_input_config_1 = require("../constants/ps-color-input-config");
 const PsColorInput = ({ className, helperText, label, onChange, swatches = [...ps_color_input_config_1.PsColorInputConfig.swatches], value, }) => {
     const labelId = (0, react_1.useId)();
+    const swatchesId = (0, react_1.useId)();
     const [draft, setDraft] = (0, react_1.useState)(value);
     const normalised = value.toUpperCase();
-    const isCustom = value !== '' && !swatches.some((swatch) => swatch.toUpperCase() === normalised);
     (0, react_1.useEffect)(() => {
         setDraft(value);
     }, [value]);
@@ -21,14 +21,14 @@ const PsColorInput = ({ className, helperText, label, onChange, swatches = [...p
         else
             setDraft(value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', id: labelId, children: label }), (0, jsx_runtime_1.jsxs)("div", { "aria-labelledby": labelId, className: 'flex flex-wrap items-center gap-2', role: 'radiogroup', children: [swatches.map((swatch) => {
-                        const isSelected = swatch.toUpperCase() === normalised;
-                        return ((0, jsx_runtime_1.jsx)("button", { "aria-checked": isSelected, "aria-label": swatch, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex h-8 w-8 items-center justify-center rounded-full text-white ring-offset-2 ring-offset-surface transition-shadow', isSelected ? 'ring-2 ring-ink/70' : 'hover:ring-2 hover:ring-ink/25'), onClick: () => onChange(swatch.toUpperCase()), role: 'radio', style: { backgroundColor: swatch }, type: 'button', children: isSelected ? ((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 }, swatch));
-                    }), (0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring relative flex h-8 w-8 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-dashed border-line text-ink/60 ring-offset-2 ring-offset-surface hover:border-primary/60 hover:text-ink', isCustom ? 'border-solid ring-2 ring-ink/70' : ''), style: isCustom ? { backgroundColor: value } : undefined, title: 'Custom colour', children: [isCustom ? null : ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Plus })), (0, jsx_runtime_1.jsx)("input", { "aria-label": 'Custom colour', className: 'absolute inset-0 cursor-pointer opacity-0', onChange: (event) => onChange(event.target.value.toUpperCase()), type: 'color', value: value === '' ? '#000000' : value })] }), (0, jsx_runtime_1.jsx)("input", { "aria-label": `${label} hex`, className: 'ps-input-control ps-focus-ring h-8 w-28 rounded-full px-3 py-0 font-mono text-xs uppercase', maxLength: 7, onBlur: (event) => commit(event.target.value), onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
-                            if (event.key === 'Enter') {
-                                event.preventDefault();
-                                commit(draft);
-                            }
-                        }, placeholder: '#000000', value: draft })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', id: labelId, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-4 rounded-ps-control border border-line bg-surface p-4', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)("label", { className: 'ps-focus-ring relative h-11 w-11 shrink-0 cursor-pointer overflow-hidden rounded-ps-control border border-line ring-offset-2 ring-offset-surface', style: { backgroundColor: value === '' ? 'transparent' : value }, title: 'Pick a colour', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": `${label} picker`, className: 'absolute inset-0 cursor-pointer opacity-0', onChange: (event) => onChange(event.target.value.toUpperCase()), type: 'color', value: value === '' ? '#000000' : value }) }), (0, jsx_runtime_1.jsx)("input", { "aria-label": `${label} hex`, className: 'ps-input-control ps-focus-ring h-11 min-w-0 flex-1 font-mono text-sm uppercase', maxLength: 7, onBlur: (event) => commit(event.target.value), onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === 'Enter') {
+                                        event.preventDefault();
+                                        commit(draft);
+                                    }
+                                }, placeholder: '#000000', value: draft })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2 border-t border-line pt-4', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', id: swatchesId, children: "Presets" }), (0, jsx_runtime_1.jsx)("div", { "aria-labelledby": swatchesId, className: 'flex flex-wrap gap-2', role: 'radiogroup', children: swatches.map((swatch) => {
+                                    const isSelected = swatch.toUpperCase() === normalised;
+                                    return ((0, jsx_runtime_1.jsx)("button", { "aria-checked": isSelected, "aria-label": swatch, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex h-8 w-8 items-center justify-center rounded-full text-white ring-offset-2 ring-offset-surface transition-shadow', isSelected ? 'ring-2 ring-ink/70' : 'hover:ring-2 hover:ring-ink/25'), onClick: () => onChange(swatch.toUpperCase()), role: 'radio', style: { backgroundColor: swatch }, type: 'button', children: isSelected ? ((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 }, swatch));
+                                }) })] })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsColorInput = PsColorInput;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/ps-cascader-input';
 export * from './components/ps-checkbox';
 export * from './components/ps-color-input';
 export * from './components/ps-combobox-input';

package/dist/index.js

@@ -14,6 +14,7 @@ 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-cascader-input"), exports);
 __exportStar(require("./components/ps-checkbox"), exports);
 __exportStar(require("./components/ps-color-input"), exports);
 __exportStar(require("./components/ps-combobox-input"), exports);

package/dist/services/ps-cascader-service.d.ts

@@ -0,0 +1,9 @@
+import type { PsCascaderGroup, PsCascaderOption } from '../components/ps-cascader-input';
+export interface PsCascaderMatch {
+    group: PsCascaderGroup;
+    option: PsCascaderOption;
+}
+export declare class PsCascaderService {
+    static findSelected(groups: PsCascaderGroup[], value: string): PsCascaderMatch | null;
+    static search(groups: PsCascaderGroup[], query: string): PsCascaderMatch[];
+}

package/dist/services/ps-cascader-service.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCascaderService = void 0;
+class PsCascaderService {
+    static findSelected(groups, value) {
+        if (value === '')
+            return null;
+        for (const group of groups) {
+            const option = group.options.find((item) => item.value === value);
+            if (option)
+                return { group, option };
+        }
+        return null;
+    }
+    static search(groups, query) {
+        const term = query.trim().toLowerCase();
+        if (term === '')
+            return [];
+        return groups.flatMap((group) => group.options
+            .filter((option) => option.label.toLowerCase().includes(term) ||
+            group.label.toLowerCase().includes(term) ||
+            (option.description ? option.description.toLowerCase().includes(term) : false))
+            .map((option) => ({ group, option })));
+    }
+}
+exports.PsCascaderService = PsCascaderService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.6.1",
+	"version": "1.8.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",