@pallasoft/ps-input-components 1.1.1 → 1.2.0

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

@@ -3,10 +3,12 @@ export interface PsDateInputProps {
     defaultValue?: string;
     disabled?: boolean;
     helperText?: string;
+    /** Keeps the label for screen readers only, for inputs laid out under a shared column header. */
+    hideLabel?: boolean;
     label: string;
     name?: string;
     onChange?: (value: string) => void;
     required?: boolean;
     value?: string;
 }
-export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }: PsDateInputProps) => import("react").JSX.Element;
+export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, value, }: PsDateInputProps) => import("react").JSX.Element;

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

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDateInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsDateInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring mt-2 min-h-11 w-full text-sm font-semibold', defaultValue: value === undefined ? defaultValue : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, type: 'date', value: value }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', hideLabel ? '' : 'mt-2'), defaultValue: value === undefined ? defaultValue : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, type: 'date', value: value }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 exports.PsDateInput = PsDateInput;

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

@@ -8,6 +8,8 @@ export interface PsSelectInputProps {
     defaultValue?: string;
     disabled?: boolean;
     helperText?: string;
+    /** Keeps the label for screen readers only, for inputs laid out under a shared column header. */
+    hideLabel?: boolean;
     label: string;
     name?: string;
     onChange?: (value: string) => void;
@@ -16,4 +18,4 @@ export interface PsSelectInputProps {
     required?: boolean;
     value?: string;
 }
-export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;
+export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;

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

@@ -5,7 +5,7 @@ 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 ps_select_input_service_1 = require("../services/ps-select-input-service");
-const PsSelectInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: 'relative mt-2 block', children: [(0, jsx_runtime_1.jsxs)("select", { className: 'ps-input-control ps-focus-ring min-h-11 w-full appearance-none pr-10 text-left font-semibold disabled:cursor-not-allowed disabled:opacity-60', defaultValue: value === undefined
+const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'relative block' : 'relative mt-2 block', children: [(0, jsx_runtime_1.jsxs)("select", { className: 'ps-input-control ps-focus-ring min-h-11 w-full appearance-none pr-10 text-left font-semibold disabled:cursor-not-allowed disabled:opacity-60', defaultValue: value === undefined
                         ? ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options)
                         : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, value: value, children: [options.length === 0 || !defaultValue ? ((0, jsx_runtime_1.jsx)("option", { disabled: true, value: '', children: placeholder })) : null, options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value)))] }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', iconKey: ps_icons_1.PsIconKey.Chevron, className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary' })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 exports.PsSelectInput = PsSelectInput;

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

@@ -1,6 +1,8 @@
 import type { InputHTMLAttributes } from 'react';
 export interface PsTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
     helperText?: string;
+    /** Keeps the label for screen readers only, for inputs laid out under a shared column header. */
+    hideLabel?: boolean;
     label: string;
 }
-export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
+export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;

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

@@ -4,12 +4,12 @@ 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 PsTextInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }) => {
+const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
     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, label: label, name: name, onChange: (nextValue) => onChange?.({
+        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 },
             }), required: required, value: typeof value === 'string' ? value : undefined }));
     }
-    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsTextInput = PsTextInput;

package/package.json

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