@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -1,59 +1,163 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { flattenAdaptableFormFields, isAdaptableFormFieldDisabled, isAdaptableFormFieldGroup, isAdaptableFormFieldGroupHidden, isAdaptableFormFieldHidden, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
 import FormLayout, { FormRow } from '../FormLayout';
 import Input from '../Input';
-import SimpleButton from '../SimpleButton';
+import { AdaptableButtonView, } from '../../View/Components/AdaptableButton';
 import AdaptableInput from '../../View/Components/AdaptableInput';
-import { useMemo } from 'react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import { useAdaptable } from '../../View/AdaptableContext';
-import { Select } from '../Select';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
+import { MultiCombobox, SingleCombobox } from '../Combobox';
 export function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabledButtons, api, context, focusFirstButton = true, }) {
-    return (React.createElement(React.Fragment, null, formDef.buttons.map((button, index) => {
-        const buttonIcon = api.internalApi.getIconForButton(button, context, {
-            height: 15,
-            width: 15,
-        });
-        let buttonStyle = api.internalApi.getStyleForButton(button, context
-            ? context
-            : {
-                ...api.internalApi.buildBaseContext(),
-            });
-        let buttonLabel = api.internalApi.getLabelForButton(button, context
-            ? context
-            : {
-                ...api.internalApi.buildBaseContext(),
-            });
-        let buttonTooltip = api.internalApi.getTooltipForButton(button, context
-            ? context
-            : {
-                ...api.internalApi.buildBaseContext(),
-            });
-        return (React.createElement(SimpleButton, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? defaultTone, variant: buttonStyle?.variant, "data-text": buttonLabel, className: twMerge(index ? 'twa:ml-2' : '', buttonStyle?.className), onClick: () => {
-                onClick(button);
-            } }, buttonLabel));
-    })));
+    const formContext = context ??
+        {
+            ...api.internalApi.buildBaseContext(),
+        };
+    return (_jsx(_Fragment, { children: formDef.buttons.map((button, index) => {
+            const buttonLabel = api.internalApi.getLabelForButton(button, formContext) ?? '';
+            const buttonStyle = api.internalApi.getStyleForButton(button, formContext);
+            return (_jsx(AdaptableButtonView, { button: button, context: formContext, api: api, defaults: {
+                    tone: defaultTone,
+                    variant: buttonStyle?.variant,
+                }, rerenderOnClick: false, iconSize: { height: 15, width: 15 }, autoFocus: focusFirstButton && index === 0, disabled: disabledButtons?.[index], "data-text": buttonLabel, className: twMerge(index ? 'twa:ml-2' : '', buttonStyle?.className), onClick: () => onClick(button) }, index));
+        }) }));
 }
 export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displayTitle, api, context, focusFirstButton, }) {
     const getFieldValue = (key) => data[key];
     const setFieldValue = (key, value) => {
         const newData = { ...data, [key]: value };
         onChange(newData);
+        // Per-field `onValueChange` hook. We resolve the field by name from the
+        // form definition so callers (e.g. number-input keyDown handler) can use
+        // the same setter and still get the per-field callback fired.
+        //
+        // We enrich the host-supplied `context` with the freshly-computed
+        // `newData` as `formData` so consumers (e.g. CustomToolbarFormContext)
+        // see the updated values immediately - without having to wait for a
+        // React re-render to flush the new `data` prop into a rebuilt context.
+        const changedField = flatFields.find((f) => f.name === key);
+        if (changedField?.onValueChange) {
+            const enrichedContext = { ...(context ?? {}), formData: newData };
+            changedField.onValueChange(value, enrichedContext);
+        }
     };
     const adaptable = useAdaptable();
+    // Stable form-instance id used to namespace every field's id so that
+    // multiple AdaptableForms on the same page (Alerts + a Custom Toolbar +
+    // a wizard, say) don't generate clashing DOM ids - and so screen readers
+    // can correctly resolve `htmlFor` / `aria-describedby` references.
+    const formInstanceId = useId();
+    const fieldDomId = (field) => `${formInstanceId}-${field.name}`;
+    const fieldLabelId = (field) => `${formInstanceId}-${field.name}-label`;
+    const fieldHelpId = (field) => `${formInstanceId}-${field.name}-help`;
+    const fieldErrorId = (field) => `${formInstanceId}-${field.name}-error`;
+    // Flat list of fields - shared by validation, options resolution, etc.
+    // Flattens both inline-row arrays and field groups.
+    const flatFields = useMemo(() => flattenAdaptableFormFields(formDef), [formDef]);
+    // Cache for async options resolution. Populated by the effect below.
+    const [asyncOptionsCache, setAsyncOptionsCache] = useState({});
+    // Kick off resolution of any function-form `options` that return a
+    // Promise. Synchronous functions are still resolved during render
+    // (via `resolveOptions`) so there's no first-paint lag for them.
+    useEffect(() => {
+        let cancelled = false;
+        flatFields.forEach((field) => {
+            const usesOptions = field.fieldType === 'select' || field.fieldType === 'radio';
+            if (usesOptions && typeof field.options === 'function') {
+                const result = field.options(data, context);
+                if (result instanceof Promise) {
+                    result
+                        .then((resolved) => {
+                        if (!cancelled) {
+                            setAsyncOptionsCache((prev) => ({ ...prev, [field.name]: resolved }));
+                        }
+                    })
+                        .catch(() => {
+                        /* swallow - leave the previous cache entry in place */
+                    });
+                }
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [flatFields, data, context]);
+    const resolveOptions = (field) => {
+        const opts = field.options;
+        if (!opts)
+            return [];
+        if (Array.isArray(opts))
+            return opts;
+        const result = opts(data, context);
+        if (result instanceof Promise) {
+            return asyncOptionsCache[field.name] ?? [];
+        }
+        return result;
+    };
+    // Run validation once per render so errors can be rendered inline AND
+    // exposed to button-level handlers via context (`formIsValid`,
+    // `formErrors`).
+    const formErrors = useMemo(() => validateAdaptableForm(formDef, data, context), 
+    // intentionally include formDef so dynamic hidden/disabled functions
+    // re-evaluate when the form definition changes
+    [formDef, data, context]);
+    const formIsValid = Object.keys(formErrors).length === 0;
+    // Context enriched with the freshly-computed form data + validity, so
+    // that button hidden/disabled/onClick callbacks see consistent values.
+    const buttonContext = useMemo(() => ({
+        ...(context ?? {}),
+        formData: data,
+        formIsValid,
+        formErrors,
+    }), [context, data, formIsValid, formErrors]);
     const disabledButtons = useMemo(() => formDef.buttons?.map((button) => {
         // defensive programming: conventionally context should ALWAYS be present for validating buttons
-        const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
+        const isValid = !!button.disabled && !!buttonContext ? !button.disabled(button, buttonContext) : true;
         return !isValid;
-    }) ?? [], [data]);
+    }) ?? [], [buttonContext, formDef.buttons]);
     const renderLabel = (field) => {
-        return (React.createElement(Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
+        const required = field.required;
+        // For radio groups we render a `<div>` (the radiogroup container has
+        // no single focusable element to associate the label with), but for
+        // every other field type we wire the label to the field's input with
+        // `htmlFor` so clicking the label focuses the control and so screen
+        // readers announce it correctly.
+        const useFor = field.fieldType !== 'radio' && field.fieldType !== 'textOutput';
+        const requiredMarker = required ? (_jsx("span", { className: "ab-Form_required-marker", "aria-hidden": "true", children: ' *' })) : null;
+        if (useFor) {
+            return (_jsxs("label", { id: fieldLabelId(field), htmlFor: fieldDomId(field), className: "ab-FormLayout_column--label", style: { textAlign: 'end' }, title: field.tooltip, children: [field.label, requiredMarker] }));
+        }
+        return (_jsxs(Box, { id: fieldLabelId(field), className: "ab-FormLayout_column--label", style: { textAlign: 'end' }, title: field.tooltip, children: [field.label, requiredMarker] }));
     };
     const renderField = (field) => {
         const value = getFieldValue(field.name) ?? '';
+        const isDisabled = isAdaptableFormFieldDisabled(field, data, context);
+        const error = formErrors[field.name];
+        // Accessibility: every editable input gets a stable id (so the label's
+        // `htmlFor` resolves) plus `aria-*` attributes that announce required
+        // state, validity and link the help / error text via
+        // `aria-describedby`.
+        const inputId = fieldDomId(field);
+        const helpId = field.helpText ? fieldHelpId(field) : undefined;
+        const errorId = error ? fieldErrorId(field) : undefined;
+        const describedBy = [errorId, helpId].filter(Boolean).join(' ') || undefined;
+        const a11yProps = {
+            id: inputId,
+            'aria-required': field.required ? true : undefined,
+            'aria-invalid': error ? true : undefined,
+            'aria-describedby': describedBy,
+        };
         const onChange = (event) => {
             if (field.fieldType === 'number') {
-                const numberValue = Number(event.target.value);
+                const rawValue = event.target.value;
+                // Empty string -> null (so `required` validation can detect it)
+                if (rawValue === '') {
+                    setFieldValue(field.name, null);
+                    return;
+                }
+                const numberValue = Number(rawValue);
                 if (isNaN(numberValue)) {
                     setFieldValue(field.name, null);
                 }
@@ -65,78 +169,252 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                 setFieldValue(field.name, event.target.value);
             }
         };
+        let control;
         switch (field.fieldType) {
             case 'text':
             case 'number':
             case 'date':
-                return (React.createElement(AdaptableInput, { type: field.fieldType, className: "twa:w-full", name: field.name, value: value, onChange: onChange }));
-            case 'select':
-                let items = field.options.map((item) => ({
+                control = (_jsx(AdaptableInput, { type: field.fieldType, className: "twa:w-full", name: field.name, value: value, onChange: onChange, disabled: isDisabled, placeholder: field.placeholder, min: field.min, max: field.max, step: field.step, minLength: field.fieldType === 'text' ? field.minLength : undefined, maxLength: field.fieldType === 'text' ? field.maxLength : undefined, pattern: field.fieldType === 'text' ? field.pattern : undefined, ...a11yProps }));
+                break;
+            case 'time':
+                control = (_jsx(Input, { type: "time", className: "twa:w-full", name: field.name, value: value, onChange: onChange, disabled: isDisabled, placeholder: field.placeholder, min: field.min, max: field.max, step: field.step, ...a11yProps }));
+                break;
+            case 'datetime':
+                control = (_jsx(Input, { type: "datetime-local", className: "twa:w-full", name: field.name, value: value, onChange: onChange, disabled: isDisabled, placeholder: field.placeholder, min: field.min, max: field.max, step: field.step, ...a11yProps }));
+                break;
+            case 'color':
+                control = (_jsx(Input, { type: "color", name: field.name, value: value || '#000000', onChange: onChange, disabled: isDisabled, ...a11yProps }));
+                break;
+            case 'textarea': {
+                const rows = field.rows ?? 3;
+                control = (_jsx("textarea", { id: inputId, name: field.name, value: value, disabled: isDisabled, placeholder: field.placeholder, minLength: field.minLength, maxLength: field.maxLength, rows: rows, "aria-required": field.required ? true : undefined, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, onChange: (e) => setFieldValue(field.name, e.target.value), className: twMerge('ab-Input', 'twa:box-border', 'twa:rounded-input', 'twa:w-full', 'twa:p-2', isDisabled
+                        ? 'twa:bg-(--ab-cmp-input--disabled__background)'
+                        : 'twa:bg-input-background') }));
+                break;
+            }
+            case 'slider': {
+                const min = typeof field.min === 'number' ? field.min : 0;
+                const max = typeof field.max === 'number' ? field.max : 100;
+                const step = field.step ?? 1;
+                const numericValue = typeof value === 'number' ? value : Number(value) || min;
+                control = (_jsxs(Flex, { flexDirection: "row", alignItems: "center", style: { columnGap: 'var(--ab-base-space)', minWidth: 160 }, children: [_jsx(Input, { type: "range", name: field.name, value: numericValue, disabled: isDisabled, min: min, max: max, step: step, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": numericValue, onChange: (e) => {
+                                const next = Number(e.target.value);
+                                setFieldValue(field.name, Number.isNaN(next) ? null : next);
+                            }, className: "twa:flex-1", ...a11yProps }), _jsx(Box, { className: "twa:text-xs twa:tabular-nums", style: { minWidth: 32, textAlign: 'right' }, "aria-hidden": "true", children: numericValue })] }));
+                break;
+            }
+            case 'select': {
+                const items = resolveOptions(field).map((item) => ({
                     value: item.value,
                     label: item.label,
-                    onClick: () => setFieldValue(field.name, item.value),
                 }));
-                return (React.createElement(Select, { style: { width: '100%' }, className: `ab-options__select`, options: items, onChange: (newValue) => setFieldValue(field.name, newValue), value: value }));
+                // The underlying SingleCombobox / MultiCombobox manage their own
+                // popup-based focus; we wrap them in a labelled `role="group"` so
+                // assistive tech announces "<label> group" when focus enters and
+                // can read out the help/error text via `aria-describedby`.
+                const groupProps = {
+                    id: inputId,
+                    role: 'group',
+                    'aria-labelledby': fieldLabelId(field),
+                    'aria-required': field.required ? true : undefined,
+                    'aria-invalid': error ? true : undefined,
+                    'aria-describedby': describedBy,
+                };
+                if (field.multi) {
+                    // For multi-selects the canonical value is an array. Coerce
+                    // anything else (e.g. legacy string defaults) to [] so the
+                    // underlying combobox never receives a non-array value.
+                    const selected = Array.isArray(value) ? value : [];
+                    control = (_jsx(Box, { ...groupProps, children: _jsx(MultiCombobox, { items: items, onValueChange: (newValues) => setFieldValue(field.name, newValues), value: selected, disabled: isDisabled, placeholder: field.placeholder }) }));
+                }
+                else {
+                    control = (_jsx(Box, { ...groupProps, children: _jsx(SingleCombobox, { items: items, onValueChange: (newValue) => setFieldValue(field.name, newValue), value: value, disabled: isDisabled, placeholder: field.placeholder }) }));
+                }
+                break;
+            }
+            case 'radio': {
+                const items = resolveOptions(field);
+                const groupName = `${formInstanceId}-radio-${field.name}`;
+                control = (_jsx(Flex, { id: inputId, role: "radiogroup", "aria-labelledby": fieldLabelId(field), "aria-required": field.required ? true : undefined, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, flexDirection: "row", alignItems: "center", flexWrap: "wrap", style: { columnGap: 'var(--ab-base-space-2)', rowGap: 'var(--ab-base-space)' }, children: items.map((item) => {
+                        const optionId = `${groupName}-${String(item.value)}`;
+                        const checked = value === item.value;
+                        return (_jsxs("label", { htmlFor: optionId, className: "twa:flex twa:flex-row twa:items-center twa:box-border", style: {
+                                columnGap: 'var(--ab-base-space)',
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                            }, children: [_jsx(Input, { type: "radio", id: optionId, name: groupName, value: String(item.value), checked: checked, disabled: isDisabled, onChange: () => setFieldValue(field.name, item.value) }), _jsx(Box, { children: item.label })] }, optionId));
+                    }) }));
+                break;
+            }
             case 'checkbox':
-                return (React.createElement(Input, { type: "checkbox", name: field.name, checked: value, onChange: (event) => {
+                control = (_jsx(Input, { type: "checkbox", name: field.name, checked: value, disabled: isDisabled, onChange: (event) => {
                         setFieldValue(field.name, event.target.checked);
-                    } }));
+                    }, ...a11yProps }));
+                break;
             case 'textOutput':
-                return React.createElement(Box, { className: "twa:pl-2 twa:text-left" }, value);
+                control = _jsx(Box, { className: "twa:pl-2 twa:text-left", children: value });
+                break;
+            case 'custom':
+                // The consumer renders whatever they like; we keep the wiring
+                // controlled by routing reads/writes through `setFieldValue`.
+                control = field.render ? (field.render({
+                    value,
+                    setValue: (newValue) => setFieldValue(field.name, newValue),
+                    field,
+                    formData: data,
+                    context,
+                    disabled: isDisabled,
+                    error,
+                })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60", children: "custom field requires a `render` function" }));
+                break;
             default:
-                return React.createElement("div", null,
-                    "Unknown field type: ",
-                    field.fieldType);
+                control = _jsxs("div", { children: ["Unknown field type: ", field.fieldType] });
         }
+        // No surrounding wrapper if there's nothing extra to show - keeps the
+        // existing simple cases visually identical.
+        if (!field.helpText && !error) {
+            return control;
+        }
+        return (_jsxs(Box, { children: [control, field.helpText && !error ? (_jsx(Box, { id: helpId, className: "ab-Form_help twa:text-xs twa:opacity-70 twa:mt-1", children: field.helpText })) : null, error ? (_jsx(Box, { id: errorId, role: "alert", "aria-live": "polite", className: "ab-Form_error twa:text-xs twa:mt-1", style: { color: 'var(--ab-color-error, #c00)' }, children: error })) : null] }));
     };
     // by default we have 2 columns: label & input
     const columns = formDef.config?.columns ?? [1, 2];
-    return (React.createElement(React.Fragment, null,
-        displayTitle && formDef.title && (React.createElement(Box, { "data-name": "form-title", className: "twa:text-5 twa:mb-2 twa:font-bold" }, formDef.title)),
-        formDef.description && (React.createElement(Box, { "data-name": "form-description", className: "twa:mb-3" }, formDef.description)),
-        React.createElement(FormLayout, { onKeyDown: (event) => {
-                const target = event.target;
-                const targetName = target.name;
-                const field = formDef.fields
-                    .map((field) => {
-                    if (Array.isArray(field)) {
-                        return field.filter((f) => f.name === targetName)[0];
-                    }
-                    else {
-                        return field.name === targetName ? field : null;
-                    }
-                })
-                    .filter(Boolean)[0];
-                if (field && field.fieldType === 'number') {
-                    // for number fields
-                    // hook them up to the CellEditorKeyDown event
-                    // so Shortcuts work as expected
-                    const value = event.target.value;
-                    adaptable._emit('CellEditorKeyDown', {
-                        keyDownEvent: event,
-                        cellValue: value,
-                        columnId: field.name,
-                        updateValueCallback: (updatedValue) => {
-                            setFieldValue(field.name, updatedValue);
-                        },
-                    });
+    // Form-level Enter-to-submit. Shift+Enter or Enter inside a textarea
+    // inserts a newline rather than submitting; this matches user
+    // expectations for multi-line inputs. We explicitly don't trigger on
+    // submit when a select dropdown is open (Enter selects an option),
+    // which the SingleCombobox/MultiCombobox handle internally by
+    // stopping propagation.
+    const handleFormKeyDown = (event) => {
+        handleKeyDownForNumberFields(event);
+        if (!formDef.onSubmit) {
+            return;
+        }
+        if (event.key !== 'Enter') {
+            return;
+        }
+        if (event.shiftKey) {
+            return;
+        }
+        const target = event.target;
+        if (target && target.tagName === 'TEXTAREA') {
+            return;
+        }
+        if (!formIsValid) {
+            return;
+        }
+        event.preventDefault();
+        formDef.onSubmit(data, buttonContext);
+    };
+    const handleKeyDownForNumberFields = (event) => {
+        const target = event.target;
+        const targetName = target.name;
+        const field = flatFields.find((f) => f.name === targetName);
+        if (field && field.fieldType === 'number') {
+            // for number fields
+            // hook them up to the CellEditorKeyDown event
+            // so Shortcuts work as expected
+            const value = event.target.value;
+            adaptable._emit('CellEditorKeyDown', {
+                keyDownEvent: event,
+                cellValue: value,
+                columnId: field.name,
+                updateValueCallback: (updatedValue) => {
+                    setFieldValue(field.name, updatedValue);
+                },
+            });
+        }
+    };
+    // `inline` lays fields out on a single horizontal row, with each field
+    // rendered as `<label> <input>` side-by-side. Designed for compact hosts
+    // like Dashboard Custom Toolbars; the standard popup/wizard layout (rows
+    // with label-on-left grid) is preserved for everything else.
+    const isInlineLayout = formDef.layout === 'inline';
+    // Inline-layout entries: groups are flattened (their title/description
+    // skipped because there's no vertical room) but inline-row arrays are
+    // also flattened so every visible field becomes its own cell.
+    const renderInlineEntries = () => {
+        const items = [];
+        for (const entry of formDef.fields ?? []) {
+            if (isAdaptableFormFieldGroup(entry)) {
+                if (isAdaptableFormFieldGroupHidden(entry, data, context))
+                    continue;
+                for (const inner of entry.fields) {
+                    if (Array.isArray(inner))
+                        items.push(...inner);
+                    else
+                        items.push(inner);
                 }
-            }, "data-name": "form-content", columns: columns, className: "twa:pr-1 twa:overflow-auto" }, formDef.fields?.map((field, index) => {
-            if (Array.isArray(field)) {
-                const rowFields = {};
-                field.map((fieldItem, index) => {
-                    const rowFieldIndex = 2 * index + 1;
-                    rowFields[rowFieldIndex] = renderLabel(fieldItem);
-                    rowFields[rowFieldIndex + 1] = renderField(fieldItem);
-                });
-                return React.createElement(FormRow, { key: index, ...rowFields });
+            }
+            else if (Array.isArray(entry)) {
+                items.push(...entry);
             }
             else {
-                return (React.createElement(FormRow, { key: field.name },
-                    renderLabel(field),
-                    renderField(field)));
+                items.push(entry);
             }
-        })),
-        formDef.buttons ? (React.createElement(Flex, { "data-name": "form-buttons", className: "twa:mt-3", flexDirection: "row", alignItems: "center", justifyContent: "center" },
-            React.createElement(AdaptableFormComponentButtons, { focusFirstButton: focusFirstButton, onClick: onButtonClick, disabledButtons: disabledButtons, defaultTone: "success", formDef: formDef, api: api, context: context }))) : null));
+        }
+        return items
+            .filter((field) => !isAdaptableFormFieldHidden(field, data, context))
+            .map((field) => {
+            const useFor = field.fieldType !== 'radio' && field.fieldType !== 'textOutput';
+            const requiredMarker = field.required ? (_jsx("span", { className: "ab-Form_required-marker", "aria-hidden": "true", children: ' *' })) : null;
+            return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", style: { columnGap: 'var(--ab-base-space)' }, children: [field.label ? (useFor ? (_jsxs("label", { id: fieldLabelId(field), htmlFor: fieldDomId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] })) : (_jsxs(Box, { id: fieldLabelId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] }))) : null, renderField(field)] }, field.name));
+        });
+    };
+    const renderRowsEntry = (entry, index) => {
+        if (isAdaptableFormFieldGroup(entry)) {
+            if (isAdaptableFormFieldGroupHidden(entry, data, context)) {
+                return null;
+            }
+            // Render inner items using the same row/inline-row logic that
+            // top-level entries use, just nested below the group header.
+            const innerNodes = entry.fields.map((inner, innerIndex) => {
+                if (Array.isArray(inner)) {
+                    const visible = inner.filter((f) => !isAdaptableFormFieldHidden(f, data, context));
+                    if (visible.length === 0)
+                        return null;
+                    // `renderField` returns `React.ReactNode` (custom fields may
+                    // produce strings/fragments) so we widen the row-bag to match.
+                    const rowFields = {};
+                    visible.map((fieldItem, idx) => {
+                        const rowFieldIndex = 2 * idx + 1;
+                        rowFields[rowFieldIndex] = renderLabel(fieldItem);
+                        rowFields[rowFieldIndex + 1] = renderField(fieldItem);
+                    });
+                    return _jsx(FormRow, { ...rowFields }, `g${index}-r${innerIndex}`);
+                }
+                if (isAdaptableFormFieldHidden(inner, data, context))
+                    return null;
+                return (_jsxs(FormRow, { children: [renderLabel(inner), renderField(inner)] }, `g${index}-${inner.name}`));
+            });
+            const hasHeader = entry.title || entry.description;
+            return (_jsxs(React.Fragment, { children: [hasHeader ? (_jsxs(Box, { "data-name": "form-group-header", className: "ab-Form_group-header", style: {
+                            gridColumn: '1 / -1',
+                            marginTop: index === 0 ? 0 : 'var(--ab-base-space-2)',
+                            marginBottom: 'var(--ab-base-space)',
+                            paddingBottom: 'var(--ab-base-space-half)',
+                            borderBottom: '1px solid var(--ab-color-divider, rgba(0,0,0,0.08))',
+                        }, children: [entry.title ? (_jsx(Box, { className: "ab-Form_group-title twa:text-4 twa:font-bold", children: entry.title })) : null, entry.description ? (_jsx(Box, { className: "ab-Form_group-description twa:text-xs twa:opacity-70 twa:mt-1", children: entry.description })) : null] })) : null, innerNodes] }, `group-${index}`));
+        }
+        if (Array.isArray(entry)) {
+            // `renderField` returns `React.ReactNode` (custom fields may
+            // produce strings/fragments) so we widen the row-bag to match.
+            const rowFields = {};
+            const visible = entry.filter((f) => !isAdaptableFormFieldHidden(f, data, context));
+            if (visible.length === 0)
+                return null;
+            visible.map((fieldItem, idx) => {
+                const rowFieldIndex = 2 * idx + 1;
+                rowFields[rowFieldIndex] = renderLabel(fieldItem);
+                rowFields[rowFieldIndex + 1] = renderField(fieldItem);
+            });
+            return _jsx(FormRow, { ...rowFields }, index);
+        }
+        if (isAdaptableFormFieldHidden(entry, data, context)) {
+            return null;
+        }
+        return (_jsxs(FormRow, { children: [renderLabel(entry), renderField(entry)] }, entry.name));
+    };
+    return (_jsxs(_Fragment, { children: [displayTitle && formDef.title && (_jsx(Box, { "data-name": "form-title", className: "twa:text-5 twa:mb-2 twa:font-bold", children: formDef.title })), formDef.description && (_jsx(Box, { "data-name": "form-description", className: "twa:mb-3", children: formDef.description })), isInlineLayout ? (_jsx(Flex, { "data-name": "form-content", className: "ab-FormLayout--inline", flexDirection: "row", alignItems: "center", flexWrap: "wrap", style: { columnGap: 'var(--ab-base-space-2)', rowGap: 'var(--ab-base-space)' }, onKeyDown: handleFormKeyDown, children: renderInlineEntries() })) : (_jsx(FormLayout, { onKeyDown: handleFormKeyDown, "data-name": "form-content", columns: columns, className: "twa:pr-1 twa:overflow-auto", children: formDef.fields?.map((entry, index) => renderRowsEntry(entry, index)) })), formDef.buttons ? (_jsx(Flex, { "data-name": "form-buttons", className: isInlineLayout ? '' : 'twa:mt-3', flexDirection: "row", alignItems: "center", justifyContent: isInlineLayout ? 'space-start' : 'center', style: isInlineLayout
+                    ? { marginLeft: 'var(--ab-base-space-2)', columnGap: 'var(--ab-base-space)' }
+                    : undefined, children: _jsx(AdaptableFormComponentButtons, { focusFirstButton: focusFirstButton, onClick: onButtonClick, disabledButtons: disabledButtons, defaultTone: "success", formDef: formDef, api: api, context: buttonContext }) })) : null] }));
 }

package/src/components/Card/index.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { twMerge } from '../../twMerge';
 import clsx from 'clsx';
 import { Box } from '../Flex';
 export function Card(props) {
     const { shadow = true, children, className, style, gap = 2 } = props;
-    return (React.createElement(Box, { className: clsx('twa:bg-defaultbackground twa:text-text-on-defaultbackground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
+    return (_jsx(Box, { className: clsx('twa:bg-defaultbackground twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
             'twa:shadow-sm': shadow,
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
@@ -12,34 +12,34 @@ export function Card(props) {
             'twa:gap-3': gap === 3,
             'twa:gap-4': gap === 4,
             'twa:gap-8': gap === 8,
-        }, className), style: style }, children));
+        }, className), style: style, children: children }));
 }
 const CardTitle = (props) => {
     const { children, className, gap = 2, border = true } = props;
-    return (React.createElement("div", { className: twMerge(clsx('ab-Card__title', {
+    return (_jsx("div", { className: twMerge(clsx('ab-Card__title', {
             'twa:flex twa:flex-row': true,
             'twa:items-center': true,
             'twa:text-4 twa:px-2': true,
             'twa:pb-2 twa:border-b': border,
-            'twa:border-b-text-on-defaultbackground/20': true,
+            'twa:border-b-foreground/20': true,
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
             'twa:gap-2': gap === 2,
             'twa:gap-3': gap === 3,
             'twa:gap-4': gap === 4,
             'twa:gap-8': gap === 8,
-        }, className)) }, children));
+        }, className)), children: children }));
 };
 const CardBody = (props) => {
     const { children, gap, className } = props;
-    return (React.createElement("div", { className: clsx('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
+    return (_jsx("div", { className: clsx('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
             'twa:gap-2': gap === 2,
             'twa:gap-3': gap === 3,
             'twa:gap-4': gap === 4,
             'twa:gap-8': gap === 8,
-        }, className) }, children));
+        }, className), children: children }));
 };
 Card.Title = CardTitle;
 Card.Body = CardBody;

package/src/components/CheckBox/index.d.ts

@@ -13,11 +13,13 @@ type TypeProps = {
     children?: ReactNode;
     gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
+    checkSquareClassName?: string;
 };
 export interface CheckBoxProps extends TypeProps, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
 }
-declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => React.JSX.Element;
+declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, checkSquareClassName, tabIndex, as, ...props }: CheckBoxProps) => React.JSX.Element;
 export declare const CheckBoxGroup: (props: FlexProps & {
     orientation: "horizontal" | "vertical";
+    children?: ReactNode;
 }) => React.JSX.Element;
 export { CheckBox };

package/src/components/CheckBox/index.js

@@ -1,11 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { Box, Flex } from '../Flex';
 import clsx from 'clsx';
+import { cn } from '../../lib/utils';
+import { targetPeer } from '../twUtils';
 const Square = (props) => {
-    return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
+    return (_jsx("div", { className: cn(`ab-CheckBox__square ab-CheckBox__square--${props.type}`, targetPeer.focusVisibleOutline, props.className) }));
 };
-const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', as = 'label', ...props }) => {
+const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', checkSquareClassName, tabIndex, as = 'label', ...props }) => {
     const [stateChecked, setStateChecked] = useState(false);
     const computedChecked = checked !== undefined ? checked : stateChecked;
     const onInputChange = (event) => {
@@ -25,13 +28,13 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
         : computedChecked === false
             ? 'unchecked'
             : 'indeterminate';
-    const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
-    children = children ? (React.createElement("div", { style: {
+    const gap = _jsx("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
+    children = children ? (_jsx("div", { style: {
             display: 'inline-block',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-        } }, children)) : null;
+        }, children: children })) : null;
     const before = childrenPosition === 'start' ? children : null;
     const beforeGap = childrenPosition === 'start' && children ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
@@ -41,19 +44,13 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    let input = (React.createElement("input", { className: clsx(`ab-CheckBox-input twa:align-middle twa:opacity-0`, {
+    let input = (_jsx("input", { className: clsx(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
             'twa:cursor-pointer': !readOnly && !disabled,
-        }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, type: "checkbox", name: name, value: value, onChange: onInputChange }));
-    return (React.createElement(Box, { ...props, className: clsx('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as },
-        before,
-        beforeGap,
-        input,
-        React.createElement(Square, { type: type }),
-        afterGap,
-        after));
+        }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, tabIndex: tabIndex, type: "checkbox", name: name, value: value, onChange: onInputChange }));
+    return (_jsxs(Box, { ...props, className: clsx('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, _jsx(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
 };
 export const CheckBoxGroup = (props) => {
     const { orientation, ...flexProps } = props;
-    return (React.createElement(Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
+    return (_jsx(Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
 };
 export { CheckBox };