@neo4j-ndl/react 4.21.2 → 4.22.1

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,
@@ -468,13 +466,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 +491,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 +515,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,
@@ -602,6 +609,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 +741,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 +851,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 +897,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"]);