@neo4j-ndl/react 4.22.0 → 4.22.1

package/lib/esm/_common/form-control/use-inline-field-label.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import classNames from 'classnames';
+import { useEffect, useMemo } from 'react';
+import { needleWarningMessage } from '../utils';
+/**
+ * The inline label of a selection control (Checkbox, Radio, Switch): the
+ * control and its label text sit side by side inside one wrapping `<label>`.
+ * A string label is wrapped in a titled span so a truncated label stays
+ * readable through its tooltip; a custom node is rendered as given, which is
+ * also why it needs `ariaLabel` to name the control. Warns when neither a
+ * label nor an aria label is provided.
+ *
+ * Returns the classes of the wrapping label along with its content, so that
+ * an adopting component never names a shared class itself. Typography and
+ * color sit on that wrapper rather than on the span here, so that a custom
+ * node inherits them too.
+ *
+ * TODO v5: wrap a custom node as well, once the DOM of a custom label can
+ * change. This would own all label styling, and the difference between the
+ * full-strength inline label and the weaker label above a control could then
+ * become a prop here instead of living in two stylesheet classes.
+ */
+export const useInlineFieldLabel = ({ componentName, label, ariaLabel, isDisabled = false, isFluid = false, isTruncated = false, }) => {
+    useEffect(() => {
+        if (Boolean(label) === false && Boolean(ariaLabel) === false) {
+            needleWarningMessage(`${componentName} needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI`);
+        }
+    }, [ariaLabel, componentName, label]);
+    const labelContent = useMemo(() => {
+        if (Boolean(label) === false) {
+            return null;
+        }
+        if (typeof label === 'string') {
+            return (_jsx("span", { title: label, className: classNames('ndl-form-inline-label-text', {
+                    'ndl-disabled': isDisabled,
+                    'ndl-truncated': isTruncated,
+                }), children: label }));
+        }
+        return label;
+    }, [label, isDisabled, isTruncated]);
+    return {
+        fieldClassName: classNames('ndl-form-inline-field', {
+            'ndl-disabled': isDisabled,
+            'ndl-fluid': isFluid,
+        }),
+        labelContent,
+    };
+};
+//# sourceMappingURL=use-inline-field-label.js.map

