@neo4j-ndl/react 4.22.0 → 4.23.3

package/lib/esm/switch/Switch.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 Switch = (_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 Switch = (_a) => {
         onChange,
         state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
     });
-    const labelWrappingClasses = classNames('ndl-switch-label', {
-        'ndl-disabled': isDisabled,
-        'ndl-fluid': isFluid,
-    });
     const switchClasses = classNames('ndl-switch', className, {
         'ndl-disabled': isDisabled,
     });
@@ -58,21 +54,13 @@ export const Switch = (_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-switch-label-text", children: label }));
-        }
-        return label;
-    }, [label]);
-    useEffect(() => {
-        if (Boolean(label) === false && Boolean(ariaLabel) === false) {
-            needleWarningMessage('Switch 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", role: "switch", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: switchClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
+    const { labelContent, fieldClassName } = useInlineFieldLabel({
+        ariaLabel,
+        componentName: 'Switch',
+        isDisabled,
+        isFluid,
+        label,
+    });
+    return (_jsxs("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, _jsx("input", Object.assign({ ref: mergedRefs, type: "checkbox", role: "switch", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: switchClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
 };
 //# sourceMappingURL=Switch.js.map

package/lib/esm/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.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 SwitchProps = {\n  /** Whether the switch 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 switch is indeterminate */\n  isIndeterminate?: boolean;\n  /** Whether the switch is disabled */\n  isDisabled?: boolean;\n  /** Whether the switch & label should take the full available width of its container */\n  isFluid?: boolean;\n  /** The value of the switch */\n  value?: HtmlAttributes<'input'>['value']; // should this be required?\n  /** Whether the label should be displayed before the switch */\n  hasLeadingLabel?: boolean;\n  /** The callback function triggered when the switch value changes */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** The callback function triggered when the switch is clicked */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n  | {\n      /** The aria label of the switch. Required if the label is not a string. */\n      ariaLabel: string;\n      /** The label of the switch. 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 Switch = ({\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', SwitchProps>) => {\n  const internalRef = useRef<HTMLInputElement>(null);\n  const mergedRefs = useMergeRefs([internalRef, ref]);\n\n  const [isCheckedState, internalOnChange] = useSemiControlledInput({\n    inputType: 'switch',\n    isControlled: isChecked !== undefined,\n    onChange,\n    state: isChecked ?? isDefaultChecked ?? false,\n  });\n\n  const labelWrappingClasses = classNames('ndl-switch-label', {\n    'ndl-disabled': isDisabled,\n    'ndl-fluid': isFluid,\n  });\n\n  const switchClasses = classNames('ndl-switch', 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-switch-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        'Switch 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        role=\"switch\"\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        checked={isCheckedState}\n        onClick={onClick}\n        onChange={internalOnChange}\n        value={value}\n        style={style}\n        className={switchClasses}\n        {...restProps}\n        {...htmlAttributes}\n      />\n      {Boolean(hasLeadingLabel) === false && labelContent}\n    </label>\n  );\n};\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.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,MAAM,GAAG,CAAC,EAiBa,EAAE,EAAE;;QAjBjB,EACrB,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,OAE+B,EAD/B,SAAS,cAhBS,qMAiBtB,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,QAAQ;QACnB,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,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE;QACxD,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,QAAQ;QACvB,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,EACf,IAAI,EAAC,QAAQ,gBACD,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,aAAa,IACpB,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 SwitchProps = {\n  /** Whether the switch 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 switch is indeterminate */\n  isIndeterminate?: boolean;\n  /** Whether the switch is disabled */\n  isDisabled?: boolean;\n  /** Whether the switch & label should take the full available width of its container */\n  isFluid?: boolean;\n  /** The value of the switch */\n  value?: HtmlAttributes<'input'>['value']; // should this be required?\n  /** Whether the label should be displayed before the switch */\n  hasLeadingLabel?: boolean;\n  /** The callback function triggered when the switch value changes */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** The callback function triggered when the switch is clicked */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n  | {\n      /** The aria label of the switch. Required if the label is not a string. */\n      ariaLabel: string;\n      // TODO v5: inconsistent naming. Naming the switch 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 switch. 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 Switch = ({\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', SwitchProps>) => {\n  const internalRef = useRef<HTMLInputElement>(null);\n  const mergedRefs = useMergeRefs([internalRef, ref]);\n\n  const [isCheckedState, internalOnChange] = useSemiControlledInput({\n    inputType: 'switch',\n    isControlled: isChecked !== undefined,\n    onChange,\n    state: isChecked ?? isDefaultChecked ?? false,\n  });\n\n  const switchClasses = classNames('ndl-switch', 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: 'Switch',\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        role=\"switch\"\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        checked={isCheckedState}\n        onClick={onClick}\n        onChange={internalOnChange}\n        value={value}\n        style={style}\n        className={switchClasses}\n        {...restProps}\n        {...htmlAttributes}\n      />\n      {Boolean(hasLeadingLabel) === false && labelContent}\n    </label>\n  );\n};\n"]}

package/lib/esm/text-area/TextArea.js

@@ -31,12 +31,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
+import { FormFieldLabel, FormFieldMessage, useFormField, } from '../_common/form-control';
 import { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';
 import { needleWarningMessage } from '../_common/utils';
-import { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';
-import { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';
-import { Tooltip } from '../tooltip';
 /**
  *
  *
@@ -46,8 +44,12 @@ import { Tooltip } from '../tooltip';
  */
 export const TextArea = (_a) => {
     var { label, isFluid = false, errorText, helpText, isOptional = false, moreInformationText, size = 'medium', ariaLabel, tooltipProps, isDisabled = false, className, isReadOnly = false, style, value, placeholder, htmlAttributes, ref } = _a, restProps = __rest(_a, ["label", "isFluid", "errorText", "helpText", "isOptional", "moreInformationText", "size", "ariaLabel", "tooltipProps", "isDisabled", "className", "isReadOnly", "style", "value", "placeholder", "htmlAttributes", "ref"]);
-    const helpTextId = useId();
-    const errorTextId = useId();
+    const { field, controlProps } = useFormField({
+        errorText,
+        hasRequiredIndicator: isOptional,
+        helpText,
+        label,
+    });
     const containerWrappingClasses = classNames(`ndl-text-area ndl-type-text`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
@@ -60,7 +62,6 @@ export const TextArea = (_a) => {
     const hasEmptyLabelValue = !label || label === '';
     const labelWrappingClasses = classNames('ndl-text-area-label', {
         'ndl-fluid': isFluid,
-        'ndl-text-area-no-label': hasEmptyLabelValue,
     });
     const isCustomLabel = label && typeof label !== 'string';
     const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;
@@ -72,20 +73,6 @@ export const TextArea = (_a) => {
             needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);
         }
     }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);
-    const informationIconClasses = classNames({
-        'ndl-information-icon-large': size === 'large',
-        'ndl-information-icon-small': size === 'small' || size === 'medium',
-    });
-    const combinedAriaDescribedby = useMemo(() => {
-        const ariaDescribedby = [];
-        if (helpText && !errorText) {
-            ariaDescribedby.push(helpTextId);
-        }
-        else if (errorText) {
-            ariaDescribedby.push(errorTextId);
-        }
-        return ariaDescribedby.join(' ');
-    }, [helpText, errorText, helpTextId, errorTextId]);
-    return (_jsxs("div", { className: containerWrappingClasses, children: [_jsxs("label", { className: labelWrappingClasses, children: [_jsx("div", { className: "ndl-text-area-wrapper", children: _jsx("textarea", Object.assign({ disabled: isDisabled, ref: ref, "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), readOnly: isReadOnly, value: value, placeholder: placeholder, style: style, "aria-describedby": combinedAriaDescribedby }, restProps, htmlAttributes)) }), !hasEmptyLabelValue && (_jsxs("div", { className: "ndl-text-area-wrapper", children: [_jsx("span", { className: "ndl-text-area-label-text", children: label }), Boolean(moreInformationText) && (_jsxs(Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { children: _jsx("div", { className: informationIconClasses, "data-testid": "ndl-information-icon", children: _jsx(InformationCircleIconOutline, {}) }) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), isOptional && (_jsx("span", { className: "ndl-text-area-optional", children: "Optional" }))] }))] }), helpText && !errorText && (_jsx("div", { className: "ndl-text-area-msg", "aria-live": "polite", id: helpTextId, children: helpText })), errorText && (_jsxs("div", { className: "ndl-text-area-msg", children: [_jsx("div", { className: "ndl-error-icon", children: _jsx(ExclamationCircleIconSolid, {}) }), _jsx("div", { className: "ndl-error-text", id: errorTextId, "aria-live": "polite", children: errorText })] }))] }));
+    return (_jsxs("div", { className: containerWrappingClasses, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(FormFieldLabel, { field: field, size: size, association: "implicit", moreInformationText: moreInformationText, tooltipProps: tooltipProps })), _jsx("div", { className: "ndl-text-area-wrapper", children: _jsx("textarea", Object.assign({ disabled: isDisabled, ref: ref, "aria-label": ariaLabel, readOnly: isReadOnly, value: value, placeholder: placeholder, style: style }, controlProps, restProps, htmlAttributes)) })] }), _jsx(FormFieldMessage, { field: field, size: size })] }));
 };
 //# sourceMappingURL=TextArea.js.map

package/lib/esm/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAkB,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,uCAAuC,EAAE,MAAM,qBAAqB,CAAC;AAM9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAC;AACrG,OAAO,EAAE,4BAA4B,EAAE,MAAM,2DAA2D,CAAC;AACzG,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAiErC;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAmBgB,EAAE,EAAE;QAnBpB,EACvB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,mBAAmB,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,GAAG,OAEoC,EADpC,SAAS,cAlBW,0NAmBxB,CADa;IAEZ,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAC3B,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,wBAAwB,GAAG,UAAU,CACzC,6BAA6B,EAC7B,SAAS,EACT;QACE,cAAc,EAAE,UAAU;QAC1B,eAAe,EAAE,SAAS;QAC1B,cAAc,EAAE,SAAS;QACzB,uBAAuB,EAAE,SAAS;QAClC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC;IAElD,MAAM,oBAAoB,GAAG,UAAU,CAAC,qBAAqB,EAAE;QAC7D,WAAW,EAAE,OAAO;QACpB,wBAAwB,EAAE,kBAAkB;KAC7C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IACzD,MAAM,4BAA4B,GAAG,aAAa,IAAI,CAAC,SAAS,CAAC;IAEjE,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACzB,oBAAoB,CAClB,sLAAsL,CACvL,CAAC;QACJ,CAAC;QAED,IAAI,4BAA4B,EAAE,CAAC;YACjC,oBAAoB,CAAC,uCAAuC,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAErD,MAAM,sBAAsB,GAAG,UAAU,CAAC;QACxC,4BAA4B,EAAE,IAAI,KAAK,OAAO;QAC9C,4BAA4B,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;KACpE,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3C,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3B,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;aAAM,IAAI,SAAS,EAAE,CAAC;YACrB,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,eAAK,SAAS,EAAE,wBAAwB,aAGtC,iBAAO,SAAS,EAAE,oBAAoB,aACpC,cAAK,SAAS,EAAC,uBAAuB,YACpC,iCACE,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,GAAG,gBACI,SAAS,kBACP,OAAO,CAAC,SAAS,CAAC,EAChC,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,sBACM,uBAAuB,IACrC,SAAS,EACT,cAAc,EAClB,GACE,EACL,CAAC,kBAAkB,IAAI,CACtB,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAM,SAAS,EAAC,0BAA0B,YAAE,KAAK,GAAQ,EACxD,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAC/B,MAAC,OAAO,kBAAC,IAAI,EAAC,QAAQ,IAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,eAC3C,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACxC,cACE,SAAS,EAAE,sBAAsB,iBACrB,sBAAsB,YAElC,KAAC,4BAA4B,KAAG,GAC5B,IACU,EAClB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,mBAAmB,IACJ,KACV,CACX,EACA,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,wBAAwB,yBAAgB,CACzD,IACG,CACP,IACK,EACP,QAAQ,IAAI,CAAC,SAAS,IAAI,CACzB,cAAK,SAAS,EAAC,mBAAmB,eAAW,QAAQ,EAAC,EAAE,EAAE,UAAU,YACjE,QAAQ,GACL,CACP,EACA,SAAS,IAAI,CACZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,0BAA0B,KAAG,GAC1B,EACN,cAAK,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,WAAW,eAAY,QAAQ,YAChE,SAAS,GACN,IACF,CACP,IACG,CACP,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 */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useId, useMemo } from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n  type CommonProps,\n  type HtmlAttributes,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n */\ntype TextAreaProps = {\n  /** The label displayed above the textarea */\n  label?: ReactNode;\n\n  /** Whether the textarea should take the full available width */\n  isFluid?: boolean;\n\n  /** Assistive text displayed below the textarea */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Size of the textarea */\n  size?: 'small' | 'medium' | 'large';\n\n  // TODO v5: replace with isRequired and hasRequiredIndicator, matching Combobox\n  /** Whether to display the Optional label next to the field label */\n  isOptional?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether the textarea is disabled */\n  isDisabled?: boolean;\n\n  /** Additional HTML attributes passed to the textarea element */\n  htmlAttributes?: HtmlAttributes<'textarea'>;\n\n  /** Aria label for accessibility when no visible label is provided */\n  ariaLabel?: string;\n\n  /** Additional class names */\n  className?: string;\n\n  /** Additional styles applied to the root element */\n  style?: React.CSSProperties;\n\n  /** Whether the textarea is read-only */\n  isReadOnly?: boolean;\n\n  /** The current value of the textarea */\n  value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n  /** Placeholder text displayed when the textarea is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/**\n *\n *\n * TextArea Component\n *\n *\n */\n\nexport const TextArea = ({\n  label,\n  isFluid = false,\n  errorText,\n  helpText,\n  isOptional = false,\n  moreInformationText,\n  size = 'medium',\n  ariaLabel,\n  tooltipProps,\n  isDisabled = false,\n  className,\n  isReadOnly = false,\n  style,\n  value,\n  placeholder,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n  const helpTextId = useId();\n  const errorTextId = useId();\n  const containerWrappingClasses = classNames(\n    `ndl-text-area ndl-type-text`,\n    className,\n    {\n      'ndl-disabled': isDisabled,\n      'ndl-has-error': errorText,\n      'ndl-has-icon': errorText,\n      'ndl-has-trailing-icon': errorText,\n      'ndl-large': size === 'large',\n      'ndl-medium': size === 'medium',\n      'ndl-small': size === 'small',\n    },\n  );\n\n  const hasEmptyLabelValue = !label || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-area-label', {\n    'ndl-fluid': isFluid,\n    'ndl-text-area-no-label': hasEmptyLabelValue,\n  });\n\n  const isCustomLabel = label && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  const informationIconClasses = classNames({\n    'ndl-information-icon-large': size === 'large',\n    'ndl-information-icon-small': size === 'small' || size === 'medium',\n  });\n\n  const combinedAriaDescribedby = useMemo(() => {\n    const ariaDescribedby = [];\n    if (helpText && !errorText) {\n      ariaDescribedby.push(helpTextId);\n    } else if (errorText) {\n      ariaDescribedby.push(errorTextId);\n    }\n    return ariaDescribedby.join(' ');\n  }, [helpText, errorText, helpTextId, errorTextId]);\n\n  return (\n    <div className={containerWrappingClasses}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        <div className=\"ndl-text-area-wrapper\">\n          <textarea\n            disabled={isDisabled}\n            ref={ref}\n            aria-label={ariaLabel}\n            aria-invalid={Boolean(errorText)}\n            readOnly={isReadOnly}\n            value={value}\n            placeholder={placeholder}\n            style={style}\n            aria-describedby={combinedAriaDescribedby}\n            {...restProps}\n            {...htmlAttributes}\n          />\n        </div>\n        {!hasEmptyLabelValue && (\n          <div className=\"ndl-text-area-wrapper\">\n            <span className=\"ndl-text-area-label-text\">{label}</span>\n            {Boolean(moreInformationText) && (\n              <Tooltip type=\"simple\" {...tooltipProps?.root}>\n                <Tooltip.Trigger {...tooltipProps?.trigger}>\n                  <div\n                    className={informationIconClasses}\n                    data-testid=\"ndl-information-icon\"\n                  >\n                    <InformationCircleIconOutline />\n                  </div>\n                </Tooltip.Trigger>\n                <Tooltip.Content {...tooltipProps?.content}>\n                  {moreInformationText}\n                </Tooltip.Content>\n              </Tooltip>\n            )}\n            {isOptional && (\n              <span className=\"ndl-text-area-optional\">Optional</span>\n            )}\n          </div>\n        )}\n      </label>\n      {helpText && !errorText && (\n        <div className=\"ndl-text-area-msg\" aria-live=\"polite\" id={helpTextId}>\n          {helpText}\n        </div>\n      )}\n      {errorText && (\n        <div className=\"ndl-text-area-msg\">\n          <div className=\"ndl-error-icon\">\n            <ExclamationCircleIconSolid />\n          </div>\n          <div className=\"ndl-error-text\" id={errorTextId} aria-live=\"polite\">\n            {errorText}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.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 */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useMemo } from 'react';\n\nimport {\n  FormFieldLabel,\n  FormFieldMessage,\n  useFormField,\n} from '../_common/form-control';\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n  type CommonProps,\n  type HtmlAttributes,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n */\ntype TextAreaProps = {\n  // TODO v5: inconsistent naming. The label is optional here and pairs with the\n  // `ariaLabel` prop below, while Combobox requires the label and clips it with\n  // `hasVisuallyHiddenLabel`, and TextInput has no aria label prop at all.\n  /** The label displayed above the textarea */\n  label?: ReactNode;\n\n  /** Whether the textarea should take the full available width */\n  isFluid?: boolean;\n\n  /** Assistive text displayed below the textarea */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Size of the textarea */\n  size?: 'small' | 'medium' | 'large';\n\n  // TODO v5: inconsistent naming, and one prop doing two jobs. The same switch\n  // is `showRequiredOrOptionalLabel` on TextInput and `hasRequiredIndicator` on\n  // Combobox and on the internal form control this maps onto. Here it also\n  // decides both whether the indicator shows at all and which word it shows,\n  // because TextArea exposes no `isRequired` to pair it with: requiredness has\n  // to be set through htmlAttributes.required, and exposing `isRequired` on its\n  // own would silently render no indicator.\n  /** Whether to display the Optional label next to the field label */\n  isOptional?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether the textarea is disabled */\n  isDisabled?: boolean;\n\n  /** Additional HTML attributes passed to the textarea element */\n  htmlAttributes?: HtmlAttributes<'textarea'>;\n\n  // TODO v5: inconsistent naming. This replaces the accessible name rather than\n  // hiding the label, which is a second way of naming the control alongside\n  // `label` above. TextInput reaches for htmlAttributes['aria-label'] for the\n  // same case and Combobox clips the label with `hasVisuallyHiddenLabel`.\n  /** Aria label for accessibility when no visible label is provided */\n  ariaLabel?: string;\n\n  /** Additional class names */\n  className?: string;\n\n  /** Additional styles applied to the root element */\n  style?: React.CSSProperties;\n\n  /** Whether the textarea is read-only */\n  isReadOnly?: boolean;\n\n  /** The current value of the textarea */\n  value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n  /** Placeholder text displayed when the textarea is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/**\n *\n *\n * TextArea Component\n *\n *\n */\n\nexport const TextArea = ({\n  label,\n  isFluid = false,\n  errorText,\n  helpText,\n  isOptional = false,\n  moreInformationText,\n  size = 'medium',\n  ariaLabel,\n  tooltipProps,\n  isDisabled = false,\n  className,\n  isReadOnly = false,\n  style,\n  value,\n  placeholder,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n  const { field, controlProps } = useFormField({\n    errorText,\n    hasRequiredIndicator: isOptional,\n    helpText,\n    label,\n  });\n  const containerWrappingClasses = classNames(\n    `ndl-text-area ndl-type-text`,\n    className,\n    {\n      'ndl-disabled': isDisabled,\n      'ndl-has-error': errorText,\n      'ndl-has-icon': errorText,\n      'ndl-has-trailing-icon': errorText,\n      'ndl-large': size === 'large',\n      'ndl-medium': size === 'medium',\n      'ndl-small': size === 'small',\n    },\n  );\n\n  const hasEmptyLabelValue = !label || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-area-label', {\n    'ndl-fluid': isFluid,\n  });\n\n  const isCustomLabel = label && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  return (\n    <div className={containerWrappingClasses}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        {!hasEmptyLabelValue && (\n          <FormFieldLabel\n            field={field}\n            size={size}\n            association=\"implicit\"\n            moreInformationText={moreInformationText}\n            tooltipProps={tooltipProps}\n          />\n        )}\n        <div className=\"ndl-text-area-wrapper\">\n          <textarea\n            disabled={isDisabled}\n            ref={ref}\n            aria-label={ariaLabel}\n            readOnly={isReadOnly}\n            value={value}\n            placeholder={placeholder}\n            style={style}\n            {...controlProps}\n            {...restProps}\n            {...htmlAttributes}\n          />\n        </div>\n      </label>\n      <FormFieldMessage field={field} size={size} />\n    </div>\n  );\n};\n"]}

package/lib/esm/text-input/TextInput.js

@@ -32,16 +32,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import classNames from 'classnames';
 import { useId, useMemo, } from 'react';
+import { FormFieldLabel, FormFieldMessage, useFormField, } from '../_common/form-control';
 import { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';
 import { useSemiControlledInput } from '../_common/use-semi-controlled-input';
 import { needleWarningMessage } from '../_common/utils';
-import { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';
-import { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';
 import { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';
 import { LoadingSpinner } from '../loading-spinner';
 import { Skeleton } from '../skeleton';
-import { Tooltip } from '../tooltip';
-import { Typography } from '../typography';
 /**
  *
  *
@@ -58,8 +55,16 @@ export const TextInput = (_a) => {
         state: value !== null && value !== void 0 ? value : '',
     });
     const hintId = useId();
-    const helpTextId = useId();
-    const errorTextId = useId();
+    const shouldRenderHint = isClearable || isLoading;
+    const { field, controlProps } = useFormField({
+        errorText,
+        // The clear/loading hint describes the input alongside the message.
+        extraDescribedByIds: [shouldRenderHint && hintId],
+        hasRequiredIndicator: showRequiredOrOptionalLabel,
+        helpText,
+        isRequired,
+        label,
+    });
     const containerWrappingClasses = classNames(`ndl-text-input`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
@@ -72,15 +77,13 @@ export const TextInput = (_a) => {
         'ndl-small': size === 'small',
     });
     const hasEmptyLabelValue = label === undefined || label === null || label === '';
-    const labelWrappingClasses = classNames('ndl-form-item-label', {
+    const labelWrappingClasses = classNames('ndl-text-input-label', {
         'ndl-fluid': isFluid,
-        'ndl-form-item-no-label': hasEmptyLabelValue,
     });
     const combinedHtmlInputAttributes = Object.assign(Object.assign({}, htmlAttributes), { className: classNames('ndl-input', htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.className) });
     const ariaLabel = combinedHtmlInputAttributes['aria-label'];
     const isCustomLabel = Boolean(label) && typeof label !== 'string';
     const hasCustomLabelAndNoAriaLabel = isCustomLabel && (ariaLabel === undefined || ariaLabel === '');
-    const shouldRenderHint = isClearable || isLoading;
     const handleInputKeyDown = (event) => {
         var _a;
         if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {
@@ -100,42 +103,16 @@ export const TextInput = (_a) => {
             needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);
         }
     }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);
-    const informationIconClasses = classNames({
-        'ndl-information-icon-large': size === 'large',
-        'ndl-information-icon-small': size === 'small' || size === 'medium',
-    });
-    const combinedAriaDescribedby = useMemo(() => {
-        const ariaDescribedby = [];
-        if (hintId && shouldRenderHint) {
-            ariaDescribedby.push(hintId);
-        }
-        if (helpText && !errorText) {
-            ariaDescribedby.push(helpTextId);
-        }
-        else if (errorText) {
-            ariaDescribedby.push(errorTextId);
-        }
-        return ariaDescribedby.join(' ');
-    }, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);
-    return (_jsxs("div", { className: containerWrappingClasses, style: style, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-label-text-wrapper", children: [_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && (_jsxs(Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: _jsx("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: _jsx(InformationCircleIconOutline, {}) }) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), showRequiredOrOptionalLabel && (_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: isRequired === true ? 'Required' : 'Optional' }))] }) }))), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-input-wrapper", children: [(leadingElement || (isLoading && !trailingElement)) && (_jsx("div", { className: "ndl-element-leading ndl-element", children: isLoading ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
+    return (_jsxs("div", { className: containerWrappingClasses, style: style, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(FormFieldLabel, { field: field, size: size, association: "implicit", moreInformationText: moreInformationText, tooltipProps: tooltipProps, wrap: (row) => (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: row }))) })), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-input-wrapper", children: [(leadingElement || (isLoading && !trailingElement)) && (_jsx("div", { className: "ndl-element-leading ndl-element", children: isLoading ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
                                             ? 'ndl-medium-spinner'
                                             : 'ndl-small-spinner' })) : (leadingElement) })), _jsxs("div", { className: classNames('ndl-input-container', {
                                         'ndl-clearable': isClearable,
-                                    }), children: [_jsx("input", Object.assign({ ref: ref, readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: currentValue, placeholder: placeholder, type: "text", onChange: handleChange, "aria-describedby": combinedAriaDescribedby, "aria-invalid": Boolean(errorText) }, combinedHtmlInputAttributes, { onKeyDown: handleInputKeyDown }, restProps)), shouldRenderHint && (_jsxs("span", { id: hintId, className: "ndl-text-input-hint", "aria-hidden": true, children: [isLoading && 'Loading ', isClearable && 'Press Escape to clear input.'] })), isClearable && Boolean(currentValue) && (_jsx("div", { className: "ndl-element-clear ndl-element", children: _jsx("button", { tabIndex: -1, "aria-hidden": true, type: "button", title: "Clear input (Esc)", onClick: () => {
+                                    }), children: [_jsx("input", Object.assign({ ref: ref, readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: currentValue, placeholder: placeholder, type: "text", onChange: handleChange }, controlProps, combinedHtmlInputAttributes, { onKeyDown: handleInputKeyDown }, restProps)), shouldRenderHint && (_jsxs("span", { id: hintId, className: "ndl-text-input-hint", "aria-hidden": true, children: [isLoading && 'Loading ', isClearable && 'Press Escape to clear input.'] })), isClearable && Boolean(currentValue) && (_jsx("div", { className: "ndl-element-clear ndl-element", children: _jsx("button", { tabIndex: -1, "aria-hidden": true, type: "button", title: "Clear input (Esc)", onClick: () => {
                                                     handleChange === null || handleChange === void 0 ? void 0 : handleChange({
                                                         target: { value: '' },
                                                     });
                                                 }, children: _jsx(XMarkIconOutline, { className: "n-size-4" }) }) }))] }), trailingElement && (_jsx("div", { className: "ndl-element-trailing ndl-element", children: isLoading && !leadingElement ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
                                             ? 'ndl-medium-spinner'
-                                            : 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), Boolean(helpText) && !errorText && (_jsx(Skeleton, { onBackground: "weak", shape: "rectangular", isLoading: isSkeletonLoading, children: _jsx(Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", htmlAttributes: {
-                        'aria-live': 'polite',
-                        id: helpTextId,
-                    }, children: helpText }) })), Boolean(errorText) && (
-            // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.
-            // Currently the message fills 100% of the width while the rest of the text input has a set width.
-            _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-form-message", children: [_jsx("div", { className: "ndl-error-icon", children: _jsx(ExclamationCircleIconSolid, {}) }), _jsx(Typography, { className: "ndl-error-text", variant: size === 'large' ? 'body-medium' : 'body-small', htmlAttributes: {
-                                'aria-live': 'polite',
-                                id: errorTextId,
-                            }, children: errorText })] }) })))] }));
+                                            : 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), _jsx(FormFieldMessage, { field: field, size: size, wrap: (content) => (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: content }))) })] }));
 };
 //# sourceMappingURL=TextInput.js.map

package/lib/esm/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.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 classNames from 'classnames';\nimport {\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useMemo,\n} from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n *\n * @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n */\ntype TextInputProps = {\n  /** Assistive text displayed below the input */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Leading element rendered inside the input */\n  leadingElement?: ReactElement;\n\n  /** Trailing element rendered inside the input */\n  trailingElement?: ReactElement;\n\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large';\n\n  /** Whether the input is read-only */\n  isReadOnly?: boolean;\n\n  /**\n   *  Whether to display the Required/Optional label next to the field label.\n   *  Shows Required if isRequired is true, otherwise shows Optional.\n   * @default false\n   */\n  // TODO v5: rename to hasRequiredIndicator, matching Combobox. That also drops\n  // the naming-convention disable below, since has is an allowed prefix.\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showRequiredOrOptionalLabel?: boolean;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Whether the input is required */\n  isRequired?: boolean;\n\n  /** The current value of the input */\n  value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n  /** Placeholder text displayed when the input is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n  /** Callback function triggered when the input value changes */\n  onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n  /** Whether the input should take the full available width */\n  isFluid?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  /** The label displayed above the input */\n  label?: string | React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether to render skeletons instead of content */\n  isSkeletonLoading?: boolean;\n\n  /** Additional props forwarded to the underlying Skeleton components */\n  skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n  /** Whether to show the clear button */\n  isClearable?: boolean;\n\n  /** Whether to show the loading spinner */\n  isLoading?: boolean;\n};\n\n/**\n *\n *\n * TextInput Component\n *\n *\n */\n\nexport const TextInput = ({\n  label,\n  isFluid,\n  errorText,\n  helpText,\n  leadingElement,\n  trailingElement,\n  showRequiredOrOptionalLabel = false,\n  moreInformationText,\n  size = 'medium',\n  placeholder,\n  value,\n  tooltipProps,\n  htmlAttributes,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  onChange,\n  isClearable = false,\n  className,\n  style,\n  isSkeletonLoading = false,\n  isLoading = false,\n  skeletonProps,\n  ref,\n  ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n  const [currentValue, handleChange] = useSemiControlledInput({\n    inputType: 'text',\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? '',\n  });\n  const hintId = useId();\n  const helpTextId = useId();\n  const errorTextId = useId();\n\n  const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n    'ndl-disabled': isDisabled,\n    'ndl-has-error': errorText,\n    'ndl-has-icon': leadingElement || trailingElement || errorText,\n    'ndl-has-leading-icon': leadingElement,\n    'ndl-has-trailing-icon': trailingElement || errorText,\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-read-only': isReadOnly,\n    'ndl-small': size === 'small',\n  });\n\n  const hasEmptyLabelValue =\n    label === undefined || label === null || label === '';\n\n  const labelWrappingClasses = classNames('ndl-form-item-label', {\n    'ndl-fluid': isFluid,\n    'ndl-form-item-no-label': hasEmptyLabelValue,\n  });\n\n  const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n    ...htmlAttributes,\n    className: classNames('ndl-input', htmlAttributes?.className),\n  };\n  const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n  const isCustomLabel = Boolean(label) && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel =\n    isCustomLabel && (ariaLabel === undefined || ariaLabel === '');\n  const shouldRenderHint = isClearable || isLoading;\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleChange?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    htmlAttributes?.onKeyDown?.(event);\n  };\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  const informationIconClasses = classNames({\n    'ndl-information-icon-large': size === 'large',\n    'ndl-information-icon-small': size === 'small' || size === 'medium',\n  });\n\n  const combinedAriaDescribedby = useMemo(() => {\n    const ariaDescribedby = [];\n\n    if (hintId && shouldRenderHint) {\n      ariaDescribedby.push(hintId);\n    }\n    if (helpText && !errorText) {\n      ariaDescribedby.push(helpTextId);\n    } else if (errorText) {\n      ariaDescribedby.push(errorTextId);\n    }\n    return ariaDescribedby.join(' ');\n  }, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);\n\n  return (\n    <div className={containerWrappingClasses} style={style}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        {!hasEmptyLabelValue && (\n          <Skeleton\n            onBackground=\"weak\"\n            shape=\"rectangular\"\n            {...skeletonProps}\n            isLoading={isSkeletonLoading}\n          >\n            <div className=\"ndl-label-text-wrapper\">\n              <Typography\n                variant={size === 'large' ? 'body-large' : 'body-medium'}\n                className=\"ndl-label-text\"\n              >\n                {label}\n              </Typography>\n              {Boolean(moreInformationText) && (\n                <Tooltip {...tooltipProps?.root} type=\"simple\">\n                  <Tooltip.Trigger\n                    {...tooltipProps?.trigger}\n                    className={informationIconClasses}\n                    hasButtonWrapper\n                  >\n                    <div\n                      tabIndex={0}\n                      role=\"button\"\n                      aria-label=\"Information icon\"\n                    >\n                      <InformationCircleIconOutline />\n                    </div>\n                  </Tooltip.Trigger>\n                  <Tooltip.Content {...tooltipProps?.content}>\n                    {moreInformationText}\n                  </Tooltip.Content>\n                </Tooltip>\n              )}\n              {showRequiredOrOptionalLabel && (\n                <Typography\n                  variant={size === 'large' ? 'body-large' : 'body-medium'}\n                  className=\"ndl-form-item-optional\"\n                >\n                  {isRequired === true ? 'Required' : 'Optional'}\n                </Typography>\n              )}\n            </div>\n          </Skeleton>\n        )}\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          {...skeletonProps}\n          isLoading={isSkeletonLoading}\n        >\n          <div className=\"ndl-input-wrapper\">\n            {(leadingElement || (isLoading && !trailingElement)) && (\n              <div className=\"ndl-element-leading ndl-element\">\n                {isLoading ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  leadingElement\n                )}\n              </div>\n            )}\n            <div\n              className={classNames('ndl-input-container', {\n                'ndl-clearable': isClearable,\n              })}\n            >\n              <input\n                ref={ref}\n                readOnly={isReadOnly}\n                disabled={isDisabled}\n                required={isRequired}\n                value={currentValue}\n                placeholder={placeholder}\n                type=\"text\"\n                onChange={handleChange}\n                aria-describedby={combinedAriaDescribedby}\n                aria-invalid={Boolean(errorText)}\n                {...combinedHtmlInputAttributes}\n                onKeyDown={handleInputKeyDown}\n                {...restProps}\n              />\n              {shouldRenderHint && (\n                <span\n                  id={hintId}\n                  className=\"ndl-text-input-hint\"\n                  aria-hidden={true}\n                >\n                  {isLoading && 'Loading '}\n                  {isClearable && 'Press Escape to clear input.'}\n                </span>\n              )}\n              {isClearable && Boolean(currentValue) && (\n                <div className=\"ndl-element-clear ndl-element\">\n                  <button\n                    tabIndex={-1}\n                    aria-hidden={true}\n                    type=\"button\"\n                    title=\"Clear input (Esc)\"\n                    onClick={() => {\n                      handleChange?.({\n                        target: { value: '' },\n                      } as React.ChangeEvent<HTMLInputElement>);\n                    }}\n                  >\n                    <XMarkIconOutline className=\"n-size-4\" />\n                  </button>\n                </div>\n              )}\n            </div>\n            {trailingElement && (\n              <div className=\"ndl-element-trailing ndl-element\">\n                {isLoading && !leadingElement ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  trailingElement\n                )}\n              </div>\n            )}\n          </div>\n        </Skeleton>\n      </label>\n      {Boolean(helpText) && !errorText && (\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          isLoading={isSkeletonLoading}\n        >\n          <Typography\n            variant={size === 'large' ? 'body-medium' : 'body-small'}\n            className=\"ndl-form-message\"\n            htmlAttributes={{\n              'aria-live': 'polite',\n              id: helpTextId,\n            }}\n          >\n            {helpText}\n          </Typography>\n        </Skeleton>\n      )}\n      {Boolean(errorText) && (\n        // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.\n        // Currently the message fills 100% of the width while the rest of the text input has a set width.\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          width=\"fit-content\"\n          {...skeletonProps}\n          isLoading={isSkeletonLoading}\n        >\n          <div className=\"ndl-form-message\">\n            <div className=\"ndl-error-icon\">\n              <ExclamationCircleIconSolid />\n            </div>\n            <Typography\n              className=\"ndl-error-text\"\n              variant={size === 'large' ? 'body-medium' : 'body-small'}\n              htmlAttributes={{\n                'aria-live': 'polite',\n                id: errorTextId,\n              }}\n            >\n              {errorText}\n            </Typography>\n          </div>\n        </Skeleton>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.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 classNames from 'classnames';\nimport {\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useMemo,\n} from 'react';\n\nimport {\n  FormFieldLabel,\n  FormFieldMessage,\n  useFormField,\n} from '../_common/form-control';\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n *\n * @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n */\ntype TextInputProps = {\n  /** Assistive text displayed below the input */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Leading element rendered inside the input */\n  leadingElement?: ReactElement;\n\n  /** Trailing element rendered inside the input */\n  trailingElement?: ReactElement;\n\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large';\n\n  /** Whether the input is read-only */\n  isReadOnly?: boolean;\n\n  /**\n   *  Whether to display the Required/Optional label next to the field label.\n   *  Shows Required if isRequired is true, otherwise shows Optional.\n   * @default false\n   */\n  // TODO v5: inconsistent naming. The same switch is `hasRequiredIndicator` on\n  // Combobox and on the internal form control this maps onto, and `isOptional`\n  // on TextArea. The name also needs the disable below, which a name using one\n  // of the allowed boolean prefixes would not.\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showRequiredOrOptionalLabel?: boolean;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Whether the input is required */\n  isRequired?: boolean;\n\n  /** The current value of the input */\n  value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n  /** Placeholder text displayed when the input is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n  /** Callback function triggered when the input value changes */\n  onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n  /** Whether the input should take the full available width */\n  isFluid?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  // TODO v5: inconsistent naming. Every form control names itself differently:\n  // the label is optional here and a design with no room for it reaches for\n  // htmlAttributes['aria-label'], TextArea, Select, Checkbox, Radio and Switch\n  // expose an `ariaLabel` prop instead, and Combobox requires the label and\n  // clips it with `hasVisuallyHiddenLabel`.\n  /** The label displayed above the input */\n  label?: string | React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether to render skeletons instead of content */\n  isSkeletonLoading?: boolean;\n\n  /** Additional props forwarded to the underlying Skeleton components */\n  skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n  /** Whether to show the clear button */\n  isClearable?: boolean;\n\n  /** Whether to show the loading spinner */\n  isLoading?: boolean;\n};\n\n/**\n *\n *\n * TextInput Component\n *\n *\n */\n\nexport const TextInput = ({\n  label,\n  isFluid,\n  errorText,\n  helpText,\n  leadingElement,\n  trailingElement,\n  showRequiredOrOptionalLabel = false,\n  moreInformationText,\n  size = 'medium',\n  placeholder,\n  value,\n  tooltipProps,\n  htmlAttributes,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  onChange,\n  isClearable = false,\n  className,\n  style,\n  isSkeletonLoading = false,\n  isLoading = false,\n  skeletonProps,\n  ref,\n  ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n  const [currentValue, handleChange] = useSemiControlledInput({\n    inputType: 'text',\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? '',\n  });\n  const hintId = useId();\n  const shouldRenderHint = isClearable || isLoading;\n  const { field, controlProps } = useFormField({\n    errorText,\n    // The clear/loading hint describes the input alongside the message.\n    extraDescribedByIds: [shouldRenderHint && hintId],\n    hasRequiredIndicator: showRequiredOrOptionalLabel,\n    helpText,\n    isRequired,\n    label,\n  });\n\n  const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n    'ndl-disabled': isDisabled,\n    'ndl-has-error': errorText,\n    'ndl-has-icon': leadingElement || trailingElement || errorText,\n    'ndl-has-leading-icon': leadingElement,\n    'ndl-has-trailing-icon': trailingElement || errorText,\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-read-only': isReadOnly,\n    'ndl-small': size === 'small',\n  });\n\n  const hasEmptyLabelValue =\n    label === undefined || label === null || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-input-label', {\n    'ndl-fluid': isFluid,\n  });\n\n  const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n    ...htmlAttributes,\n    className: classNames('ndl-input', htmlAttributes?.className),\n  };\n  const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n  const isCustomLabel = Boolean(label) && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel =\n    isCustomLabel && (ariaLabel === undefined || ariaLabel === '');\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleChange?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    htmlAttributes?.onKeyDown?.(event);\n  };\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  return (\n    <div className={containerWrappingClasses} style={style}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        {!hasEmptyLabelValue && (\n          <FormFieldLabel\n            field={field}\n            size={size}\n            association=\"implicit\"\n            moreInformationText={moreInformationText}\n            tooltipProps={tooltipProps}\n            wrap={(row) => (\n              <Skeleton\n                onBackground=\"weak\"\n                shape=\"rectangular\"\n                {...skeletonProps}\n                isLoading={isSkeletonLoading}\n              >\n                {row}\n              </Skeleton>\n            )}\n          />\n        )}\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          {...skeletonProps}\n          isLoading={isSkeletonLoading}\n        >\n          <div className=\"ndl-input-wrapper\">\n            {(leadingElement || (isLoading && !trailingElement)) && (\n              <div className=\"ndl-element-leading ndl-element\">\n                {isLoading ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  leadingElement\n                )}\n              </div>\n            )}\n            <div\n              className={classNames('ndl-input-container', {\n                'ndl-clearable': isClearable,\n              })}\n            >\n              <input\n                ref={ref}\n                readOnly={isReadOnly}\n                disabled={isDisabled}\n                required={isRequired}\n                value={currentValue}\n                placeholder={placeholder}\n                type=\"text\"\n                onChange={handleChange}\n                {...controlProps}\n                {...combinedHtmlInputAttributes}\n                onKeyDown={handleInputKeyDown}\n                {...restProps}\n              />\n              {shouldRenderHint && (\n                <span\n                  id={hintId}\n                  className=\"ndl-text-input-hint\"\n                  aria-hidden={true}\n                >\n                  {isLoading && 'Loading '}\n                  {isClearable && 'Press Escape to clear input.'}\n                </span>\n              )}\n              {isClearable && Boolean(currentValue) && (\n                <div className=\"ndl-element-clear ndl-element\">\n                  <button\n                    tabIndex={-1}\n                    aria-hidden={true}\n                    type=\"button\"\n                    title=\"Clear input (Esc)\"\n                    onClick={() => {\n                      handleChange?.({\n                        target: { value: '' },\n                      } as React.ChangeEvent<HTMLInputElement>);\n                    }}\n                  >\n                    <XMarkIconOutline className=\"n-size-4\" />\n                  </button>\n                </div>\n              )}\n            </div>\n            {trailingElement && (\n              <div className=\"ndl-element-trailing ndl-element\">\n                {isLoading && !leadingElement ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  trailingElement\n                )}\n              </div>\n            )}\n          </div>\n        </Skeleton>\n      </label>\n\n      <FormFieldMessage\n        field={field}\n        size={size}\n        wrap={(content) => (\n          <Skeleton\n            onBackground=\"weak\"\n            shape=\"rectangular\"\n            {...skeletonProps}\n            isLoading={isSkeletonLoading}\n          >\n            {content}\n          </Skeleton>\n        )}\n      />\n    </div>\n  );\n};\n"]}

package/lib/esm/text-input/stories/text-input-sizes.story.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsx(TextInput, { label: "Small Input", size: "small", htmlAttributes: { id: 'text-input-small' } }), _jsx(TextInput, { label: "Medium Input", size: "medium", htmlAttributes: { id: 'text-input-medium' } }), _jsx(TextInput, { label: "Large Input", size: "large", htmlAttributes: { id: 'text-input-large' } })] }));
+    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsx(TextInput, { label: "Small Input", size: "small", placeholder: "Small Input", helpText: "Help text", htmlAttributes: { id: 'text-input-small' } }), _jsx(TextInput, { label: "Medium Input", size: "medium", placeholder: "Medium Input", helpText: "Help text", htmlAttributes: { id: 'text-input-medium' } }), _jsx(TextInput, { label: "Large Input", size: "large", placeholder: "Large Input", helpText: "Help text", htmlAttributes: { id: 'text-input-large' } })] }));
 };
 export default Component;
 //# sourceMappingURL=text-input-sizes.story.js.map

package/lib/esm/text-input/stories/text-input-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-sizes.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,GAC3C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { TextInput } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <TextInput\n        label=\"Small Input\"\n        size=\"small\"\n        htmlAttributes={{ id: 'text-input-small' }}\n      />\n      <TextInput\n        label=\"Medium Input\"\n        size=\"medium\"\n        htmlAttributes={{ id: 'text-input-medium' }}\n      />\n      <TextInput\n        label=\"Large Input\"\n        size=\"large\"\n        htmlAttributes={{ id: 'text-input-large' }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-sizes.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,aAAa,EACzB,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,GAC3C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,aAAa,EACzB,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { TextInput } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <TextInput\n        label=\"Small Input\"\n        size=\"small\"\n        placeholder=\"Small Input\"\n        helpText=\"Help text\"\n        htmlAttributes={{ id: 'text-input-small' }}\n      />\n      <TextInput\n        label=\"Medium Input\"\n        size=\"medium\"\n        placeholder=\"Medium Input\"\n        helpText=\"Help text\"\n        htmlAttributes={{ id: 'text-input-medium' }}\n      />\n      <TextInput\n        label=\"Large Input\"\n        size=\"large\"\n        placeholder=\"Large Input\"\n        helpText=\"Help text\"\n        htmlAttributes={{ id: 'text-input-large' }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/time-picker/TimePicker.js

@@ -34,12 +34,11 @@ import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, offset, shift,
 import { tokens } from '@neo4j-ndl/base';
 import classNames from 'classnames';
 import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { FormFieldLabel, FormFieldMessage, useFormField, } from '../_common/form-control';
 import { ConditionalWrap } from '../conditional-wrap';
 import { useIsInsideDialog } from '../dialog/dialog-context';
 import { ClockIconOutline } from '../icons/generated/heroIcons/ClockIconOutline';
-import { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';
 import { useNeedleTheme } from '../theme';
-import { Typography } from '../typography';
 import { generateTimeOptions } from './generate-time-options';
 import { NeedleTime } from './needle-time';
 import { useKeyboardNavigation, useTimePickerPopover, } from './time-picker-hooks';
@@ -52,7 +51,7 @@ const INPUT_WIDTH_BY_FORMAT = {
 };
 export const TimePicker = (_a) => {
     var _b, _c, _d;
-    var { format = 'hh:mm', isDisabled, isFluid, isReadOnly, isRequired, value, timeInterval = 15, label, onChange, className, onError, style, size = 'medium', errorText, htmlAttributes, floatingStrategy, isPortaled: isPortaledProp, ref } = _a, restProps = __rest(_a, ["format", "isDisabled", "isFluid", "isReadOnly", "isRequired", "value", "timeInterval", "label", "onChange", "className", "onError", "style", "size", "errorText", "htmlAttributes", "floatingStrategy", "isPortaled", "ref"]);
+    var { format = 'hh:mm', isDisabled, isFluid, isReadOnly, isRequired, value, timeInterval = 15, label, onChange, className, onError, style, size = 'medium', helpText, errorText, htmlAttributes, floatingStrategy, isPortaled: isPortaledProp, ref } = _a, restProps = __rest(_a, ["format", "isDisabled", "isFluid", "isReadOnly", "isRequired", "value", "timeInterval", "label", "onChange", "className", "onError", "style", "size", "helpText", "errorText", "htmlAttributes", "floatingStrategy", "isPortaled", "ref"]);
     const [editedInput, setEditedInput] = useState(value);
     const is24Hour = !format.includes('aa');
     const hasSeconds = format.includes('ss');
@@ -62,13 +61,20 @@ export const TimePicker = (_a) => {
     useImperativeHandle(ref, () => inputRef.current, []);
     const [lastAction, setLastAction] = useState('type');
     const [error, setError] = useState(undefined);
-    const errorTextId = useId();
     const listboxId = useId();
     const timeOptions = useMemo(() => generateTimeOptions(is24Hour, timeInterval, hasSeconds), [is24Hour, timeInterval, hasSeconds]);
     const { themeClassName } = useNeedleTheme();
     const { isPopoverOpen, setIsPopoverOpen } = useTimePickerPopover(false);
     const { focusedIndex, setFocusedIndex, handleArrowNavigation } = useKeyboardNavigation(listRef, timeOptions.length);
     const errorToShow = errorText !== undefined && errorText !== '' ? errorText : error;
+    // The shared form field resolves the ids and which message is displayed -
+    // an error, set manually or by internal validation, replaces the help text.
+    const { field, controlProps } = useFormField({
+        errorText: errorToShow,
+        helpText,
+        isRequired,
+        label,
+    });
     const classes = {
         'ndl-disabled': isDisabled,
         'ndl-error': errorToShow !== undefined,
@@ -265,9 +271,9 @@ export const TimePicker = (_a) => {
     const mergedRef = useMergeRefs([refs.setReference, containerRef]);
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: classNames('ndl-time-picker', className, Object.assign({}, classes)), ref: mergedRef }, getReferenceProps(), { style: {
                     width: isFluid === true ? '100%' : 'fit-content',
-                }, children: [_jsxs("label", { className: "ndl-time-picker-label", children: [label !== undefined && (_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', children: label })), _jsxs("div", { className: "ndl-time-picker-input-wrapper", style: Object.assign({ width: inputWidth }, style), children: [_jsx("input", Object.assign({ role: "combobox", "aria-expanded": isPopoverOpen, "aria-controls": listboxId, "aria-activedescendant": isPopoverOpen && focusedIndex >= 0
+                }, children: [_jsxs("label", { className: "ndl-time-picker-label", children: [label !== undefined && (_jsx(FormFieldLabel, { field: field, size: size, association: "implicit" })), _jsxs("div", { className: "ndl-time-picker-input-wrapper", style: Object.assign({ width: inputWidth }, style), children: [_jsx("input", Object.assign({ role: "combobox", "aria-expanded": isPopoverOpen, "aria-controls": listboxId, "aria-activedescendant": isPopoverOpen && focusedIndex >= 0
                                             ? `${listboxId}-option-${focusedIndex}`
-                                            : undefined, "aria-label": label, "aria-invalid": Boolean(errorToShow), "aria-describedby": errorToShow ? errorTextId : undefined, className: "ndl-time-picker-input", type: "text", ref: inputRef, value: inputValue, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, onChange: newHandleInputChange, onKeyDown: handleKeyDown, onClick: () => {
+                                            : undefined, "aria-label": label }, controlProps, { className: "ndl-time-picker-input", type: "text", ref: inputRef, value: inputValue, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, onChange: newHandleInputChange, onKeyDown: handleKeyDown, onClick: () => {
                                             if (isReadOnly === true || isDisabled === true) {
                                                 return;
                                             }
@@ -300,7 +306,7 @@ export const TimePicker = (_a) => {
                                             }
                                         }, placeholder: format, 
                                         // The typed value can never be longer than the format pattern.
-                                        maxLength: format.length }, restProps, htmlAttributes)), _jsx(ClockIconOutline, { className: "ndl-icon-svg ndl-time-picker-icon" })] })] }), errorToShow !== undefined && (_jsxs("div", { className: "ndl-time-picker-error-wrapper", role: "status", children: [_jsx(ExclamationCircleIconSolid, { className: "ndl-time-picker-error-icon" }), _jsx(Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-time-picker-error-text", htmlAttributes: { id: errorTextId }, children: errorToShow })] }))] })), context.open && (_jsx(ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => (_jsx(FloatingPortal, { children: wrapChildren })), children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: -1, children: _jsx("div", Object.assign({ ref: refs.setFloating, className: classNames(themeClassName, 'ndl-time-picker-popover', Object.assign({}, classes)), style: Object.assign(Object.assign(Object.assign({}, transitionStyles), floatingStyles), { width: isFluid === true
+                                        maxLength: format.length }, restProps, htmlAttributes)), _jsx(ClockIconOutline, { className: "ndl-icon-svg ndl-time-picker-icon" })] })] }), _jsx(FormFieldMessage, { field: field, size: size })] })), context.open && (_jsx(ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => (_jsx(FloatingPortal, { children: wrapChildren })), children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: -1, children: _jsx("div", Object.assign({ ref: refs.setFloating, className: classNames(themeClassName, 'ndl-time-picker-popover', Object.assign({}, classes)), style: Object.assign(Object.assign(Object.assign({}, transitionStyles), floatingStyles), { width: isFluid === true
                                 ? (_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth
                                 : undefined }) }, getFloatingProps(), { children: _jsx("ul", { ref: listRef, role: "listbox", id: listboxId, tabIndex: -1, children: timeOptions.map((time, index) => (_jsx("li", { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.toString(is24Hour, hasSeconds)) === time ||
                                     (editedInput === null || editedInput === void 0 ? void 0 : editedInput.toString(is24Hour, hasSeconds)) === time, value: time, onClick: (event) => {