@indico-data/design-system 2.18.0 → 2.19.0

package/lib/index.css

@@ -982,17 +982,6 @@
   color: var(--pf-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1252,17 +1241,6 @@
   color: var(--pf-textarea-help-text-color);
   font-size: var(--pf-font-size-subtitle2);
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1361,17 +1339,6 @@
   color: var(--pf-password-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }

package/lib/index.d.ts

@@ -919,23 +919,28 @@ declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps)
 
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
 
-interface InputProps {
+interface LabelProps {
     label: string;
     name: string;
+    isRequired?: boolean;
+}
+interface WithLabelProps extends LabelProps {
+    hasHiddenLabel?: boolean;
+}
+
+interface InputProps extends WithLabelProps {
     value?: string | undefined;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     iconName?: IconName$1;
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
 }
-declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const LabeledInput: React$1.ForwardRefExoticComponent<Omit<InputProps & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface RadioProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
@@ -975,18 +980,14 @@ interface ToggleProps {
 }
 declare const Toggle: React$1.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-interface TextareaProps {
+interface TextareaProps extends WithLabelProps {
     ref?: React$1.LegacyRef<HTMLTextAreaElement>;
-    label: string;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     value?: string | undefined;
     onChange: (e: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     rows?: number;
     cols?: number;
     readonly?: boolean;
@@ -996,24 +997,20 @@ interface TextareaProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+declare const LabeledTextarea: React$1.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface PasswordInputProps {
+interface PasswordInputProps extends WithLabelProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
-    label: string;
     value?: string | undefined;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface SelectProps<OptionType extends SelectOption> extends Props$r<OptionType> {
     options: OptionType[];
@@ -1052,4 +1049,4 @@ type Props = {
 };
 declare const Card: React$1.FC<Props>;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -982,17 +982,6 @@
   color: var(--pf-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1252,17 +1241,6 @@
   color: var(--pf-textarea-help-text-color);
   font-size: var(--pf-font-size-subtitle2);
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1361,17 +1339,6 @@
   color: var(--pf-password-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }

package/lib/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import styled, { css as css$1, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
 import * as e from 'react';
-import e__default, { cloneElement, useState, useEffect, useRef, useCallback, useContext, useMemo, createContext, forwardRef, useLayoutEffect, useImperativeHandle } from 'react';
+import e__default, { cloneElement, forwardRef, useState, useEffect, useRef, useCallback, useContext, useMemo, createContext, useLayoutEffect, useImperativeHandle } from 'react';
 import ReactSelect, { components } from 'react-select';
 import { Link } from 'react-router-dom';
 import * as ReactDOM from 'react-dom';
@@ -18589,22 +18589,38 @@ const Table$1 = (props) => {
     return (jsx("div", { className: "table-wrapper", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: `${striped ? 'pf__table--striped' : ''}`, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
 };
 
-const Label = ({ label, name, isRequired, hasHiddenLabel }) => {
-    return (jsx("div", { "data-testid": `${name}-testId`, className: `form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`, children: jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
+const Label = ({ label, name, isRequired }) => {
+    return (jsx("div", { "data-testid": `${name}-testId`, className: `form-label`, children: jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
 };
+// HOC to add common label functionality to components
+function withLabel(WrappedComponent) {
+    const WithLabelComponent = (_a, ref) => {
+        var { label, hasHiddenLabel = false, name, isRequired } = _a, rest = __rest$1(_a, ["label", "hasHiddenLabel", "name", "isRequired"]);
+        const ariaLabel = hasHiddenLabel
+            ? { 'aria-label': isRequired ? `${label} (required)` : label }
+            : {};
+        return (jsxs("div", { className: "form-control", children: [!hasHiddenLabel && jsx(Label, { label: label, name: name, isRequired: isRequired }), jsx(WrappedComponent, Object.assign({}, rest, { id: name, name: name }, ariaLabel, { ref: ref }))] }));
+    };
+    return forwardRef(WithLabelComponent);
+}
 
 const DisplayFormError = ({ message }) => {
     return jsx("p", { className: "form-errors", children: message });
 };
 
 const Input = e__default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, hasHiddenLabel, className } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "hasHiddenLabel", "className"]);
+    var { name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange({ target: { value: '' } });
     };
-    return (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: `input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)), isClearable && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    const inputClasses = y$1('input', {
+        error: hasErrors,
+        'input--has-icon': iconName,
+    }, className);
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
+const LabeledInput = withLabel(Input);
 
 const Radio$2 = e__default.forwardRef((_a, ref) => {
     var { id, label, name, value, onChange, isDisabled } = _a, rest = __rest$1(_a, ["id", "label", "name", "value", "onChange", "isDisabled"]);
@@ -18624,18 +18640,24 @@ const Toggle$1 = e__default.forwardRef((_a, ref) => {
 const Textarea = e__default.forwardRef((_a, ref) => {
     var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
-    return (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: `textarea ${hasErrors ? 'error' : ''}`, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    const textareaClasses = y$1('textarea', { error: hasErrors });
+    return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
+const LabeledTextarea = withLabel(Textarea);
 
 const PasswordInput = e__default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, hasShowPassword = true } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "hasShowPassword"]);
+    var { name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const [showPassword, setShowPassword] = useState(false);
     const handleShowPassword = () => {
         setShowPassword((prevShowPassword) => !prevShowPassword);
     };
-    return (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: `password-input ${hasErrors ? 'error' : ''} password-input--has-icon`, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    const inputClasses = y$1('password-input', {
+        error: hasErrors,
+    }, 'password-input--has-icon');
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
+const LabeledPasswordInput = withLabel(PasswordInput);
 
 const OptionComponent = (_a) => {
     var _b, _c, _d;
@@ -41053,5 +41075,5 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map