@insticc/genericform 2.1.2 → 2.1.3

package/README.md

@@ -1,500 +1,500 @@
-# @insticc/genericform
-
-A flexible, schema-driven React form component that renders any combination of field types from a plain JavaScript array. No boilerplate, built-in validation, modal support, and full external state control out of the box.
-
----
-
-## Table of Contents
-
-- [@insticc/genericform](#insticcgenericform)
-  - [Table of Contents](#table-of-contents)
-  - [Installation](#installation)
-  - [Peer Dependencies](#peer-dependencies)
-  - [Quick Start](#quick-start)
-  - [Field Types](#field-types)
-    - [Options format](#options-format)
-  - [Field Schema Reference](#field-schema-reference)
-    - [Common properties](#common-properties)
-    - [Style properties (all optional)](#style-properties-all-optional)
-    - [Type-specific properties](#type-specific-properties)
-  - [GenericForm Props](#genericform-props)
-    - [`customActions`](#customactions)
-  - [Validation](#validation)
-  - [Layout \& Grouping](#layout--grouping)
-    - [Inline fields](#inline-fields)
-    - [Groups](#groups)
-    - [Two-column split](#two-column-split)
-  - [External State Control](#external-state-control)
-  - [Modal Mode](#modal-mode)
-  - [Theming (CSS Variables)](#theming-css-variables)
-  - [Demo Components](#demo-components)
-  - [License](#license)
-
----
-
-## Installation
-
-```bash
-npm install @insticc/genericform
-```
-
-Import the component and its stylesheet:
-
-```jsx
-import GenericForm from '@insticc/genericform';
-```
-
----
-
-## Peer Dependencies
-
-The following must be installed in your project:
-
-| Package | Version |
-|---|---|
-| `react` | ≥ 17 |
-| `react-dom` | ≥ 17 |
-| `react-bootstrap` | ≥ 2 |
-| `semantic-ui-react` | ≥ 2 |
-| `react-datetime` | ≥ 3 |
-
----
-
-## Quick Start
-
-```jsx
-import { useState } from 'react';
-import GenericForm from '@insticc/genericform';
-import '@insticc/genericform/dist/index.css';
-
-const MyForm = () => {
-  const [result, setResult] = useState(null);
-
-  const fields = [
-    { name: 'firstName', type: 'text',   label: 'First Name', required: true,  value: '' },
-    { name: 'lastName',  type: 'text',   label: 'Last Name',  required: true,  value: '' },
-    { name: 'email',     type: 'email',  label: 'Email',      required: true,  value: '' },
-    { name: 'age',       type: 'int',    label: 'Age',        min: 0, max: 120, value: '' },
-    {
-      name: 'country', type: 'select', label: 'Country', value: '',
-      options: [
-        { value: 'PT', text: 'Portugal' },
-        { value: 'ES', text: 'Spain' },
-        { value: 'FR', text: 'France' },
-      ],
-    },
-  ];
-
-  return (
-    <GenericForm
-      title="New User"
-      fields={fields}
-      submitText="Save"
-      onSubmit={(data) => setResult(data)}
-      onCancel={() => setResult(null)}
-    />
-  );
-};
-```
-
-The `onSubmit` callback receives the complete form data object keyed by each field's `name`.
-
----
-
-## Field Types
-
-| `type` value | Rendered as | Key extra props |
-|---|---|---|
-| `text` / `string` | Text input | `placeholder`, `minLength`, `maxLength` |
-| `email` | Email input (format validated) | `placeholder` |
-| `password` | Password input | `placeholder` |
-| `int` / `number` | Number input | `min`, `max`, `step` |
-| `textArea` | Textarea | `rows`, `height`, `maxLength` |
-| `date` | Date picker (DD/MM/YYYY) | `placeholder` |
-| `datetime` | Date + time picker | `placeholder` |
-| `time` | Time picker (HH:mm) | `placeholder` |
-| `year` | Year picker | `minYear`, `maxYear` |
-| `select` | Native `<select>` | `options`, `placeholder`, `multiple` |
-| `multipleDropdown` | Semantic UI multi-select | `options`, `placeholder` |
-| `search` | Semantic UI Search | `options`, `isLoading`, `resultRenderer` |
-| `toggle` | Toggle switch | — |
-| `checkbox` | Single checkbox | `onOptionChange` |
-| `checkboxGroup` | Group of checkboxes | `options`, `grouped`, `onOptionChange` |
-| `radioGroup` | Stacked radio buttons | `options`, `onOptionChange` |
-| `radioGroupInline` | Inline radio buttons | `options`, `onOptionChange` |
-| `json` | JSON textarea editor | `datatype`, `allowModeSwitch`, `storeAsString`, `rows` |
-| `accordion` | Collapsible section | `sections`, `defaultOpen`, `activeAllIndex` |
-| `component` | Arbitrary JSX embed | `component` |
-| `label` | Section heading | — |
-| `hr` / `separator` | Horizontal rule | — |
-
-### Options format
-
-The `select`, `multipleDropdown`, `checkboxGroup`, and radio types all accept options in any of these shapes — the component resolves them automatically:
-
-```js
-{ value: 'pt', text: 'Portugal' }   // most common
-{ id: 'admin', label: 'Admin' }
-{ name: 'read', label: 'Read' }
-```
-
----
-
-## Field Schema Reference
-
-Every item in the `fields` array is a plain object. The properties below apply across all (or most) field types.
-
-### Common properties
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `name` | `string` | — | **Required.** Unique key; used as the form data key. |
-| `type` | `string` | `'text'` | Field type (see table above). |
-| `label` / `displayName` | `string \| node` | — | Label shown above the field. |
-| `value` | `any` | — | Initial (or controlled) value. |
-| `required` | `bool` | `false` | Adds `*` indicator and enforces non-empty on submit. |
-| `disabled` | `bool` | `false` | Disables the input. |
-| `placeholder` | `string` | `displayName` | Input placeholder text. |
-| `tooltip` | `string` | — | Tooltip shown next to the label. |
-| `showHelp` | `bool` | `false` | Show ⓘ help icon. |
-| `helpText` | `string` | — | Text shown in the help icon tooltip. |
-| `errorMessage` | `string` | auto | Custom message shown on validation failure. |
-| `validate` | `function` | — | `(value, formData) => string \| null`. Return a string to show as error. |
-| `onChange` | `function` | — | `(value, formData) => void`. Per-field change callback (in addition to `onFieldChange`). |
-| `hide` | `bool \| function` | `false` | `(formData, field) => bool`. Hides the field dynamically. |
-| `inline` | `bool` | `false` | Renders this field side-by-side with adjacent `inline` fields. |
-| `group` | `string` | — | Groups fields under a named section heading. Groups render in alphabetical order, ungrouped fields last. |
-
-### Style properties (all optional)
-
-| Property | Type | Description |
-|---|---|---|
-| `style` / `mainDivStyle` | `object` | Style applied to the outer wrapper `<div>`. |
-| `labelStyle` | `object` | Style applied to the `<label>` element. |
-| `spanStyle` | `object` | Style applied to the required `*` span. |
-| `inputStyle` | `object` | Style applied to the input element. |
-| `tooltipStyle` | `object` | Style applied to the tooltip span. |
-| `className` | `string` | Extra CSS class for text/email/password inputs. |
-
-### Type-specific properties
-
-**`int` / `number`**
-```js
-{ name: 'score', type: 'number', min: 0, max: 100, step: 0.5, value: '' }
-```
-
-**`textArea`**
-```js
-{ name: 'bio', type: 'textArea', rows: 4, height: '120px', maxLength: 300, value: '' }
-```
-
-**`select`**
-```js
-{
-  name: 'country', type: 'select',
-  options: [{ value: 'PT', text: 'Portugal' }],
-  multiple: false,   // set true for native multi-select
-  value: '',
-}
-```
-
-**`checkboxGroup`**
-```js
-{
-  name: 'perms', type: 'checkboxGroup',
-  value: ['read'],   // array of selected names
-  options: [
-    { name: 'read',   label: 'Read' },
-    { name: 'write',  label: 'Write' },
-    { name: 'delete', label: 'Delete' },
-  ],
-  grouped: false,   // true renders a visual group border
-}
-```
-
-**`json`**
-```js
-{
-  name: 'config', type: 'json',
-  datatype: 'object',       // 'string' | 'number' | 'object'
-  allowModeSwitch: true,    // toggle between single / multiple (array) mode
-  storeAsString: false,     // keep raw string in formData instead of parsed value
-  rows: 6,
-  value: '',
-}
-```
-
-**`accordion`**
-```js
-{
-  name: 'advanced', type: 'accordion',
-  defaultOpen: false,
-  activeAllIndex: false,   // open all sections by default
-  sections: [
-    { title: 'Config',      icon: '⚙️', content: <p>…</p> },
-    { title: 'Danger zone', icon: '⚠️', content: <p>…</p> },
-  ],
-}
-```
-
-**`component`**
-```js
-{
-  name: 'avatar', type: 'component',
-  displayName: 'Avatar preview',
-  component: <MyAvatarWidget />,
-}
-```
-
----
-
-## GenericForm Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `fields` | `array` | `[]` | **Required.** Array of field schema objects. |
-| `title` | `string \| node` | — | Form heading. |
-| `titleIcon` | `node` | — | Icon rendered before the title. |
-| `titleStyle` | `object` | — | Style for the title element. |
-| `onSubmit` | `async function` | — | `(formData) => void`. Called after successful validation. |
-| `handleSubmit` | `function` | — | Legacy: receives the native submit event instead of formData. |
-| `onCancel` | `function` | — | Called when the Cancel button is clicked. |
-| `onDataChange` | `function` | — | `(formData) => void`. Fired on every field change with the full snapshot. |
-| `onFieldChange` | `function` | — | `({ name, value, option? }) => void`. Fired per field change. |
-| `validateOnChange` | `bool` | `true` | Validate each field as the user types. |
-| `validateOnSubmit` | `bool` | `true` | Validate all fields before calling `onSubmit`. |
-| `submitText` | `string` | `'Submit'` | Label on the submit button. |
-| `cancelText` | `string` | `'Cancel'` | Label on the cancel button. |
-| `showSubmit` | `bool` | `true` | Show the submit button. |
-| `showCancel` | `bool` | `true` | Show the cancel button. |
-| `haveSaveButton` | `bool` | `true` | Alias for `showSubmit`. |
-| `submitButton` | `object` | `{}` | `{ className, style, icon }` overrides for the submit button. |
-| `cancelButton` | `object` | `{}` | `{ className, style, icon }` overrides for the cancel button. |
-| `customActions` | `array` | `[]` | Extra buttons in the actions bar (see below). |
-| `splitForm` | `bool` | `false` | Render fields in a two-column layout. |
-| `splitField` | `string` | — | Field `name` at which to split left/right columns. |
-| `splitGroup` | `bool` | `false` | Split at the group boundary instead of a specific field. |
-| `enableModal` | `bool` | `false` | Wrap the form in a React Bootstrap `<Modal>`. |
-| `modalShow` | `bool` | `false` | Controls modal visibility. |
-| `modalSize` | `string` | `'lg'` | Bootstrap modal size (`'sm'`, `'lg'`, `'xl'`). |
-| `disableDefaultContainer` | `bool` | `false` | Remove the default card/shadow wrapper `<div>`. |
-| `containerStyle` | `object` | `{}` | Style for the outermost container. |
-| `formStyle` | `object` | — | Style for the `<form>` element. |
-| `fieldsStyle` | `object` | — | Style for each fields section wrapper. |
-| `actionsDivStyle` | `object` | — | Style for the actions bar wrapper. |
-| `actionsStyle` | `object` | — | Style applied to every action button. |
-| `handleSearchChange` | `function` | — | Passed directly to the `search` field type. |
-| `handleResultSelect` | `function` | — | Passed directly to the `search` field type. |
-| `resultRenderer` | `function` | — | Custom result item renderer for the `search` type. |
-
-### `customActions`
-
-Inject additional buttons into the actions bar:
-
-```jsx
-<GenericForm
-  fields={fields}
-  customActions={[
-    {
-      label: 'Reset',
-      icon: <ResetIcon />,        // optional
-      className: 'ufg-button-secondary',
-      style: {},
-      disabled: false,
-      onClick: () => resetMyForm(),
-    },
-  ]}
-/>
-```
-
----
-
-## Validation
-
-Validation runs on change (if `validateOnChange`) and on submit (if `validateOnSubmit`). Built-in rules cover the most common cases:
-
-| Rule | Prop | Example |
-|---|---|---|
-| Required | `required: true` | Non-empty value |
-| Email format | `type: 'email'` | Must match `x@x.x` |
-| Min length | `minLength: 3` | At least 3 characters |
-| Max length | `maxLength: 20` | At most 20 characters |
-| Numeric min | `min: 0` | Value ≥ 0 |
-| Numeric max | `max: 100` | Value ≤ 100 |
-| Custom | `validate` function | Any logic |
-
-**Custom validation:**
-
-```js
-{
-  name: 'website', type: 'text', value: '',
-  validate: (value, formData) => {
-    if (value && !value.startsWith('https://')) return 'Must start with https://';
-    return null; // no error
-  },
-}
-```
-
-**Cross-field validation** — the second argument is the live form data object:
-
-```js
-{
-  name: 'notifyEmail', type: 'email', value: '',
-  hide: (fd) => !fd.notify,
-  validate: (value, fd) =>
-    fd.notify && !value ? 'Required when notifications are enabled' : null,
-}
-```
-
-Override the default error message with `errorMessage`:
-
-```js
-{ name: 'name', type: 'text', required: true, errorMessage: 'Please enter your full name.' }
-```
-
----
-
-## Layout & Grouping
-
-### Inline fields
-
-Set `inline: true` on consecutive fields to render them side-by-side:
-
-```js
-{ name: 'firstName', type: 'text', label: 'First name', inline: true, value: '' },
-{ name: 'lastName',  type: 'text', label: 'Last name',  inline: true, value: '' },
-```
-
-### Groups
-
-Assign a `group` string to organise fields under labelled sections. Groups are sorted alphabetically; ungrouped fields appear last.
-
-```js
-{ name: 'email',   type: 'email', group: 'Contact', value: '' },
-{ name: 'phone',   type: 'text',  group: 'Contact', value: '' },
-{ name: 'country', type: 'select', group: 'Address', value: '', options: [...] },
-```
-
-### Two-column split
-
-```jsx
-<GenericForm
-  fields={fields}
-  splitForm
-  splitField="address"   // everything up to and including 'address' goes left
-/>
-```
-
-Use `splitGroup` to split at a group boundary rather than a specific field.
-
----
-
-## External State Control
-
-`GenericForm` manages its own internal state, but every field's `value` prop is watched. When a `value` changes, the form merges only that field — which means you can drive specific fields from a parent `useState` without re-initialising the whole form.
-
-The recommended pattern for full external control uses `onDataChange`:
-
-```jsx
-const [formState, setFormState] = useState({
-  firstName: '', lastName: '', country: '', city: '',
-});
-
-// Auto-fill city when country changes
-const handleFieldChange = ({ name, value }) => {
-  if (name === 'country') {
-    setFormState(prev => ({ ...prev, city: CITY_BY_COUNTRY[value] ?? '' }));
-  }
-};
-
-const fields = [
-  { name: 'firstName', type: 'text',   label: 'First name', value: formState.firstName },
-  { name: 'lastName',  type: 'text',   label: 'Last name',  value: formState.lastName  },
-  { name: 'country',   type: 'select', label: 'Country',    value: formState.country, options: COUNTRIES },
-  { name: 'city',      type: 'text',   label: 'City',       value: formState.city, disabled: true },
-];
-
-<GenericForm
-  fields={fields}
-  onDataChange={setFormState}
-  onFieldChange={handleFieldChange}
-  onSubmit={(data) => console.log('Saved:', data)}
-/>
-```
-
-You can also write directly to `formState` from outside the form (e.g. a "Load profile" button) — the form will detect the changed `value` props and update only the affected fields.
-
----
-
-## Modal Mode
-
-Wrap the form in a React Bootstrap modal with no extra markup:
-
-```jsx
-const [show, setShow] = useState(false);
-
-<GenericForm
-  title="Edit User"
-  fields={fields}
-  enableModal
-  modalShow={show}
-  modalSize="lg"
-  onSubmit={(data) => { saveUser(data); setShow(false); }}
-  onCancel={() => setShow(false)}
-/>
-```
-
-> **Note:** Import React Bootstrap's CSS in your app root if you haven't already:
-> ```js
-> import 'bootstrap/dist/css/bootstrap.min.css';
-> ```
-
----
-
-## Theming (CSS Variables)
-
-Override any of the following CSS custom properties to match your design system:
-
-```css
-:root {
-  --ufg-primary:        #1d4ed8;   /* submit button, active toggle */
-  --ufg-primary-dark:   #1e40af;
-  --ufg-primary-darker: #1e3a8a;
-  --ufg-error:          #dc2626;   /* validation error text */
-  --ufg-border:         #cbd5e1;   /* input borders */
-  --ufg-bg:             #ffffff;   /* card background */
-  --ufg-surface:        #fafafa;   /* secondary surfaces */
-  --ufg-text:           #111111;   /* primary text */
-  --ufg-text-secondary: #6b7280;   /* placeholder, help text */
-  --ufg-radius:         10px;      /* input border radius */
-  --ufg-shadow:         0 10px 30px rgba(0, 0, 0, 0.12);
-}
-```
-
----
-
-## Demo Components
-
-Two reference implementations are bundled and exported:
-
-```jsx
-import GenericForm, { Demo, Demo2 } from '@insticc/genericform';
-
-// Every field type, conditional visibility, validation, custom actions:
-<Demo />
-
-// Full external state management with live formState sidebar:
-<Demo2 />
-```
-
-`Demo` covers all 18 field types, conditional field visibility via `hide`, cross-field validation, inline layout, accordion, and custom action buttons.
-
-`Demo2` demonstrates the `onDataChange` + `onFieldChange` pattern for parent-driven state, including dependent field auto-fill (country → city) and a live field-change event log.
-
----
-
-## License
-
-ISC
-
+# @insticc/genericform
+
+A flexible, schema-driven React form component that renders any combination of field types from a plain JavaScript array. No boilerplate, built-in validation, modal support, and full external state control out of the box.
+
+---
+
+## Table of Contents
+
+- [@insticc/genericform](#insticcgenericform)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+  - [Peer Dependencies](#peer-dependencies)
+  - [Quick Start](#quick-start)
+  - [Field Types](#field-types)
+    - [Options format](#options-format)
+  - [Field Schema Reference](#field-schema-reference)
+    - [Common properties](#common-properties)
+    - [Style properties (all optional)](#style-properties-all-optional)
+    - [Type-specific properties](#type-specific-properties)
+  - [GenericForm Props](#genericform-props)
+    - [`customActions`](#customactions)
+  - [Validation](#validation)
+  - [Layout \& Grouping](#layout--grouping)
+    - [Inline fields](#inline-fields)
+    - [Groups](#groups)
+    - [Two-column split](#two-column-split)
+  - [External State Control](#external-state-control)
+  - [Modal Mode](#modal-mode)
+  - [Theming (CSS Variables)](#theming-css-variables)
+  - [Demo Components](#demo-components)
+  - [License](#license)
+
+---
+
+## Installation
+
+```bash
+npm install @insticc/genericform
+```
+
+Import the component and its stylesheet:
+
+```jsx
+import GenericForm from '@insticc/genericform';
+```
+
+---
+
+## Peer Dependencies
+
+The following must be installed in your project:
+
+| Package | Version |
+|---|---|
+| `react` | ≥ 17 |
+| `react-dom` | ≥ 17 |
+| `react-bootstrap` | ≥ 2 |
+| `semantic-ui-react` | ≥ 2 |
+| `react-datetime` | ≥ 3 |
+
+---
+
+## Quick Start
+
+```jsx
+import { useState } from 'react';
+import GenericForm from '@insticc/genericform';
+import '@insticc/genericform/dist/index.css';
+
+const MyForm = () => {
+  const [result, setResult] = useState(null);
+
+  const fields = [
+    { name: 'firstName', type: 'text',   label: 'First Name', required: true,  value: '' },
+    { name: 'lastName',  type: 'text',   label: 'Last Name',  required: true,  value: '' },
+    { name: 'email',     type: 'email',  label: 'Email',      required: true,  value: '' },
+    { name: 'age',       type: 'int',    label: 'Age',        min: 0, max: 120, value: '' },
+    {
+      name: 'country', type: 'select', label: 'Country', value: '',
+      options: [
+        { value: 'PT', text: 'Portugal' },
+        { value: 'ES', text: 'Spain' },
+        { value: 'FR', text: 'France' },
+      ],
+    },
+  ];
+
+  return (
+    <GenericForm
+      title="New User"
+      fields={fields}
+      submitText="Save"
+      onSubmit={(data) => setResult(data)}
+      onCancel={() => setResult(null)}
+    />
+  );
+};
+```
+
+The `onSubmit` callback receives the complete form data object keyed by each field's `name`.
+
+---
+
+## Field Types
+
+| `type` value | Rendered as | Key extra props |
+|---|---|---|
+| `text` / `string` | Text input | `placeholder`, `minLength`, `maxLength` |
+| `email` | Email input (format validated) | `placeholder` |
+| `password` | Password input | `placeholder` |
+| `int` / `number` | Number input | `min`, `max`, `step` |
+| `textArea` | Textarea | `rows`, `height`, `maxLength` |
+| `date` | Date picker (DD/MM/YYYY) | `placeholder` |
+| `datetime` | Date + time picker | `placeholder` |
+| `time` | Time picker (HH:mm) | `placeholder` |
+| `year` | Year picker | `minYear`, `maxYear` |
+| `select` | Native `<select>` | `options`, `placeholder`, `multiple` |
+| `multipleDropdown` | Semantic UI multi-select | `options`, `placeholder` |
+| `search` | Semantic UI Search | `options`, `isLoading`, `resultRenderer` |
+| `toggle` | Toggle switch | — |
+| `checkbox` | Single checkbox | `onOptionChange` |
+| `checkboxGroup` | Group of checkboxes | `options`, `grouped`, `onOptionChange` |
+| `radioGroup` | Stacked radio buttons | `options`, `onOptionChange` |
+| `radioGroupInline` | Inline radio buttons | `options`, `onOptionChange` |
+| `json` | JSON textarea editor | `datatype`, `allowModeSwitch`, `storeAsString`, `rows` |
+| `accordion` | Collapsible section | `sections`, `defaultOpen`, `activeAllIndex` |
+| `component` | Arbitrary JSX embed | `component` |
+| `label` | Section heading | — |
+| `hr` / `separator` | Horizontal rule | — |
+
+### Options format
+
+The `select`, `multipleDropdown`, `checkboxGroup`, and radio types all accept options in any of these shapes — the component resolves them automatically:
+
+```js
+{ value: 'pt', text: 'Portugal' }   // most common
+{ id: 'admin', label: 'Admin' }
+{ name: 'read', label: 'Read' }
+```
+
+---
+
+## Field Schema Reference
+
+Every item in the `fields` array is a plain object. The properties below apply across all (or most) field types.
+
+### Common properties
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `name` | `string` | — | **Required.** Unique key; used as the form data key. |
+| `type` | `string` | `'text'` | Field type (see table above). |
+| `label` / `displayName` | `string \| node` | — | Label shown above the field. |
+| `value` | `any` | — | Initial (or controlled) value. |
+| `required` | `bool` | `false` | Adds `*` indicator and enforces non-empty on submit. |
+| `disabled` | `bool` | `false` | Disables the input. |
+| `placeholder` | `string` | `displayName` | Input placeholder text. |
+| `tooltip` | `string` | — | Tooltip shown next to the label. |
+| `showHelp` | `bool` | `false` | Show ⓘ help icon. |
+| `helpText` | `string` | — | Text shown in the help icon tooltip. |
+| `errorMessage` | `string` | auto | Custom message shown on validation failure. |
+| `validate` | `function` | — | `(value, formData) => string \| null`. Return a string to show as error. |
+| `onChange` | `function` | — | `(value, formData) => void`. Per-field change callback (in addition to `onFieldChange`). |
+| `hide` | `bool \| function` | `false` | `(formData, field) => bool`. Hides the field dynamically. |
+| `inline` | `bool` | `false` | Renders this field side-by-side with adjacent `inline` fields. |
+| `group` | `string` | — | Groups fields under a named section heading. Groups render in alphabetical order, ungrouped fields last. |
+
+### Style properties (all optional)
+
+| Property | Type | Description |
+|---|---|---|
+| `style` / `mainDivStyle` | `object` | Style applied to the outer wrapper `<div>`. |
+| `labelStyle` | `object` | Style applied to the `<label>` element. |
+| `spanStyle` | `object` | Style applied to the required `*` span. |
+| `inputStyle` | `object` | Style applied to the input element. |
+| `tooltipStyle` | `object` | Style applied to the tooltip span. |
+| `className` | `string` | Extra CSS class for text/email/password inputs. |
+
+### Type-specific properties
+
+**`int` / `number`**
+```js
+{ name: 'score', type: 'number', min: 0, max: 100, step: 0.5, value: '' }
+```
+
+**`textArea`**
+```js
+{ name: 'bio', type: 'textArea', rows: 4, height: '120px', maxLength: 300, value: '' }
+```
+
+**`select`**
+```js
+{
+  name: 'country', type: 'select',
+  options: [{ value: 'PT', text: 'Portugal' }],
+  multiple: false,   // set true for native multi-select
+  value: '',
+}
+```
+
+**`checkboxGroup`**
+```js
+{
+  name: 'perms', type: 'checkboxGroup',
+  value: ['read'],   // array of selected names
+  options: [
+    { name: 'read',   label: 'Read' },
+    { name: 'write',  label: 'Write' },
+    { name: 'delete', label: 'Delete' },
+  ],
+  grouped: false,   // true renders a visual group border
+}
+```
+
+**`json`**
+```js
+{
+  name: 'config', type: 'json',
+  datatype: 'object',       // 'string' | 'number' | 'object'
+  allowModeSwitch: true,    // toggle between single / multiple (array) mode
+  storeAsString: false,     // keep raw string in formData instead of parsed value
+  rows: 6,
+  value: '',
+}
+```
+
+**`accordion`**
+```js
+{
+  name: 'advanced', type: 'accordion',
+  defaultOpen: false,
+  activeAllIndex: false,   // open all sections by default
+  sections: [
+    { title: 'Config',      icon: '⚙️', content: <p>…</p> },
+    { title: 'Danger zone', icon: '⚠️', content: <p>…</p> },
+  ],
+}
+```
+
+**`component`**
+```js
+{
+  name: 'avatar', type: 'component',
+  displayName: 'Avatar preview',
+  component: <MyAvatarWidget />,
+}
+```
+
+---
+
+## GenericForm Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `fields` | `array` | `[]` | **Required.** Array of field schema objects. |
+| `title` | `string \| node` | — | Form heading. |
+| `titleIcon` | `node` | — | Icon rendered before the title. |
+| `titleStyle` | `object` | — | Style for the title element. |
+| `onSubmit` | `async function` | — | `(formData) => void`. Called after successful validation. |
+| `handleSubmit` | `function` | — | Legacy: receives the native submit event instead of formData. |
+| `onCancel` | `function` | — | Called when the Cancel button is clicked. |
+| `onDataChange` | `function` | — | `(formData) => void`. Fired on every field change with the full snapshot. |
+| `onFieldChange` | `function` | — | `({ name, value, option? }) => void`. Fired per field change. |
+| `validateOnChange` | `bool` | `true` | Validate each field as the user types. |
+| `validateOnSubmit` | `bool` | `true` | Validate all fields before calling `onSubmit`. |
+| `submitText` | `string` | `'Submit'` | Label on the submit button. |
+| `cancelText` | `string` | `'Cancel'` | Label on the cancel button. |
+| `showSubmit` | `bool` | `true` | Show the submit button. |
+| `showCancel` | `bool` | `true` | Show the cancel button. |
+| `haveSaveButton` | `bool` | `true` | Alias for `showSubmit`. |
+| `submitButton` | `object` | `{}` | `{ className, style, icon }` overrides for the submit button. |
+| `cancelButton` | `object` | `{}` | `{ className, style, icon }` overrides for the cancel button. |
+| `customActions` | `array` | `[]` | Extra buttons in the actions bar (see below). |
+| `splitForm` | `bool` | `false` | Render fields in a two-column layout. |
+| `splitField` | `string` | — | Field `name` at which to split left/right columns. |
+| `splitGroup` | `bool` | `false` | Split at the group boundary instead of a specific field. |
+| `enableModal` | `bool` | `false` | Wrap the form in a React Bootstrap `<Modal>`. |
+| `modalShow` | `bool` | `false` | Controls modal visibility. |
+| `modalSize` | `string` | `'lg'` | Bootstrap modal size (`'sm'`, `'lg'`, `'xl'`). |
+| `disableDefaultContainer` | `bool` | `false` | Remove the default card/shadow wrapper `<div>`. |
+| `containerStyle` | `object` | `{}` | Style for the outermost container. |
+| `formStyle` | `object` | — | Style for the `<form>` element. |
+| `fieldsStyle` | `object` | — | Style for each fields section wrapper. |
+| `actionsDivStyle` | `object` | — | Style for the actions bar wrapper. |
+| `actionsStyle` | `object` | — | Style applied to every action button. |
+| `handleSearchChange` | `function` | — | Passed directly to the `search` field type. |
+| `handleResultSelect` | `function` | — | Passed directly to the `search` field type. |
+| `resultRenderer` | `function` | — | Custom result item renderer for the `search` type. |
+
+### `customActions`
+
+Inject additional buttons into the actions bar:
+
+```jsx
+<GenericForm
+  fields={fields}
+  customActions={[
+    {
+      label: 'Reset',
+      icon: <ResetIcon />,        // optional
+      className: 'ufg-button-secondary',
+      style: {},
+      disabled: false,
+      onClick: () => resetMyForm(),
+    },
+  ]}
+/>
+```
+
+---
+
+## Validation
+
+Validation runs on change (if `validateOnChange`) and on submit (if `validateOnSubmit`). Built-in rules cover the most common cases:
+
+| Rule | Prop | Example |
+|---|---|---|
+| Required | `required: true` | Non-empty value |
+| Email format | `type: 'email'` | Must match `x@x.x` |
+| Min length | `minLength: 3` | At least 3 characters |
+| Max length | `maxLength: 20` | At most 20 characters |
+| Numeric min | `min: 0` | Value ≥ 0 |
+| Numeric max | `max: 100` | Value ≤ 100 |
+| Custom | `validate` function | Any logic |
+
+**Custom validation:**
+
+```js
+{
+  name: 'website', type: 'text', value: '',
+  validate: (value, formData) => {
+    if (value && !value.startsWith('https://')) return 'Must start with https://';
+    return null; // no error
+  },
+}
+```
+
+**Cross-field validation** — the second argument is the live form data object:
+
+```js
+{
+  name: 'notifyEmail', type: 'email', value: '',
+  hide: (fd) => !fd.notify,
+  validate: (value, fd) =>
+    fd.notify && !value ? 'Required when notifications are enabled' : null,
+}
+```
+
+Override the default error message with `errorMessage`:
+
+```js
+{ name: 'name', type: 'text', required: true, errorMessage: 'Please enter your full name.' }
+```
+
+---
+
+## Layout & Grouping
+
+### Inline fields
+
+Set `inline: true` on consecutive fields to render them side-by-side:
+
+```js
+{ name: 'firstName', type: 'text', label: 'First name', inline: true, value: '' },
+{ name: 'lastName',  type: 'text', label: 'Last name',  inline: true, value: '' },
+```
+
+### Groups
+
+Assign a `group` string to organise fields under labelled sections. Groups are sorted alphabetically; ungrouped fields appear last.
+
+```js
+{ name: 'email',   type: 'email', group: 'Contact', value: '' },
+{ name: 'phone',   type: 'text',  group: 'Contact', value: '' },
+{ name: 'country', type: 'select', group: 'Address', value: '', options: [...] },
+```
+
+### Two-column split
+
+```jsx
+<GenericForm
+  fields={fields}
+  splitForm
+  splitField="address"   // everything up to and including 'address' goes left
+/>
+```
+
+Use `splitGroup` to split at a group boundary rather than a specific field.
+
+---
+
+## External State Control
+
+`GenericForm` manages its own internal state, but every field's `value` prop is watched. When a `value` changes, the form merges only that field — which means you can drive specific fields from a parent `useState` without re-initialising the whole form.
+
+The recommended pattern for full external control uses `onDataChange`:
+
+```jsx
+const [formState, setFormState] = useState({
+  firstName: '', lastName: '', country: '', city: '',
+});
+
+// Auto-fill city when country changes
+const handleFieldChange = ({ name, value }) => {
+  if (name === 'country') {
+    setFormState(prev => ({ ...prev, city: CITY_BY_COUNTRY[value] ?? '' }));
+  }
+};
+
+const fields = [
+  { name: 'firstName', type: 'text',   label: 'First name', value: formState.firstName },
+  { name: 'lastName',  type: 'text',   label: 'Last name',  value: formState.lastName  },
+  { name: 'country',   type: 'select', label: 'Country',    value: formState.country, options: COUNTRIES },
+  { name: 'city',      type: 'text',   label: 'City',       value: formState.city, disabled: true },
+];
+
+<GenericForm
+  fields={fields}
+  onDataChange={setFormState}
+  onFieldChange={handleFieldChange}
+  onSubmit={(data) => console.log('Saved:', data)}
+/>
+```
+
+You can also write directly to `formState` from outside the form (e.g. a "Load profile" button) — the form will detect the changed `value` props and update only the affected fields.
+
+---
+
+## Modal Mode
+
+Wrap the form in a React Bootstrap modal with no extra markup:
+
+```jsx
+const [show, setShow] = useState(false);
+
+<GenericForm
+  title="Edit User"
+  fields={fields}
+  enableModal
+  modalShow={show}
+  modalSize="lg"
+  onSubmit={(data) => { saveUser(data); setShow(false); }}
+  onCancel={() => setShow(false)}
+/>
+```
+
+> **Note:** Import React Bootstrap's CSS in your app root if you haven't already:
+> ```js
+> import 'bootstrap/dist/css/bootstrap.min.css';
+> ```
+
+---
+
+## Theming (CSS Variables)
+
+Override any of the following CSS custom properties to match your design system:
+
+```css
+:root {
+  --ufg-primary:        #1d4ed8;   /* submit button, active toggle */
+  --ufg-primary-dark:   #1e40af;
+  --ufg-primary-darker: #1e3a8a;
+  --ufg-error:          #dc2626;   /* validation error text */
+  --ufg-border:         #cbd5e1;   /* input borders */
+  --ufg-bg:             #ffffff;   /* card background */
+  --ufg-surface:        #fafafa;   /* secondary surfaces */
+  --ufg-text:           #111111;   /* primary text */
+  --ufg-text-secondary: #6b7280;   /* placeholder, help text */
+  --ufg-radius:         10px;      /* input border radius */
+  --ufg-shadow:         0 10px 30px rgba(0, 0, 0, 0.12);
+}
+```
+
+---
+
+## Demo Components
+
+Two reference implementations are bundled and exported:
+
+```jsx
+import GenericForm, { Demo, Demo2 } from '@insticc/genericform';
+
+// Every field type, conditional visibility, validation, custom actions:
+<Demo />
+
+// Full external state management with live formState sidebar:
+<Demo2 />
+```
+
+`Demo` covers all 18 field types, conditional field visibility via `hide`, cross-field validation, inline layout, accordion, and custom action buttons.
+
+`Demo2` demonstrates the `onDataChange` + `onFieldChange` pattern for parent-driven state, including dependent field auto-fill (country → city) and a live field-change event log.
+
+---
+
+## License
+
+ISC
+
 ---

package/build/FormFields/CustomCheckboxGroup.js

@@ -1,13 +1,12 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _defaults = require("./defaults");
 var _react = require("react");
+var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -25,6 +24,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var IndeterminateCheckbox = function IndeterminateCheckbox(_ref) {
   var id = _ref.id,
     checked = _ref.checked,
@@ -82,6 +82,15 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     inputStyle = _ref2$inputStyle === void 0 ? {} : _ref2$inputStyle,
     _ref2$tooltipStyle = _ref2.tooltipStyle,
     tooltipStyle = _ref2$tooltipStyle === void 0 ? {} : _ref2$tooltipStyle;
+  var isObject = (0, _react.useMemo)(function () {
+    return !!options && _typeof(options[0]) === "object";
+  }, [options]);
+  var getValue = (0, _react.useCallback)(function (opt) {
+    return isObject ? opt.id || opt.value || opt.name : opt;
+  }, [isObject]);
+  var getLabel = (0, _react.useCallback)(function (opt) {
+    return isObject ? opt.label || opt.text || opt.name : opt;
+  }, [isObject]);
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     collapsed = _useState2[0],
@@ -95,16 +104,16 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
   var getChildValues = (0, _react.useCallback)(function (opt) {
     var _opt$options$map, _opt$options;
     return (_opt$options$map = (_opt$options = opt.options) === null || _opt$options === void 0 ? void 0 : _opt$options.map(function (s) {
-      return s.name || s.value;
+      return getValue(s);
     })) !== null && _opt$options$map !== void 0 ? _opt$options$map : [];
   }, []);
   var isAllChecked = (0, _react.useCallback)(function (opt) {
-    var parentVal = opt.name || opt.value;
+    var parentVal = getValue(opt);
     var children = getChildValues(opt);
     return children.length > 0 && checked.includes(parentVal) && children.every(function (v) {
       return checked.includes(v);
     });
-  }, [checked, getChildValues]);
+  }, [checked, getValue, getChildValues]);
   var isSomeChecked = (0, _react.useCallback)(function (opt) {
     var children = getChildValues(opt);
     return children.some(function (v) {
@@ -119,14 +128,14 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
   }, [onChange, onOptionChange, name, checked]);
   var handleParentChange = (0, _react.useCallback)(function (opt, state) {
-    var parentVal = opt.name || opt.value;
+    var parentVal = getValue(opt);
     var children = getChildValues(opt);
-    var data = state ? _toConsumableArray(new Set(parentCheckAll ? [].concat(_toConsumableArray(checked), [parentVal, children]) : [].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
+    var data = state ? _toConsumableArray(new Set(parentCheckAll ? [].concat(_toConsumableArray(checked), [parentVal], _toConsumableArray(children)) : [].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
       return v !== parentVal && !children.includes(v);
     });
     onChange === null || onChange === void 0 || onChange(name, data);
     onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
-  }, [onChange, onOptionChange, name, checked, getChildValues]);
+  }, [onChange, onOptionChange, name, checked, parentCheckAll, getValue, getChildValues]);
   var toggleCollapse = (0, _react.useCallback)(function (idx) {
     setCollapsed(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, idx, !prev[idx]));
@@ -150,7 +159,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
         var _opt$options2;
         var hasChildren = !!((_opt$options2 = opt.options) !== null && _opt$options2 !== void 0 && _opt$options2.length);
         var isCollapsed = collapsible && !!collapsed[idx];
-        var parentVal = opt.name || opt.value;
+        var parentVal = getValue(opt);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [idx > 0 && grouped && /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
             style: {
@@ -201,7 +210,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
                 htmlFor: "".concat(name, "-").concat(idx),
                 style: opt.labelStyle,
-                children: opt.label || opt.text
+                children: getLabel(opt)
               })]
             })]
           }), hasChildren && !isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -210,24 +219,25 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
               paddingLeft: collapsible ? '2rem' : '1.25rem'
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), opt.options.map(function (subopt, subidx) {
+              var suboptVal = getValue(subopt);
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "ufg-checkbox-item",
                 style: inputStyle,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                   id: "".concat(name, "-").concat(idx, "-").concat(subidx),
                   type: "checkbox",
-                  checked: checked.includes(subopt.name || subopt.value),
+                  checked: checked.includes(suboptVal),
                   disabled: !!subopt.disabled,
                   style: subopt.inputStyle,
                   onChange: function onChange(e) {
-                    return handleChange(subopt.name || subopt.value, e.target.checked);
+                    return handleChange(suboptVal, e.target.checked);
                   }
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
                   htmlFor: "".concat(name, "-").concat(idx, "-").concat(subidx),
                   style: subopt.labelStyle,
-                  children: subopt.label || subopt.text
+                  children: getLabel(subopt)
                 })]
-              }, subopt.name || subopt.value);
+              }, suboptVal);
             })]
           })]
         }, "".concat(name, "-").concat(idx));

package/build/FormFields/CustomFileInput.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -28,6 +30,8 @@ var CustomFileInput = function CustomFileInput(_ref) {
     error = _ref.error,
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$tooltipInline = _ref.tooltipInline,
+    tooltipInline = _ref$tooltipInline === void 0 ? false : _ref$tooltipInline,
     _ref$showHelp = _ref.showHelp,
     showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
     _ref$helpText = _ref.helpText,
@@ -114,7 +118,7 @@ var CustomFileInput = function CustomFileInput(_ref) {
           color: '#aaa'
         },
         children: "No file selected"
-      })]
+      }), tooltipInline && (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       id: "form-input-".concat(name),
       ref: ref,
@@ -125,7 +129,27 @@ var CustomFileInput = function CustomFileInput(_ref) {
       },
       disabled: disabled,
       onChange: handleChange
-    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+    }), (0, _defaults.errorJsx)(error), !tooltipInline && (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
   });
 };
+CustomFileInput.propType = {
+  onChange: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array, _propTypes["default"].object]),
+  accept: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  tooltipInline: _propTypes["default"].bool,
+  showHelp: _propTypes["default"].bool,
+  helpText: _propTypes["default"].string,
+  mainDivStyle: _propTypes["default"].object,
+  labelStyle: _propTypes["default"].object,
+  spanStyle: _propTypes["default"].object,
+  inputStyle: _propTypes["default"].object,
+  tooltipStyle: _propTypes["default"].object
+};
 var _default = exports["default"] = CustomFileInput;

package/build/FormFields/CustomRadioGroup.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var CustomRadioGroup = function CustomRadioGroup(_ref) {
   var _onChange = _ref.onChange,
@@ -43,7 +43,9 @@ var CustomRadioGroup = function CustomRadioGroup(_ref) {
     inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
     tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
-  var isObject = _typeof(options[0]) === "object";
+  var isObject = (0, _react.useMemo)(function () {
+    return !!options && _typeof(options[0]) === "object";
+  }, [options]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,

package/build/index.js

@@ -51,12 +51,6 @@ Object.defineProperty(exports, "CustomInput", {
     return _CustomInput["default"];
   }
 });
-Object.defineProperty(exports, "CustomInputAdd", {
-  enumerable: true,
-  get: function get() {
-    return _CustomInputAdd["default"];
-  }
-});
 Object.defineProperty(exports, "CustomJson", {
   enumerable: true,
   get: function get() {
@@ -705,7 +699,8 @@ var GenericForm = function GenericForm(_ref) {
           grouped: field.grouped,
           collapsible: field.collapsible,
           defaultCollapsed: field.defaultCollapsed,
-          enableParent: field.enableParent
+          enableParent: field.enableParent,
+          parentCheckAll: field.parentCheckAll
         }), field.name);
       case 'radioGroup':
       case 'radioGroupInline':
@@ -747,6 +742,7 @@ var GenericForm = function GenericForm(_ref) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomFileInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
           accept: field.accept,
+          tooltipInline: field.tooltipInline,
           onChange: fieldHandler(field)
         }), field.name);
       case 'inputAdd':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/genericform",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A generic form with a comprehensive set of field types, validation, and external state management",
   "main": "build/index.js",
   "scripts": {