@neo4j-ndl/react 4.22.0 → 4.22.1

package/lib/cjs/_common/form-control/FormFieldLabel.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const classnames_1 = __importDefault(require("classnames"));
+const InformationCircleIconOutline_1 = require("../../icons/generated/heroIcons/InformationCircleIconOutline");
+const tooltip_1 = require("../../tooltip");
+const typography_1 = require("../../typography");
+/**
+ * The label row of a form field: the label itself, an optional information
+ * tooltip, and the Required/Optional indicator. The indicator and the tooltip
+ * are separate elements rather than label content, keeping them out of the
+ * control's accessible name.
+ */
+const FormFieldLabel = ({ field, size, association = 'explicit', onLabelClick, moreInformationText, tooltipProps, className, wrap, }) => {
+    const { label, labelId, controlId, hasVisuallyHiddenLabel, hasRequiredIndicator, isRequired, } = field;
+    const variant = size === 'large' ? 'body-large' : 'body-medium';
+    const isExplicit = association === 'explicit';
+    const informationIconClasses = (0, classnames_1.default)({
+        'ndl-information-icon-large': size === 'large',
+        'ndl-information-icon-small': size === 'small' || size === 'medium',
+    });
+    const row = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ndl-form-label-row', { 'ndl-visually-hidden': hasVisuallyHiddenLabel }, className), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: isExplicit ? 'label' : 'span', variant: variant, className: "ndl-form-label", htmlAttributes: isExplicit
+                    ? { htmlFor: controlId, id: labelId, onClick: onLabelClick }
+                    : undefined, children: label }), Boolean(moreInformationText) && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", "data-testid": "ndl-information-icon", children: (0, jsx_runtime_1.jsx)(InformationCircleIconOutline_1.InformationCircleIconOutline, {}) }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), hasRequiredIndicator && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, className: "ndl-form-label-indicator", children: isRequired ? 'Required' : 'Optional' }))] }));
+    return wrap === undefined ? row : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wrap(row) });
+};
+exports.FormFieldLabel = FormFieldLabel;
+//# sourceMappingURL=FormFieldLabel.js.map

