@neo4j-ndl/react 4.22.0 → 4.23.3

package/lib/cjs/combobox/Combobox.js

@@ -40,6 +40,7 @@ const react_1 = require("@floating-ui/react");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const classnames_1 = __importDefault(require("classnames"));
 const react_2 = require("react");
+const form_control_1 = require("../_common/form-control");
 const use_semi_controlled_state_1 = require("../_common/use-semi-controlled-state");
 const utils_1 = require("../_common/utils");
 const checkbox_1 = require("../checkbox");
@@ -108,9 +109,6 @@ const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHi
     const listboxId = `${baseId}-listbox`;
     const panelId = `${baseId}-panel`;
     const triggerId = `${baseId}-trigger`;
-    const labelId = `${baseId}-label`;
-    const helpTextId = `${baseId}-help-text`;
-    const errorTextId = `${baseId}-error-text`;
     const initialValue = (0, combobox_utils_1.getInitialValue)(value, defaultValue, isMulti);
     const [selectedValue, setSelectedValue, resetSelectedValue] = (0, use_semi_controlled_state_1.useSemicontrolledState)({
         isControlled: value !== undefined,
@@ -144,7 +142,6 @@ const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHi
         isPortaled,
         onOpenChange: setIsPanelOpen,
     });
-    const hasCustomTrigger = renderTrigger !== undefined;
     const builtInTriggerRef = (0, react_1.useMergeRefs)([internalTriggerRef, triggerRef]);
     const customTriggerRef = (0, react_1.useMergeRefs)([
         refs.setReference,
@@ -468,13 +465,22 @@ const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHi
         ? actionRows.map((row) => getOptionId(row)).join(' ')
         : undefined;
     const isDialogPanel = isSearchable;
-    // An error replaces the help text, so only one message is ever rendered and
-    // only that one is described.
-    const displayedErrorText = errorText !== null && errorText !== void 0 ? errorText : nativeValidationMessage;
-    const hasError = Boolean(displayedErrorText);
-    const hasHelpText = Boolean(helpText) && !hasError;
-    const messageId = hasError ? errorTextId : helpTextId;
-    const describedById = hasError || hasHelpText ? messageId : undefined;
+    // The shared form field resolves the ids and which message is displayed -
+    // an error always replaces the help text. A native validation failure
+    // reported by the hidden form control acts as the error while no errorText
+    // is set.
+    const { field: formField, controlProps: fieldControlProps } = (0, form_control_1.useFormField)({
+        baseId,
+        controlId: triggerId,
+        errorText: errorText !== null && errorText !== void 0 ? errorText : nativeValidationMessage,
+        hasRequiredIndicator,
+        hasVisuallyHiddenLabel,
+        helpText,
+        isRequired,
+        label,
+    });
+    const hasError = formField.hasError;
+    const labelId = formField.labelId;
     const triggerAria = {
         'aria-activedescendant': isPanelOpen && !isSearchable ? activeOptionId : undefined,
         'aria-controls': getTriggerControlsId({
@@ -484,11 +490,11 @@ const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHi
             listboxId,
             panelId,
         }),
-        'aria-describedby': describedById,
+        'aria-describedby': fieldControlProps['aria-describedby'],
         'aria-disabled': isDisabled ? true : undefined,
         'aria-expanded': isPanelOpen,
         'aria-haspopup': isDialogPanel ? 'dialog' : 'listbox',
-        'aria-invalid': hasError ? true : undefined,
+        'aria-invalid': fieldControlProps['aria-invalid'],
         'aria-required': isRequired ? true : undefined,
         // The label points at the trigger through `htmlFor`, so clicking it moves
         // focus to the trigger.
@@ -508,13 +514,13 @@ const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHi
         // is referenced, keeping "Optional" out of the accessible name.
         'aria-labelledby': labelId, ref: builtInTriggerRef });
     const field = {
-        errorText: displayedErrorText,
-        errorTextId,
+        errorText: formField.errorText,
+        errorTextId: formField.errorTextId,
         hasError,
         hasRequiredIndicator,
         hasVisuallyHiddenLabel,
         helpText,
-        helpTextId,
+        helpTextId: formField.helpTextId,
         isRequired,
         label,
         labelId,
@@ -569,20 +575,27 @@ const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHi
                     id: listboxId,
                     role: 'listbox',
                 }), { className: "ndl-combobox-actions", children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "ndl-combobox-action-divider", htmlAttributes: { 'aria-hidden': true } }), actionRows.map((row, index) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [index > 0 && (0, combobox_utils_1.getAction)(row).hasDivider === true && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "ndl-combobox-action-divider", htmlAttributes: { 'aria-hidden': true } })), renderAction(row)] }, row.value)))] })))] })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, style: style, className: (0, classnames_1.default)('ndl-combobox', {
+    const formControl = name !== undefined && ((0, jsx_runtime_1.jsx)(ComboboxFormControl, { ref: internalTriggerRef, name: name, form: formId, autoComplete: autoComplete, options: formOptions, selectedOptions: selectedOptions, resetSelectedOptions: resetSelectedOptions, isMulti: isMulti, isDisabled: isDisabled, isRequired: isRequired, isSelectionControlled: value !== undefined, onValueChange: setSelectedValue, onInvalid: setNativeValidationMessage, onReset: resetFromForm }));
+    const floatingPanel = context.open && ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPanelPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: portalTarget, children: wrapChildren })), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, 
+            // A select-only combobox keeps DOM focus on the trigger and speaks
+            // through aria-activedescendant, so nothing inside is focused.
+            initialFocus: isSearchable ? searchInputRef : -1, returnFocus: internalTriggerRef, children: panel }) }));
+    // No root element around a custom trigger, so the trigger is a real child of
+    // whatever holds the combobox and sibling-based selectors there match it.
+    // The form control goes after the trigger to keep it out of leading
+    // positional slots.
+    if (renderTrigger !== undefined) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderTrigger(triggerProps, triggerState), formControl, floatingPanel] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, style: style, className: (0, classnames_1.default)('ndl-combobox ndl-combobox-field', {
             'ndl-clean': isClean,
-            'ndl-combobox-custom-trigger': hasCustomTrigger,
-            'ndl-combobox-field': !hasCustomTrigger,
             'ndl-disabled': isDisabled,
             'ndl-fluid': isFluid,
             'ndl-has-error': hasError,
             'ndl-large': size === 'large',
             'ndl-medium': size === 'medium',
             'ndl-small': size === 'small',
-        }, className) }, htmlAttributes, { children: [name !== undefined && ((0, jsx_runtime_1.jsx)(ComboboxFormControl, { ref: internalTriggerRef, name: name, form: formId, autoComplete: autoComplete, options: formOptions, selectedOptions: selectedOptions, resetSelectedOptions: resetSelectedOptions, isMulti: isMulti, isDisabled: isDisabled, isRequired: isRequired, isSelectionControlled: value !== undefined, onValueChange: setSelectedValue, onInvalid: setNativeValidationMessage, onReset: resetFromForm })), renderTrigger === undefined ? ((0, jsx_runtime_1.jsx)(Control, { triggerProps: builtInTriggerProps, state: triggerState, field: field, placeholder: placeholder, isClearable: isClearable, isClean: isClean, size: size, maxRows: isMulti ? maxRows : undefined, components: components, referenceProps: getReferenceProps(), referenceRef: refs.setReference })) : (renderTrigger(triggerProps, triggerState)), context.open && ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPanelPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: portalTarget, children: wrapChildren })), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, 
-                    // A select-only combobox keeps DOM focus on the trigger and speaks
-                    // through aria-activedescendant, so nothing inside is focused.
-                    initialFocus: isSearchable ? searchInputRef : -1, returnFocus: internalTriggerRef, children: panel }) }))] })));
+        }, className) }, htmlAttributes, { children: [formControl, (0, jsx_runtime_1.jsx)(Control, { triggerProps: builtInTriggerProps, state: triggerState, field: field, placeholder: placeholder, isClearable: isClearable, isClean: isClean, size: size, maxRows: isMulti ? maxRows : undefined, components: components, referenceProps: getReferenceProps(), referenceRef: refs.setReference }), floatingPanel] })));
 };
 exports.Combobox = Combobox;
 const getTriggerControlsId = ({ isPanelOpen, isDialogPanel, hasRows, panelId, listboxId, }) => {
@@ -602,6 +615,42 @@ const getSelectedOptions = (value) => {
     }
     return value === null ? [] : [value];
 };
