@pallasoft/ps-input-components 1.11.0 → 1.12.0

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

@@ -14,6 +14,7 @@ export interface PsCascaderInputProps {
     groups: PsCascaderGroup[];
     helperText?: string;
     hideLabel?: boolean;
+    isLoading?: boolean;
     label: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -21,4 +22,4 @@ export interface PsCascaderInputProps {
     searchPlaceholder?: string;
     value: string;
 }
-export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;
+export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, isLoading, label, onChange, placeholder, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;

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

@@ -8,8 +8,11 @@ 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 ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     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)('');

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

@@ -4,6 +4,7 @@ export interface PsDateInputProps {
     disabled?: boolean;
     helperText?: string;
     hideLabel?: boolean;
+    isLoading?: boolean;
     label: string;
     max?: string;
     min?: string;
@@ -13,4 +14,4 @@ export interface PsDateInputProps {
     required?: boolean;
     value?: string;
 }
-export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder, required, value, }: PsDateInputProps) => import("react").JSX.Element;
+export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, max, min, name, onChange, placeholder, required, value, }: PsDateInputProps) => import("react").JSX.Element;

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

@@ -13,8 +13,11 @@ const react_datepicker_1 = __importDefault(require("react-datepicker"));
 const ps_date_input_config_1 = require("../constants/ps-date-input-config");
 const ps_date_input_service_1 = require("../services/ps-date-input-service");
 const ps_calendar_header_1 = require("./ps-calendar-header");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
+const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     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);

package/dist/components/ps-field-skeleton.d.ts

@@ -0,0 +1,7 @@
+export interface PsFieldSkeletonProps {
+    className?: string;
+    hideLabel?: boolean;
+    label: string;
+    rows?: number;
+}
+export declare const PsFieldSkeleton: ({ className, hideLabel, label, rows, }: PsFieldSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-field-skeleton.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFieldSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsFieldSkeleton = ({ className, hideLabel, label, rows = 1, }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-busy": 'true', className: 'block', role: 'status', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }), hideLabel ? null : (0, jsx_runtime_1.jsx)("span", { className: 'ps-skeleton mb-2 block h-2.5 w-24 rounded-full' }), (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton block w-full rounded-ps-control', rows > 1 ? 'min-h-24' : 'min-h-11', className) })] }));
+exports.PsFieldSkeleton = PsFieldSkeleton;

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

@@ -9,6 +9,7 @@ export interface PsSelectInputProps {
     disabled?: boolean;
     helperText?: string;
     hideLabel?: boolean;
+    isLoading?: boolean;
     label: string;
     name?: string;
     onChange?: (value: string) => void;
@@ -17,4 +18,4 @@ export interface PsSelectInputProps {
     required?: boolean;
     value?: string;
 }
-export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;
+export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;

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

@@ -8,9 +8,12 @@ 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_select_input_service_1 = require("../services/ps-select-input-service");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
 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 PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     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);

package/dist/components/ps-text-area-input.d.ts

@@ -2,6 +2,7 @@ import type { TextareaHTMLAttributes } from 'react';
 export interface PsTextAreaInputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     helperText?: string;
     hideLabel?: boolean;
+    isLoading?: boolean;
     label: string;
 }
-export declare const PsTextAreaInput: ({ className, helperText, hideLabel, label, required, rows, ...props }: PsTextAreaInputProps) => import("react").JSX.Element;
+export declare const PsTextAreaInput: ({ className, helperText, hideLabel, isLoading, label, required, rows, ...props }: PsTextAreaInputProps) => import("react").JSX.Element;

package/dist/components/ps-text-area-input.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTextAreaInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsTextAreaInput = ({ className, helperText, hideLabel, label, required, rows = 4, ...props }) => ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsx)("textarea", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const PsTextAreaInput = ({ className, helperText, hideLabel, isLoading = false, label, required, rows = 4, ...props }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label, rows: 3 })) : ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsx)("textarea", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 exports.PsTextAreaInput = PsTextAreaInput;

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

@@ -3,5 +3,6 @@ export interface PsTextInputProps extends InputHTMLAttributes<HTMLInputElement>
     helperText?: string;
     hideLabel?: boolean;
     label: string;
+    isLoading?: boolean;
 }
-export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
+export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, isLoading, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;

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

@@ -4,8 +4,11 @@ exports.PsTextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_date_input_1 = require("./ps-date-input");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
+const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, type, value, ...props }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     if (type === 'date') {
         return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
                 target: { name, value: nextValue },

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

@@ -5,8 +5,11 @@ import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
 import { PsCascaderService } from '../services/ps-cascader-service';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const [isOpen, setIsOpen] = useState(false);
     const [query, setQuery] = useState('');

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

@@ -7,8 +7,11 @@ import DatePicker from 'react-datepicker';
 import { PsDateInputConfig } from '../constants/ps-date-input-config';
 import { PsDateInputService } from '../services/ps-date-input-service';
 import { PsCalendarHeader } from './ps-calendar-header';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
+export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const inputId = useId();
     const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);

package/dist/esm/components/ps-field-skeleton.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsFieldSkeleton = ({ className, hideLabel, label, rows = 1, }) => (_jsxs("div", { "aria-busy": 'true', className: 'block', role: 'status', children: [_jsx("span", { className: 'sr-only', children: label }), hideLabel ? null : _jsx("span", { className: 'ps-skeleton mb-2 block h-2.5 w-24 rounded-full' }), _jsx("span", { className: PallasoftClassNameService.merge('ps-skeleton block w-full rounded-ps-control', rows > 1 ? 'min-h-24' : 'min-h-11', className) })] }));

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

@@ -5,9 +5,12 @@ import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Button, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
 import { PsSelectInputService } from '../services/ps-select-input-service';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
 import { PsSelectOptionItem } from './ps-select-option-item';
-export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const [uncontrolledValue, setUncontrolledValue] = useState(() => PsSelectInputService.getDefaultValue(defaultValue, options));
     const currentValue = value === undefined ? uncontrolledValue : value;
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);

package/dist/esm/components/ps-text-area-input.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsTextAreaInput = ({ className, helperText, hideLabel, label, required, rows = 4, ...props }) => (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("textarea", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+export const PsTextAreaInput = ({ className, helperText, hideLabel, isLoading = false, label, required, rows = 4, ...props }) => isLoading ? (_jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label, rows: 3 })) : (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("textarea", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));

package/dist/esm/components/ps-text-input.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsDateInput } from './ps-date-input';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
+export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, type, value, ...props }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     if (type === 'date') {
         return (_jsx(PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
                 target: { name, value: nextValue },

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
 export * from './components/ps-file-picker';
+export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
 export * from './components/ps-file-picker';
+export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';

package/dist/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);
 __exportStar(require("./components/ps-file-picker"), exports);
+__exportStar(require("./components/ps-field-skeleton"), exports);
 __exportStar(require("./components/ps-form-control"), exports);
 __exportStar(require("./components/ps-multi-select-input"), exports);
 __exportStar(require("./components/ps-select-input"), exports);

package/package.json

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