package/lib/cjs/_common/form-control/FormFieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.js","sourceRoot":"","sources":["../../../../src/_common/form-control/FormFieldLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4DAAoC;AAGpC,+GAA4G;AAC5G,2CAAwC;AACxC,iDAA8C;AA+B9C;;;;;GAKG;AACI,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,WAAW,GAAG,UAAU,EACxB,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,IAAI,GACgB,EAAE,EAAE;IACxB,MAAM,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,oBAAoB,EACpB,UAAU,GACX,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC;IAChE,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAC9C,MAAM,sBAAsB,GAAG,IAAA,oBAAU,EAAC;QACxC,4BAA4B,EAAE,IAAI,KAAK,OAAO;QAC9C,4BAA4B,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;KACpE,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,CACV,iCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,oBAAoB,EACpB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,EACjD,SAAS,CACV,aAED,uBAAC,uBAAU,IACT,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,gBAAgB,EAC1B,cAAc,EACZ,UAAU;oBACR,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE;oBAC5D,CAAC,CAAC,SAAS,YAGd,KAAK,GACK,EACZ,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAC/B,wBAAC,iBAAO,kBAAC,IAAI,EAAC,QAAQ,IAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,eAC3C,uBAAC,iBAAO,CAAC,OAAO,oBACV,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,IACzB,SAAS,EAAE,sBAAsB,EACjC,gBAAgB,kBAEhB,gCACE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACF,kBAAkB,iBACjB,sBAAsB,YAElC,uBAAC,2DAA4B,KAAG,GAC5B,IACU,EAClB,uBAAC,iBAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,mBAAmB,IACJ,KACV,CACX,EACA,oBAAoB,IAAI,CACvB,uBAAC,uBAAU,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,0BAA0B,YAC/D,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAC1B,CACd,IACG,CACP,CAAC;IAEF,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,2DAAG,IAAI,CAAC,GAAG,CAAC,GAAI,CAAC;AACrD,CAAC,CAAC;AA3EW,QAAA,cAAc,kBA2EzB","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 type React from 'react';\n\nimport { InformationCircleIconOutline } from '../../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { Tooltip } from '../../tooltip';\nimport { Typography } from '../../typography';\nimport { type TooltipObjectProps } from '../types';\nimport { type FormFieldSize, type FormFieldState } from './form-control-types';\n\ntype FormFieldLabelProps = {\n  field: FormFieldState;\n  size: FormFieldSize;\n  /**\n   * How the label is associated with its control. `explicit` renders a\n   * `<label>` pointing at the control through `htmlFor`, carrying `labelId`\n   * for `aria-labelledby`. `implicit` renders plain text, for components\n   * whose control is wrapped by an enclosing `<label>`, where a nested label\n   * element would be invalid.\n   */\n  association?: 'explicit' | 'implicit';\n  /**\n   * Click handler for an explicit label, for controls that need more than\n   * the default `htmlFor` focus forwarding (the Combobox label must move\n   * focus without toggling the panel).\n   */\n  onLabelClick?: React.MouseEventHandler<HTMLLabelElement>;\n  /** Text displayed in an information tooltip next to the label */\n  moreInformationText?: React.ReactNode;\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n  /** Extra class names for the label row */\n  className?: string;\n  /** Wraps the rendered row, so a component can put it inside a Skeleton. */\n  wrap?: (row: React.ReactNode) => React.ReactNode;\n};\n\n/**\n * The label row of a form field: the label itself, an optional information\n * tooltip, and the Required/Optional indicator. The indicator and the tooltip\n * are separate elements rather than label content, keeping them out of the\n * control's accessible name.\n */\nexport const FormFieldLabel = ({\n  field,\n  size,\n  association = 'explicit',\n  onLabelClick,\n  moreInformationText,\n  tooltipProps,\n  className,\n  wrap,\n}: FormFieldLabelProps) => {\n  const {\n    label,\n    labelId,\n    controlId,\n    hasVisuallyHiddenLabel,\n    hasRequiredIndicator,\n    isRequired,\n  } = field;\n  const variant = size === 'large' ? 'body-large' : 'body-medium';\n  const isExplicit = association === 'explicit';\n  const informationIconClasses = classNames({\n    'ndl-information-icon-large': size === 'large',\n    'ndl-information-icon-small': size === 'small' || size === 'medium',\n  });\n\n  const row = (\n    <div\n      className={classNames(\n        'ndl-form-label-row',\n        { 'ndl-visually-hidden': hasVisuallyHiddenLabel },\n        className,\n      )}\n    >\n      <Typography\n        as={isExplicit ? 'label' : 'span'}\n        variant={variant}\n        className=\"ndl-form-label\"\n        htmlAttributes={\n          isExplicit\n            ? { htmlFor: controlId, id: labelId, onClick: onLabelClick }\n            : undefined\n        }\n      >\n        {label}\n      </Typography>\n      {Boolean(moreInformationText) && (\n        <Tooltip type=\"simple\" {...tooltipProps?.root}>\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              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      {hasRequiredIndicator && (\n        <Typography variant={variant} className=\"ndl-form-label-indicator\">\n          {isRequired ? 'Required' : 'Optional'}\n        </Typography>\n      )}\n    </div>\n  );\n\n  return wrap === undefined ? row : <>{wrap(row)}</>;\n};\n"]}

package/lib/cjs/_common/form-control/FormFieldMessage.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const classnames_1 = __importDefault(require("classnames"));
+const ExclamationCircleIconSolid_1 = require("../../icons/generated/heroIcons/ExclamationCircleIconSolid");
+const typography_1 = require("../../typography");
+/**
+ * How each severity presents itself. A future severity (`info`, `warning`) or
+ * a new way of presenting a message extends this map rather than reshaping
+ * the components that render messages.
+ */
+const presentationBySeverity = {
+    error: { className: 'ndl-error', icon: ExclamationCircleIconSolid_1.ExclamationCircleIconSolid },
+    help: {},
+};
+/**
+ * The message below a form field: the help text, or the error that replaces
+ * it. The container is rendered whether or not there is a message, so the
+ * `aria-live` region exists in the document before any text arrives and a
+ * validation error is reliably announced. The stylesheet collapses it while
+ * it is empty.
+ *
+ * The region is polite rather than an assertive `role="alert"`, since
+ * validation that runs on blur or on change would otherwise interrupt
+ * whatever is being read. `aria-atomic` makes the whole message announce as
+ * one, matching `role="status"` without presenting plain help text as a
+ * status message.
+ */
+const FormFieldMessage = ({ field, size, className, wrap, }) => {
+    const { message, messageId, messageSeverity } = field;
+    const variant = size === 'large' ? 'body-medium' : 'body-small';
+    const presentation = messageSeverity === undefined
+        ? undefined
+        : presentationBySeverity[messageSeverity];
+    const Icon = presentation === null || presentation === void 0 ? void 0 : presentation.icon;
+    const content = messageSeverity === undefined ? null : (
+    // The icon and the text share a row of their own, so the container stays
+    // a plain block that anything wrapping the content, a Skeleton in
+    // particular, can fill the width of.
+    (0, jsx_runtime_1.jsxs)("div", { className: "ndl-form-message-content", children: [Icon !== undefined && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-form-message-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon, {}) })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, className: "ndl-form-message-text", htmlAttributes: { id: messageId }, children: message })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-form-message', {
+            'ndl-large': size === 'large',
+            'ndl-medium': size === 'medium',
+            'ndl-small': size === 'small',
+        }, presentation === null || presentation === void 0 ? void 0 : presentation.className, className), "aria-live": "polite", "aria-atomic": "true", children: content !== null && (wrap === undefined ? content : wrap(content)) }));
+};
+exports.FormFieldMessage = FormFieldMessage;
+//# sourceMappingURL=FormFieldMessage.js.map

