@neo4j-ndl/react 4.3.5 → 4.3.6

package/lib/cjs/text-input/stories/text-input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.stories.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input.stories.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 { type Meta, type StoryObj } from '@storybook/react-vite';\n\nimport { TextInput } from '../../index';\nimport {\n  TextInputDefault,\n  TextInputDefaultSource,\n  TextInputDisabled,\n  TextInputDisabledSource,\n  TextInputEmail,\n  TextInputEmailSource,\n  TextInputError,\n  TextInputErrorSource,\n  TextInputFull,\n  TextInputFullSource,\n  TextInputInformationIcon,\n  TextInputInformationIconSource,\n  TextInputLoading,\n  TextInputLoadingSource,\n  TextInputNumber,\n  TextInputNumberSource,\n  TextInputOptional,\n  TextInputOptionalSource,\n  TextInputPassword,\n  TextInputPasswordSource,\n  TextInputReadonly,\n  TextInputReadonlySource,\n  TextInputRequired,\n  TextInputRequiredSource,\n  TextInputSizes,\n  TextInputSizesSource,\n  TextInputWithIcons,\n  TextInputWithIconsSource,\n} from '.';\n\nconst componentMeta: Meta<typeof TextInput> = {\n  title: 'Components/TextInput',\n  id: 'components-text-input',\n  component: TextInput,\n  tags: ['docsPage'],\n  parameters: {\n    controls: { disable: true },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-flex n-justify-center\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof TextInput>;\n\nexport const Default: Story = {\n  args: {},\n  render: TextInputDefault,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputDefaultSource,\n      },\n    },\n  },\n};\n\nexport const Required: Story = {\n  args: {},\n  render: TextInputRequired,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputRequiredSource,\n      },\n    },\n  },\n};\n\nexport const Optional: Story = {\n  args: {},\n  render: TextInputOptional,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputOptionalSource,\n      },\n    },\n  },\n};\n\nexport const Disabled: Story = {\n  args: {},\n  render: TextInputDisabled,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputDisabledSource,\n      },\n    },\n  },\n};\n\nexport const Readonly: Story = {\n  args: {},\n  render: TextInputReadonly,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputReadonlySource,\n      },\n    },\n  },\n};\n\nexport const Error: Story = {\n  args: {},\n  render: TextInputError,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputErrorSource,\n      },\n    },\n  },\n};\n\nexport const InformationIcon: Story = {\n  args: {},\n  render: TextInputInformationIcon,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputInformationIconSource,\n      },\n    },\n  },\n};\n\nexport const Email: Story = {\n  args: {},\n  render: TextInputEmail,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputEmailSource,\n      },\n    },\n  },\n};\n\nexport const Number: Story = {\n  args: {},\n  render: TextInputNumber,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputNumberSource,\n      },\n    },\n  },\n};\n\nexport const WithIcons: Story = {\n  args: {},\n  render: TextInputWithIcons,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputWithIconsSource,\n      },\n    },\n  },\n};\n\nexport const Password: Story = {\n  args: {},\n  render: TextInputPassword,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputPasswordSource,\n      },\n    },\n  },\n};\n\nexport const Sizes: Story = {\n  args: {},\n  render: TextInputSizes,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputSizesSource,\n      },\n    },\n  },\n};\n\nexport const Loading: Story = {\n  args: {},\n  render: TextInputLoading,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputLoadingSource,\n      },\n    },\n  },\n};\n\nexport const Full: Story = {\n  args: {},\n  render: TextInputFull,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextInputFullSource,\n      },\n    },\n  },\n};\n"]}
+{"version":3,"file":"text-input.stories.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input.stories.tsx"],"names":[],"mappings":";;;;AAuBA,uCAAwC;AACxC,wBAiCW;AAEX,MAAM,aAAa,GAA2B;IAC5C,SAAS,EAAE,iBAAS;IACpB,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;IACD,EAAE,EAAE,uBAAuB;IAC3B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,yBAAsB;gBAC5B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,mBAAgB;CACzB,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,oBAAiB;CAC1B,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,oBAAiB;CAC1B,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,oBAAiB;CAC1B,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,oBAAiB;CAC1B,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,uBAAoB;gBAC1B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,iBAAc;CACvB,CAAC;AAEW,QAAA,eAAe,GAAU;IACpC,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iCAA8B;gBACpC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,2BAAwB;CACjC,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,uBAAoB;gBAC1B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,iBAAc;CACvB,CAAC;AAEW,QAAA,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,wBAAqB;gBAC3B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,kBAAe;CACxB,CAAC;AAEW,QAAA,SAAS,GAAU;IAC9B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,2BAAwB;gBAC9B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,qBAAkB;CAC3B,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,oBAAiB;CAC1B,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,uBAAoB;gBAC1B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,iBAAc;CACvB,CAAC;AAEW,QAAA,eAAe,GAAU;IACpC,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,yBAAsB;gBAC5B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,mBAAgB;CACzB,CAAC;AAEW,QAAA,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,sBAAmB;gBACzB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,SAAS,GAAU;IAC9B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,2BAAwB;gBAC9B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,qBAAkB;CAC3B,CAAC;AAEW,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,gCAA6B;gBACnC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,0BAAuB;CAChC,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 { type Meta, type StoryObj } from '@storybook/react-vite';\n\nimport { TextInput } from '../../index';\nimport {\n  TextInputClearable,\n  TextInputClearableSource,\n  TextInputDefault,\n  TextInputDefaultSource,\n  TextInputDisabled,\n  TextInputDisabledSource,\n  TextInputEmail,\n  TextInputEmailSource,\n  TextInputError,\n  TextInputErrorSource,\n  TextInputFull,\n  TextInputFullSource,\n  TextInputInformationIcon,\n  TextInputInformationIconSource,\n  TextInputLoading,\n  TextInputLoadingSource,\n  TextInputLoadingSpinner,\n  TextInputLoadingSpinnerSource,\n  TextInputNumber,\n  TextInputNumberSource,\n  TextInputOptional,\n  TextInputOptionalSource,\n  TextInputPassword,\n  TextInputPasswordSource,\n  TextInputReadonly,\n  TextInputReadonlySource,\n  TextInputRequired,\n  TextInputRequiredSource,\n  TextInputSizes,\n  TextInputSizesSource,\n  TextInputWithIcons,\n  TextInputWithIconsSource,\n} from '.';\n\nconst componentMeta: Meta<typeof TextInput> = {\n  component: TextInput,\n  decorators: [\n    (Story) => (\n      <div className=\"n-flex n-justify-center\">\n        <Story />\n      </div>\n    ),\n  ],\n  id: 'components-text-input',\n  parameters: {\n    controls: { disable: true },\n  },\n  tags: ['docsPage'],\n  title: 'Components/TextInput',\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof TextInput>;\n\nexport const Default: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputDefaultSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputDefault,\n};\n\nexport const Required: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputRequiredSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputRequired,\n};\n\nexport const Optional: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputOptionalSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputOptional,\n};\n\nexport const Disabled: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputDisabledSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputDisabled,\n};\n\nexport const Readonly: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputReadonlySource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputReadonly,\n};\n\nexport const Error: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputErrorSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputError,\n};\n\nexport const InformationIcon: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputInformationIconSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputInformationIcon,\n};\n\nexport const Email: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputEmailSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputEmail,\n};\n\nexport const Number: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputNumberSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputNumber,\n};\n\nexport const WithIcons: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputWithIconsSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputWithIcons,\n};\n\nexport const Password: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputPasswordSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputPassword,\n};\n\nexport const Sizes: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputSizesSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputSizes,\n};\n\nexport const SkeletonLoading: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputLoadingSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputLoading,\n};\n\nexport const Full: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputFullSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputFull,\n};\n\nexport const Clearable: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputClearableSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputClearable,\n};\n\nexport const Loading: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: TextInputLoadingSpinnerSource,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextInputLoadingSpinner,\n};\n"]}

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

