@neo4j-ndl/react 4.9.18 → 4.9.19

package/lib/esm/select-icon-button/SelectIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectIconButton.js","sourceRoot":"","sources":["../../../src/select-icon-button/SelectIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA0BrC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAcc,EAAE,EAAE;QAdlB,EAC/B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,OAE0C,EAD1C,SAAS,cAbmB,kJAchC,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,EAAE,SAAS,EAAE;QAC3D,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,OAAO,CACL,MAAC,OAAO,kBACN,UAAU,EAAE;YACV,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,GAAG;SACV,IACG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,IACtB,IAAI,EAAC,QAAQ;QACb,qGAAqG;QACrG,UAAU,EAAE,WAAW,KAAK,IAAI,IAAI,UAAU,IAAI,MAAM,KAAK,IAAI,aAEjE,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,IAAE,gBAAgB,kBAC1D,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,cAAc,mBACV,CAAC,cAAc,gBAClB,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,SAAS,mBACrB,MAAM,EACrB,OAAO,EAAE,OAAO,IACZ,SAAS,EACT,cAAc,eAElB,cAAK,SAAS,EAAC,2BAA2B,YACvC,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,CAC3C,GACG,EAEN,KAAC,sBAAsB,IACrB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;gCAChD,+BAA+B,EAAE,MAAM,KAAK,IAAI;6BACjD,CAAC,GACF,KACK,IACO,EAClB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,WAAW,IACI,KACV,CACX,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';\n\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { ChevronDownIconOutline } from '../icons';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Tooltip } from '../tooltip';\n\ntype SelectIconButtonProps = {\n  /** Content displayed in the button */\n  children?: React.ReactNode;\n  /** Size of button */\n  size?: 'small' | 'medium' | 'large';\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n  /** Whether the button is in disabled state */\n  isDisabled?: boolean;\n  /** If the button is opened */\n  isOpen: boolean;\n  /** Callback function to be called when the button is clicked */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /**\n   * A string that will be shown as a tooltip when hovering over the button. It also acts as an aria-label.\n   * {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label}\n   */\n  description: string | null;\n  /**\n   * Props for the tooltip component.\n   */\n  tooltipProps?: TooltipObjectProps;\n};\n\nexport const SelectIconButton = ({\n  children,\n  size = 'medium',\n  isDisabled = false,\n  isLoading = false,\n  isOpen = false,\n  className,\n  description,\n  tooltipProps,\n  onClick,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'button', SelectIconButtonProps>) => {\n  const classes = classNames('ndl-select-icon-btn', className, {\n    'ndl-active': isOpen,\n    'ndl-disabled': isDisabled,\n    'ndl-large': size === 'large',\n    'ndl-loading': isLoading,\n    'ndl-medium': size === 'medium',\n    'ndl-small': size === 'small',\n  });\n\n  const isInteractable = !isDisabled && !isLoading;\n\n  return (\n    <Tooltip\n      hoverDelay={{\n        close: 0,\n        open: 500,\n      }}\n      {...tooltipProps?.root}\n      type=\"simple\"\n      // We disable the tooltip if the button is disabled or open, so it doesn't interfere with a menu open\n      isDisabled={description === null || isDisabled || isOpen === true}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <button\n          type=\"button\"\n          ref={ref}\n          className={classes}\n          style={style}\n          disabled={!isInteractable}\n          aria-disabled={!isInteractable}\n          aria-label={description ?? undefined}\n          aria-expanded={isOpen}\n          onClick={onClick}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          <div className=\"ndl-select-icon-btn-inner\">\n            {isLoading ? (\n              <LoadingSpinner size=\"small\" />\n            ) : (\n              <div className=\"ndl-icon\">{children}</div>\n            )}\n          </div>\n\n          <ChevronDownIconOutline\n            className={classNames('ndl-select-icon-btn-icon', {\n              'ndl-select-icon-btn-icon-open': isOpen === true,\n            })}\n          />\n        </button>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}
+{"version":3,"file":"SelectIconButton.js","sourceRoot":"","sources":["../../../src/select-icon-button/SelectIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA6BrC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAec,EAAE,EAAE;QAflB,EAC/B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,EACH,cAAc,GAAG,SAAS,OAEmB,EAD1C,SAAS,cAdmB,oKAehC,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,EAAE,SAAS,EAAE;QAC3D,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,WAAW,GAAG,CAAC,CAAkD,EAAE,EAAE;QACzE,uIAAuI;QACvI,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,OAAO,kBACN,UAAU,EAAE;YACV,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,GAAG;SACV,EACD,IAAI,EAAC,QAAQ;QACb,qGAAqG;QACrG,UAAU,EAAE,WAAW,KAAK,IAAI,IAAI,UAAU,IAAI,MAAM,KAAK,IAAI,EACjE,2BAA2B,UACvB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,eAEtB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,IAAE,gBAAgB,kBAC1D,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,gBAClB,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,SAAS,mBACrB,MAAM,EACrB,OAAO,EAAE,WAAW,IAChB,SAAS,EACT,cAAc,eAElB,cAAK,SAAS,EAAC,2BAA2B,YACxC,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,GACtC,EACN,KAAC,sBAAsB,IACrB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;gCAChD,+BAA+B,EAAE,MAAM,KAAK,IAAI;6BACjD,CAAC,GACF,EACD,SAAS,IAAI,CACZ,KAAC,aAAa,IAAC,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI,CAC9D,KACM,IACO,EAClB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,WAAW,IACI,KACV,CACX,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';\n\nimport { ButtonSpinner } from '../_common/ButtonSpinner';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { ChevronDownIconOutline } from '../icons';\nimport { Tooltip } from '../tooltip';\n\ntype SelectIconButtonProps = {\n  /** Content displayed in the button */\n  children?: React.ReactNode;\n  /** Size of button */\n  size?: 'small' | 'medium' | 'large';\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n  /** Whether the button is in disabled state */\n  isDisabled?: boolean;\n  /** If the button is opened */\n  isOpen: boolean;\n  /** Callback function to be called when the button is clicked */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /**\n   * A string that will be shown as a tooltip when hovering over the button. It also acts as an aria-label.\n   * {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label}\n   */\n  description: string | null;\n  /**\n   * Props for the tooltip component.\n   */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Accessible message for screen readers when the button is in a loading state */\n  loadingMessage?: string;\n};\n\nexport const SelectIconButton = ({\n  children,\n  size = 'medium',\n  isDisabled = false,\n  isLoading = false,\n  isOpen = false,\n  className,\n  description,\n  tooltipProps,\n  onClick,\n  style,\n  htmlAttributes,\n  ref,\n  loadingMessage = 'Loading',\n  ...restProps\n}: CommonProps<'button', SelectIconButtonProps>) => {\n  const classes = classNames('ndl-select-icon-btn', className, {\n    'ndl-active': isOpen,\n    'ndl-disabled': isDisabled,\n    'ndl-large': size === 'large',\n    'ndl-loading': isLoading,\n    'ndl-medium': size === 'medium',\n    'ndl-small': size === 'small',\n  });\n\n  const isInteractable = !isDisabled && !isLoading;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    // If the button is disabled or loading, we don't want to call the onClick handler. The loading is only aria-disabled, so we need this.\n    if (!isInteractable) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <Tooltip\n      hoverDelay={{\n        close: 0,\n        open: 500,\n      }}\n      type=\"simple\"\n      // We disable the tooltip if the button is disabled or open, so it doesn't interfere with a menu open\n      isDisabled={description === null || isDisabled || isOpen === true}\n      shouldCloseOnReferenceClick\n      {...tooltipProps?.root}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <button\n          type=\"button\"\n          ref={ref}\n          className={classes}\n          style={style}\n          disabled={isDisabled}\n          aria-disabled={!isInteractable}\n          aria-label={description ?? undefined}\n          aria-expanded={isOpen}\n          onClick={handleClick}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          <div className=\"ndl-select-icon-btn-inner\">\n            <div className=\"ndl-icon\">{children}</div>\n          </div>\n          <ChevronDownIconOutline\n            className={classNames('ndl-select-icon-btn-icon', {\n              'ndl-select-icon-btn-icon-open': isOpen === true,\n            })}\n          />\n          {isLoading && (\n            <ButtonSpinner loadingMessage={loadingMessage} size={size} />\n          )}\n        </button>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}

package/lib/esm/select-icon-button/stories/select-icon-button-states.story.js

@@ -23,7 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { SelectIconButton, Typography } from '@neo4j-ndl/react';
 import { SelectIcon } from '@neo4j-ndl/react/icons';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsxs("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [_jsx(SelectIconButton, { description: "Select", size: "small", isDisabled: true, isOpen: false, children: _jsx(SelectIcon, {}) }), _jsx(Typography, { variant: "label", children: " Disabled" })] }), _jsxs("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [_jsx(SelectIconButton, { description: "Select", size: "small", isOpen: true, children: _jsx(SelectIcon, {}) }), _jsx(Typography, { variant: "label", children: " Active" })] }), _jsxs("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [_jsx(SelectIconButton, { description: "Select", size: "small", isLoading: true, isOpen: false, children: _jsx(SelectIcon, {}) }), _jsx(Typography, { variant: "label", children: " Loading" })] })] }));
+    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsxs("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [_jsx(SelectIconButton, { description: "Select", size: "small", isDisabled: true, isOpen: false, children: _jsx(SelectIcon, {}) }), _jsx(Typography, { variant: "label", children: " Disabled" })] }), _jsxs("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [_jsx(SelectIconButton, { description: "Select", size: "small", isOpen: true, children: _jsx(SelectIcon, {}) }), _jsx(Typography, { variant: "label", children: " Active" })] }), _jsxs("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [_jsx(SelectIconButton, { description: "Select", size: "small", isLoading: true, loadingMessage: "Loading", isOpen: false, children: _jsx(SelectIcon, {}) }), _jsx(Typography, { variant: "label", children: " Loading" })] })] }));
 };
 export default Component;
 //# sourceMappingURL=select-icon-button-states.story.js.map

package/lib/esm/select-icon-button/stories/select-icon-button-states.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-icon-button-states.story.js","sourceRoot":"","sources":["../../../../src/select-icon-button/stories/select-icon-button-states.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,gBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,UAAU,QACV,MAAM,EAAE,KAAK,YAEb,KAAC,UAAU,KAAG,GACG,EACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,0BAAuB,IAC9C,EACN,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,gBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,YAC9D,KAAC,UAAU,KAAG,GACG,EACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,gBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,SAAS,QACT,MAAM,EAAE,KAAK,YAEb,KAAC,UAAU,KAAG,GACG,EACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,yBAAsB,IAC7C,IACF,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 { SelectIconButton, Typography } from '@neo4j-ndl/react';\nimport { SelectIcon } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isDisabled\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Disabled</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"small\" isOpen={true}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Active</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isLoading\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Loading</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"select-icon-button-states.story.js","sourceRoot":"","sources":["../../../../src/select-icon-button/stories/select-icon-button-states.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,gBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,UAAU,QACV,MAAM,EAAE,KAAK,YAEb,KAAC,UAAU,KAAG,GACG,EACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,0BAAuB,IAC9C,EACN,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,gBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,YAC9D,KAAC,UAAU,KAAG,GACG,EACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,gBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,SAAS,QACT,cAAc,EAAC,SAAS,EACxB,MAAM,EAAE,KAAK,YAEb,KAAC,UAAU,KAAG,GACG,EACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,yBAAsB,IAC7C,IACF,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 { SelectIconButton, Typography } from '@neo4j-ndl/react';\nimport { SelectIcon } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isDisabled\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Disabled</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"small\" isOpen={true}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Active</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isLoading\n          loadingMessage=\"Loading\"\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Loading</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -85,6 +85,6 @@ export const TextArea = (_a) => {
         }
         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, 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: [_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 })] }))] }));
 };
 //# 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,EACL,0BAA0B,EAC1B,4BAA4B,GAC7B,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA6DrC;;;;;;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,EACrB,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 {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\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: use isRequired and showRequiredOrOptionalLabel like in TextInput\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            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, 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 {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\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: use isRequired and showRequiredOrOptionalLabel like in TextInput\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"]}

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