package/lib/cjs/_common/form-control/FormFieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldMessage.js","sourceRoot":"","sources":["../../../../src/_common/form-control/FormFieldMessage.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4DAAoC;AAGpC,2GAAwG;AACxG,iDAA8C;AAc9C;;;;GAIG;AACH,MAAM,sBAAsB,GAGxB;IACF,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,uDAA0B,EAAE;IACnE,IAAI,EAAE,EAAE;CACT,CAAC;AAWF;;;;;;;;;;;;GAYG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,IAAI,GACkB,EAAE,EAAE;IAC1B,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;IAChE,MAAM,YAAY,GAChB,eAAe,KAAK,SAAS;QAC3B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAC;IAEhC,MAAM,OAAO,GACX,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACrC,yEAAyE;IACzE,kEAAkE;IAClE,qCAAqC;IACrC,iCAAK,SAAS,EAAC,0BAA0B,aACtC,IAAI,KAAK,SAAS,IAAI,CACrB,gCAAK,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,uBAAC,IAAI,KAAG,GACJ,CACP,EACD,uBAAC,uBAAU,IACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,uBAAuB,EACjC,cAAc,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,YAEhC,OAAO,GACG,IACT,CACP,CAAC;IAEJ,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,kBAAkB,EAClB;YACE,WAAW,EAAE,IAAI,KAAK,OAAO;YAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;YAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;SAC9B,EACD,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,EACvB,SAAS,CACV,eACS,QAAQ,iBACN,MAAM,YAEjB,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAC/D,CACP,CAAC;AACJ,CAAC,CAAC;AArDW,QAAA,gBAAgB,oBAqD3B","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 type React from 'react';\n\nimport { ExclamationCircleIconSolid } from '../../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { Typography } from '../../typography';\nimport {\n  type FormFieldMessageSeverity,\n  type FormFieldSize,\n  type FormFieldState,\n} from './form-control-types';\n\ntype FormFieldMessagePresentation = {\n  /** Icon rendered before the message text. */\n  icon?: React.ComponentType;\n  /** Severity modifier class on the message container. */\n  className?: string;\n};\n\n/**\n * How each severity presents itself. A future severity (`info`, `warning`) or\n * a new way of presenting a message extends this map rather than reshaping\n * the components that render messages.\n */\nconst presentationBySeverity: Record<\n  FormFieldMessageSeverity,\n  FormFieldMessagePresentation\n> = {\n  error: { className: 'ndl-error', icon: ExclamationCircleIconSolid },\n  help: {},\n};\n\ntype FormFieldMessageProps = {\n  field: FormFieldState;\n  size: FormFieldSize;\n  /** Extra class names for the message container */\n  className?: string;\n  /** Wraps the message content, so a component can put it inside a Skeleton. */\n  wrap?: (content: React.ReactNode) => React.ReactNode;\n};\n\n/**\n * The message below a form field: the help text, or the error that replaces\n * it. The container is rendered whether or not there is a message, so the\n * `aria-live` region exists in the document before any text arrives and a\n * validation error is reliably announced. The stylesheet collapses it while\n * it is empty.\n *\n * The region is polite rather than an assertive `role=\"alert\"`, since\n * validation that runs on blur or on change would otherwise interrupt\n * whatever is being read. `aria-atomic` makes the whole message announce as\n * one, matching `role=\"status\"` without presenting plain help text as a\n * status message.\n */\nexport const FormFieldMessage = ({\n  field,\n  size,\n  className,\n  wrap,\n}: FormFieldMessageProps) => {\n  const { message, messageId, messageSeverity } = field;\n  const variant = size === 'large' ? 'body-medium' : 'body-small';\n  const presentation =\n    messageSeverity === undefined\n      ? undefined\n      : presentationBySeverity[messageSeverity];\n  const Icon = presentation?.icon;\n\n  const content =\n    messageSeverity === undefined ? null : (\n      // The icon and the text share a row of their own, so the container stays\n      // a plain block that anything wrapping the content, a Skeleton in\n      // particular, can fill the width of.\n      <div className=\"ndl-form-message-content\">\n        {Icon !== undefined && (\n          <div className=\"ndl-form-message-icon\" aria-hidden=\"true\">\n            <Icon />\n          </div>\n        )}\n        <Typography\n          variant={variant}\n          className=\"ndl-form-message-text\"\n          htmlAttributes={{ id: messageId }}\n        >\n          {message}\n        </Typography>\n      </div>\n    );\n\n  return (\n    <div\n      className={classNames(\n        'ndl-form-message',\n        {\n          'ndl-large': size === 'large',\n          'ndl-medium': size === 'medium',\n          'ndl-small': size === 'small',\n        },\n        presentation?.className,\n        className,\n      )}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {content !== null && (wrap === undefined ? content : wrap(content))}\n    </div>\n  );\n};\n"]}

