@ilo-org/react 0.7.7 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @ilo-org/react
 
+## 0.8.0
+
+### Minor Changes
+
+- 897fe5766: This release includes refactored form components and styles. Whereas before, the Form component took all of the props for all of the form components itself and determined which to render based on data, this release exposes all of the individual form components directly to the developer. The Form component is refactored as a simple wrapper around an HTML form element, which includes a `theme` prop modifying the label and text colors for use on dark backgrounds. Otherwise, it simply provides a layout for different form elements. The Fieldset is used as a layout wrapper to group multiple related form components together, especially theRadio and Checkbox, for which it can also handle error messages. All form components provide access to the underlying form element (usually an `input`) via a `ref` prop.
+
+### Patch Changes
+
+- 897fe5766: fix label/icon misalignment issue
+- Updated dependencies [897fe5766]
+- Updated dependencies [897fe5766]
+- Updated dependencies [897fe5766]
+  - @ilo-org/styles@0.9.0
+
+## 0.7.8
+
+### Patch Changes
+
+- Updated dependencies [58bc8ff88]
+- Updated dependencies [58a708c3a]
+  - @ilo-org/styles@0.8.4
+
 ## 0.7.7
 
 ### Patch Changes

package/lib/cjs/components/Checkbox/Checkbox.js

@@ -1,34 +1,46 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
+var hooks_usePrevious = require('../../hooks/usePrevious.js');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
+require('nanoid');
 
