@ilo-org/react 0.7.7 → 0.8.0

package/lib/cjs/components/index.js

@@ -4,9 +4,9 @@ var components_Accordion_AccordionButton = require('./Accordion/AccordionButton.
 var components_Accordion_AccordionPanel = require('./Accordion/AccordionPanel.js');
 var components_Accordion_AccordionItem = require('./Accordion/AccordionItem.js');
 var components_Accordion_Accordion = require('./Accordion/Accordion.js');
+var components_Form_Form = require('./Form/Form.js');
 var components_Collapse_Collapse = require('./Collapse/Collapse.js');
 var components_Empty_Empty = require('./Empty/Empty.js');
-var components_FormGroup_FormGroup = require('./FormGroup/FormGroup.js');
 var components_Image_Image = require('./Image/Image.js');
 var components_Loading_Loading = require('./Loading/Loading.js');
 var components_Radio_Radio = require('./Radio/Radio.js');
@@ -21,10 +21,10 @@ require('../TagCtx-929c7753.js');
 var components_Button_Button = require('./Button/Button.js');
 var components_ContextMenu_ContextMenu = require('./ContextMenu/ContextMenu.js');
 var components_Fieldset_Fieldset = require('./Fieldset/Fieldset.js');
-var components_Input_Input = require('./Input/Input.js');
 var components_Notification_Notification = require('./Notification/Notification.js');
 var components_ReadMore_ReadMore = require('./ReadMore/ReadMore.js');
 var components_Textarea_Textarea = require('./Textarea/Textarea.js');
+require('./Textarea/index.js');
 var components_Callout_Callout = require('./Callout/Callout.js');
 require('./Callout/index.js');
 var components_Credit_Credit = require('./Credit/Credit.js');
@@ -35,17 +35,15 @@ var components_NumberPicker_NumberPicker = require('./NumberPicker/NumberPicker.
 var components_RichText_RichText = require('./RichText/RichText.js');
 var components_Tooltip_Tooltip = require('./Tooltip/Tooltip.js');
 var components_Checkbox_Checkbox = require('./Checkbox/Checkbox.js');
+require('./Checkbox/index.js');
 var components_DatePicker_DatePicker = require('./DatePicker/DatePicker.js');
-var components_Form_Form = require('./Form/Form.js');
 var components_Hero_Hero = require('./Hero/Hero.js');
 require('./SocialMedia/index.js');
 var components_LinkList_LinkList = require('./LinkList/LinkList.js');
 var components_Pagination_Pagination = require('./Pagination/Pagination.js');
 var components_SearchField_SearchField = require('./SearchField/SearchField.js');
 var components_Video_Video = require('./Video/Video.js');
-var components_ChoiceGroup_ChoiceGroup = require('./ChoiceGroup/ChoiceGroup.js');
 var components_Dropdown_Dropdown = require('./Dropdown/Dropdown.js');
-var components_FormElement_FormElement = require('./FormElement/FormElement.js');
 var components_Icon_Icon = require('./Icon/Icon.js');
 var components_List_List = require('./List/List.js');
 require('../ListCtx-7db7fe04.js');
@@ -68,8 +66,13 @@ require('../utils/getDefaultDimensionValue.js');
 require('../css-9c93400b.js');
 require('../utils/transitionEndListener.js');
 require('../utils/triggerBrowserReflow.js');
+require('./FormControl/FormControl.js');
+require('nanoid');
+require('../hooks/usePrevious.js');
 require('./Hero/HeroCard.js');
 require('./SocialMedia/SocialMedia.js');
+require('./Input/Input.js');
+require('./FormElement/FormElement.js');
 require('../VideoPlayer-d576de50.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');
@@ -83,9 +86,9 @@ exports.AccordionButton = components_Accordion_AccordionButton;
 exports.AccordionPanel = components_Accordion_AccordionPanel;
 exports.AccordionItem = components_Accordion_AccordionItem;
 exports.Accordion = components_Accordion_Accordion;
+exports.Form = components_Form_Form;
 exports.Collapse = components_Collapse_Collapse;
 exports.Empty = components_Empty_Empty;
-exports.FormGroup = components_FormGroup_FormGroup;
 exports.Image = components_Image_Image;
 exports.Loading = components_Loading_Loading;
 exports.Radio = components_Radio_Radio;
@@ -93,8 +96,7 @@ exports.Tag = components_Tag_Tag;
 exports.GlobalProvider = components_GlobalProvider_GlobalProvider;
 exports.Button = components_Button_Button;
 exports.ContextMenu = components_ContextMenu_ContextMenu;
-exports.Fieldset = components_Fieldset_Fieldset;
-exports.Input = components_Input_Input;
+exports.Fieldset = components_Fieldset_Fieldset.default;
 exports.Notification = components_Notification_Notification;
 exports.ReadMore = components_ReadMore_ReadMore;
 exports.Textarea = components_Textarea_Textarea;
@@ -108,15 +110,12 @@ exports.RichText = components_RichText_RichText;
 exports.Tooltip = components_Tooltip_Tooltip;
 exports.Checkbox = components_Checkbox_Checkbox;
 exports.DatePicker = components_DatePicker_DatePicker;
-exports.Form = components_Form_Form;
 exports.Hero = components_Hero_Hero;
 exports.LinkList = components_LinkList_LinkList;
 exports.Pagination = components_Pagination_Pagination;
 exports.SearchField = components_SearchField_SearchField;
 exports.Video = components_Video_Video;
-exports.ChoiceGroup = components_ChoiceGroup_ChoiceGroup;
 exports.Dropdown = components_Dropdown_Dropdown;
-exports.FormElement = components_FormElement_FormElement;
 exports.Icon = components_Icon_Icon;
 exports.List = components_List_List;
 exports.Profile = components_Profile_Profile;

package/lib/cjs/hooks/usePrevious.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var require$$0 = require('react');
+
+// This code was shamelessly borrowed from the blog post
+// "How to access previous props or state with React Hooks" by
+// Ohans Emmanuel, published on LogRocket May 11, 2023
+// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
+function usePrevious(value) {
+    const ref = require$$0.useRef();
+    require$$0.useEffect(() => {
+        ref.current = value; //assign the value of ref to the argument
+    }, [value]); //this code will run when the value of 'value' changes
+    return ref.current; //in the end, return the current ref value.
+}
+
+exports.default = usePrevious;
+exports.usePrevious = usePrevious;

package/lib/cjs/index.js

@@ -4,9 +4,9 @@ var components_Accordion_AccordionButton = require('./components/Accordion/Accor
 var components_Accordion_AccordionPanel = require('./components/Accordion/AccordionPanel.js');
 var components_Accordion_AccordionItem = require('./components/Accordion/AccordionItem.js');
 var components_Accordion_Accordion = require('./components/Accordion/Accordion.js');
+var components_Form_Form = require('./components/Form/Form.js');
 var components_Collapse_Collapse = require('./components/Collapse/Collapse.js');
 var components_Empty_Empty = require('./components/Empty/Empty.js');
-var components_FormGroup_FormGroup = require('./components/FormGroup/FormGroup.js');
 var components_Image_Image = require('./components/Image/Image.js');
 var components_Loading_Loading = require('./components/Loading/Loading.js');
 var components_Radio_Radio = require('./components/Radio/Radio.js');
@@ -21,10 +21,10 @@ require('./TagCtx-929c7753.js');
 var components_Button_Button = require('./components/Button/Button.js');
 var components_ContextMenu_ContextMenu = require('./components/ContextMenu/ContextMenu.js');
 var components_Fieldset_Fieldset = require('./components/Fieldset/Fieldset.js');
-var components_Input_Input = require('./components/Input/Input.js');
 var components_Notification_Notification = require('./components/Notification/Notification.js');
 var components_ReadMore_ReadMore = require('./components/ReadMore/ReadMore.js');
 var components_Textarea_Textarea = require('./components/Textarea/Textarea.js');
+require('./components/Textarea/index.js');
 var components_Callout_Callout = require('./components/Callout/Callout.js');
 require('./components/Callout/index.js');
 var components_Credit_Credit = require('./components/Credit/Credit.js');
@@ -35,17 +35,15 @@ var components_NumberPicker_NumberPicker = require('./components/NumberPicker/Nu
 var components_RichText_RichText = require('./components/RichText/RichText.js');
 var components_Tooltip_Tooltip = require('./components/Tooltip/Tooltip.js');
 var components_Checkbox_Checkbox = require('./components/Checkbox/Checkbox.js');
+require('./components/Checkbox/index.js');
 var components_DatePicker_DatePicker = require('./components/DatePicker/DatePicker.js');
-var components_Form_Form = require('./components/Form/Form.js');
 var components_Hero_Hero = require('./components/Hero/Hero.js');
 require('./components/SocialMedia/index.js');
 var components_LinkList_LinkList = require('./components/LinkList/LinkList.js');
 var components_Pagination_Pagination = require('./components/Pagination/Pagination.js');
 var components_SearchField_SearchField = require('./components/SearchField/SearchField.js');
 var components_Video_Video = require('./components/Video/Video.js');
-var components_ChoiceGroup_ChoiceGroup = require('./components/ChoiceGroup/ChoiceGroup.js');
 var components_Dropdown_Dropdown = require('./components/Dropdown/Dropdown.js');
-var components_FormElement_FormElement = require('./components/FormElement/FormElement.js');
 var components_Icon_Icon = require('./components/Icon/Icon.js');
 var components_List_List = require('./components/List/List.js');
 require('./ListCtx-7db7fe04.js');
@@ -68,9 +66,14 @@ require('./utils/getDefaultDimensionValue.js');
 require('./css-9c93400b.js');
 require('./utils/transitionEndListener.js');
 require('./utils/triggerBrowserReflow.js');
+require('./components/FormControl/FormControl.js');
+require('nanoid');
+require('./hooks/usePrevious.js');
 require('@ilo-org/icons-react');
 require('./components/Hero/HeroCard.js');
 require('./components/SocialMedia/SocialMedia.js');
+require('./components/Input/Input.js');
+require('./components/FormElement/FormElement.js');
 require('./VideoPlayer-d576de50.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');
@@ -83,9 +86,9 @@ exports.AccordionButton = components_Accordion_AccordionButton;
 exports.AccordionPanel = components_Accordion_AccordionPanel;
 exports.AccordionItem = components_Accordion_AccordionItem;
 exports.Accordion = components_Accordion_Accordion;
+exports.Form = components_Form_Form;
 exports.Collapse = components_Collapse_Collapse;
 exports.Empty = components_Empty_Empty;
-exports.FormGroup = components_FormGroup_FormGroup;
 exports.Image = components_Image_Image;
 exports.Loading = components_Loading_Loading;
 exports.Radio = components_Radio_Radio;
@@ -93,8 +96,7 @@ exports.Tag = components_Tag_Tag;
 exports.GlobalProvider = components_GlobalProvider_GlobalProvider;
 exports.Button = components_Button_Button;
 exports.ContextMenu = components_ContextMenu_ContextMenu;
-exports.Fieldset = components_Fieldset_Fieldset;
-exports.Input = components_Input_Input;
+exports.Fieldset = components_Fieldset_Fieldset.default;
 exports.Notification = components_Notification_Notification;
 exports.ReadMore = components_ReadMore_ReadMore;
 exports.Textarea = components_Textarea_Textarea;
@@ -108,15 +110,12 @@ exports.RichText = components_RichText_RichText;
 exports.Tooltip = components_Tooltip_Tooltip;
 exports.Checkbox = components_Checkbox_Checkbox;
 exports.DatePicker = components_DatePicker_DatePicker;
-exports.Form = components_Form_Form;
 exports.Hero = components_Hero_Hero;
 exports.LinkList = components_LinkList_LinkList;
 exports.Pagination = components_Pagination_Pagination;
 exports.SearchField = components_SearchField_SearchField;
 exports.Video = components_Video_Video;
-exports.ChoiceGroup = components_ChoiceGroup_ChoiceGroup;
 exports.Dropdown = components_Dropdown_Dropdown;
-exports.FormElement = components_FormElement_FormElement;
 exports.Icon = components_Icon_Icon;
 exports.List = components_List_List;
 exports.Profile = components_Profile_Profile;

package/lib/esm/components/Checkbox/Checkbox.js

@@ -1,32 +1,44 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
+import { useFieldsetError } from '../Fieldset/Fieldset.js';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
+import { usePrevious } from '../../hooks/usePrevious.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
+import 'nanoid';
 
-const Checkbox = ({ callback, disabled = false, error, grouped, helper, id, label, name, required, tooltip, }) => {
+const Checkbox = forwardRef((props, ref) => {
+    const { onChange, onBlur, disabled = false, error, id, name, required, defaultChecked = false, checked, value, } = props;
     const { prefix } = useGlobalSettings();
+    const { setHasError } = useFieldsetError();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
     const baseClass = `${prefix}--checkbox`;
-    const CheckboxClasses = classNames("", {
-        [baseClass]: true,
-        [`error`]: error,
+    const errorClass = `${baseClass}__error`;
+    const CheckboxClasses = classNames(baseClass, {
+        [errorClass]: error,
     });
-    const [checked, setChecked] = useState(false);
-    /**
-     * On change, if there is a callback, call it
-     */
+    const prevError = usePrevious(error);
+    useEffect(() => {
+        if (error !== prevError) {
+            setHasError(!!error);
+        }
+    }, [error, prevError, setHasError]);
     const handleChange = (e) => {
-        setChecked(e.target.checked);
-        if (callback) {
-            callback(e);
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsxs(Fragment, { children: [grouped && (jsx(FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "checkbox", className: CheckboxClasses, checked: checked }) }))), !grouped && (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "checkbox" }, { children: jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "checkbox", className: CheckboxClasses, checked: checked }) })) }))] }));
-};
+    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "checkbox", className: CheckboxClasses, defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }));
+});
+const LabelledCheckbox = forwardRef((props, ref) => {
+    const fieldId = props.id ? props.id : props.name;
+    const { style, inputStyle, className, labelPlacement = "end", labelSize = "small" } = props, rest = __rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className, labelPlacement: labelPlacement, labelSize: labelSize }, rest, { children: jsx(Checkbox, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { Checkbox as default };
+export { LabelledCheckbox as default };

package/lib/esm/components/Checkbox/index.js

@@ -1,11 +1,36 @@
 export { default as Checkbox } from './Checkbox.js';
+import 'tslib';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
+import '../../hooks/usePrevious.js';
+
+const NUMBER_CHECKBOXES = 3;
+const basic = {
+    label: "Checkbox",
+    className: "checkbox",
+    name: "checkbox",
+};
+const basicCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => (Object.assign(Object.assign({}, basic), { id: `checkbox-${i}` })));
+const checked = Object.assign(Object.assign({}, basic), { defaultChecked: true });
+const error = Object.assign(Object.assign({}, basic), { error: true });
+const errorCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => (Object.assign(Object.assign({}, error), { id: `checkbox-${i}` })));
+/**
+ * Sample prop definitions Checkbox's enumerable properties (imported in stories and test)
+ */
+const CheckboxArgs = {
+    basic,
+    basicCheckBoxes,
+    errorCheckBoxes,
+    checked,
+    error,
+};
+
+export { CheckboxArgs };

package/lib/esm/components/DatePicker/DatePicker.js

@@ -1,30 +1,35 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
-import 'react';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
 
-const DatePicker = ({ callback, disabled = false, enddata, error, helper, id, label, name, placeholder, range, required, tooltip, }) => {
+const DatePicker = forwardRef((props, ref) => {
+    const { onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, } = props;
     const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+    const inputClass = `${prefix}--input`;
     const baseClass = `${prefix}--datepicker`;
-    const DatePickerClasses = classNames("", {
-        [baseClass]: true,
+    const datePickerClasses = classNames(inputClass, baseClass, {
         [`error`]: error,
     });
-    /**
-     * On change, if there is a callback, call it
-     */
-    const handleChange = (e, picker) => {
-        if (callback) {
-            callback(e, picker);
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsxs(Fragment, { children: [!range && (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: `${id ? id : name}`, name: `${name}`, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) })), range && (jsxs("div", Object.assign({ className: `${baseClass}--range` }, { children: [jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "date" }, { children: jsx("input", { id: `${id ? id : name}`, name: `${name}`, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) }), jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: enddata === null || enddata === void 0 ? void 0 : enddata.name, label: enddata === null || enddata === void 0 ? void 0 : enddata.label, helper: enddata === null || enddata === void 0 ? void 0 : enddata.helper, error: enddata === null || enddata === void 0 ? void 0 : enddata.error, required: enddata === null || enddata === void 0 ? void 0 : enddata.required, tooltip: enddata === null || enddata === void 0 ? void 0 : enddata.tooltip, type: "date" }, { children: jsx("input", { id: (enddata === null || enddata === void 0 ? void 0 : enddata.id) ? enddata === null || enddata === void 0 ? void 0 : enddata.id : enddata === null || enddata === void 0 ? void 0 : enddata.name, name: enddata === null || enddata === void 0 ? void 0 : enddata.name, onChange: (e) => handleChange(e, "end"), disabled: enddata === null || enddata === void 0 ? void 0 : enddata.disabled, placeholder: enddata === null || enddata === void 0 ? void 0 : enddata.placeholder, required: enddata === null || enddata === void 0 ? void 0 : enddata.required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) })] })))] }));
-};
+    return (jsx("input", { ref: ref, type: "date", id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, className: datePickerClasses, max: max, min: min, step: step, "aria-describedby": ariaDescribedBy }));
+});
+const LabelledDatePicker = forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(DatePicker, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { DatePicker as default };
+export { LabelledDatePicker as default };

package/lib/esm/components/DatePicker/index.js

@@ -1,11 +1,11 @@
 export { default as DatePicker } from './DatePicker.js';
+import 'tslib';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';

package/lib/esm/components/Dropdown/Dropdown.js

@@ -1,33 +1,37 @@
+import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
 
-const Dropdown = ({ autocomplete, callback, disabled = false, error, helper, id, label, name, options, required, tooltip, value, }) => {
+const Dropdown = forwardRef((props, ref) => {
+    const { autocomplete, onChange, onBlur, disabled = false, error, id, name, options, required, value, form, multiple, selectSize, } = props;
     const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
     const baseClass = `${prefix}--dropdown`;
-    const dropdownClasses = classNames("", {
-        [baseClass]: true,
+    const dropdownClasses = classNames(baseClass, {
         [`error`]: error,
     });
     const [currentvalue, setValue] = useState(value);
-    /**
-     * On change, if there is a callback, call it
-     */
     const handleChange = (e) => {
         setValue(e.target.value);
-        if (callback) {
-            callback(e);
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "dropdown" }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsx("select", Object.assign({ id: id ? id : name, autoComplete: autocomplete, name: name, required: required, onChange: handleChange, disabled: disabled, className: dropdownClasses, value: currentvalue }, { children: options &&
-                        options.map((option, i) => (jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })) })) }));
-};
+    return (jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsx("select", Object.assign({ ref: ref, id: id ? id : name, autoComplete: autocomplete, name: name, required: required, onChange: handleChange, onBlur: onBlur, disabled: disabled, className: dropdownClasses, value: currentvalue, form: form, multiple: multiple, size: selectSize, "aria-describedby": ariaDescribedBy }, { children: options &&
+                options.map((option, i) => (jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })));
+});
+const LabelledDropdown = forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(Dropdown, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { Dropdown as default };
+export { LabelledDropdown as default };

package/lib/esm/components/Dropdown/index.js

@@ -1,11 +1,11 @@
 export { default as Dropdown } from './Dropdown.js';
+import 'tslib';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';

package/lib/esm/components/Fieldset/Fieldset.js

@@ -1,22 +1,42 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Children } from 'react';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Tooltip from '../Tooltip/Tooltip.js';
-import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'react-dom';
 
-const Fieldset = ({ children, className, fieldsetid, grouperror, grouphelper, grouptooltip, legend, }) => {
+// Create a new context for the error state
+const FieldsetErrorContext = createContext({
+    hasError: false,
+    setHasError: (value) => value,
+});
+// Custom hook to access the error state from the context
+const useFieldsetError = () => useContext(FieldsetErrorContext);
+const Fieldset = (_a) => {
+    var { children, className, legend, helper, tooltip, errorMessage, disabled = false, wrap = "nowrap", direction = "column" } = _a, props = __rest(_a, ["children", "className", "legend", "helper", "tooltip", "errorMessage", "disabled", "wrap", "direction"]);
     const { prefix } = useGlobalSettings();
+    const [hasError, setHasError] = useState(false);
     const baseClass = `${prefix}--fieldset`;
-    const fieldsetClasses = classNames(className, {
-        [baseClass]: true,
+    const wrapClass = `${baseClass}--wrap__${wrap}`;
+    const directionClass = `${baseClass}--direction__${direction}`;
+    const helperClass = `${baseClass}--helper`;
+    const errorClass = `${baseClass}__error`;
+    const disabledClass = `${baseClass}__disabled`;
+    const fieldsetClasses = classNames(className, baseClass, wrapClass, directionClass, {
+        [disabledClass]: disabled,
     });
-    return (jsxs("fieldset", Object.assign({ className: fieldsetClasses, id: fieldsetid ? fieldsetid : undefined }, { children: [legend && (jsxs("legend", Object.assign({ className: `${baseClass}--legend` }, { children: [legend, grouptooltip && (jsx(Tooltip, { className: `${baseClass}--legend--tooltip`, icon: true, label: grouptooltip, theme: "dark" }))] }))), grouphelper && !grouperror && (jsx("span", Object.assign({ className: `${baseClass}--helper` }, { children: grouphelper }))), grouperror && (jsx("span", Object.assign({ className: `${baseClass}--error` }, { children: grouperror }))), Children.map(children, (child, i) => {
-                var _a;
-                return (jsx(Fragment, { children: child && child.props && (jsxs("div", Object.assign({ className: `${baseClass}--input${((_a = child.props) === null || _a === void 0 ? void 0 : _a.type) ? "--" + child.props.type : ""} ${child.props.error ? "error" : ""}` }, { children: [child.props.label && (jsxs("label", Object.assign({ className: `${baseClass}--label`, htmlFor: child.props.id ? child.props.id : child.props.name }, { children: [child.props.label, child.props.tooltip && (jsx(Tooltip, { className: `${baseClass}--label--tooltip`, icon: true, label: child.props.tooltip, theme: "dark" }))] }))), child, child.props.helper && !child.props.error && (jsx("span", Object.assign({ className: `${baseClass}--helper` }, { children: child.props.helper }))), child.props.error && (jsx("span", Object.assign({ className: `${baseClass}--error` }, { children: child.props.error })))] }), `${baseClass}--input--${i}`)) }));
-            })] })));
+    const helperClasses = classNames(helperClass, {
+        [errorClass]: hasError,
+    });
+    const contextValue = {
+        hasError,
+        setHasError,
+    };
+    const showHelper = !!helper || hasError;
+    const helperMessage = hasError ? errorMessage : helper;
+    return (jsxs("fieldset", Object.assign({ className: fieldsetClasses }, props, { children: [legend || helper ? (jsxs("div", Object.assign({ className: `${baseClass}--legend-wrapper` }, { children: [legend && (jsxs("legend", Object.assign({ className: `${baseClass}--legend` }, { children: [legend, tooltip && (jsx(Tooltip, { className: `${baseClass}--legend--tooltip`, icon: true, label: tooltip, theme: "dark" }))] }))), showHelper && jsx("span", Object.assign({ className: helperClasses }, { children: helperMessage }))] }))) : null, jsx("div", Object.assign({ className: `${baseClass}--elements` }, { children: jsx(FieldsetErrorContext.Provider, Object.assign({ value: contextValue }, { children: children })) }))] })));
 };
 
-export { Fieldset as default };
+export { FieldsetErrorContext, Fieldset as default, useFieldsetError };

package/lib/esm/components/Fieldset/index.js

@@ -1,9 +1,9 @@
 export { default as Fieldset } from './Fieldset.js';
+import 'tslib';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';

package/lib/esm/components/FileUpload/FileUpload.js

@@ -1,33 +1,47 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { __rest } from 'tslib';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import require$$0, { useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
 
-const FileUpload = ({ callback, disabled = false, error, helper, id, label, multiple, name, placeholder, required, tooltip, }) => {
+function formatBytes(bytes, decimals = 2) {
+    if (!+bytes)
+        return "0 Bytes";
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, multiple, name, placeholder, required, }, ref) => {
     const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
     const baseClass = `${prefix}--file-upload`;
-    const FileUploadClasses = classNames("", {
-        [baseClass]: true,
+    const fileUploadClasses = classNames(baseClass, {
         [`error`]: error,
     });
-    const [uploadfiles, setUploadFiles] = useState([]);
-    /**
-     * On change, add file to listed files, if there is a callback, call it
-     */
+    const inputClass = `${baseClass}--input`;
+    const [uploadfiles, setUploadFiles] = useState(null);
     const handleChange = (e) => {
         const files = e.target.files;
         setUploadFiles(files);
-        if (callback) {
-            callback(e);
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsxs(Fieldset, Object.assign({ className: "file-upload" }, { children: [jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "file" }, { children: jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", className: FileUploadClasses, "data-label": placeholder }) })), uploadfiles.length > 0 && (jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: file.name }), `${baseClass}--list-item-${i}`))) })))] })));
-};
+    const inputId = id ? id : name;
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: fileUploadClasses }, { children: jsxs("label", Object.assign({ className: inputClass }, { children: [placeholder, jsx("input", { ref: ref, id: inputId, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", "data-label": placeholder, "aria-describedby": ariaDescribedBy })] })) })), uploadfiles && uploadfiles.length > 0 && (jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: `${file.name} (${formatBytes(file.size)})` }), `${baseClass}--list-item-${i}`))) })))] }));
+});
+const LabelledFileUpload = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(FileUpload, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { FileUpload as default };
+export { LabelledFileUpload as default };

package/lib/esm/components/FileUpload/index.js

@@ -1,11 +1,11 @@
 export { default as FileUpload } from './FileUpload.js';
+import 'tslib';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';