package/lib/cjs/_common/form-control/form-control-types.js

@@ -0,0 +1,23 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=form-control-types.js.map

package/lib/cjs/_common/form-control/form-control-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-types.js","sourceRoot":"","sources":["../../../../src/_common/form-control/form-control-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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 type React from 'react';\n\n/** Sizes shared by the form field parts, matching the input sizes. */\ntype FormFieldSize = 'small' | 'medium' | 'large';\n\n/**\n * Severity of the message shown below a form control. An error replaces the\n * help text whenever both are provided.\n *\n * Deliberately a union rather than an error boolean: future severities such\n * as `info` and `warning`, or new ways of presenting a message, only extend\n * this union and the severity presentation map in `FormFieldMessage`.\n */\ntype FormFieldMessageSeverity = 'help' | 'error';\n\n/**\n * The field-related props a form input component maps onto the internal form\n * field. Components pick from these internally so wording, types and behavior\n * stay aligned, while their external prop names stay untouched (for example\n * both TextInput's `showRequiredOrOptionalLabel` and TextArea's `isOptional`\n * map onto `hasRequiredIndicator` here).\n */\ntype FormFieldProps = {\n  /** The label displayed above the control */\n  label?: React.ReactNode;\n\n  /** Assistive text displayed below the control */\n  helpText?: React.ReactNode;\n\n  /** Error message displayed below the control. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: React.ReactNode;\n\n  /** Whether the control is required */\n  isRequired?: boolean;\n\n  /** Whether Required or Optional is shown at the end of the label row */\n  hasRequiredIndicator?: boolean;\n\n  /** Whether the label is clipped out of the layout, leaving it to screen readers only */\n  hasVisuallyHiddenLabel?: boolean;\n};\n\n/**\n * The resolved state of a form field: the ids that tie the label and the\n * message to the control, and which message is currently displayed. Built by\n * `useFormField` and consumed by `FormFieldLabel` and `FormFieldMessage`, so\n * a component never wires ids or picks between help and error itself.\n */\ntype FormFieldState = {\n  label?: React.ReactNode;\n  /** Id of the label element, for `aria-labelledby` on ARIA widgets. */\n  labelId: string;\n  /** Id of the control, which an explicit label points at with `htmlFor`. */\n  controlId: string;\n  /** Id the help text renders with, referenced while it is displayed. */\n  helpTextId: string;\n  /** Id the error text renders with, referenced while it is displayed. */\n  errorTextId: string;\n  helpText?: React.ReactNode;\n  errorText?: React.ReactNode;\n  /** The displayed message. The error text while there is one, else the help text. */\n  message?: React.ReactNode;\n  /** Id of the displayed message; `undefined` while there is no message. */\n  messageId?: string;\n  /** Severity of the displayed message; `undefined` while there is no message. */\n  messageSeverity?: FormFieldMessageSeverity;\n  hasError: boolean;\n  isRequired: boolean;\n  hasRequiredIndicator: boolean;\n  hasVisuallyHiddenLabel: boolean;\n};\n\n// These are DOM attribute names, so the boolean naming convention cannot apply.\n/* eslint-disable @typescript-eslint/naming-convention */\n/**\n * ARIA attributes for the control the field describes. Spread onto the input\n * or the ARIA widget acting as one.\n */\ntype FormFieldControlProps = {\n  'aria-describedby': string | undefined;\n  'aria-invalid': true | undefined;\n};\n/* eslint-enable @typescript-eslint/naming-convention */\n\nexport type {\n  FormFieldControlProps,\n  FormFieldMessageSeverity,\n  FormFieldProps,\n  FormFieldSize,\n  FormFieldState,\n};\n"]}