-const Checkbox = ({ callback, disabled = false, error, grouped, helper, id, label, name, required, tooltip, }) => {
+const Checkbox = require$$0.forwardRef((props, ref) => {
+    const { onChange, onBlur, disabled = false, error, id, name, required, defaultChecked = false, checked, value, } = props;
     const { prefix } = hooks_useGlobalSettings();
+    const { setHasError } = components_Fieldset_Fieldset.useFieldsetError();
+    const formControlCtx = components_FormControl_FormControl.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] = require$$0.useState(false);
-    /**
-     * On change, if there is a callback, call it
-     */
+    const prevError = hooks_usePrevious.usePrevious(error);
+    require$$0.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [grouped && (jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "checkbox", className: CheckboxClasses, checked: checked }) }))), !grouped && (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "checkbox" }, { children: jsxRuntime.jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "checkbox", className: CheckboxClasses, checked: checked }) })) }))] }));
-};
+    return (jsxRuntime.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 = require$$0.forwardRef((props, ref) => {
+    const fieldId = props.id ? props.id : props.name;
+    const { style, inputStyle, className, labelPlacement = "end", labelSize = "small" } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className, labelPlacement: labelPlacement, labelSize: labelSize }, rest, { children: jsxRuntime.jsx(Checkbox, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = Checkbox;
+module.exports = LabelledCheckbox;

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

@@ -1,17 +1,39 @@
 'use strict';
 
 var components_Checkbox_Checkbox = require('./Checkbox.js');
+require('tslib');
 require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
-require('../FormElement/FormElement.js');
-
+require('../FormControl/FormControl.js');
+require('nanoid');
+require('../../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,
+};
 
 exports.Checkbox = components_Checkbox_Checkbox;
+exports.CheckboxArgs = CheckboxArgs;

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -1,32 +1,37 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
-require('react');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
 require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
 
-const DatePicker = ({ callback, disabled = false, enddata, error, helper, id, label, name, placeholder, range, required, tooltip, }) => {
+const DatePicker = require$$0.forwardRef((props, ref) => {
+    const { onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, } = props;
     const { prefix } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!range && (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: `${id ? id : name}`, name: `${name}`, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) })), range && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--range` }, { children: [jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "date" }, { children: jsxRuntime.jsx("input", { id: `${id ? id : name}`, name: `${name}`, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) }), jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_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: jsxRuntime.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 (jsxRuntime.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 = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(DatePicker, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = DatePicker;
+module.exports = LabelledDatePicker;

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

@@ -1,16 +1,16 @@
 'use strict';
 
 var components_DatePicker_DatePicker = require('./DatePicker.js');
+require('tslib');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Fieldset/Fieldset.js');
+require('../FormControl/FormControl.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
-require('../FormElement/FormElement.js');
 
 
 

package/lib/cjs/components/Dropdown/Dropdown.js

@@ -1,35 +1,39 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
 require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
 
-const Dropdown = ({ autocomplete, callback, disabled = false, error, helper, id, label, name, options, required, tooltip, value, }) => {
+const Dropdown = require$$0.forwardRef((props, ref) => {
+    const { autocomplete, onChange, onBlur, disabled = false, error, id, name, options, required, value, form, multiple, selectSize, } = props;
     const { prefix } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
     const baseClass = `${prefix}--dropdown`;
-    const dropdownClasses = classNames("", {
-        [baseClass]: true,
+    const dropdownClasses = classNames(baseClass, {
         [`error`]: error,
     });
     const [currentvalue, setValue] = require$$0.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 (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "dropdown" }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsxRuntime.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) => (jsxRuntime.jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })) })) }));
-};
+    return (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsxRuntime.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) => (jsxRuntime.jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })));
+});
+const LabelledDropdown = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(Dropdown, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = Dropdown;
+module.exports = LabelledDropdown;

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

@@ -1,16 +1,16 @@
 'use strict';
 
 var components_Dropdown_Dropdown = require('./Dropdown.js');
+require('tslib');
 require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
 require('../../GlobalCtx-97e4b433.js');
-require('../Fieldset/Fieldset.js');
+require('../FormControl/FormControl.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
-require('../FormElement/FormElement.js');
 
 
 

package/lib/cjs/components/Fieldset/Fieldset.js

@@ -1,24 +1,48 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.js');
-require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 require('react-dom');
 
-const Fieldset = ({ children, className, fieldsetid, grouperror, grouphelper, grouptooltip, legend, }) => {
+// Create a new context for the error state
+const FieldsetErrorContext = require$$0.createContext({
+    hasError: false,
+    setHasError: (value) => value,
+});
+// Custom hook to access the error state from the context
+const useFieldsetError = () => require$$0.useContext(FieldsetErrorContext);
+const Fieldset = (_a) => {
+    var { children, className, legend, helper, tooltip, errorMessage, disabled = false, wrap = "nowrap", direction = "column" } = _a, props = tslib.__rest(_a, ["children", "className", "legend", "helper", "tooltip", "errorMessage", "disabled", "wrap", "direction"]);
     const { prefix } = hooks_useGlobalSettings();
+    const [hasError, setHasError] = require$$0.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,
+    });
+    const helperClasses = classNames(helperClass, {
+        [errorClass]: hasError,
     });
-    return (jsxRuntime.jsxs("fieldset", Object.assign({ className: fieldsetClasses, id: fieldsetid ? fieldsetid : undefined }, { children: [legend && (jsxRuntime.jsxs("legend", Object.assign({ className: `${baseClass}--legend` }, { children: [legend, grouptooltip && (jsxRuntime.jsx(components_Tooltip_Tooltip, { className: `${baseClass}--legend--tooltip`, icon: true, label: grouptooltip, theme: "dark" }))] }))), grouphelper && !grouperror && (jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--helper` }, { children: grouphelper }))), grouperror && (jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--error` }, { children: grouperror }))), require$$0.Children.map(children, (child, i) => {
-                var _a;
-                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: child && child.props && (jsxRuntime.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 && (jsxRuntime.jsxs("label", Object.assign({ className: `${baseClass}--label`, htmlFor: child.props.id ? child.props.id : child.props.name }, { children: [child.props.label, child.props.tooltip && (jsxRuntime.jsx(components_Tooltip_Tooltip, { className: `${baseClass}--label--tooltip`, icon: true, label: child.props.tooltip, theme: "dark" }))] }))), child, child.props.helper && !child.props.error && (jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--helper` }, { children: child.props.helper }))), child.props.error && (jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--error` }, { children: child.props.error })))] }), `${baseClass}--input--${i}`)) }));
-            })] })));
+    const contextValue = {
+        hasError,
+        setHasError,
+    };
+    const showHelper = !!helper || hasError;
+    const helperMessage = hasError ? errorMessage : helper;
+    return (jsxRuntime.jsxs("fieldset", Object.assign({ className: fieldsetClasses }, props, { children: [legend || helper ? (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--legend-wrapper` }, { children: [legend && (jsxRuntime.jsxs("legend", Object.assign({ className: `${baseClass}--legend` }, { children: [legend, tooltip && (jsxRuntime.jsx(components_Tooltip_Tooltip, { className: `${baseClass}--legend--tooltip`, icon: true, label: tooltip, theme: "dark" }))] }))), showHelper && jsxRuntime.jsx("span", Object.assign({ className: helperClasses }, { children: helperMessage }))] }))) : null, jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--elements` }, { children: jsxRuntime.jsx(FieldsetErrorContext.Provider, Object.assign({ value: contextValue }, { children: children })) }))] })));
 };
 
-module.exports = Fieldset;
+exports.FieldsetErrorContext = FieldsetErrorContext;
+exports.default = Fieldset;
+exports.useFieldsetError = useFieldsetError;

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

@@ -1,15 +1,15 @@
 'use strict';
 
 var components_Fieldset_Fieldset = require('./Fieldset.js');
+require('tslib');
 require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
 
 
 
-exports.Fieldset = components_Fieldset_Fieldset;
+exports.Fieldset = components_Fieldset_Fieldset.default;

package/lib/cjs/components/FileUpload/FileUpload.js

@@ -1,35 +1,49 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
 require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('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 } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
     const baseClass = `${prefix}--file-upload`;
-    const FileUploadClasses = classNames("", {
-        [baseClass]: true,
+    const fileUploadClasses = classNames(baseClass, {
         [`error`]: error,
     });
-    const [uploadfiles, setUploadFiles] = require$$0.useState([]);
-    /**
-     * On change, add file to listed files, if there is a callback, call it
-     */
+    const inputClass = `${baseClass}--input`;
+    const [uploadfiles, setUploadFiles] = require$$0.useState(null);
     const handleChange = (e) => {
         const files = e.target.files;
         setUploadFiles(files);
-        if (callback) {
-            callback(e);
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsxRuntime.jsxs(components_Fieldset_Fieldset, Object.assign({ className: "file-upload" }, { children: [jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "file" }, { children: jsxRuntime.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 && (jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: file.name }), `${baseClass}--list-item-${i}`))) })))] })));
-};
+    const inputId = id ? id : name;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: fileUploadClasses }, { children: jsxRuntime.jsxs("label", Object.assign({ className: inputClass }, { children: [placeholder, jsxRuntime.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 && (jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsxRuntime.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 = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(FileUpload, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = FileUpload;
+module.exports = LabelledFileUpload;

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

@@ -1,16 +1,16 @@
 'use strict';
 
 var components_FileUpload_FileUpload = require('./FileUpload.js');
+require('tslib');
 require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
 require('../../GlobalCtx-97e4b433.js');
-require('../Fieldset/Fieldset.js');
+require('../FormControl/FormControl.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
-require('../FormElement/FormElement.js');
 
 
 

package/lib/cjs/components/Form/Form.js

@@ -1,66 +1,19 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var require$$0 = require('react');
-var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Button_Button = require('../Button/Button.js');
-var components_FormGroup_FormGroup = require('../FormGroup/FormGroup.js');
-var components_Checkbox_Checkbox = require('../Checkbox/Checkbox.js');
-var components_ChoiceGroup_ChoiceGroup = require('../ChoiceGroup/ChoiceGroup.js');
-var components_DatePicker_DatePicker = require('../DatePicker/DatePicker.js');
-var components_Dropdown_Dropdown = require('../Dropdown/Dropdown.js');
-var components_FileUpload_FileUpload = require('../FileUpload/FileUpload.js');
-var components_Input_Input = require('../Input/Input.js');
-var components_NumberPicker_NumberPicker = require('../NumberPicker/NumberPicker.js');
-var components_Textarea_Textarea = require('../Textarea/Textarea.js');
-require('tslib');
+var classNames = require('classnames');
 require('../../GlobalCtx-97e4b433.js');
-require('../Link/Link.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-require('../Fieldset/Fieldset.js');
-require('../Tooltip/Tooltip.js');
-require('react-dom');
-require('../FormElement/FormElement.js');
-require('../Radio/Radio.js');
 
-const Form = ({ action, className, formid, items, submitlabel, }) => {
+const Form = require$$0.forwardRef((_a, ref) => {
+    var { children, theme = "light" } = _a, props = tslib.__rest(_a, ["children", "theme"]);
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--form`;
-    const formClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    return (jsxRuntime.jsxs("form", Object.assign({ className: formClasses, id: formid, action: action }, { children: [items.map((item, i) => {
-                if ((item === null || item === void 0 ? void 0 : item.type) === "input") {
-                    return require$$0.createElement(components_Input_Input, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "dropdown") {
-                    return require$$0.createElement(components_Dropdown_Dropdown, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox" && Array.isArray(item === null || item === void 0 ? void 0 : item.field) === false) {
-                    return require$$0.createElement(components_Checkbox_Checkbox, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if (((item === null || item === void 0 ? void 0 : item.type) === "checkbox" || (item === null || item === void 0 ? void 0 : item.type) === "radio") &&
-                    Array.isArray(item === null || item === void 0 ? void 0 : item.field)) {
-                    return (jsxRuntime.jsx(components_ChoiceGroup_ChoiceGroup, { items: item === null || item === void 0 ? void 0 : item.field, legend: item === null || item === void 0 ? void 0 : item.legend, choicegroupid: item === null || item === void 0 ? void 0 : item.choicegroupid, grouperror: item === null || item === void 0 ? void 0 : item.grouperror, grouphelper: item === null || item === void 0 ? void 0 : item.grouphelper, grouptooltip: item === null || item === void 0 ? void 0 : item.grouptooltip }, i));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "file") {
-                    return require$$0.createElement(components_FileUpload_FileUpload, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "date") {
-                    return require$$0.createElement(components_DatePicker_DatePicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "number") {
-                    return require$$0.createElement(components_NumberPicker_NumberPicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "textarea") {
-                    return require$$0.createElement(components_Textarea_Textarea, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "formgroup") {
-                    return require$$0.createElement(components_FormGroup_FormGroup, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-            }), jsxRuntime.jsx(components_Button_Button, { kind: "submit", label: submitlabel, size: "large", type: "primary" })] })));
-};
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const formClasses = classNames(baseClass, themeClass);
+    return (jsxRuntime.jsx("form", Object.assign({ ref: ref, className: formClasses }, props, { children: children })));
+});
 
 module.exports = Form;

package/lib/cjs/components/Form/index.js

@@ -1,31 +1,21 @@
 'use strict';
 
 var components_Form_Form = require('./Form.js');
+require('tslib');
 require('react/jsx-runtime');
 require('react');
-require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
 require('../../GlobalCtx-97e4b433.js');
-require('../Button/Button.js');
-require('../Link/Link.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-require('../FormGroup/FormGroup.js');
-require('../Checkbox/Checkbox.js');
-require('../Fieldset/Fieldset.js');
-require('../Tooltip/Tooltip.js');
-require('react-dom');
-require('../FormElement/FormElement.js');
-require('../ChoiceGroup/ChoiceGroup.js');
-require('../Radio/Radio.js');
-require('../DatePicker/DatePicker.js');
-require('../Dropdown/Dropdown.js');
-require('../FileUpload/FileUpload.js');
-require('../Input/Input.js');
-require('../NumberPicker/NumberPicker.js');
-require('../Textarea/Textarea.js');
+require('classnames');
 
+const basic = {
+    theme: "light",
+};
 
+var Form_args = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  basic: basic
+});
 
 exports.Form = components_Form_Form;
+exports.FormArgs = Form_args;