@4alldigital/foundation-ui--gamma 1.24.0 → 1.26.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { Icon as Icon$1 } from '@iconify/react';
-import { useForm, Controller } from 'react-hook-form';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 
 var Blockquote = function (_a) {
     var text = _a.text, citation = _a.citation, className = _a.className, citationAttribute = _a.citationAttribute, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b;
@@ -165,7 +165,6 @@ Heading.displayName = 'Heading';
  */
 var Icon = function (_a) {
     var name = _a.name, _b = _a.size, size = _b === void 0 ? 24 : _b, color = _a.color, id = _a.id, className = _a.className, testID = _a.testID;
-    console.log('Icon name', name, color);
     if (color) {
         return (jsx(Icon$1, { "data-testid": testID || id || 'Icon', icon: name, width: size, height: size, color: color, className: className, fill: color || 'currentColor' }));
     }
@@ -298,17 +297,6 @@ var ContentRowsLayout = function (_a) {
 };
 ContentRowsLayout.displayName = 'ContentRowsLayout';
 
-var Form = function (_a) {
-    var children = _a.children, className = _a.className, submit = _a.submit, onSubmit = _a.onSubmit, hideSubmit = _a.hideSubmit, ariaSubmitLabel = _a.ariaSubmitLabel, submitID = _a.submitID, initialValues = _a.initialValues, _b = _a.submitVariant, submitVariant = _b === void 0 ? BTN_VARIANTS.PRIMARY : _b;
-    var _c = useForm({
-        defaultValues: initialValues,
-    }), handleSubmit = _c.handleSubmit, formState = _c.formState;
-    var submitClasses = cx({ 'sr-only': hideSubmit });
-    console.log('FORM formState', formState);
-    return (jsx("div", { "data-testid": "Form", className: "w-full max-w-s @form @containers", children: jsxs("form", { onSubmit: handleSubmit(onSubmit), className: cx('form px-8 pt-6 pb-8 mb-4 w-2xs', className), children: [children, jsx("div", { className: 'flex items-center justify-end py-2', children: jsx(Button, { id: submitID || submit, className: submitClasses, ariaLabel: ariaSubmitLabel || submit || 'Submit', type: BTN_TYPES.SUBMIT, variant: submitVariant, children: submit }) })] }) }));
-};
-Form.displayName = 'Form';
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -354,6 +342,22 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var Form = function (_a) {
+    var children = _a.children, className = _a.className, submit = _a.submit, _b = _a.onSubmit, onSubmit = _b === void 0 ? function () { } : _b, onChange = _a.onChange, hideSubmit = _a.hideSubmit, ariaSubmitLabel = _a.ariaSubmitLabel, submitID = _a.submitID, _c = _a.submitVariant, submitVariant = _c === void 0 ? BTN_VARIANTS.PRIMARY : _c, _d = _a.initialValues, initialValues = _d === void 0 ? {} : _d;
+    var methods = useForm({
+        defaultValues: initialValues,
+    });
+    useEffect(function () {
+        if (onChange && typeof onChange === 'function') {
+            var subscription_1 = methods.watch(function (value) { return onChange(value); });
+            return function () { return subscription_1.unsubscribe(); };
+        }
+    }, []);
+    var submitClasses = cx({ 'sr-only': hideSubmit });
+    return (jsx(FormProvider, __assign({}, methods, { children: jsx("div", { "data-testid": "Form", className: "w-full max-w-s @form @containers", children: jsxs("form", { onSubmit: methods.handleSubmit(onSubmit), className: cx('form px-8 pt-6 pb-8 mb-4 w-2xs', className), children: [children, submit && (jsx("div", { className: "flex items-center justify-end py-2", children: jsx(Button, { id: submitID || submit, className: submitClasses, ariaLabel: ariaSubmitLabel || submit || 'Submit', type: BTN_TYPES.SUBMIT, variant: submitVariant, children: submit }) }))] }) }) })));
+};
+Form.displayName = 'Form';
+
 var FieldTypes;
 (function (FieldTypes) {
     FieldTypes["TEXT"] = "text";
@@ -400,7 +404,7 @@ var InputType;
 })(InputType || (InputType = {}));
 
 var TextInput = React.forwardRef(function MyInput(_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? InputType.TEXT : _b, required = _a.required, className = _a.className, onChange = _a.onChange, placeholder = _a.placeholder, icon = _a.icon, disabled = _a.disabled, rest = __rest(_a, ["type", "required", "className", "onChange", "placeholder", "icon", "disabled"]);
+    var _b = _a.type, type = _b === void 0 ? InputType.TEXT : _b, _c = _a.required, required = _c === void 0 ? false : _c, className = _a.className, onChange = _a.onChange, placeholder = _a.placeholder, icon = _a.icon, _d = _a.disabled, disabled = _d === void 0 ? false : _d, rest = __rest(_a, ["type", "required", "className", "onChange", "placeholder", "icon", "disabled"]);
     React.useEffect(function () {
         if (typeof window !== 'undefined') {
             // eslint-disable-next-line global-require
@@ -409,6 +413,7 @@ var TextInput = React.forwardRef(function MyInput(_a, ref) {
     }, []);
     var format = 'dd/mm/yyyy';
     var placeholderSet = type === 'date' ? format.toUpperCase() : placeholder;
+    // console.log('TextInput', rest);
     if (type === InputType.TEXTAREA) {
         return (jsx("div", { "data-testid": "TextInput", className: "relative", children: jsx("textarea", __assign({ ref: ref, required: required, "aria-required": required, disabled: disabled, placeholder: placeholderSet, onChange: onChange, rows: 4, className: cx('form-item text-input resize-none', className) }, rest)) }));
     }
@@ -418,7 +423,7 @@ TextInput.displayName = 'TextInput';
 
 var Checkbox = React.forwardRef(function MyInput(_a, ref) {
     var id = _a.id, label = _a.label, required = _a.required, className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["id", "label", "required", "className", "disabled"]);
-    return (jsxs("div", { "data-testid": "Checkbox", className: cx('flex items-center', className), children: [jsxs("div", __assign({ className: "relative bg-none w-5 h-5 flex justify-center items-center", "aria-label": label, id: id, ref: ref }, rest, { children: [jsx("input", __assign({ id: id, ref: ref, disabled: disabled, type: "checkbox", className: "form-item checkbox m-0 appearance-none peer h-full w-full shrink-0 focus:ring-2", required: required }, rest)), jsx("span", { className: "absolute transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 w-full h-full flex items-center justify-center top-0 left-0", children: jsx(Icon, { name: "mdi:check-bold", size: 12 }) })] })), label && (jsx("label", { className: "label pl-2 leading-none", htmlFor: id, children: label }))] }));
+    return (jsxs("div", { "data-testid": "Checkbox", className: cx('flex items-center', className), children: [jsxs("div", { className: "relative bg-none w-5 h-5 flex justify-center items-center", "aria-label": label, children: [jsx("input", __assign({ id: id, ref: ref, disabled: disabled, type: "checkbox", className: "form-item checkbox m-0 appearance-none peer h-full w-full shrink-0 focus:ring-2", required: required }, rest)), jsx("span", { className: "absolute transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 w-full h-full flex items-center justify-center top-0 left-0", children: jsx(Icon, { name: "mdi:check-bold", size: 12 }) })] }), label && (jsx("label", { className: "label pl-2 leading-none", htmlFor: id, children: label }))] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -428,15 +433,18 @@ var Label = function (_a) {
 };
 Label.displayName = 'Label';
 
-var FormSelect = function (_a) {
-    var id = _a.id, name = _a.name, options = _a.options, required = _a.required, className = _a.className, disabled = _a.disabled;
-    return (jsx("div", { id: id, className: cx('pb-2', className), children: jsxs("div", { className: "relative", children: [jsx("select", { id: id, name: name, disabled: disabled, required: required, className: "form-item text-input", children: options.map(function (option) { return (jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)); }) }), jsx("div", { className: "form-icon absolute inset-0 z-10 pointer-events-none h-full w-12 items-center justify-center top-0 right-0 left-auto flex", children: jsx(Icon, { name: "mdi:chevron-down", size: 24, className: "pointer-events-none" }) })] }) }));
-};
+var FormSelect = React.forwardRef(function MyInput(_a, ref) {
+    var id = _a.id, name = _a.name, options = _a.options, required = _a.required, className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["id", "name", "options", "required", "className", "disabled"]);
+    if (!options) {
+        throw new Error('FormSelect requires options prop');
+    }
+    return (jsx("div", { id: id, className: cx('pb-2', className), children: jsxs("div", { className: "relative", children: [jsx("select", __assign({ ref: ref, id: id, name: name, disabled: disabled, required: required, className: "form-item text-input" }, rest, { children: options.map(function (option) { return (jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)); }) })), jsx("div", { className: "form-icon absolute inset-0 z-10 pointer-events-none h-full w-12 items-center justify-center top-0 right-0 left-auto flex", children: jsx(Icon, { name: "mdi:chevron-down", size: 24, className: "pointer-events-none" }) })] }) }));
+});
 FormSelect.displayName = 'FormSelect';
 
 var Radio = React.forwardRef(function MyInput(_a, ref) {
     var id = _a.id, name = _a.name, label = _a.label, required = _a.required, className = _a.className, options = _a.options, rest = __rest(_a, ["id", "name", "label", "required", "className", "options"]);
-    return (jsx("div", { "data-testid": "Radio", className: cx('flex items-center', className), children: jsx("div", __assign({ className: cx('flex flex-col gap-2', className), "aria-label": label, id: id, ref: ref }, rest, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxs("div", { className: "flex items-center relative", children: [jsxs("div", { className: "relative flex items-center", children: [jsx("input", { id: option.value, name: name, type: "radio", required: required, className: "form-item radio peer appearance-none m-0 p-0 w-4 h-4" }), jsx("div", { className: "form-icon opacity-0 peer-checked:opacity-100 absolute w-4 h-4 flex items-center justify-center top-0 left-0 pointer-events-none", children: jsx(Icon, { name: "mdi:circle", size: 12 }) })] }), jsx("label", { className: "label pl-2 leading-none", htmlFor: option.value, children: option.label })] }, option.value)); }) })) }));
+    return (jsx("div", { "data-testid": "Radio", className: cx('flex items-center', className), children: jsx("div", { className: cx('flex flex-col gap-2', className), "aria-label": label, id: id, children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxs("div", { className: "flex items-center relative", children: [jsxs("div", { className: "relative flex items-center", children: [jsx("input", __assign({ id: option.value, ref: ref, name: name, type: "radio", value: option.value, required: required, className: "form-item radio peer appearance-none m-0 p-0 w-4 h-4" }, rest)), jsx("div", { className: "form-icon opacity-0 peer-checked:opacity-100 absolute w-4 h-4 flex items-center justify-center top-0 left-0 pointer-events-none", children: jsx(Icon, { name: "mdi:circle", size: 12 }) })] }), jsx("label", { className: "label pl-2 leading-none", htmlFor: option.value, children: option.label })] }, option.value)); }) }) }));
 });
 Radio.displayName = 'Radio';
 
@@ -454,47 +462,44 @@ FileUpload.displayName = 'FileUpload';
 
 var FormField = function (_a) {
     var name = _a.name, type = _a.type, label = _a.label, required = _a.required, className = _a.className, icon = _a.icon, options = _a.options, disabled = _a.disabled, description = _a.description, showPasswordLabel = _a.showPasswordLabel, hidePasswordLabel = _a.hidePasswordLabel;
-    var _b = useForm(), control = _b.control, register = _b.register;
-    var _c = React.useState(false), passwordShowStatus = _c[0], setPasswordShow = _c[1];
-    var renderType = function (type, field) {
+    var _b = React.useState(false), passwordShowStatus = _b[0], setPasswordShow = _b[1];
+    var _c = useFormContext(), control = _c.control, register = _c.register;
+    var renderType = function (type) {
         switch (type) {
             case FieldTypes.TEXT:
-                return (jsx(TextInput, __assign({ type: InputType.TEXT, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.TEXT, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.PASSWORD: {
                 var toggleType = passwordShowStatus ? InputType.TEXT : InputType.PASSWORD;
                 var btnClass = 'appearance-none border-none bg-transparent flex items-center';
-                return (jsxs("div", { className: "relative", children: [jsx("span", { className: "absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2", onClick: function () { return setPasswordShow(function (pS) { return !pS; }); }, role: "button", tabIndex: 0, children: passwordShowStatus ? (jsx("button", { type: "button", "aria-label": hidePasswordLabel, className: cx(btnClass, 'form-icon'), children: jsx(Icon, { name: "mdi:eye-off", size: 24 }) })) : (jsx("button", { type: "button", "aria-label": showPasswordLabel, className: cx(btnClass, 'form-icon'), children: jsx(Icon, { name: "mdi:eye", size: 24 }) })) }), jsx(TextInput, __assign({ type: toggleType, required: required, icon: icon, className: className, disabled: disabled }, field, register(name)))] }));
+                return (jsxs("div", { className: "relative", children: [jsx("span", { className: "absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2", onClick: function () { return setPasswordShow(function (pS) { return !pS; }); }, role: "button", tabIndex: 0, children: passwordShowStatus ? (jsx("button", { type: "button", "aria-label": hidePasswordLabel, className: cx(btnClass, 'form-icon'), children: jsx(Icon, { name: "mdi:eye-off", size: 24 }) })) : (jsx("button", { type: "button", "aria-label": showPasswordLabel, className: cx(btnClass, 'form-icon'), children: jsx(Icon, { name: "mdi:eye", size: 24 }) })) }), jsx(TextInput, __assign({ type: toggleType, required: required, icon: icon, className: className, disabled: disabled }, register(name)))] }));
             }
             case FieldTypes.TEXTAREA:
-                return (jsx(TextInput, __assign({ type: InputType.TEXTAREA, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.TEXTAREA, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.EMAIL:
-                return (jsx(TextInput, __assign({ type: InputType.EMAIL, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.EMAIL, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.DATE:
-                return (jsx(TextInput, __assign({ type: InputType.DATE, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.DATE, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.DATETIME:
-                return (jsx(TextInput, __assign({ type: InputType.DATETIME, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.DATETIME, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.NUMBER:
-                return (jsx(TextInput, __assign({ type: InputType.NUMBER, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.NUMBER, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.CHECKBOX:
-                return (jsx(Checkbox, __assign({ required: required, id: name, className: className, label: label, disabled: disabled }, field, register(name))));
+                return (jsx(Checkbox, __assign({ required: required, id: name, className: className, label: label, disabled: disabled }, register(name))));
             case FieldTypes.RADIO:
-                return (jsx(Radio, __assign({ required: required, id: name, className: className, label: label, options: options, disabled: disabled }, field, register(name))));
+                return (jsx(Radio, __assign({ required: required, id: name, className: className, label: label, options: options, disabled: disabled }, register(name))));
             case FieldTypes.SWITCH:
-                return jsx(Switch, __assign({ required: required, className: className, disabled: disabled }, field, register(name)));
+                return jsx(Switch, __assign({ id: name, required: required, className: className, disabled: disabled }, register(name)));
             case FieldTypes.SELECT:
-                return (jsx(FormSelect, __assign({ required: required, id: name, className: className, disabled: disabled, label: label, options: options }, field, register(name))));
+                return (jsx(FormSelect, __assign({ required: required, id: name, className: className, disabled: disabled, label: label, options: options }, register(name))));
             case FieldTypes.FILE:
-                return (jsx(FileUpload, __assign({ required: required, id: name, className: className, disabled: disabled }, field, register(name))));
+                return (jsx(FileUpload, __assign({ required: required, id: name, className: className, disabled: disabled }, register(name))));
             default:
-                return (jsx(TextInput, __assign({ type: InputType.TEXT, required: required, disabled: disabled, icon: icon, className: className }, field, register(name))));
+                return (jsx(TextInput, __assign({ type: InputType.TEXT, required: required, disabled: disabled, icon: icon, className: className }, register(name))));
         }
     };
     // TODO: HELPER CLASSES : data-[invalid=true]:bg-error data-[valid]:bg-success
     var showLabel = label && type !== FieldTypes.CHECKBOX;
-    return (jsx("div", { className: "relative", children: jsxs("div", { "data-testid": "FormField", className: "mb-4", children: [showLabel && (jsx("div", { className: "flex items-baseline justify-between", children: jsx(Label, { label: label, id: name }) })), jsx(Controller, { name: "checkbox", control: control, rules: { required: true }, render: function (_a) {
-                        var field = _a.field;
-                        return renderType(type, field);
-                    } }), description && jsx(Copy, { size: SIZE$1.SMALL, children: description })] }) }));
+    return (jsx("div", { className: "relative", children: jsxs("div", { "data-testid": "FormField", className: "mb-4", children: [showLabel && (jsx("div", { className: "flex items-baseline justify-between", children: jsx(Label, { label: label, id: name }) })), jsx(Controller, { name: name, control: control, rules: { required: required }, render: function () { return renderType(type); } }), description && jsx(Copy, { size: SIZE$1.SMALL, children: description })] }) }));
 };
 FormField.displayName = 'FormField';
 

package/dist/index.js

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('classnames');
 var react = require('@iconify/react');
-var reactHookForm = require('react-hook-form');
 var React = require('react');
+var reactHookForm = require('react-hook-form');
 
 var Blockquote = function (_a) {
     var text = _a.text, citation = _a.citation, className = _a.className, citationAttribute = _a.citationAttribute, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b;
@@ -167,7 +167,6 @@ Heading.displayName = 'Heading';
  */
 var Icon = function (_a) {
     var name = _a.name, _b = _a.size, size = _b === void 0 ? 24 : _b, color = _a.color, id = _a.id, className = _a.className, testID = _a.testID;
-    console.log('Icon name', name, color);
     if (color) {
         return (jsxRuntime.jsx(react.Icon, { "data-testid": testID || id || 'Icon', icon: name, width: size, height: size, color: color, className: className, fill: color || 'currentColor' }));
     }
@@ -300,17 +299,6 @@ var ContentRowsLayout = function (_a) {
 };
 ContentRowsLayout.displayName = 'ContentRowsLayout';
 
-var Form = function (_a) {
-    var children = _a.children, className = _a.className, submit = _a.submit, onSubmit = _a.onSubmit, hideSubmit = _a.hideSubmit, ariaSubmitLabel = _a.ariaSubmitLabel, submitID = _a.submitID, initialValues = _a.initialValues, _b = _a.submitVariant, submitVariant = _b === void 0 ? BTN_VARIANTS.PRIMARY : _b;
-    var _c = reactHookForm.useForm({
-        defaultValues: initialValues,
-    }), handleSubmit = _c.handleSubmit, formState = _c.formState;
-    var submitClasses = cx({ 'sr-only': hideSubmit });
-    console.log('FORM formState', formState);
-    return (jsxRuntime.jsx("div", { "data-testid": "Form", className: "w-full max-w-s @form @containers", children: jsxRuntime.jsxs("form", { onSubmit: handleSubmit(onSubmit), className: cx('form px-8 pt-6 pb-8 mb-4 w-2xs', className), children: [children, jsxRuntime.jsx("div", { className: 'flex items-center justify-end py-2', children: jsxRuntime.jsx(Button, { id: submitID || submit, className: submitClasses, ariaLabel: ariaSubmitLabel || submit || 'Submit', type: BTN_TYPES.SUBMIT, variant: submitVariant, children: submit }) })] }) }));
-};
-Form.displayName = 'Form';
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -356,6 +344,22 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var Form = function (_a) {
+    var children = _a.children, className = _a.className, submit = _a.submit, _b = _a.onSubmit, onSubmit = _b === void 0 ? function () { } : _b, onChange = _a.onChange, hideSubmit = _a.hideSubmit, ariaSubmitLabel = _a.ariaSubmitLabel, submitID = _a.submitID, _c = _a.submitVariant, submitVariant = _c === void 0 ? BTN_VARIANTS.PRIMARY : _c, _d = _a.initialValues, initialValues = _d === void 0 ? {} : _d;
+    var methods = reactHookForm.useForm({
+        defaultValues: initialValues,
+    });
+    React.useEffect(function () {
+        if (onChange && typeof onChange === 'function') {
+            var subscription_1 = methods.watch(function (value) { return onChange(value); });
+            return function () { return subscription_1.unsubscribe(); };
+        }
+    }, []);
+    var submitClasses = cx({ 'sr-only': hideSubmit });
+    return (jsxRuntime.jsx(reactHookForm.FormProvider, __assign({}, methods, { children: jsxRuntime.jsx("div", { "data-testid": "Form", className: "w-full max-w-s @form @containers", children: jsxRuntime.jsxs("form", { onSubmit: methods.handleSubmit(onSubmit), className: cx('form px-8 pt-6 pb-8 mb-4 w-2xs', className), children: [children, submit && (jsxRuntime.jsx("div", { className: "flex items-center justify-end py-2", children: jsxRuntime.jsx(Button, { id: submitID || submit, className: submitClasses, ariaLabel: ariaSubmitLabel || submit || 'Submit', type: BTN_TYPES.SUBMIT, variant: submitVariant, children: submit }) }))] }) }) })));
+};
+Form.displayName = 'Form';
+
 var FieldTypes;
 (function (FieldTypes) {
     FieldTypes["TEXT"] = "text";
@@ -402,7 +406,7 @@ var InputType;
 })(InputType || (InputType = {}));
 
 var TextInput = React.forwardRef(function MyInput(_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? InputType.TEXT : _b, required = _a.required, className = _a.className, onChange = _a.onChange, placeholder = _a.placeholder, icon = _a.icon, disabled = _a.disabled, rest = __rest(_a, ["type", "required", "className", "onChange", "placeholder", "icon", "disabled"]);
+    var _b = _a.type, type = _b === void 0 ? InputType.TEXT : _b, _c = _a.required, required = _c === void 0 ? false : _c, className = _a.className, onChange = _a.onChange, placeholder = _a.placeholder, icon = _a.icon, _d = _a.disabled, disabled = _d === void 0 ? false : _d, rest = __rest(_a, ["type", "required", "className", "onChange", "placeholder", "icon", "disabled"]);
     React.useEffect(function () {
         if (typeof window !== 'undefined') {
             // eslint-disable-next-line global-require
@@ -411,6 +415,7 @@ var TextInput = React.forwardRef(function MyInput(_a, ref) {
     }, []);
     var format = 'dd/mm/yyyy';
     var placeholderSet = type === 'date' ? format.toUpperCase() : placeholder;
+    // console.log('TextInput', rest);
     if (type === InputType.TEXTAREA) {
         return (jsxRuntime.jsx("div", { "data-testid": "TextInput", className: "relative", children: jsxRuntime.jsx("textarea", __assign({ ref: ref, required: required, "aria-required": required, disabled: disabled, placeholder: placeholderSet, onChange: onChange, rows: 4, className: cx('form-item text-input resize-none', className) }, rest)) }));
     }
@@ -420,7 +425,7 @@ TextInput.displayName = 'TextInput';
 
 var Checkbox = React.forwardRef(function MyInput(_a, ref) {
     var id = _a.id, label = _a.label, required = _a.required, className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["id", "label", "required", "className", "disabled"]);
-    return (jsxRuntime.jsxs("div", { "data-testid": "Checkbox", className: cx('flex items-center', className), children: [jsxRuntime.jsxs("div", __assign({ className: "relative bg-none w-5 h-5 flex justify-center items-center", "aria-label": label, id: id, ref: ref }, rest, { children: [jsxRuntime.jsx("input", __assign({ id: id, ref: ref, disabled: disabled, type: "checkbox", className: "form-item checkbox m-0 appearance-none peer h-full w-full shrink-0 focus:ring-2", required: required }, rest)), jsxRuntime.jsx("span", { className: "absolute transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 w-full h-full flex items-center justify-center top-0 left-0", children: jsxRuntime.jsx(Icon, { name: "mdi:check-bold", size: 12 }) })] })), label && (jsxRuntime.jsx("label", { className: "label pl-2 leading-none", htmlFor: id, children: label }))] }));
+    return (jsxRuntime.jsxs("div", { "data-testid": "Checkbox", className: cx('flex items-center', className), children: [jsxRuntime.jsxs("div", { className: "relative bg-none w-5 h-5 flex justify-center items-center", "aria-label": label, children: [jsxRuntime.jsx("input", __assign({ id: id, ref: ref, disabled: disabled, type: "checkbox", className: "form-item checkbox m-0 appearance-none peer h-full w-full shrink-0 focus:ring-2", required: required }, rest)), jsxRuntime.jsx("span", { className: "absolute transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 w-full h-full flex items-center justify-center top-0 left-0", children: jsxRuntime.jsx(Icon, { name: "mdi:check-bold", size: 12 }) })] }), label && (jsxRuntime.jsx("label", { className: "label pl-2 leading-none", htmlFor: id, children: label }))] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -430,15 +435,18 @@ var Label = function (_a) {
 };
 Label.displayName = 'Label';
 
-var FormSelect = function (_a) {
-    var id = _a.id, name = _a.name, options = _a.options, required = _a.required, className = _a.className, disabled = _a.disabled;
-    return (jsxRuntime.jsx("div", { id: id, className: cx('pb-2', className), children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("select", { id: id, name: name, disabled: disabled, required: required, className: "form-item text-input", children: options.map(function (option) { return (jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)); }) }), jsxRuntime.jsx("div", { className: "form-icon absolute inset-0 z-10 pointer-events-none h-full w-12 items-center justify-center top-0 right-0 left-auto flex", children: jsxRuntime.jsx(Icon, { name: "mdi:chevron-down", size: 24, className: "pointer-events-none" }) })] }) }));
-};
+var FormSelect = React.forwardRef(function MyInput(_a, ref) {
+    var id = _a.id, name = _a.name, options = _a.options, required = _a.required, className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["id", "name", "options", "required", "className", "disabled"]);
+    if (!options) {
+        throw new Error('FormSelect requires options prop');
+    }
+    return (jsxRuntime.jsx("div", { id: id, className: cx('pb-2', className), children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("select", __assign({ ref: ref, id: id, name: name, disabled: disabled, required: required, className: "form-item text-input" }, rest, { children: options.map(function (option) { return (jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)); }) })), jsxRuntime.jsx("div", { className: "form-icon absolute inset-0 z-10 pointer-events-none h-full w-12 items-center justify-center top-0 right-0 left-auto flex", children: jsxRuntime.jsx(Icon, { name: "mdi:chevron-down", size: 24, className: "pointer-events-none" }) })] }) }));
+});
 FormSelect.displayName = 'FormSelect';
 
 var Radio = React.forwardRef(function MyInput(_a, ref) {
     var id = _a.id, name = _a.name, label = _a.label, required = _a.required, className = _a.className, options = _a.options, rest = __rest(_a, ["id", "name", "label", "required", "className", "options"]);
-    return (jsxRuntime.jsx("div", { "data-testid": "Radio", className: cx('flex items-center', className), children: jsxRuntime.jsx("div", __assign({ className: cx('flex flex-col gap-2', className), "aria-label": label, id: id, ref: ref }, rest, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [jsxRuntime.jsx("input", { id: option.value, name: name, type: "radio", required: required, className: "form-item radio peer appearance-none m-0 p-0 w-4 h-4" }), jsxRuntime.jsx("div", { className: "form-icon opacity-0 peer-checked:opacity-100 absolute w-4 h-4 flex items-center justify-center top-0 left-0 pointer-events-none", children: jsxRuntime.jsx(Icon, { name: "mdi:circle", size: 12 }) })] }), jsxRuntime.jsx("label", { className: "label pl-2 leading-none", htmlFor: option.value, children: option.label })] }, option.value)); }) })) }));
+    return (jsxRuntime.jsx("div", { "data-testid": "Radio", className: cx('flex items-center', className), children: jsxRuntime.jsx("div", { className: cx('flex flex-col gap-2', className), "aria-label": label, id: id, children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [jsxRuntime.jsx("input", __assign({ id: option.value, ref: ref, name: name, type: "radio", value: option.value, required: required, className: "form-item radio peer appearance-none m-0 p-0 w-4 h-4" }, rest)), jsxRuntime.jsx("div", { className: "form-icon opacity-0 peer-checked:opacity-100 absolute w-4 h-4 flex items-center justify-center top-0 left-0 pointer-events-none", children: jsxRuntime.jsx(Icon, { name: "mdi:circle", size: 12 }) })] }), jsxRuntime.jsx("label", { className: "label pl-2 leading-none", htmlFor: option.value, children: option.label })] }, option.value)); }) }) }));
 });
 Radio.displayName = 'Radio';
 
@@ -456,47 +464,44 @@ FileUpload.displayName = 'FileUpload';
 
 var FormField = function (_a) {
     var name = _a.name, type = _a.type, label = _a.label, required = _a.required, className = _a.className, icon = _a.icon, options = _a.options, disabled = _a.disabled, description = _a.description, showPasswordLabel = _a.showPasswordLabel, hidePasswordLabel = _a.hidePasswordLabel;
-    var _b = reactHookForm.useForm(), control = _b.control, register = _b.register;
-    var _c = React.useState(false), passwordShowStatus = _c[0], setPasswordShow = _c[1];
-    var renderType = function (type, field) {
+    var _b = React.useState(false), passwordShowStatus = _b[0], setPasswordShow = _b[1];
+    var _c = reactHookForm.useFormContext(), control = _c.control, register = _c.register;
+    var renderType = function (type) {
         switch (type) {
             case FieldTypes.TEXT:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.TEXT, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.TEXT, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.PASSWORD: {
                 var toggleType = passwordShowStatus ? InputType.TEXT : InputType.PASSWORD;
                 var btnClass = 'appearance-none border-none bg-transparent flex items-center';
-                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("span", { className: "absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2", onClick: function () { return setPasswordShow(function (pS) { return !pS; }); }, role: "button", tabIndex: 0, children: passwordShowStatus ? (jsxRuntime.jsx("button", { type: "button", "aria-label": hidePasswordLabel, className: cx(btnClass, 'form-icon'), children: jsxRuntime.jsx(Icon, { name: "mdi:eye-off", size: 24 }) })) : (jsxRuntime.jsx("button", { type: "button", "aria-label": showPasswordLabel, className: cx(btnClass, 'form-icon'), children: jsxRuntime.jsx(Icon, { name: "mdi:eye", size: 24 }) })) }), jsxRuntime.jsx(TextInput, __assign({ type: toggleType, required: required, icon: icon, className: className, disabled: disabled }, field, register(name)))] }));
+                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("span", { className: "absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2", onClick: function () { return setPasswordShow(function (pS) { return !pS; }); }, role: "button", tabIndex: 0, children: passwordShowStatus ? (jsxRuntime.jsx("button", { type: "button", "aria-label": hidePasswordLabel, className: cx(btnClass, 'form-icon'), children: jsxRuntime.jsx(Icon, { name: "mdi:eye-off", size: 24 }) })) : (jsxRuntime.jsx("button", { type: "button", "aria-label": showPasswordLabel, className: cx(btnClass, 'form-icon'), children: jsxRuntime.jsx(Icon, { name: "mdi:eye", size: 24 }) })) }), jsxRuntime.jsx(TextInput, __assign({ type: toggleType, required: required, icon: icon, className: className, disabled: disabled }, register(name)))] }));
             }
             case FieldTypes.TEXTAREA:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.TEXTAREA, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.TEXTAREA, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.EMAIL:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.EMAIL, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.EMAIL, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.DATE:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.DATE, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.DATE, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.DATETIME:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.DATETIME, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.DATETIME, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.NUMBER:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.NUMBER, required: required, icon: icon, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.NUMBER, required: required, icon: icon, className: className, disabled: disabled }, register(name))));
             case FieldTypes.CHECKBOX:
-                return (jsxRuntime.jsx(Checkbox, __assign({ required: required, id: name, className: className, label: label, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(Checkbox, __assign({ required: required, id: name, className: className, label: label, disabled: disabled }, register(name))));
             case FieldTypes.RADIO:
-                return (jsxRuntime.jsx(Radio, __assign({ required: required, id: name, className: className, label: label, options: options, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(Radio, __assign({ required: required, id: name, className: className, label: label, options: options, disabled: disabled }, register(name))));
             case FieldTypes.SWITCH:
-                return jsxRuntime.jsx(Switch, __assign({ required: required, className: className, disabled: disabled }, field, register(name)));
+                return jsxRuntime.jsx(Switch, __assign({ id: name, required: required, className: className, disabled: disabled }, register(name)));
             case FieldTypes.SELECT:
-                return (jsxRuntime.jsx(FormSelect, __assign({ required: required, id: name, className: className, disabled: disabled, label: label, options: options }, field, register(name))));
+                return (jsxRuntime.jsx(FormSelect, __assign({ required: required, id: name, className: className, disabled: disabled, label: label, options: options }, register(name))));
             case FieldTypes.FILE:
-                return (jsxRuntime.jsx(FileUpload, __assign({ required: required, id: name, className: className, disabled: disabled }, field, register(name))));
+                return (jsxRuntime.jsx(FileUpload, __assign({ required: required, id: name, className: className, disabled: disabled }, register(name))));
             default:
-                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.TEXT, required: required, disabled: disabled, icon: icon, className: className }, field, register(name))));
+                return (jsxRuntime.jsx(TextInput, __assign({ type: InputType.TEXT, required: required, disabled: disabled, icon: icon, className: className }, register(name))));
         }
     };
     // TODO: HELPER CLASSES : data-[invalid=true]:bg-error data-[valid]:bg-success
     var showLabel = label && type !== FieldTypes.CHECKBOX;
-    return (jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsxs("div", { "data-testid": "FormField", className: "mb-4", children: [showLabel && (jsxRuntime.jsx("div", { className: "flex items-baseline justify-between", children: jsxRuntime.jsx(Label, { label: label, id: name }) })), jsxRuntime.jsx(reactHookForm.Controller, { name: "checkbox", control: control, rules: { required: true }, render: function (_a) {
-                        var field = _a.field;
-                        return renderType(type, field);
-                    } }), description && jsxRuntime.jsx(Copy, { size: SIZE$1.SMALL, children: description })] }) }));
+    return (jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsxs("div", { "data-testid": "FormField", className: "mb-4", children: [showLabel && (jsxRuntime.jsx("div", { className: "flex items-baseline justify-between", children: jsxRuntime.jsx(Label, { label: label, id: name }) })), jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: { required: required }, render: function () { return renderType(type); } }), description && jsxRuntime.jsx(Copy, { size: SIZE$1.SMALL, children: description })] }) }));
 };
 FormField.displayName = 'FormField';
 