@@ -116,7 +116,7 @@ export const TextInput = (_a) => {
                                             ? '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: internalState, placeholder: placeholder, type: "text", onChange: internalOnChange, "aria-describedby": combinedAriaDescribedby }, 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(internalState) && (_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: internalState, placeholder: placeholder, type: "text", onChange: internalOnChange, "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(internalState) && (_jsx("div", { className: "ndl-element-clear ndl-element", children: _jsx("button", { tabIndex: -1, "aria-hidden": true, type: "button", title: "Clear input (Esc)", onClick: () => {
                                                     internalOnChange === null || internalOnChange === void 0 ? void 0 : internalOnChange({
                                                         target: { value: '' },
                                                     });

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 {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\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  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 [internalState, internalOnChange] = 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(internalState)) {\n      event.preventDefault();\n      event.stopPropagation();\n      internalOnChange?.({\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 = [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, 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={internalState}\n                placeholder={placeholder}\n                type=\"text\"\n                onChange={internalOnChange}\n                aria-describedby={combinedAriaDescribedby}\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(internalState) && (\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                      internalOnChange?.({\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 { 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 {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\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  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 [internalState, internalOnChange] = 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(internalState)) {\n      event.preventDefault();\n      event.stopPropagation();\n      internalOnChange?.({\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 = [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, 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={internalState}\n                placeholder={placeholder}\n                type=\"text\"\n                onChange={internalOnChange}\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(internalState) && (\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                      internalOnChange?.({\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"]}

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsx(TextInput, { label: "Clearable", isClearable: true, placeholder: "Type something" }));
+    return (_jsx(TextInput, { label: "Clearable", isClearable: true, placeholder: "Type something", htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-clearable.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-clearable.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-clearable.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,KAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,WAAW,QAAC,WAAW,EAAC,gBAAgB,GAAG,CACzE,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    <TextInput label=\"Clearable\" isClearable placeholder=\"Type something\" />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-clearable.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-clearable.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,KAAC,SAAS,IACR,KAAK,EAAC,WAAW,EACjB,WAAW,QACX,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Clearable\"\n      isClearable\n      placeholder=\"Type something\"\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return _jsx(TextInput, { label: "Label", helpText: "Help text" });
+    return (_jsx(TextInput, { label: "Label", helpText: "Help text", htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-default.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-default.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-default.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,KAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,WAAW,GAAG,CAAC;AAC1D,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 <TextInput label=\"Label\" helpText=\"Help text\" />;\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-default.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-default.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Label\"\n      helpText=\"Help text\"\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsx(TextInput, { label: "Label", isDisabled: true, helpText: "Help text", value: "Value" }));
+    return (_jsx(TextInput, { label: "Label", isDisabled: true, helpText: "Help text", value: "Value", htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-disabled.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-disabled.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-disabled.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,KAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,QAAC,QAAQ,EAAC,WAAW,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1E,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    <TextInput label=\"Label\" isDisabled helpText=\"Help text\" value=\"Value\" />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-disabled.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-disabled.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,UAAU,QACV,QAAQ,EAAC,WAAW,EACpB,KAAK,EAAC,OAAO,EACb,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Label\"\n      isDisabled\n      helpText=\"Help text\"\n      value=\"Value\"\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -23,6 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
     return (_jsx(TextInput, { label: "Email Address", isRequired: true, placeholder: "user@example.com", htmlAttributes: {
+            id: 'text-input',
             type: 'email',
         } }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-email.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-email.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,KAAC,SAAS,IACR,KAAK,EAAC,eAAe,EACrB,UAAU,QACV,WAAW,EAAC,kBAAkB,EAC9B,cAAc,EAAE;YACd,IAAI,EAAE,OAAO;SACd,GACD,CACH,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    <TextInput\n      label=\"Email Address\"\n      isRequired\n      placeholder=\"user@example.com\"\n      htmlAttributes={{\n        type: 'email',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-email.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-email.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,KAAC,SAAS,IACR,KAAK,EAAC,eAAe,EACrB,UAAU,QACV,WAAW,EAAC,kBAAkB,EAC9B,cAAc,EAAE;YACd,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,OAAO;SACd,GACD,CACH,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    <TextInput\n      label=\"Email Address\"\n      isRequired\n      placeholder=\"user@example.com\"\n      htmlAttributes={{\n        id: 'text-input',\n        type: 'email',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return _jsx(TextInput, { label: "Label", errorText: "Error text" });
+    return (_jsx(TextInput, { label: "Label", errorText: "Error text", htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-error.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-error.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-error.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,KAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,YAAY,GAAG,CAAC;AAC5D,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 <TextInput label=\"Label\" errorText=\"Error text\" />;\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-error.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-error.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,YAAY,EACtB,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Label\"\n      errorText=\"Error text\"\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -30,7 +30,7 @@ const Component = () => {
         }, isRequired: false, showRequiredOrOptionalLabel: true, isDisabled: false, isReadOnly: false, isFluid: false, isSkeletonLoading: false, skeletonProps: {
             onBackground: 'weak',
             shape: 'rectangular',
-        } }));
+        }, htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-full.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-full.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,cAAc,EAAE,KAAC,eAAe,KAAG,EACnC,eAAe,EACb,KAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAC/B,WAAW,EAAC,YAAY,YAExB,KAAC,gBAAgB,KAAG,GACJ,EAEpB,IAAI,EAAC,QAAQ,EACb,mBAAmB,EAAC,uBAAuB,EAC3C,YAAY,EAAE;YACZ,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC3B,EACD,UAAU,EAAE,KAAK,EACjB,2BAA2B,EAAE,IAAI,EACjC,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,KAAK,EACd,iBAAiB,EAAE,KAAK,EACxB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa;SACrB,GACD,CACH,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 { CleanIconButton, TextInput } from '@neo4j-ndl/react';\nimport { UserIconOutline, XMarkIconOutline } from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [textValue, setTextValue] = useState('');\n\n  return (\n    <TextInput\n      label=\"Label\"\n      helpText=\"Help text\"\n      placeholder=\"Placeholder\"\n      value={textValue}\n      onChange={(e) => setTextValue(e.target.value)}\n      leadingElement={<UserIconOutline />}\n      trailingElement={\n        <CleanIconButton\n          onClick={() => setTextValue('')}\n          description=\"clear text\"\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      }\n      size=\"medium\"\n      moreInformationText=\"Information icon text\"\n      tooltipProps={{\n        root: { placement: 'top' },\n      }}\n      isRequired={false}\n      showRequiredOrOptionalLabel={true}\n      isDisabled={false}\n      isReadOnly={false}\n      isFluid={false}\n      isSkeletonLoading={false}\n      skeletonProps={{\n        onBackground: 'weak',\n        shape: 'rectangular',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-full.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,cAAc,EAAE,KAAC,eAAe,KAAG,EACnC,eAAe,EACb,KAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAC/B,WAAW,EAAC,YAAY,YAExB,KAAC,gBAAgB,KAAG,GACJ,EAEpB,IAAI,EAAC,QAAQ,EACb,mBAAmB,EAAC,uBAAuB,EAC3C,YAAY,EAAE;YACZ,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC3B,EACD,UAAU,EAAE,KAAK,EACjB,2BAA2B,EAAE,IAAI,EACjC,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,KAAK,EACd,iBAAiB,EAAE,KAAK,EACxB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa;SACrB,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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 { CleanIconButton, TextInput } from '@neo4j-ndl/react';\nimport { UserIconOutline, XMarkIconOutline } from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [textValue, setTextValue] = useState('');\n\n  return (\n    <TextInput\n      label=\"Label\"\n      helpText=\"Help text\"\n      placeholder=\"Placeholder\"\n      value={textValue}\n      onChange={(e) => setTextValue(e.target.value)}\n      leadingElement={<UserIconOutline />}\n      trailingElement={\n        <CleanIconButton\n          onClick={() => setTextValue('')}\n          description=\"clear text\"\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      }\n      size=\"medium\"\n      moreInformationText=\"Information icon text\"\n      tooltipProps={{\n        root: { placement: 'top' },\n      }}\n      isRequired={false}\n      showRequiredOrOptionalLabel={true}\n      isDisabled={false}\n      isReadOnly={false}\n      isFluid={false}\n      isSkeletonLoading={false}\n      skeletonProps={{\n        onBackground: 'weak',\n        shape: 'rectangular',\n      }}\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/text-input/stories/text-input-information-icon.story.js

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsx(TextInput, { label: "Label", moreInformationText: "Information icon text" }));
+    return (_jsx(TextInput, { label: "Label", moreInformationText: "Information icon text", htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-information-icon.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-information-icon.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-information-icon.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,KAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,mBAAmB,EAAC,uBAAuB,GAAG,CACxE,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    <TextInput label=\"Label\" moreInformationText=\"Information icon text\" />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-information-icon.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-information-icon.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,mBAAmB,EAAC,uBAAuB,EAC3C,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Label\"\n      moreInformationText=\"Information icon text\"\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/text-input/stories/text-input-loading-spinner.story.js

@@ -23,7 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 import { CalendarDaysIconOutline } from '@neo4j-ndl/react/icons';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsx(TextInput, { label: "Default loading", isLoading: true, placeholder: "Placeholder" }), _jsx(TextInput, { label: "With leading element", isLoading: true, leadingElement: _jsx(CalendarDaysIconOutline, {}), placeholder: "Placeholder" }), _jsx(TextInput, { label: "With trailing element", isLoading: true, trailingElement: _jsx(CalendarDaysIconOutline, {}), placeholder: "Placeholder" }), _jsx(TextInput, { label: "With leading and trailing element", isLoading: true, leadingElement: _jsx(CalendarDaysIconOutline, {}), trailingElement: _jsx(CalendarDaysIconOutline, {}), placeholder: "Placeholder" })] }));
+    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsx(TextInput, { label: "Default loading", isLoading: true, placeholder: "Placeholder", htmlAttributes: { id: 'text-input-loading' } }), _jsx(TextInput, { label: "With leading element", isLoading: true, leadingElement: _jsx(CalendarDaysIconOutline, {}), placeholder: "Placeholder", htmlAttributes: { id: 'text-input-loading-leading' } }), _jsx(TextInput, { label: "With trailing element", isLoading: true, trailingElement: _jsx(CalendarDaysIconOutline, {}), placeholder: "Placeholder", htmlAttributes: { id: 'text-input-loading-trailing' } }), _jsx(TextInput, { label: "With leading and trailing element", isLoading: true, leadingElement: _jsx(CalendarDaysIconOutline, {}), trailingElement: _jsx(CalendarDaysIconOutline, {}), placeholder: "Placeholder", htmlAttributes: { id: 'text-input-loading-both' } })] }));
 };
 export default Component;
 //# sourceMappingURL=text-input-loading-spinner.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-loading-spinner.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-loading-spinner.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,SAAS,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,QAAC,WAAW,EAAC,aAAa,GAAG,EACzE,KAAC,SAAS,IACR,KAAK,EAAC,sBAAsB,EAC5B,SAAS,QACT,cAAc,EAAE,KAAC,uBAAuB,KAAG,EAC3C,WAAW,EAAC,aAAa,GACzB,EACF,KAAC,SAAS,IACR,KAAK,EAAC,uBAAuB,EAC7B,SAAS,QACT,eAAe,EAAE,KAAC,uBAAuB,KAAG,EAC5C,WAAW,EAAC,aAAa,GACzB,EACF,KAAC,SAAS,IACR,KAAK,EAAC,mCAAmC,EACzC,SAAS,QACT,cAAc,EAAE,KAAC,uBAAuB,KAAG,EAC3C,eAAe,EAAE,KAAC,uBAAuB,KAAG,EAC5C,WAAW,EAAC,aAAa,GACzB,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';\nimport { CalendarDaysIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <TextInput label=\"Default loading\" isLoading placeholder=\"Placeholder\" />\n      <TextInput\n        label=\"With leading element\"\n        isLoading\n        leadingElement={<CalendarDaysIconOutline />}\n        placeholder=\"Placeholder\"\n      />\n      <TextInput\n        label=\"With trailing element\"\n        isLoading\n        trailingElement={<CalendarDaysIconOutline />}\n        placeholder=\"Placeholder\"\n      />\n      <TextInput\n        label=\"With leading and trailing element\"\n        isLoading\n        leadingElement={<CalendarDaysIconOutline />}\n        trailingElement={<CalendarDaysIconOutline />}\n        placeholder=\"Placeholder\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-loading-spinner.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-loading-spinner.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,SAAS,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,QACT,WAAW,EAAC,aAAa,EACzB,cAAc,EAAE,EAAE,EAAE,EAAE,oBAAoB,EAAE,GAC5C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,sBAAsB,EAC5B,SAAS,QACT,cAAc,EAAE,KAAC,uBAAuB,KAAG,EAC3C,WAAW,EAAC,aAAa,EACzB,cAAc,EAAE,EAAE,EAAE,EAAE,4BAA4B,EAAE,GACpD,EACF,KAAC,SAAS,IACR,KAAK,EAAC,uBAAuB,EAC7B,SAAS,QACT,eAAe,EAAE,KAAC,uBAAuB,KAAG,EAC5C,WAAW,EAAC,aAAa,EACzB,cAAc,EAAE,EAAE,EAAE,EAAE,6BAA6B,EAAE,GACrD,EACF,KAAC,SAAS,IACR,KAAK,EAAC,mCAAmC,EACzC,SAAS,QACT,cAAc,EAAE,KAAC,uBAAuB,KAAG,EAC3C,eAAe,EAAE,KAAC,uBAAuB,KAAG,EAC5C,WAAW,EAAC,aAAa,EACzB,cAAc,EAAE,EAAE,EAAE,EAAE,yBAAyB,EAAE,GACjD,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';\nimport { CalendarDaysIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <TextInput\n        label=\"Default loading\"\n        isLoading\n        placeholder=\"Placeholder\"\n        htmlAttributes={{ id: 'text-input-loading' }}\n      />\n      <TextInput\n        label=\"With leading element\"\n        isLoading\n        leadingElement={<CalendarDaysIconOutline />}\n        placeholder=\"Placeholder\"\n        htmlAttributes={{ id: 'text-input-loading-leading' }}\n      />\n      <TextInput\n        label=\"With trailing element\"\n        isLoading\n        trailingElement={<CalendarDaysIconOutline />}\n        placeholder=\"Placeholder\"\n        htmlAttributes={{ id: 'text-input-loading-trailing' }}\n      />\n      <TextInput\n        label=\"With leading and trailing element\"\n        isLoading\n        leadingElement={<CalendarDaysIconOutline />}\n        trailingElement={<CalendarDaysIconOutline />}\n        placeholder=\"Placeholder\"\n        htmlAttributes={{ id: 'text-input-loading-both' }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,7 +25,7 @@ const Component = () => {
     return (_jsx(TextInput, { label: "Label", helpText: "Help text", isSkeletonLoading: true, skeletonProps: {
             onBackground: 'weak',
             shape: 'rectangular',
-        } }));
+        }, htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-loading.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-loading.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-loading.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,iBAAiB,EAAE,IAAI,EACvB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa;SACrB,GACD,CACH,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    <TextInput\n      label=\"Label\"\n      helpText=\"Help text\"\n      isSkeletonLoading={true}\n      skeletonProps={{\n        onBackground: 'weak',\n        shape: 'rectangular',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-loading.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-loading.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,iBAAiB,EAAE,IAAI,EACvB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa;SACrB,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Label\"\n      helpText=\"Help text\"\n      isSkeletonLoading={true}\n      skeletonProps={{\n        onBackground: 'weak',\n        shape: 'rectangular',\n      }}\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -23,6 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
     return (_jsx(TextInput, { label: "Age", htmlAttributes: {
+            id: 'text-input',
             max: '100',
             min: '0',
             type: 'number',

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-number.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-number.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,KAAC,SAAS,IACR,KAAK,EAAC,KAAK,EACX,cAAc,EAAE;YACd,GAAG,EAAE,KAAK;YACV,GAAG,EAAE,GAAG;YACR,IAAI,EAAE,QAAQ;SACf,GACD,CACH,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    <TextInput\n      label=\"Age\"\n      htmlAttributes={{\n        max: '100',\n        min: '0',\n        type: 'number',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-number.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-number.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,KAAC,SAAS,IACR,KAAK,EAAC,KAAK,EACX,cAAc,EAAE;YACd,EAAE,EAAE,YAAY;YAChB,GAAG,EAAE,KAAK;YACV,GAAG,EAAE,GAAG;YACR,IAAI,EAAE,QAAQ;SACf,GACD,CACH,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    <TextInput\n      label=\"Age\"\n      htmlAttributes={{\n        id: 'text-input',\n        max: '100',\n        min: '0',\n        type: 'number',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsx(TextInput, { label: "Label", helpText: "Help text", showRequiredOrOptionalLabel: true }));
+    return (_jsx(TextInput, { label: "Label", helpText: "Help text", showRequiredOrOptionalLabel: true, htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-optional.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-optional.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-optional.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,KAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,WAAW,EAAC,2BAA2B,SAAG,CAC7E,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    <TextInput label=\"Label\" helpText=\"Help text\" showRequiredOrOptionalLabel />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-optional.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-optional.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,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,2BAA2B,QAC3B,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GACpC,CACH,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    <TextInput\n      label=\"Label\"\n      helpText=\"Help text\"\n      showRequiredOrOptionalLabel\n      htmlAttributes={{ id: 'text-input' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,6 +26,7 @@ import { useState } from 'react';
 const Component = () => {
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
     return (_jsx(TextInput, { label: "Password", trailingElement: _jsx(CleanIconButton, { onClick: () => setIsPasswordVisible(!isPasswordVisible), description: "toggle password visibility", children: isPasswordVisible ? _jsx(EyeIconOutline, {}) : _jsx(EyeSlashIconOutline, {}) }), placeholder: "Enter password", htmlAttributes: {
+            id: 'text-input',
             type: isPasswordVisible ? 'text' : 'password',
         } }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-password.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-password.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,UAAU,EAChB,eAAe,EACb,KAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,EACvD,WAAW,EAAC,4BAA4B,YAEvC,iBAAiB,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,GACjD,EAEpB,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE;YACd,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;SAC9C,GACD,CACH,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 { CleanIconButton, TextInput } from '@neo4j-ndl/react';\nimport { EyeIconOutline, EyeSlashIconOutline } from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  return (\n    <TextInput\n      label=\"Password\"\n      trailingElement={\n        <CleanIconButton\n          onClick={() => setIsPasswordVisible(!isPasswordVisible)}\n          description=\"toggle password visibility\"\n        >\n          {isPasswordVisible ? <EyeIconOutline /> : <EyeSlashIconOutline />}\n        </CleanIconButton>\n      }\n      placeholder=\"Enter password\"\n      htmlAttributes={{\n        type: isPasswordVisible ? 'text' : 'password',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-password.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-password.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,UAAU,EAChB,eAAe,EACb,KAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,EACvD,WAAW,EAAC,4BAA4B,YAEvC,iBAAiB,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,GACjD,EAEpB,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE;YACd,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;SAC9C,GACD,CACH,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 { CleanIconButton, TextInput } from '@neo4j-ndl/react';\nimport { EyeIconOutline, EyeSlashIconOutline } from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  return (\n    <TextInput\n      label=\"Password\"\n      trailingElement={\n        <CleanIconButton\n          onClick={() => setIsPasswordVisible(!isPasswordVisible)}\n          description=\"toggle password visibility\"\n        >\n          {isPasswordVisible ? <EyeIconOutline /> : <EyeSlashIconOutline />}\n        </CleanIconButton>\n      }\n      placeholder=\"Enter password\"\n      htmlAttributes={{\n        id: 'text-input',\n        type: isPasswordVisible ? 'text' : 'password',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsx(TextInput, { label: "Label", isReadOnly: true, helpText: "Help text", value: "Value" }));
+    return (_jsx(TextInput, { label: "Label", isReadOnly: true, helpText: "Help text", value: "Value", htmlAttributes: { id: 'text-input' } }));
 };
 export default Component;
 //# sourceMappingURL=text-input-readonly.story.js.map