package/lib/esm/_common/form-control/use-inline-field-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-inline-field-label.js","sourceRoot":"","sources":["../../../../src/_common/form-control/use-inline-field-label.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAmChD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,aAAa,EACb,KAAK,EACL,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,GACQ,EAA6B,EAAE;IAC1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7D,oBAAoB,CAClB,GAAG,aAAa,uGAAuG,CACxH,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtC,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,CACL,eACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE;oBAClD,cAAc,EAAE,UAAU;oBAC1B,eAAe,EAAE,WAAW;iBAC7B,CAAC,YAED,KAAK,GACD,CACR,CAAC;QACJ,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAErC,OAAO;QACL,cAAc,EAAE,UAAU,CAAC,uBAAuB,EAAE;YAClD,cAAc,EAAE,UAAU;YAC1B,WAAW,EAAE,OAAO;SACrB,CAAC;QACF,YAAY;KACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport classNames from 'classnames';\nimport { useEffect, useMemo } from 'react';\n\nimport { needleWarningMessage } from '../utils';\n\ntype UseInlineFieldLabelOptions = {\n  /** Component name used in the missing-label console warning. */\n  componentName: string;\n  /** The label rendered next to the control, inside its wrapping `<label>`. */\n  label: React.ReactNode;\n  // TODO v5: only needed while naming a selection control is split across\n  // `label` and `ariaLabel`. Whenever the label alone names the control, as it\n  // does on Combobox, the warning below has nothing left to check.\n  /** The aria label naming the control when the label is not a string. */\n  ariaLabel: string | undefined;\n  /** Dims the label and the control it belongs to. */\n  isDisabled?: boolean;\n  /** Lets the field take the full available width of its container. */\n  isFluid?: boolean;\n  /**\n   * Truncates an overflowing string label to one line with an ellipsis (the\n   * `title` set on the span keeps the full text reachable). Radio behavior\n   * today; a candidate to unify across all selection controls in v5.\n   */\n  isTruncated?: boolean;\n};\n\ntype UseInlineFieldLabelResult = {\n  /** The label, rendered next to the control. */\n  labelContent: React.ReactNode;\n  /**\n   * Classes for the `<label>` that wraps the control and the label, which the\n   * adopting component renders. Owned here so that the shared classes stay an\n   * implementation detail of this module.\n   */\n  fieldClassName: string;\n};\n\n/**\n * The inline label of a selection control (Checkbox, Radio, Switch): the\n * control and its label text sit side by side inside one wrapping `<label>`.\n * A string label is wrapped in a titled span so a truncated label stays\n * readable through its tooltip; a custom node is rendered as given, which is\n * also why it needs `ariaLabel` to name the control. Warns when neither a\n * label nor an aria label is provided.\n *\n * Returns the classes of the wrapping label along with its content, so that\n * an adopting component never names a shared class itself. Typography and\n * color sit on that wrapper rather than on the span here, so that a custom\n * node inherits them too.\n *\n * TODO v5: wrap a custom node as well, once the DOM of a custom label can\n * change. This would own all label styling, and the difference between the\n * full-strength inline label and the weaker label above a control could then\n * become a prop here instead of living in two stylesheet classes.\n */\nexport const useInlineFieldLabel = ({\n  componentName,\n  label,\n  ariaLabel,\n  isDisabled = false,\n  isFluid = false,\n  isTruncated = false,\n}: UseInlineFieldLabelOptions): UseInlineFieldLabelResult => {\n  useEffect(() => {\n    if (Boolean(label) === false && Boolean(ariaLabel) === false) {\n      needleWarningMessage(\n        `${componentName} needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI`,\n      );\n    }\n  }, [ariaLabel, componentName, label]);\n\n  const labelContent = useMemo(() => {\n    if (Boolean(label) === false) {\n      return null;\n    }\n\n    if (typeof label === 'string') {\n      return (\n        <span\n          title={label}\n          className={classNames('ndl-form-inline-label-text', {\n            'ndl-disabled': isDisabled,\n            'ndl-truncated': isTruncated,\n          })}\n        >\n          {label}\n        </span>\n      );\n    }\n\n    return label;\n  }, [label, isDisabled, isTruncated]);\n\n  return {\n    fieldClassName: classNames('ndl-form-inline-field', {\n      'ndl-disabled': isDisabled,\n      'ndl-fluid': isFluid,\n    }),\n    labelContent,\n  };\n};\n"]}

package/lib/esm/checkbox/Checkbox.js

@@ -32,9 +32,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useMergeRefs } from '@floating-ui/react';
 import classNames from 'classnames';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import { useInlineFieldLabel } from '../_common/form-control';
 import { useSemiControlledInput } from '../_common/use-semi-controlled-input';
-import { needleWarningMessage } from '../_common/utils';
 export const Checkbox = (_a) => {
     var _b;
     var { isChecked, isDefaultChecked, isIndeterminate = false, isFluid = false, isDisabled = false, hasLeadingLabel, ariaLabel, onChange, onClick, value, label, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["isChecked", "isDefaultChecked", "isIndeterminate", "isFluid", "isDisabled", "hasLeadingLabel", "ariaLabel", "onChange", "onClick", "value", "label", "className", "style", "htmlAttributes", "ref"]);
@@ -46,10 +46,6 @@ export const Checkbox = (_a) => {
         onChange,
         state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
     });
-    const labelWrappingClasses = classNames('ndl-checkbox-label', {
-        'ndl-disabled': isDisabled,
-        'ndl-fluid': isFluid,
-    });
     const checkboxClasses = classNames('ndl-checkbox', className, {
         'ndl-disabled': isDisabled,
     });
@@ -58,21 +54,13 @@ export const Checkbox = (_a) => {
             internalRef.current.indeterminate = isIndeterminate;
         }
     }, [isIndeterminate]);