+/**
+ * The public `ComboboxFieldState` keeps its own shape - a custom trigger
+ * renders from it - so the built-in field parts map it onto the shared form
+ * field state (`_common/form-control`) instead of taking it directly.
+ */
+const toFormFieldState = (field) => {
+    const hasHelpText = Boolean(field.helpText) && !field.hasError;
+    return {
+        controlId: field.triggerId,
+        errorText: field.errorText,
+        errorTextId: field.errorTextId,
+        hasError: field.hasError,
+        hasRequiredIndicator: field.hasRequiredIndicator,
+        hasVisuallyHiddenLabel: field.hasVisuallyHiddenLabel,
+        helpText: field.helpText,
+        helpTextId: field.helpTextId,
+        isRequired: field.isRequired,
+        label: field.label,
+        labelId: field.labelId,
+        message: field.hasError
+            ? field.errorText
+            : hasHelpText
+                ? field.helpText
+                : undefined,
+        messageId: field.hasError
+            ? field.errorTextId
+            : hasHelpText
+                ? field.helpTextId
+                : undefined,
+        messageSeverity: field.hasError
+            ? 'error'
+            : hasHelpText
+                ? 'help'
+                : undefined,
+    };
+};
 /**
  * A native select mirrors the custom control for submission, autofill,
  * constraint validation, and reset. It is hidden from assistive technology
@@ -698,6 +747,7 @@ const Control = ({ triggerProps, state, field, placeholder, isClearable, isClean
     const { isOpen, isMulti, isDisabled, selectedOptions, clear, remove } = state;
     const { MultiValue, SingleValue } = components;
     const { ref: triggerRef } = triggerProps, triggerAria = __rest(triggerProps, ["ref"]);
+    const sharedField = toFormFieldState(field);
     const hasValue = selectedOptions.length > 0;
     const singleValueOption = isMulti ? undefined : selectedOptions[0];
     // Selected values are shown as tags, so the trigger renders nothing and is
@@ -807,7 +857,7 @@ const Control = ({ triggerProps, state, field, placeholder, isClearable, isClean
     return (
     // A fragment, so the label, the control, and the message are rows of the
     // combobox itself. A custom trigger replaces all three.
-    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { field: field, size: size, onLabelClick: handleLabelClick }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: referenceRef, className: (0, classnames_1.default)('ndl-combobox-control', {
+    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_control_1.FormFieldLabel, { field: sharedField, size: size, onLabelClick: handleLabelClick }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: referenceRef, className: (0, classnames_1.default)('ndl-combobox-control', {
                     'ndl-clean': isClean,
                     'ndl-disabled': isDisabled,
                     'ndl-has-error': field.hasError,
@@ -853,35 +903,7 @@ const Control = ({ triggerProps, state, field, placeholder, isClearable, isClean
                             // Select.
                             (0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-clear", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "ndl-combobox-clear-button", "aria-label": "Clear selection", onKeyDown: handleAuxiliaryActionKeyDown, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(heroIcons_1.XMarkIconOutline, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-combobox-divider" })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-combobox-dropdown-indicator', {
                                     'ndl-open': isOpen,
-                                }), children: (0, jsx_runtime_1.jsx)(heroIcons_1.ChevronDownIconOutline, { "aria-hidden": "true", className: "ndl-combobox-icon" }) })] })] })), (0, jsx_runtime_1.jsx)(FieldMessage, { field: field, size: size })] }));
-};
-/**
- * The trigger is a button with `role="combobox"`, which takes its accessible
- * name from the author rather than from its content, so the label is referenced
- * through `aria-labelledby` instead of wrapping the control in a `<label>`.
- * The label is still a `<label>` associated through `htmlFor`, and clicking it
- * moves focus to the trigger, as with a native select. It deliberately does
- * not open the panel, which is also what a native select label leaves alone.
- */
-const FieldLabel = ({ field, size, onLabelClick }) => {
-    const { label, labelId, triggerId, hasVisuallyHiddenLabel, hasRequiredIndicator, isRequired, } = field;
-    const variant = size === 'large' ? 'body-large' : 'body-medium';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ndl-combobox-label-row', {
-            'ndl-visually-hidden': hasVisuallyHiddenLabel,
-        }), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: "label", variant: variant, className: "ndl-combobox-label", htmlAttributes: {
-                    htmlFor: triggerId,
-                    id: labelId,
-                    onClick: onLabelClick,
-                }, children: label }), hasRequiredIndicator && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, className: "ndl-combobox-label-indicator", children: isRequired ? 'Required' : 'Optional' }))] }));
-};
-/**
- * Rendered whether or not there is a message, so the live region is in the
- * document before the text arrives and a validation error is announced.
- */
-const FieldMessage = ({ field, size }) => {
-    const { errorText, hasError, helpText, helpTextId, errorTextId } = field;
-    const variant = size === 'large' ? 'body-medium' : 'body-small';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-message", "aria-live": "polite", children: [hasError && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(heroIcons_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, className: "ndl-error-text", htmlAttributes: { id: errorTextId }, children: errorText })] })), !hasError && Boolean(helpText) && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, htmlAttributes: { id: helpTextId }, children: helpText }))] }));
+                                }), children: (0, jsx_runtime_1.jsx)(heroIcons_1.ChevronDownIconOutline, { "aria-hidden": "true", className: "ndl-combobox-icon" }) })] })] })), (0, jsx_runtime_1.jsx)(form_control_1.FormFieldMessage, { field: sharedField, size: size })] }));
 };
 const Panel = (_a) => {
     var { children, ref, id, ariaLabel, isDialog, className, style } = _a, restProps = __rest(_a, ["children", "ref", "id", "ariaLabel", "isDialog", "className", "style"]);