@indico-data/design-system 2.10.0 → 2.12.0

package/lib/index.esm.js

@@ -18636,48 +18636,81 @@ 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 ErrorList = ({ errorList, name }) => {
-    return (jsx("ul", { className: "error-list", id: `${name}-helper`, children: (errorList !== null && errorList !== void 0 ? errorList : []).map((error, index) => (jsx("li", { children: error }, index))) }));
+const DisplayFormError = ({ message }) => {
+    return jsx("p", { className: "form-errors", children: message });
 };
 
-const Input = (_a) => {
-    var { ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, className = '' } = _a, rest = __rest$1(_a, ["ref", "label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "iconName", "hasHiddenLabel", "isClearable", "className"]);
-    const hasErrors = errorList && errorList.length > 0;
+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"]);
+    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, required: isRequired, placeholder: placeholder, value: value, onChange: onChange, className: `input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`, "aria-invalid": hasErrors, "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(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
-};
+    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 Radio$2 = (_a) => {
-    var { ref, id, label, name, value, onChange, isDisabled } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled"]);
-    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "radio-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-radio-input-${name}` }, rest, { className: "radio-input", type: "radio", id: id, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label })), jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));
-};
+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"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "radio-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-radio-input-${name}`, className: "radio-input", type: "radio", id: id, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));
+});
 
-const Checkbox = (_a) => {
-    var { ref, id, label, name, value, onChange, isDisabled, isChecked = false } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
-    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}`, className: "checkbox-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
-};
+const Checkbox = e__default.forwardRef((_a, ref) => {
+    var { id, label, name, value, onChange, isDisabled, isChecked = false } = _a, rest = __rest$1(_a, ["id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}`, className: "checkbox-input", type: "checkbox", id: id, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
+});
 
-const Toggle$1 = (_a) => {
-    var { ref, id, label, name, value, onChange, isDisabled, isChecked } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
+const Toggle$1 = e__default.forwardRef((_a, ref) => {
+    var { id, label, name, value, onChange, isDisabled, isChecked } = _a, rest = __rest$1(_a, ["id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
     return (jsx("div", { className: "form-control", children: jsxs("div", { className: "toggle-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-toggle-input-${name}`, className: "toggle-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "switch" }), jsx("label", { className: 'toggle-label', htmlFor: id, children: label })] }) }));
-};
+});
 
-const Textarea = (_a) => {
-    var { ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["ref", "label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
-    const hasErrors = errorList && errorList.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, value: value, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, required: isRequired, placeholder: placeholder, onChange: onChange, className: `textarea ${hasErrors ? 'error' : ''}`, "aria-invalid": hasErrors, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)) }), hasErrors && jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
-};
+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 PasswordInput = (_a) => {
-    var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, hasShowPassword = true } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "hasHiddenLabel", "hasShowPassword"]);
-    const hasErrors = errorList && errorList.length > 0;
+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"]);
+    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({ "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, required: isRequired, placeholder: placeholder, value: value, onChange: onChange, className: `password-input ${hasErrors ? 'error' : ''} password-input--has-icon`, "aria-invalid": hasErrors, "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(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    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 OptionComponent = (_a) => {
+    var _b, _c, _d;
+    var props = __rest$1(_a, []);
+    return (jsx(components.Option, Object.assign({}, props, { children: jsxs("div", { className: "select__items", children: [jsx("div", { className: "select__item-value", children: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.label }), ((_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.detail) && jsx("div", { className: "select__item-detail", children: (_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.detail })] }) })));
+};
+const Select$1 = (_a) => {
+    var { classNamePrefix = 'select', className, components: customComponents } = _a, props = __rest$1(_a, ["classNamePrefix", "className", "components"]);
+    const defaultComponents = {
+        Option: OptionComponent,
+    };
+    const mergedComponents = Object.assign(Object.assign({}, defaultComponents), customComponents);
+    return (jsx(ReactSelect, Object.assign({ classNamePrefix: classNamePrefix, className: y$1('select-wrapper', className), components: mergedComponents }, props)));
+};
+
+const Form = (_a) => {
+    var { children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel } = _a, rest = __rest$1(_a, ["children", "onSubmit", "action", "method", "target", "autocomplete", "noValidate", "enctype", "rel"]);
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Prevent the default form submission
+        // Create a FormData object, passing in the form (e.currentTarget)
+        const formData = new FormData(e.currentTarget);
+        // Convert FormData into a plain object
+        const formObject = Array.from(formData.entries()).reduce((obj, [key, value]) => {
+            obj[key] = value.toString();
+            return obj;
+        }, {});
+        // Call the onSubmit prop, if provided, passing the form object instead of the event
+        if (onSubmit) {
+            onSubmit(formObject); // Modified to pass formObject instead of e
+        }
+    };
+    return (jsx("form", Object.assign({ onSubmit: handleSubmit, action: action, method: method, target: target, autoComplete: autocomplete, noValidate: noValidate, encType: enctype, rel: rel }, rest, { children: children })));
 };
 
 const StyledAccordion = styled.details `
@@ -41501,5 +41534,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, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, 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, Shrug, SingleCombobox, 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, 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, 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 };
 //# sourceMappingURL=index.esm.js.map