-    /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */
-    const labelContent = useMemo(() => {
-        if (Boolean(label) === false) {
-            return null;
-        }
-        if (typeof label === 'string') {
-            return (_jsx("span", { title: label, className: "ndl-checkbox-label-text", children: label }));
-        }
-        return label;
-    }, [label]);
-    useEffect(() => {
-        if (Boolean(label) === false && Boolean(ariaLabel) === false) {
-            needleWarningMessage('Checkbox needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
-        }
-    }, [ariaLabel, label]);
-    return (_jsxs("label", { className: labelWrappingClasses, children: [hasLeadingLabel === true && labelContent, _jsx("input", Object.assign({ ref: mergedRefs, type: "checkbox", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: checkboxClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
+    const { labelContent, fieldClassName } = useInlineFieldLabel({
+        ariaLabel,
+        componentName: 'Checkbox',
+        isDisabled,
+        isFluid,
+        label,
+    });
+    return (_jsxs("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, _jsx("input", Object.assign({ ref: mergedRefs, type: "checkbox", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: checkboxClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
 };
 //# sourceMappingURL=Checkbox.js.map

package/lib/esm/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\n\ntype CheckboxProps = {\n  /** Whether the checkbox is checked */\n  isChecked?: boolean;\n  /** Checks the input by default in uncontrolled mode */\n  isDefaultChecked?: boolean; // isDefaultChecked sounds weird to me?\n  /** Whether the checkbox is indeterminate */\n  isIndeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  isDisabled?: boolean;\n  /** Whether the checkbox & label should take the full available width of its container */\n  isFluid?: boolean;\n  /** The value of the checkbox */\n  value?: HtmlAttributes<'input'>['value']; // should this be required?\n  /** Whether the label should be displayed before the checkbox */\n  hasLeadingLabel?: boolean;\n  /** The callback function triggered when the checkbox value changes */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** The callback function triggered when the checkbox is clicked */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n  | {\n      /** The aria label of the checkbox. Required if the label is not a string. */\n      ariaLabel: string;\n      /** The label of the checkbox. If not a string, supply an aria label for screen reader support. */\n      label?: undefined;\n    }\n  | {\n      ariaLabel?: string;\n      label: React.ReactNode;\n    }\n);\n\nexport const Checkbox = ({\n  isChecked,\n  isDefaultChecked,\n  isIndeterminate = false,\n  isFluid = false,\n  isDisabled = false,\n  hasLeadingLabel,\n  ariaLabel,\n  onChange,\n  onClick,\n  value,\n  label,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'input', CheckboxProps>) => {\n  const internalRef = useRef<HTMLInputElement>(null);\n  const mergedRefs = useMergeRefs([internalRef, ref]);\n\n  const [isCheckedState, internalOnChange] = useSemiControlledInput({\n    inputType: 'checkbox',\n    isControlled: isChecked !== undefined,\n    onChange,\n    state: isChecked ?? isDefaultChecked ?? false,\n  });\n\n  const labelWrappingClasses = classNames('ndl-checkbox-label', {\n    'ndl-disabled': isDisabled,\n    'ndl-fluid': isFluid,\n  });\n\n  const checkboxClasses = classNames('ndl-checkbox', className, {\n    'ndl-disabled': isDisabled,\n  });\n\n  useEffect(() => {\n    if (internalRef.current) {\n      internalRef.current.indeterminate = isIndeterminate;\n    }\n  }, [isIndeterminate]);\n\n  /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */\n  const labelContent = useMemo(() => {\n    if (Boolean(label) === false) {\n      return null;\n    }\n\n    if (typeof label === 'string') {\n      return (\n        <span title={label} className=\"ndl-checkbox-label-text\">\n          {label}\n        </span>\n      );\n    }\n    return label;\n  }, [label]);\n\n  useEffect(() => {\n    if (Boolean(label) === false && Boolean(ariaLabel) === false) {\n      needleWarningMessage(\n        'Checkbox needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n  }, [ariaLabel, label]);\n\n  return (\n    <label className={labelWrappingClasses}>\n      {hasLeadingLabel === true && labelContent}\n      <input\n        ref={mergedRefs}\n        type=\"checkbox\"\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        checked={isCheckedState}\n        onClick={onClick}\n        onChange={internalOnChange}\n        value={value}\n        style={style}\n        className={checkboxClasses}\n        {...restProps}\n        {...htmlAttributes}\n      />\n      {Boolean(hasLeadingLabel) === false && labelContent}\n    </label>\n  );\n};\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAuC9E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAiBa,EAAE,EAAE;;QAjBjB,EACvB,SAAS,EACT,gBAAgB,EAChB,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAEiC,EADjC,SAAS,cAhBW,qMAiBxB,CADa;IAEZ,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,sBAAsB,CAAC;QAChE,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,SAAS,KAAK,SAAS;QACrC,QAAQ;QACR,KAAK,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,mCAAI,KAAK;KAC9C,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc,EAAE,SAAS,EAAE;QAC5D,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC;QAC3D,SAAS;QACT,aAAa,EAAE,UAAU;QACzB,UAAU;QACV,OAAO;QACP,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,aAC7B,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,8BACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,UAAU,gBACH,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,eAAe,IACtB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, useRef } from 'react';\n\nimport { useInlineFieldLabel } from '../_common/form-control';\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\n\ntype CheckboxProps = {\n  /** Whether the checkbox is checked */\n  isChecked?: boolean;\n  /** Checks the input by default in uncontrolled mode */\n  isDefaultChecked?: boolean; // isDefaultChecked sounds weird to me?\n  /** Whether the checkbox is indeterminate */\n  isIndeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  isDisabled?: boolean;\n  /** Whether the checkbox & label should take the full available width of its container */\n  isFluid?: boolean;\n  /** The value of the checkbox */\n  value?: HtmlAttributes<'input'>['value']; // should this be required?\n  /** Whether the label should be displayed before the checkbox */\n  hasLeadingLabel?: boolean;\n  /** The callback function triggered when the checkbox value changes */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** The callback function triggered when the checkbox is clicked */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n  | {\n      /** The aria label of the checkbox. Required if the label is not a string. */\n      ariaLabel: string;\n      // TODO v5: inconsistent naming. Naming the checkbox takes a union of\n      // `label` and `ariaLabel`, so the accessible name comes from a different\n      // prop depending on what the label renders. Combobox instead requires the\n      // label and clips it with `hasVisuallyHiddenLabel`, and TextInput reaches\n      // for htmlAttributes['aria-label'].\n      /** The label of the checkbox. If not a string, supply an aria label for screen reader support. */\n      label?: undefined;\n    }\n  | {\n      ariaLabel?: string;\n      label: React.ReactNode;\n    }\n);\n\nexport const Checkbox = ({\n  isChecked,\n  isDefaultChecked,\n  isIndeterminate = false,\n  isFluid = false,\n  isDisabled = false,\n  hasLeadingLabel,\n  ariaLabel,\n  onChange,\n  onClick,\n  value,\n  label,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'input', CheckboxProps>) => {\n  const internalRef = useRef<HTMLInputElement>(null);\n  const mergedRefs = useMergeRefs([internalRef, ref]);\n\n  const [isCheckedState, internalOnChange] = useSemiControlledInput({\n    inputType: 'checkbox',\n    isControlled: isChecked !== undefined,\n    onChange,\n    state: isChecked ?? isDefaultChecked ?? false,\n  });\n\n  const checkboxClasses = classNames('ndl-checkbox', className, {\n    'ndl-disabled': isDisabled,\n  });\n\n  useEffect(() => {\n    if (internalRef.current) {\n      internalRef.current.indeterminate = isIndeterminate;\n    }\n  }, [isIndeterminate]);\n\n  const { labelContent, fieldClassName } = useInlineFieldLabel({\n    ariaLabel,\n    componentName: 'Checkbox',\n    isDisabled,\n    isFluid,\n    label,\n  });\n\n  return (\n    <label className={fieldClassName}>\n      {hasLeadingLabel === true && labelContent}\n      <input\n        ref={mergedRefs}\n        type=\"checkbox\"\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        checked={isCheckedState}\n        onClick={onClick}\n        onChange={internalOnChange}\n        value={value}\n        style={style}\n        className={checkboxClasses}\n        {...restProps}\n        {...htmlAttributes}\n      />\n      {Boolean(hasLeadingLabel) === false && labelContent}\n    </label>\n  );\n};\n"]}

package/lib/esm/combobox/Combobox.js

@@ -34,13 +34,14 @@ import { FloatingFocusManager, FloatingPortal, useMergeRefs, } from '@floating-u
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
 import { Fragment, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { FormFieldLabel, FormFieldMessage, useFormField, } from '../_common/form-control';
 import { useSemicontrolledState } from '../_common/use-semi-controlled-state';
 import { needleWarningMessage } from '../_common/utils';
 import { Checkbox } from '../checkbox';
 import { ConditionalWrap } from '../conditional-wrap';
 import { DismissibleTag } from '../dismissible-tag';
 import { Divider } from '../divider';
-import { CheckIconOutline, ChevronDownIconOutline, ExclamationCircleIconSolid, MagnifyingGlassIconOutline, PlusIconOutline, XMarkIconOutline, } from '../icons/generated/heroIcons';
+import { CheckIconOutline, ChevronDownIconOutline, MagnifyingGlassIconOutline, PlusIconOutline, XMarkIconOutline, } from '../icons/generated/heroIcons';
 import { LoadingSpinner } from '../loading-spinner';
 import { ReadOnlyTag } from '../read-only-tag';
 import { useNeedleTheme } from '../theme';
@@ -102,9 +103,6 @@ export const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVis
     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 = getInitialValue(value, defaultValue, isMulti);
     const [selectedValue, setSelectedValue, resetSelectedValue] = useSemicontrolledState({
         isControlled: value !== undefined,
@@ -462,13 +460,22 @@ export const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVis
         ? 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 } = 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({
@@ -478,11 +485,11 @@ export const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVis
             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.
@@ -502,13 +509,13 @@ export const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVis
         // 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,
@@ -595,6 +602,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
@@ -691,6 +734,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
@@ -800,7 +844,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.
-    _jsxs(_Fragment, { children: [_jsx(FieldLabel, { field: field, size: size, onLabelClick: handleLabelClick }), _jsxs("div", Object.assign({ ref: referenceRef, className: classNames('ndl-combobox-control', {
+    _jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { field: sharedField, size: size, onLabelClick: handleLabelClick }), _jsxs("div", Object.assign({ ref: referenceRef, className: classNames('ndl-combobox-control', {
                     'ndl-clean': isClean,
                     'ndl-disabled': isDisabled,
                     'ndl-has-error': field.hasError,
@@ -846,35 +890,7 @@ const Control = ({ triggerProps, state, field, placeholder, isClearable, isClean
                             // Select.
                             _jsxs("div", { className: "ndl-combobox-clear", children: [_jsx("button", { type: "button", className: "ndl-combobox-clear-button", "aria-label": "Clear selection", onKeyDown: handleAuxiliaryActionKeyDown, onClick: handleClear, children: _jsx(XMarkIconOutline, {}) }), _jsx("div", { className: "ndl-combobox-divider" })] })), _jsx("div", { className: classNames('ndl-combobox-dropdown-indicator', {
                                     'ndl-open': isOpen,
-                                }), children: _jsx(ChevronDownIconOutline, { "aria-hidden": "true", className: "ndl-combobox-icon" }) })] })] })), _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 (_jsxs("div", { className: classNames('ndl-combobox-label-row', {
-            'ndl-visually-hidden': hasVisuallyHiddenLabel,
-        }), children: [_jsx(Typography, { as: "label", variant: variant, className: "ndl-combobox-label", htmlAttributes: {
-                    htmlFor: triggerId,
-                    id: labelId,
-                    onClick: onLabelClick,
-                }, children: label }), hasRequiredIndicator && (_jsx(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 (_jsxs("div", { className: "ndl-combobox-message", "aria-live": "polite", children: [hasError && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ndl-error-icon", children: _jsx(ExclamationCircleIconSolid, {}) }), _jsx(Typography, { variant: variant, className: "ndl-error-text", htmlAttributes: { id: errorTextId }, children: errorText })] })), !hasError && Boolean(helpText) && (_jsx(Typography, { variant: variant, htmlAttributes: { id: helpTextId }, children: helpText }))] }));
+                                }), children: _jsx(ChevronDownIconOutline, { "aria-hidden": "true", className: "ndl-combobox-icon" }) })] })] })), _jsx(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"]);