@@ -31,10 +31,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
-import { useMemo, } from 'react';
+import { useId, useMemo, } from 'react';
 import { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';
+import { useSemiControlledInput } from '../_common/use-semi-controlled-input';
 import { needleWarningMessage } from '../_common/utils';
-import { ExclamationCircleIconSolid, InformationCircleIconOutline, } from '../icons';
+import { ExclamationCircleIconSolid, InformationCircleIconOutline, XMarkIconOutline, } from '../icons';
+import { LoadingSpinner } from '../loading-spinner';
 import { Skeleton } from '../skeleton';
 import { Tooltip } from '../tooltip';
 import { Typography } from '../typography';
@@ -46,7 +48,14 @@ import { Typography } from '../typography';
  *
  */
 export const TextInput = (_a) => {
-    var { label, isFluid, errorText, helpText, leadingElement, trailingElement, showRequiredOrOptionalLabel = false, moreInformationText, size = 'medium', placeholder, value, tooltipProps, htmlAttributes, isDisabled, isReadOnly, isRequired, onChange, className, style, isSkeletonLoading = false, skeletonProps, ref } = _a, restProps = __rest(_a, ["label", "isFluid", "errorText", "helpText", "leadingElement", "trailingElement", "showRequiredOrOptionalLabel", "moreInformationText", "size", "placeholder", "value", "tooltipProps", "htmlAttributes", "isDisabled", "isReadOnly", "isRequired", "onChange", "className", "style", "isSkeletonLoading", "skeletonProps", "ref"]);
+    var { label, isFluid, errorText, helpText, leadingElement, trailingElement, showRequiredOrOptionalLabel = false, moreInformationText, size = 'medium', placeholder, value, tooltipProps, htmlAttributes, isDisabled, isReadOnly, isRequired, onChange, isClearable = false, className, style, isSkeletonLoading = false, isLoading = false, skeletonProps, ref } = _a, restProps = __rest(_a, ["label", "isFluid", "errorText", "helpText", "leadingElement", "trailingElement", "showRequiredOrOptionalLabel", "moreInformationText", "size", "placeholder", "value", "tooltipProps", "htmlAttributes", "isDisabled", "isReadOnly", "isRequired", "onChange", "isClearable", "className", "style", "isSkeletonLoading", "isLoading", "skeletonProps", "ref"]);
+    const [internalState, internalOnChange] = useSemiControlledInput({
+        inputType: 'text',
+        isControlled: value !== undefined,
+        onChange,
+        state: value !== null && value !== void 0 ? value : '',
+    });
+    const hintId = useId();
     const containerWrappingClasses = classNames(`ndl-text-input`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
@@ -67,6 +76,18 @@ export const TextInput = (_a) => {
     const ariaLabel = combinedHtmlInputAttributes['aria-label'];
     const isCustomLabel = Boolean(label) && typeof label !== 'string';
     const hasCustomLabelAndNoAriaLabel = isCustomLabel && (ariaLabel === undefined || ariaLabel === '');
+    const shouldRenderHint = isClearable || isLoading;
+    const handleInputKeyDown = (event) => {
+        var _a;
+        if (isClearable && event.key === 'Escape' && Boolean(internalState)) {
+            event.preventDefault();
+            event.stopPropagation();
+            internalOnChange === null || internalOnChange === void 0 ? void 0 : internalOnChange({
+                target: { value: '' },
+            });
+        }
+        (_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, event);
+    };
     useMemo(() => {
         if (!label && !ariaLabel) {
             needleWarningMessage('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');
@@ -79,7 +100,17 @@ export const TextInput = (_a) => {
         'ndl-information-icon-large': size === 'large',
         'ndl-information-icon-small': size === 'small' || size === 'medium',
     });
-    return (_jsxs("div", { className: containerWrappingClasses, style: style, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-label-text-wrapper", children: [_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && (_jsxs(Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: _jsx("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: _jsx(InformationCircleIconOutline, {}) }) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), showRequiredOrOptionalLabel && (_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: isRequired === true ? 'Required' : 'Optional' }))] }) }))), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-input-wrapper", children: [leadingElement && (_jsx("div", { className: "ndl-element-leading ndl-element", children: leadingElement })), _jsx("input", Object.assign({ readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: value, placeholder: placeholder, type: "text", onChange: onChange }, combinedHtmlInputAttributes, restProps, { ref: ref })), trailingElement && (_jsx("div", { className: "ndl-element-trailing ndl-element", children: trailingElement }))] }) }))] }), Boolean(helpText) && !errorText && (_jsx(Skeleton, { onBackground: "weak", shape: "rectangular", isLoading: isSkeletonLoading, children: _jsx(Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", children: helpText }) })), Boolean(errorText) && (
+    return (_jsxs("div", { className: containerWrappingClasses, style: style, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-label-text-wrapper", children: [_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && (_jsxs(Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: _jsx("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: _jsx(InformationCircleIconOutline, {}) }) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), showRequiredOrOptionalLabel && (_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: isRequired === true ? 'Required' : 'Optional' }))] }) }))), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-input-wrapper", children: [(leadingElement || (isLoading && !trailingElement)) && (_jsx("div", { className: "ndl-element-leading ndl-element", children: isLoading ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
+                                            ? '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": shouldRenderHint ? hintId : undefined }, combinedHtmlInputAttributes, { onKeyDown: handleInputKeyDown }, restProps)), shouldRenderHint && (_jsxs("span", { id: hintId, className: "ndl-text-input-hint", 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: '' },
+                                                    });
+                                                }, children: _jsx(XMarkIconOutline, { className: "n-size-4" }) }) }))] }), trailingElement && (_jsx("div", { className: "ndl-element-trailing ndl-element", children: isLoading && !leadingElement ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
+                                            ? 'ndl-medium-spinner'
+                                            : 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), Boolean(helpText) && !errorText && (_jsx(Skeleton, { onBackground: "weak", shape: "rectangular", isLoading: isSkeletonLoading, children: _jsx(Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", children: helpText }) })), Boolean(errorText) && (
             // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.
             // Currently the message fills 100% of the width while the rest of the text input has a set width.
             _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-form-message", children: [_jsx("div", { className: "ndl-error-icon", children: _jsx(ExclamationCircleIconSolid, {}) }), _jsx(Typography, { className: "ndl-error-text", variant: size === 'large' ? 'body-medium' : 'body-small', children: errorText })] }) })))] }));

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  useMemo,\n} from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n} from '../icons';\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\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  className,\n  style,\n  isSkeletonLoading = false,\n  skeletonProps,\n  ref,\n  ...restProps\n}: CommonProps<'input', TextInputProps>) => {\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\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  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 && (\n              <div className=\"ndl-element-leading ndl-element\">\n                {leadingElement}\n              </div>\n            )}\n            <input\n              readOnly={isReadOnly}\n              disabled={isDisabled}\n              required={isRequired}\n              value={value}\n              placeholder={placeholder}\n              type=\"text\"\n              onChange={onChange}\n              {...combinedHtmlInputAttributes}\n              {...restProps}\n              ref={ref}\n            />\n            {trailingElement && (\n              <div className=\"ndl-element-trailing ndl-element\">\n                {trailingElement}\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          >\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            >\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\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  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={shouldRenderHint ? hintId : undefined}\n                {...combinedHtmlInputAttributes}\n                onKeyDown={handleInputKeyDown}\n                {...restProps}\n              />\n              {shouldRenderHint && (\n                <span id={hintId} className=\"ndl-text-input-hint\">\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          >\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            >\n              {errorText}\n            </Typography>\n          </div>\n        </Skeleton>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/text-input/stories/index.js

@@ -32,7 +32,10 @@ export { default as TextInputPassword } from './text-input-password.story';
 export { default as TextInputSizes } from './text-input-sizes.story';
 export { default as TextInputLoading } from './text-input-loading.story';
 export { default as TextInputFull } from './text-input-full.story';
+export { default as TextInputClearable } from './text-input-clearable.story';
+export { default as TextInputLoadingSpinner } from './text-input-loading-spinner.story';
 import { removeLicenseHeader } from '../../_common/export-stories-utils';
+import TextInputClearableSourceRaw from './text-input-clearable.story?raw';
 import TextInputDefaultSourceRaw from './text-input-default.story?raw';
 import TextInputDisabledSourceRaw from './text-input-disabled.story?raw';
 import TextInputEmailSourceRaw from './text-input-email.story?raw';
@@ -40,6 +43,7 @@ import TextInputErrorSourceRaw from './text-input-error.story?raw';
 import TextInputFullSourceRaw from './text-input-full.story?raw';
 import TextInputInformationIconSourceRaw from './text-input-information-icon.story?raw';
 import TextInputLoadingSourceRaw from './text-input-loading.story?raw';
+import TextInputLoadingSpinnerSourceRaw from './text-input-loading-spinner.story?raw';
 import TextInputNumberSourceRaw from './text-input-number.story?raw';
 import TextInputOptionalSourceRaw from './text-input-optional.story?raw';
 import TextInputPasswordSourceRaw from './text-input-password.story?raw';
@@ -61,4 +65,6 @@ export const TextInputPasswordSource = removeLicenseHeader(TextInputPasswordSour
 export const TextInputSizesSource = removeLicenseHeader(TextInputSizesSourceRaw);
 export const TextInputLoadingSource = removeLicenseHeader(TextInputLoadingSourceRaw);
 export const TextInputFullSource = removeLicenseHeader(TextInputFullSourceRaw);
+export const TextInputClearableSource = removeLicenseHeader(TextInputClearableSourceRaw);
+export const TextInputLoadingSpinnerSource = removeLicenseHeader(TextInputLoadingSpinnerSourceRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/text-input/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/text-input/stories/index.ts"],"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\nexport { default as TextInputDefault } from './text-input-default.story';\nexport { default as TextInputRequired } from './text-input-required.story';\nexport { default as TextInputOptional } from './text-input-optional.story';\nexport { default as TextInputDisabled } from './text-input-disabled.story';\nexport { default as TextInputReadonly } from './text-input-readonly.story';\nexport { default as TextInputError } from './text-input-error.story';\nexport { default as TextInputInformationIcon } from './text-input-information-icon.story';\nexport { default as TextInputEmail } from './text-input-email.story';\nexport { default as TextInputNumber } from './text-input-number.story';\nexport { default as TextInputWithIcons } from './text-input-with-icons.story';\nexport { default as TextInputPassword } from './text-input-password.story';\nexport { default as TextInputSizes } from './text-input-sizes.story';\nexport { default as TextInputLoading } from './text-input-loading.story';\nexport { default as TextInputFull } from './text-input-full.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport TextInputDefaultSourceRaw from './text-input-default.story?raw';\nimport TextInputDisabledSourceRaw from './text-input-disabled.story?raw';\nimport TextInputEmailSourceRaw from './text-input-email.story?raw';\nimport TextInputErrorSourceRaw from './text-input-error.story?raw';\nimport TextInputFullSourceRaw from './text-input-full.story?raw';\nimport TextInputInformationIconSourceRaw from './text-input-information-icon.story?raw';\nimport TextInputLoadingSourceRaw from './text-input-loading.story?raw';\nimport TextInputNumberSourceRaw from './text-input-number.story?raw';\nimport TextInputOptionalSourceRaw from './text-input-optional.story?raw';\nimport TextInputPasswordSourceRaw from './text-input-password.story?raw';\nimport TextInputReadonlySourceRaw from './text-input-readonly.story?raw';\nimport TextInputRequiredSourceRaw from './text-input-required.story?raw';\nimport TextInputSizesSourceRaw from './text-input-sizes.story?raw';\nimport TextInputWithIconsSourceRaw from './text-input-with-icons.story?raw';\n\nexport const TextInputDefaultSource = removeLicenseHeader(\n  TextInputDefaultSourceRaw,\n);\nexport const TextInputRequiredSource = removeLicenseHeader(\n  TextInputRequiredSourceRaw,\n);\nexport const TextInputOptionalSource = removeLicenseHeader(\n  TextInputOptionalSourceRaw,\n);\nexport const TextInputDisabledSource = removeLicenseHeader(\n  TextInputDisabledSourceRaw,\n);\nexport const TextInputReadonlySource = removeLicenseHeader(\n  TextInputReadonlySourceRaw,\n);\nexport const TextInputErrorSource = removeLicenseHeader(\n  TextInputErrorSourceRaw,\n);\nexport const TextInputInformationIconSource = removeLicenseHeader(\n  TextInputInformationIconSourceRaw,\n);\nexport const TextInputEmailSource = removeLicenseHeader(\n  TextInputEmailSourceRaw,\n);\nexport const TextInputNumberSource = removeLicenseHeader(\n  TextInputNumberSourceRaw,\n);\nexport const TextInputWithIconsSource = removeLicenseHeader(\n  TextInputWithIconsSourceRaw,\n);\nexport const TextInputPasswordSource = removeLicenseHeader(\n  TextInputPasswordSourceRaw,\n);\nexport const TextInputSizesSource = removeLicenseHeader(\n  TextInputSizesSourceRaw,\n);\nexport const TextInputLoadingSource = removeLicenseHeader(\n  TextInputLoadingSourceRaw,\n);\nexport const TextInputFullSource = removeLicenseHeader(TextInputFullSourceRaw);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/text-input/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAExF,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,2BAA2B,MAAM,kCAAkC,CAAC;AAC3E,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AACvE,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AACjE,OAAO,iCAAiC,MAAM,yCAAyC,CAAC;AACxF,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AACvE,OAAO,gCAAgC,MAAM,wCAAwC,CAAC;AACtF,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AACrE,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,2BAA2B,MAAM,mCAAmC,CAAC;AAE5E,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACvD,yBAAyB,CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,8BAA8B,GAAG,mBAAmB,CAC/D,iCAAiC,CAClC,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACvD,yBAAyB,CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,6BAA6B,GAAG,mBAAmB,CAC9D,gCAAgC,CACjC,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\nexport { default as TextInputDefault } from './text-input-default.story';\nexport { default as TextInputRequired } from './text-input-required.story';\nexport { default as TextInputOptional } from './text-input-optional.story';\nexport { default as TextInputDisabled } from './text-input-disabled.story';\nexport { default as TextInputReadonly } from './text-input-readonly.story';\nexport { default as TextInputError } from './text-input-error.story';\nexport { default as TextInputInformationIcon } from './text-input-information-icon.story';\nexport { default as TextInputEmail } from './text-input-email.story';\nexport { default as TextInputNumber } from './text-input-number.story';\nexport { default as TextInputWithIcons } from './text-input-with-icons.story';\nexport { default as TextInputPassword } from './text-input-password.story';\nexport { default as TextInputSizes } from './text-input-sizes.story';\nexport { default as TextInputLoading } from './text-input-loading.story';\nexport { default as TextInputFull } from './text-input-full.story';\nexport { default as TextInputClearable } from './text-input-clearable.story';\nexport { default as TextInputLoadingSpinner } from './text-input-loading-spinner.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport TextInputClearableSourceRaw from './text-input-clearable.story?raw';\nimport TextInputDefaultSourceRaw from './text-input-default.story?raw';\nimport TextInputDisabledSourceRaw from './text-input-disabled.story?raw';\nimport TextInputEmailSourceRaw from './text-input-email.story?raw';\nimport TextInputErrorSourceRaw from './text-input-error.story?raw';\nimport TextInputFullSourceRaw from './text-input-full.story?raw';\nimport TextInputInformationIconSourceRaw from './text-input-information-icon.story?raw';\nimport TextInputLoadingSourceRaw from './text-input-loading.story?raw';\nimport TextInputLoadingSpinnerSourceRaw from './text-input-loading-spinner.story?raw';\nimport TextInputNumberSourceRaw from './text-input-number.story?raw';\nimport TextInputOptionalSourceRaw from './text-input-optional.story?raw';\nimport TextInputPasswordSourceRaw from './text-input-password.story?raw';\nimport TextInputReadonlySourceRaw from './text-input-readonly.story?raw';\nimport TextInputRequiredSourceRaw from './text-input-required.story?raw';\nimport TextInputSizesSourceRaw from './text-input-sizes.story?raw';\nimport TextInputWithIconsSourceRaw from './text-input-with-icons.story?raw';\n\nexport const TextInputDefaultSource = removeLicenseHeader(\n  TextInputDefaultSourceRaw,\n);\nexport const TextInputRequiredSource = removeLicenseHeader(\n  TextInputRequiredSourceRaw,\n);\nexport const TextInputOptionalSource = removeLicenseHeader(\n  TextInputOptionalSourceRaw,\n);\nexport const TextInputDisabledSource = removeLicenseHeader(\n  TextInputDisabledSourceRaw,\n);\nexport const TextInputReadonlySource = removeLicenseHeader(\n  TextInputReadonlySourceRaw,\n);\nexport const TextInputErrorSource = removeLicenseHeader(\n  TextInputErrorSourceRaw,\n);\nexport const TextInputInformationIconSource = removeLicenseHeader(\n  TextInputInformationIconSourceRaw,\n);\nexport const TextInputEmailSource = removeLicenseHeader(\n  TextInputEmailSourceRaw,\n);\nexport const TextInputNumberSource = removeLicenseHeader(\n  TextInputNumberSourceRaw,\n);\nexport const TextInputWithIconsSource = removeLicenseHeader(\n  TextInputWithIconsSourceRaw,\n);\nexport const TextInputPasswordSource = removeLicenseHeader(\n  TextInputPasswordSourceRaw,\n);\nexport const TextInputSizesSource = removeLicenseHeader(\n  TextInputSizesSourceRaw,\n);\nexport const TextInputLoadingSource = removeLicenseHeader(\n  TextInputLoadingSourceRaw,\n);\nexport const TextInputFullSource = removeLicenseHeader(TextInputFullSourceRaw);\nexport const TextInputClearableSource = removeLicenseHeader(\n  TextInputClearableSourceRaw,\n);\nexport const TextInputLoadingSpinnerSource = removeLicenseHeader(\n  TextInputLoadingSpinnerSourceRaw,\n);\n"]}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@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" }));
+};
+export default Component;
+//# sourceMappingURL=text-input-clearable.story.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@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" })] }));
+};
+export default Component;
+//# sourceMappingURL=text-input-loading-spinner.story.js.map

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

@@ -0,0 +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"]}

package/lib/esm/text-input/stories/text-input-with-icons.story.js

@@ -20,14 +20,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { CleanIconButton, TextInput } from '@neo4j-ndl/react';
-import { MagnifyingGlassIconOutline, XMarkIconOutline, } from '@neo4j-ndl/react/icons';
+import { TextInput } from '@neo4j-ndl/react';
+import { DatabasePlugIcon, DatabasePlusIcon } from '@neo4j-ndl/react/icons';
 import { useState } from 'react';
 const Component = () => {
     const [searchValue, setSearchValue] = useState('');
-    return (_jsx(TextInput, { label: "Search", leadingElement: _jsx(MagnifyingGlassIconOutline, {}), trailingElement: _jsx(CleanIconButton, { onClick: () => setSearchValue(''), description: "clear search", children: _jsx(XMarkIconOutline, {}) }), placeholder: "Search...", value: searchValue, onChange: (e) => setSearchValue(e.target.value), htmlAttributes: {
-            type: 'text',
-        } }));
+    return (_jsx(TextInput, { label: "With icons", leadingElement: _jsx(DatabasePlugIcon, {}), trailingElement: _jsx(DatabasePlusIcon, {}), value: searchValue, onChange: (e) => setSearchValue(e.target.value) }));
 };
 export default Component;
 //# sourceMappingURL=text-input-with-icons.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-with-icons.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-with-icons.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,QAAQ,EACd,cAAc,EAAE,KAAC,0BAA0B,KAAG,EAC9C,eAAe,EACb,KAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EACjC,WAAW,EAAC,cAAc,YAE1B,KAAC,gBAAgB,KAAG,GACJ,EAEpB,WAAW,EAAC,WAAW,EACvB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,cAAc,EAAE;YACd,IAAI,EAAE,MAAM;SACb,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 {\n  MagnifyingGlassIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n\n  return (\n    <TextInput\n      label=\"Search\"\n      leadingElement={<MagnifyingGlassIconOutline />}\n      trailingElement={\n        <CleanIconButton\n          onClick={() => setSearchValue('')}\n          description=\"clear search\"\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      }\n      placeholder=\"Search...\"\n      value={searchValue}\n      onChange={(e) => setSearchValue(e.target.value)}\n      htmlAttributes={{\n        type: 'text',\n      }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-input-with-icons.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-with-icons.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,YAAY,EAClB,cAAc,EAAE,KAAC,gBAAgB,KAAG,EACpC,eAAe,EAAE,KAAC,gBAAgB,KAAG,EACrC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC/C,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';\nimport { DatabasePlugIcon, DatabasePlusIcon } from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n\n  return (\n    <TextInput\n      label=\"With icons\"\n      leadingElement={<DatabasePlugIcon />}\n      trailingElement={<DatabasePlusIcon />}\n      value={searchValue}\n      onChange={(e) => setSearchValue(e.target.value)}\n    />\n  );\n};\n\nexport default Component;\n"]}