package/dist/types/fui/components/Form/Form.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './Form.types';
 declare const Form: {
-    ({ children, className, submit, onSubmit, hideSubmit, ariaSubmitLabel, submitID, initialValues, submitVariant, }: Props): React.ReactElement;
+    ({ children, className, submit, onSubmit, onChange, hideSubmit, ariaSubmitLabel, submitID, submitVariant, initialValues, }: Props): React.ReactElement;
     displayName: string;
 };
 export default Form;

package/dist/types/fui/components/Form/Form.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof Form>;
 type Story = StoryObj<typeof Form>;
 export declare const Default: Story;
 export declare const Example: Story;
+export declare const ExampleNoSubmit: Story;
 export default meta;

package/dist/types/fui/components/Form/Form.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BTN_VARIANTS } from "../Button/Button.types";
+import { BTN_VARIANTS } from '../Button/Button.types';
 export interface Props {
     /** The form inputs and content. */
     children: React.ReactNode;
@@ -8,9 +8,9 @@ export interface Props {
     /** Disable form inputs validation. */
     noValidate?: boolean;
     /** The submit handler that will fire once the form is submitted. */
-    onSubmit: (values: {
-        [k: string]: FormDataEntryValue;
-    }) => void;
+    onSubmit?: (values: any) => void;
+    /** The on change handler that will fire once the form is updated. */
+    onChange?: (values: any) => void;
     /** The label for the submit button. */
     submit?: string;
     /** Hide submit button. */
@@ -21,7 +21,7 @@ export interface Props {
     submitID?: string;
     /** Initial form values. */
     initialValues?: {
-        [k: string]: FormDataEntryValue;
+        [k: string]: any;
     };
     submitVariant?: BTN_VARIANTS;
 }

package/dist/types/fui/components/FormField/FormField.types.d.ts

@@ -1,3 +1,4 @@
+import { OptionsType } from "../FormSelect/FormSelect.types";
 export declare enum FieldTypes {
     TEXT = "text",
     TEXTAREA = "textarea",
@@ -23,12 +24,10 @@ export interface Props {
     label?: string;
     required?: boolean;
     icon?: string;
-    options?: {
-        value: string;
-        label: string;
-    }[];
+    options?: Array<OptionsType>;
     disabled?: boolean;
     description?: string;
     showPasswordLabel?: string;
     hidePasswordLabel?: string;
+    onChange?: (e: any) => void;
 }

package/dist/types/fui/components/FormSelect/FormSelect.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
 import { Props } from './FormSelect.types';
-declare const FormSelect: {
-    ({ id, name, options, required, className, disabled }: Props): React.ReactElement;
-    displayName: string;
-};
+declare const FormSelect: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
 export default FormSelect;
 export type { Props };

package/dist/types/fui/components/FormSelect/FormSelect.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-type OptionsType = {
+export type OptionsType = {
     value: string;
     label: string;
     /** The selected option's value. */
@@ -8,7 +8,7 @@ type OptionsType = {
 };
 export interface Props {
     /** The selected option's value. */
-    options: Array<OptionsType>;
+    options?: Array<OptionsType>;
     /** Unique id for the field, required for a11y. */
     id: string;
     /** The select visible default label value. */
@@ -38,4 +38,3 @@ export interface ItemProps {
     itemIcon: string;
     iconColor?: string;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--gamma",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "Foundation UI Component library with GAMMA theme. ",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9c4a28d509b941a55be49820670259e870b3b19",
+  "gitHead": "4af02638666f2cbee201e3f1b2c4cf412fd84e86",
   "dependencies": {
     "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.14",