package/lib/cjs/_common/form-control/index.js

@@ -0,0 +1,39 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInlineFieldLabel = exports.useFormField = exports.FormFieldMessage = exports.FormFieldLabel = void 0;
+/**
+ * The internal form control layer (DES-1772): one implementation of the
+ * label, the required indicator, the help text and the error message shared
+ * by the form input components, plus the ARIA wiring that ties them to the
+ * control. Internal only - not exported from the package index - so a future
+ * public field API can be built on top without being constrained by it.
+ */
+var FormFieldLabel_1 = require("./FormFieldLabel");
+Object.defineProperty(exports, "FormFieldLabel", { enumerable: true, get: function () { return FormFieldLabel_1.FormFieldLabel; } });
+var FormFieldMessage_1 = require("./FormFieldMessage");
+Object.defineProperty(exports, "FormFieldMessage", { enumerable: true, get: function () { return FormFieldMessage_1.FormFieldMessage; } });
+var use_form_field_1 = require("./use-form-field");
+Object.defineProperty(exports, "useFormField", { enumerable: true, get: function () { return use_form_field_1.useFormField; } });
+var use_inline_field_label_1 = require("./use-inline-field-label");
+Object.defineProperty(exports, "useInlineFieldLabel", { enumerable: true, get: function () { return use_inline_field_label_1.useInlineFieldLabel; } });
+//# sourceMappingURL=index.js.map

package/lib/cjs/_common/form-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/_common/form-control/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH;;;;;;GAMG;AAEH,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA;AAQzB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,mEAA+D;AAAtD,6HAAA,mBAAmB,OAAA","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\n/**\n * The internal form control layer (DES-1772): one implementation of the\n * label, the required indicator, the help text and the error message shared\n * by the form input components, plus the ARIA wiring that ties them to the\n * control. Internal only - not exported from the package index - so a future\n * public field API can be built on top without being constrained by it.\n */\n\nexport { FormFieldLabel } from './FormFieldLabel';\nexport { FormFieldMessage } from './FormFieldMessage';\nexport type {\n  FormFieldControlProps,\n  FormFieldMessageSeverity,\n  FormFieldProps,\n  FormFieldSize,\n  FormFieldState,\n} from './form-control-types';\nexport { useFormField } from './use-form-field';\nexport { useInlineFieldLabel } from './use-inline-field-label';\n"]}

package/lib/cjs/_common/form-control/use-form-field.js

