@pallasoft/ps-input-components 1.3.0 → 1.4.1

package/dist/components/ps-checkbox.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface PsCheckboxProps {
+    children?: ReactNode;
+    className?: string;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+    isSelected: boolean;
+    label: string;
+    name?: string;
+    onChange: (isSelected: boolean) => void;
+    value?: string;
+}
+export declare const PsCheckbox: ({ children, className, isDisabled, isIndeterminate, isSelected, label, name, onChange, value, }: PsCheckboxProps) => import("react").JSX.Element;

package/dist/components/ps-checkbox.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCheckbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isSelected, label, name, onChange, value, }) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { "aria-label": children ? undefined : label, className: ps_design_system_1.PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
+                    ? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
+                    : 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? ((0, jsx_runtime_1.jsx)("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: ps_icons_1.PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));
+exports.PsCheckbox = PsCheckbox;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDateInput = 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_datepicker_1 = __importDefault(require("react-datepicker"));
@@ -14,14 +15,26 @@ const ps_date_input_service_1 = require("../services/ps-date-input-service");
 const ps_calendar_header_1 = require("./ps-calendar-header");
 const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
     const inputId = (0, react_1.useId)();
+    const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    (0, react_1.useEffect)(() => {
+        const existing = document.getElementById(portalId);
+        const container = existing ? existing : document.createElement('div');
+        container.id = portalId;
+        container.style.position = 'relative';
+        container.style.zIndex = String(zIndex);
+        if (!existing)
+            document.body.appendChild(container);
+        return () => container.remove();
+    }, [portalId, zIndex]);
     const handleChange = (date) => {
         const nextValue = ps_date_input_service_1.PsDateInputService.format(date);
         if (value === undefined)
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: [...ps_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: ps_date_input_service_1.PsDateInputService.parseBound(max), minDate: ps_date_input_service_1.PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', portalId: ps_date_input_config_1.PsDateInputConfig.portalId, renderCustomHeader: (headerProps) => (0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps }), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (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-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), 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('block', className), children: [(0, jsx_runtime_1.jsx)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: [...ps_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: ps_date_input_service_1.PsDateInputService.parseBound(max), minDate: ps_date_input_service_1.PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps }), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (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-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsDateInput = PsDateInput;

package/dist/components/ps-multi-select-input.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsMultiSelectInput = 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");
@@ -10,6 +11,7 @@ const ps_select_option_item_1 = require("./ps-select-option-item");
 const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? [] : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const labelByValue = new Map(options.map((option) => [option.value, option.label]));
     const handleChange = (keys) => {
         const nextValue = keys.map((key) => String(key));
@@ -19,6 +21,6 @@ const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hid
     };
     return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, selectionMode: 'multiple', value: currentValue.filter((selected) => labelByValue.has(selected)), children: [hideLabel ? null : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center py-1.5 pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'flex min-w-0 flex-1 flex-wrap gap-1.5', children: ({ isPlaceholder }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (currentValue
                             .filter((selected) => labelByValue.has(selected))
-                            .map((selected) => ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex max-w-full items-center rounded-full bg-primary/12 px-2.5 py-0.5 text-xs font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: labelByValue.get(selected) }) }, 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 })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
+                            .map((selected) => ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex max-w-full items-center rounded-full bg-primary/12 px-2.5 py-0.5 text-xs font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: labelByValue.get(selected) }) }, 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 })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
 };
 exports.PsMultiSelectInput = PsMultiSelectInput;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSelectInput = 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");
@@ -11,6 +12,7 @@ const ps_select_option_item_1 = require("./ps-select-option-item");
 const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(() => ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options));
     const currentValue = value === undefined ? uncontrolledValue : value;
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const hasOption = options.some((option) => option.value === currentValue);
     const handleChange = (key) => {
         const nextValue = key === null ? '' : String(key);
@@ -18,6 +20,6 @@ const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabe
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { 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'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (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 })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { 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'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (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 })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
 };
 exports.PsSelectInput = PsSelectInput;

package/dist/index.d.ts

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

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-checkbox"), exports);
 __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.3.0",
+	"version": "1.4.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -29,8 +29,8 @@
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
-		"@pallasoft/ps-core-components": "^2.0.0",
-		"@pallasoft/ps-design-system": "^1.2.1",
+		"@pallasoft/ps-core-components": "^2.2.0",
+		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.2.0",
 		"@pallasoft/ps-utilities": "^2.0.0",
 		"react-aria-components": "^1.19.0",