@@ -0,0 +1,76 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormField = void 0;
+const react_1 = require("react");
+/**
+ * Resolves the shared form field state: id generation, which of help and
+ * error is displayed - an error always replaces the help text - and the ARIA
+ * wiring of the control. The parts are rendered by `FormFieldLabel` and
+ * `FormFieldMessage`.
+ */
+const useFormField = ({ baseId, controlId, label, helpText, errorText, isRequired = false, hasRequiredIndicator = false, hasVisuallyHiddenLabel = false, extraDescribedByIds = [], }) => {
+    const generatedBaseId = (0, react_1.useId)();
+    const base = baseId !== null && baseId !== void 0 ? baseId : generatedBaseId;
+    const labelId = `${base}-label`;
+    const helpTextId = `${base}-help-text`;
+    const errorTextId = `${base}-error-text`;
+    const resolvedControlId = controlId !== null && controlId !== void 0 ? controlId : `${base}-control`;
+    const hasError = Boolean(errorText);
+    const hasHelpText = Boolean(helpText) && !hasError;
+    const messageSeverity = hasError
+        ? 'error'
+        : hasHelpText
+            ? 'help'
+            : undefined;
+    const message = hasError ? errorText : hasHelpText ? helpText : undefined;
+    const messageId = hasError
+        ? errorTextId
+        : hasHelpText
+            ? helpTextId
+            : undefined;
+    const describedByIds = [...extraDescribedByIds, messageId].filter((id) => typeof id === 'string' && id !== '');
+    return {
+        controlProps: {
+            'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
+            'aria-invalid': hasError ? true : undefined,
+        },
+        field: {
+            controlId: resolvedControlId,
+            errorText,
+            errorTextId,
+            hasError,
+            hasRequiredIndicator,
+            hasVisuallyHiddenLabel,
+            helpText,
+            helpTextId,
+            isRequired,
+            label,
+            labelId,
+            message,
+            messageId,
+            messageSeverity,
+        },
+    };
+};
+exports.useFormField = useFormField;
+//# sourceMappingURL=use-form-field.js.map

package/lib/cjs/_common/form-control/use-form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form-field.js","sourceRoot":"","sources":["../../../../src/_common/form-control/use-form-field.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,iCAA8B;AAkC9B;;;;;GAKG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,oBAAoB,GAAG,KAAK,EAC5B,sBAAsB,GAAG,KAAK,EAC9B,mBAAmB,GAAG,EAAE,GACJ,EAAsB,EAAE;IAC5C,MAAM,eAAe,GAAG,IAAA,aAAK,GAAE,CAAC;IAChC,MAAM,IAAI,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,eAAe,CAAC;IACvC,MAAM,OAAO,GAAG,GAAG,IAAI,QAAQ,CAAC;IAChC,MAAM,UAAU,GAAG,GAAG,IAAI,YAAY,CAAC;IACvC,MAAM,WAAW,GAAG,GAAG,IAAI,aAAa,CAAC;IACzC,MAAM,iBAAiB,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,GAAG,IAAI,UAAU,CAAC;IAEzD,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;IACnD,MAAM,eAAe,GAAyC,QAAQ;QACpE,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,WAAW;YACX,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1E,MAAM,SAAS,GAAG,QAAQ;QACxB,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,WAAW;YACX,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,cAAc,GAAG,CAAC,GAAG,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAC/D,CAAC,EAAE,EAAgB,EAAE,CAAC,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,EAAE,CAC1D,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,kBAAkB,EAChB,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;YAClE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC5C;QACD,KAAK,EAAE;YACL,SAAS,EAAE,iBAAiB;YAC5B,SAAS;YACT,WAAW;YACX,QAAQ;YACR,oBAAoB;YACpB,sBAAsB;YACtB,QAAQ;YACR,UAAU;YACV,UAAU;YACV,KAAK;YACL,OAAO;YACP,OAAO;YACP,SAAS;YACT,eAAe;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,YAAY,gBA2DvB","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 { useId } from 'react';\n\nimport {\n  type FormFieldControlProps,\n  type FormFieldMessageSeverity,\n  type FormFieldProps,\n  type FormFieldState,\n} from './form-control-types';\n\ntype UseFormFieldOptions = FormFieldProps & {\n  /**\n   * Base for the generated ids, so a component that mints sibling ids of its\n   * own (like the Combobox listbox and panel ids) can share one base.\n   * Defaults to a generated id.\n   */\n  baseId?: string;\n  /**\n   * Overrides the generated control id, for controls that already name their\n   * id (the Combobox trigger is `${baseId}-trigger`).\n   */\n  controlId?: string;\n  /**\n   * Ids referenced by `aria-describedby` before the message id, skipping\n   * falsy entries (such as the TextInput clear/loading hint).\n   */\n  extraDescribedByIds?: (string | false | undefined)[];\n};\n\ntype UseFormFieldResult = {\n  field: FormFieldState;\n  /** ARIA attributes to spread onto the control the field describes. */\n  controlProps: FormFieldControlProps;\n};\n\n/**\n * Resolves the shared form field state: id generation, which of help and\n * error is displayed - an error always replaces the help text - and the ARIA\n * wiring of the control. The parts are rendered by `FormFieldLabel` and\n * `FormFieldMessage`.\n */\nexport const useFormField = ({\n  baseId,\n  controlId,\n  label,\n  helpText,\n  errorText,\n  isRequired = false,\n  hasRequiredIndicator = false,\n  hasVisuallyHiddenLabel = false,\n  extraDescribedByIds = [],\n}: UseFormFieldOptions): UseFormFieldResult => {\n  const generatedBaseId = useId();\n  const base = baseId ?? generatedBaseId;\n  const labelId = `${base}-label`;\n  const helpTextId = `${base}-help-text`;\n  const errorTextId = `${base}-error-text`;\n  const resolvedControlId = controlId ?? `${base}-control`;\n\n  const hasError = Boolean(errorText);\n  const hasHelpText = Boolean(helpText) && !hasError;\n  const messageSeverity: FormFieldMessageSeverity | undefined = hasError\n    ? 'error'\n    : hasHelpText\n      ? 'help'\n      : undefined;\n  const message = hasError ? errorText : hasHelpText ? helpText : undefined;\n  const messageId = hasError\n    ? errorTextId\n    : hasHelpText\n      ? helpTextId\n      : undefined;\n\n  const describedByIds = [...extraDescribedByIds, messageId].filter(\n    (id): id is string => typeof id === 'string' && id !== '',\n  );\n\n  return {\n    controlProps: {\n      'aria-describedby':\n        describedByIds.length > 0 ? describedByIds.join(' ') : undefined,\n      'aria-invalid': hasError ? true : undefined,\n    },\n    field: {\n      controlId: resolvedControlId,\n      errorText,\n      errorTextId,\n      hasError,\n      hasRequiredIndicator,\n      hasVisuallyHiddenLabel,\n      helpText,\n      helpTextId,\n      isRequired,\n      label,\n      labelId,\n      message,\n      messageId,\n      messageSeverity,\n    },\n  };\n};\n"]}

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

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

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

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

package/lib/cjs/checkbox/Checkbox.js

@@ -39,8 +39,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@floating-ui/react");
 const classnames_1 = __importDefault(require("classnames"));
 const react_2 = require("react");
+const form_control_1 = require("../_common/form-control");
 const use_semi_controlled_input_1 = require("../_common/use-semi-controlled-input");
-const utils_1 = require("../_common/utils");
 const Checkbox = (_a) => {
     var _b;
     var { isChecked, isDefaultChecked, isIndeterminate = false, isFluid = false, isDisabled = false, hasLeadingLabel, ariaLabel, onChange, onClick, value, label, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["isChecked", "isDefaultChecked", "isIndeterminate", "isFluid", "isDisabled", "hasLeadingLabel", "ariaLabel", "onChange", "onClick", "value", "label", "className", "style", "htmlAttributes", "ref"]);
@@ -52,10 +52,6 @@ const Checkbox = (_a) => {
         onChange,
         state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
     });
-    const labelWrappingClasses = (0, classnames_1.default)('ndl-checkbox-label', {
-        'ndl-disabled': isDisabled,
-        'ndl-fluid': isFluid,
-    });
     const checkboxClasses = (0, classnames_1.default)('ndl-checkbox', className, {
         'ndl-disabled': isDisabled,
     });
@@ -64,22 +60,14 @@ const Checkbox = (_a) => {
             internalRef.current.indeterminate = isIndeterminate;
         }
     }, [isIndeterminate]);
-    /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */
-    const labelContent = (0, react_2.useMemo)(() => {
-        if (Boolean(label) === false) {
-            return null;
-        }
-        if (typeof label === 'string') {
-            return ((0, jsx_runtime_1.jsx)("span", { title: label, className: "ndl-checkbox-label-text", children: label }));
-        }
-        return label;
-    }, [label]);
-    (0, react_2.useEffect)(() => {
-        if (Boolean(label) === false && Boolean(ariaLabel) === false) {
-            (0, utils_1.needleWarningMessage)('Checkbox needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
-        }
-    }, [ariaLabel, label]);
-    return ((0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: mergedRefs, type: "checkbox", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: checkboxClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
+    const { labelContent, fieldClassName } = (0, form_control_1.useInlineFieldLabel)({
+        ariaLabel,
+        componentName: 'Checkbox',
+        isDisabled,
+        isFluid,
+        label,
+    });
+    return ((0, jsx_runtime_1.jsxs)("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: mergedRefs, type: "checkbox", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: checkboxClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
 };
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

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

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