@neo4j-ndl/react 4.3.4 → 4.3.6

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

@@ -21,203 +21,229 @@
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Full = exports.Loading = exports.Sizes = exports.Password = exports.WithIcons = exports.Number = exports.Email = exports.InformationIcon = exports.Error = exports.Readonly = exports.Disabled = exports.Optional = exports.Required = exports.Default = void 0;
+exports.Loading = exports.Clearable = exports.Full = exports.SkeletonLoading = exports.Sizes = exports.Password = exports.WithIcons = exports.Number = exports.Email = exports.InformationIcon = exports.Error = exports.Readonly = exports.Disabled = exports.Optional = exports.Required = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../index");
 const _1 = require(".");
 const componentMeta = {
-    title: 'Components/TextInput',
-    id: 'components-text-input',
     component: index_1.TextInput,
-    tags: ['docsPage'],
-    parameters: {
-        controls: { disable: true },
-    },
     decorators: [
         (Story) => ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(Story, {}) })),
     ],
+    id: 'components-text-input',
+    parameters: {
+        controls: { disable: true },
+    },
+    tags: ['docsPage'],
+    title: 'Components/TextInput',
 };
 exports.default = componentMeta;
 exports.Default = {
     args: {},
-    render: _1.TextInputDefault,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputDefaultSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputDefaultSource,
             },
         },
     },
+    render: _1.TextInputDefault,
 };
 exports.Required = {
     args: {},
-    render: _1.TextInputRequired,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputRequiredSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputRequiredSource,
             },
         },
     },
+    render: _1.TextInputRequired,
 };
 exports.Optional = {
     args: {},
-    render: _1.TextInputOptional,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputOptionalSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputOptionalSource,
             },
         },
     },
+    render: _1.TextInputOptional,
 };
 exports.Disabled = {
     args: {},
-    render: _1.TextInputDisabled,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputDisabledSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputDisabledSource,
             },
         },
     },
+    render: _1.TextInputDisabled,
 };
 exports.Readonly = {
     args: {},
-    render: _1.TextInputReadonly,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputReadonlySource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputReadonlySource,
             },
         },
     },
+    render: _1.TextInputReadonly,
 };
 exports.Error = {
     args: {},
-    render: _1.TextInputError,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputErrorSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputErrorSource,
             },
         },
     },
+    render: _1.TextInputError,
 };
 exports.InformationIcon = {
     args: {},
-    render: _1.TextInputInformationIcon,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputInformationIconSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputInformationIconSource,
             },
         },
     },
+    render: _1.TextInputInformationIcon,
 };
 exports.Email = {
     args: {},
-    render: _1.TextInputEmail,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputEmailSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputEmailSource,
             },
         },
     },
+    render: _1.TextInputEmail,
 };
 exports.Number = {
     args: {},
-    render: _1.TextInputNumber,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputNumberSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputNumberSource,
             },
         },
     },
+    render: _1.TextInputNumber,
 };
 exports.WithIcons = {
     args: {},
-    render: _1.TextInputWithIcons,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputWithIconsSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputWithIconsSource,
             },
         },
     },
+    render: _1.TextInputWithIcons,
 };
 exports.Password = {
     args: {},
-    render: _1.TextInputPassword,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputPasswordSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputPasswordSource,
             },
         },
     },
+    render: _1.TextInputPassword,
 };
 exports.Sizes = {
     args: {},
-    render: _1.TextInputSizes,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputSizesSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputSizesSource,
             },
         },
     },
+    render: _1.TextInputSizes,
 };
-exports.Loading = {
+exports.SkeletonLoading = {
     args: {},
-    render: _1.TextInputLoading,
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputLoadingSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputLoadingSource,
             },
         },
     },
+    render: _1.TextInputLoading,
 };
 exports.Full = {
     args: {},
+    parameters: {
+        docs: {
+            source: {
+                code: _1.TextInputFullSource,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
     render: _1.TextInputFull,
+};
+exports.Clearable = {
+    args: {},
     parameters: {
         docs: {
             source: {
+                code: _1.TextInputClearableSource,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: _1.TextInputClearable,
+};
+exports.Loading = {
+    args: {},
+    parameters: {
+        docs: {
+            source: {
+                code: _1.TextInputLoadingSpinnerSource,
                 language: 'tsx',
                 type: 'code',
-                code: _1.TextInputFullSource,
             },
         },
     },
+    render: _1.TextInputLoadingSpinner,
 };
 //# sourceMappingURL=text-input.stories.js.map

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":"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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  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/cjs/text-link/TextLink.js

@@ -39,15 +39,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const icons_1 = require("../icons");
 const TextLink = (_a) => {
-    var { children, href, type = 'internal', as, className, target, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "href", "type", "as", "className", "target", "style", "htmlAttributes", "ref"]);
-    const propsTarget = target || type === 'external' ? '_blank' : '';
-    const Component = as || 'a';
+    var { children, href, type = 'internal', as, className, target = type === 'external' ? '_blank' : '', style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "href", "type", "as", "className", "target", "style", "htmlAttributes", "ref"]);
+    const Component = as !== null && as !== void 0 ? as : 'a';
     const classes = (0, classnames_1.default)('ndl-text-link', className, {
         'ndl-external-link': type === 'external',
         'ndl-internal-icon': type === 'internal-icon',
         'ndl-internal-underline': type === 'internal-underline',
     });
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, href: href, ref: ref, style: style }, (propsTarget && { target: propsTarget }), restProps, htmlAttributes, { children: [children, type === 'external' && ((0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightIconOutline, { className: "ndl-external-link-icon" })), type === 'internal-icon' && ((0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, { className: "ndl-external-link-icon" }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, href: href, ref: ref, style: style, target: target }, restProps, htmlAttributes, { children: [children, type === 'external' && ((0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightIconOutline, { className: "ndl-external-link-icon" })), type === 'internal-icon' && ((0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, { className: "ndl-external-link-icon" }))] })));
 };
 exports.TextLink = TextLink;
 //# sourceMappingURL=TextLink.js.map

package/lib/cjs/text-link/TextLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.js","sourceRoot":"","sources":["../../../src/text-link/TextLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAIpC,oCAA4E;AAgCrE,MAAM,QAAQ,GAAG,CAAoC,EAWjB,EAAE,EAAE;QAXa,EAC1D,QAAQ,EACR,IAAI,EACJ,IAAI,GAAG,UAAU,EACjB,EAAE,EACF,SAAS,EACT,MAAM,EACN,KAAK,EACL,cAAc,EACd,GAAG,OAEsC,EADtC,SAAS,cAV8C,2FAW3D,CADa;IAEZ,MAAM,WAAW,GAAG,MAAM,IAAI,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,MAAM,SAAS,GAAsB,EAAE,IAAI,GAAG,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,SAAS,EAAE;QACrD,mBAAmB,EAAE,IAAI,KAAK,UAAU;QACxC,mBAAmB,EAAE,IAAI,KAAK,eAAe;QAC7C,wBAAwB,EAAE,IAAI,KAAK,oBAAoB;KACxD,CAAC,CAAC;IAEH,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACR,CAAC,WAAW,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EACxC,SAAS,EACT,cAAc,eAEjB,QAAQ,EACR,IAAI,KAAK,UAAU,IAAI,CACtB,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D,EACA,IAAI,KAAK,eAAe,IAAI,CAC3B,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D,KACS,CACb,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,QAAQ,YAyCnB","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 PolymorphicCommonProps } from '../_common/types';\nimport { ArrowUpRightIconOutline, ChevronRightIconOutline } from '../icons';\n\ntype TextLinkType =\n  | 'internal'\n  | 'internal-underline'\n  | 'internal-icon'\n  | 'external';\n\ntype TextLinkProps = {\n  /** The content displayed inside the link */\n  children: React.ReactNode;\n\n  /** The URL the link points to */\n  href?: string;\n\n  /**\n   * The type of the text link\n   * - 'internal': a link to another page within the application\n   * - 'internal-underline': a link to another page within the application with an underline and support for text color\n   * - 'internal-icon': a link to another page within the application with an icon\n   * - 'external': a link to an external website\n   * @default 'internal'\n   */\n  type?: TextLinkType;\n\n  /** Specifies where to open the linked document. If omitted and `type` is `\"external\"` it defaults to `\"_blank\"`. */\n  target?: string;\n\n  /** Additional class name */\n  className?: string;\n};\n\nexport const TextLink = <T extends React.ElementType = 'a'>({\n  children,\n  href,\n  type = 'internal',\n  as,\n  className,\n  target,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TextLinkProps>) => {\n  const propsTarget = target || type === 'external' ? '_blank' : '';\n\n  const Component: React.ElementType = as || 'a';\n\n  const classes = classNames('ndl-text-link', className, {\n    'ndl-external-link': type === 'external',\n    'ndl-internal-icon': type === 'internal-icon',\n    'ndl-internal-underline': type === 'internal-underline',\n  });\n\n  return (\n    <Component\n      className={classes}\n      href={href}\n      ref={ref}\n      style={style}\n      {...(propsTarget && { target: propsTarget })}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n      {type === 'external' && (\n        <ArrowUpRightIconOutline className=\"ndl-external-link-icon\" />\n      )}\n      {type === 'internal-icon' && (\n        <ChevronRightIconOutline className=\"ndl-external-link-icon\" />\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"TextLink.js","sourceRoot":"","sources":["../../../src/text-link/TextLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAIpC,oCAA4E;AAgCrE,MAAM,QAAQ,GAAG,CAAoC,EAWjB,EAAE,EAAE;QAXa,EAC1D,QAAQ,EACR,IAAI,EACJ,IAAI,GAAG,UAAU,EACjB,EAAE,EACF,SAAS,EACT,MAAM,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAC5C,KAAK,EACL,cAAc,EACd,GAAG,OAEsC,EADtC,SAAS,cAV8C,2FAW3D,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,GAAG,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,SAAS,EAAE;QACrD,mBAAmB,EAAE,IAAI,KAAK,UAAU;QACxC,mBAAmB,EAAE,IAAI,KAAK,eAAe;QAC7C,wBAAwB,EAAE,IAAI,KAAK,oBAAoB;KACxD,CAAC,CAAC;IAEH,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,IACV,SAAS,EACT,cAAc,eAEjB,QAAQ,EACR,IAAI,KAAK,UAAU,IAAI,CACtB,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D,EACA,IAAI,KAAK,eAAe,IAAI,CAC3B,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D,KACS,CACb,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,QAAQ,YAuCnB","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 PolymorphicCommonProps } from '../_common/types';\nimport { ArrowUpRightIconOutline, ChevronRightIconOutline } from '../icons';\n\ntype TextLinkType =\n  | 'internal'\n  | 'internal-underline'\n  | 'internal-icon'\n  | 'external';\n\ntype TextLinkProps = {\n  /** The content displayed inside the link */\n  children: React.ReactNode;\n\n  /** The URL the link points to */\n  href?: string;\n\n  /**\n   * The type of the text link\n   * - 'internal': a link to another page within the application\n   * - 'internal-underline': a link to another page within the application with an underline and support for text color\n   * - 'internal-icon': a link to another page within the application with an icon\n   * - 'external': a link to an external website\n   * @default 'internal'\n   */\n  type?: TextLinkType;\n\n  /** Specifies where to open the linked document. If omitted and `type` is `\"external\"` it defaults to `\"_blank\"`. */\n  target?: HTMLAnchorElement['target'];\n\n  /** Additional class name */\n  className?: string;\n};\n\nexport const TextLink = <T extends React.ElementType = 'a'>({\n  children,\n  href,\n  type = 'internal',\n  as,\n  className,\n  target = type === 'external' ? '_blank' : '',\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TextLinkProps>) => {\n  const Component: React.ElementType = as ?? 'a';\n\n  const classes = classNames('ndl-text-link', className, {\n    'ndl-external-link': type === 'external',\n    'ndl-internal-icon': type === 'internal-icon',\n    'ndl-internal-underline': type === 'internal-underline',\n  });\n\n  return (\n    <Component\n      className={classes}\n      href={href}\n      ref={ref}\n      style={style}\n      target={target}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n      {type === 'external' && (\n        <ArrowUpRightIconOutline className=\"ndl-external-link-icon\" />\n      )}\n      {type === 'internal-icon' && (\n        <ChevronRightIconOutline className=\"ndl-external-link-icon\" />\n      )}\n    </Component>\n  );\n};\n"]}

package/lib/esm/_common/utils.js

@@ -186,4 +186,11 @@ export const getRadius = (spacing, property) => {
         ? tokens.borderRadius[spacing || RadiusDefaults[property]]
         : undefined;
 };
+export const parseRgbString = (rgbString) => {
+    const match = rgbString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (!match) {
+        throw new Error(`Unable to parse RGB color: ${rgbString}`);
+    }
+    return [Number(match[1]), Number(match[2]), Number(match[3])];
+};
 //# sourceMappingURL=utils.js.map

package/lib/esm/_common/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/_common/utils.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 */\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n  type MouseEvent,\n  type TouchEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport type { Radius, Spacing } from './types';\n\nexport const removeNewlines = (input: string) =>\n  input.replace(/(\\r\\n|\\n|\\r)/gm, '');\n\n/** Remove extra spaces from sting */\nexport const removeSpaces = (input: string) =>\n  input.replace(/\\s+/g, ' ').trim();\n\nexport const needleWarningMessage = (message: string) =>\n  console.warn(`[🪡 Needle]:  ${message}`);\n\nconst getScrollbarSize = (doc: Document): number => {\n  // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes\n  const documentWidth = doc.documentElement.clientWidth;\n  const scrollBarSize = Math.abs(window.innerWidth - documentWidth);\n  // Firefox with 110% and 120% zoom level return 1px even if there is no scrollbar\n  return scrollBarSize > 1 ? scrollBarSize : 0;\n};\n\nconst getPaddingRight = (element: Element): number =>\n  parseInt(window.getComputedStyle(element).paddingRight, 10) || 0;\n\n/**\n * Toggles scroll on the provided document.\n * Useful for disabling scroll when a popup is open (ie ContextMenu/Modal)\n */\nexport const useDocumentScrollToggle = () => {\n  const bodyPadding = useRef<number>(0);\n\n  return useCallback((disable: boolean, doc: Document = document) => {\n    if (disable) {\n      const existingPaddingRight = getPaddingRight(doc.body);\n      bodyPadding.current = existingPaddingRight;\n      const newPaddingRight = existingPaddingRight + getScrollbarSize(doc);\n      doc.body.style.overflow = 'hidden';\n      doc.body.style.paddingRight = `${newPaddingRight}px`;\n    } else {\n      doc.body.style.overflow = '';\n      doc.body.style.paddingRight = `${bodyPadding.current}px`;\n    }\n  }, []);\n};\n\n/**\n * Detect if there is a click event outside\n * of the provided element\n * Source:\n * https://hashnode.com/post/useonclickoutside-custom-hook-to-detect-the-mouse-click-on-outside-typescript-ckrejmy3h0k5r91s18iu42t28\n */\nexport const useOnClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T>,\n  handler: (event: MouseEvent | TouchEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const el = ref?.current;\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return;\n      }\n\n      handler(event); // Call the handler only if the click is outside of the element passed.\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    document.addEventListener('mousedown', listener as any);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    document.addEventListener('touchstart', listener as any);\n\n    return () => {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      document.removeEventListener('mousedown', listener as any);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      document.removeEventListener('touchstart', listener as any);\n    };\n  }, [ref, handler]); // Reload only if ref or handler changes\n};\n\n/**\n *  X - char long pseudo-random string\n */\nexport const randomId = (length: number) =>\n  Math.random()\n    .toString(36)\n    .slice(2, length + 2);\n\n// Utility / Type-Guard if the object is a ref\nexport function isRefObject<T>(\n  obj: React.RefObject<T> | T,\n): obj is React.RefObject<T> {\n  return obj && typeof obj === 'object' && 'current' in obj;\n}\n\n/**\n * Equivalent to prevUntil/nextUntil in jQuery\n * https://api.jquery.com/prevUntil/\n * https://api.jquery.com/nextUntil/\n *\n * Additional functionality is added to circle back\n * to the beginning of a list of siblings if it reaches the end\n * or vice versa.\n */\nexport function findUntil(\n  direction: 'next' | 'prev',\n  el: Element | ChildNode,\n  matchSelector: string,\n): Element | null {\n  const element: ChildNode = el;\n\n  if (!element.parentElement) {\n    return null;\n  }\n\n  const allSiblings = [...element.parentElement.children].filter((sibling) =>\n    sibling.matches(matchSelector),\n  );\n\n  const index = allSiblings.findIndex((sibling) =>\n    sibling.isEqualNode(element),\n  );\n\n  if (index === -1) {\n    return null;\n  }\n\n  const newIndex =\n    direction === 'next'\n      ? (index + 1) % allSiblings.length\n      : (index - 1 + allSiblings.length) % allSiblings.length;\n\n  return allSiblings[newIndex];\n}\n\n/**\n * Find all html elements that are focusable given a parent element\n * @param parentElement the parent element\n * @returns an array of HTML elements\n */\nexport const findFocusableChildren = (parentElement: HTMLElement) => {\n  const focusableElements =\n    'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex=\"-1\"])';\n\n  const focusable = Array.from(\n    parentElement.querySelectorAll(focusableElements),\n  ).filter((element) => {\n    if (element instanceof HTMLElement) {\n      return true;\n    }\n\n    return false;\n  });\n  return focusable;\n};\n\n/**\n * Using the element that currently has focus, finds the previous sibling of the currently focused element that is focusable\n * @param parentRef the parent element\n * @returns the previous focusable element\n */\nexport const findFocusableSibling = (\n  parentRef: React.RefObject<HTMLElement | null>,\n  direction: 'prev' | 'next',\n): HTMLElement | undefined => {\n  const { current } = parentRef;\n  const { activeElement } = document;\n\n  if (current === null || activeElement === null) {\n    return undefined;\n  }\n\n  const focusable = findFocusableChildren(current);\n  const index = focusable.indexOf(activeElement);\n  if (index > -1) {\n    const siblingElement = focusable[index + (direction === 'next' ? 1 : -1)];\n    if (\n      siblingElement === undefined ||\n      !(siblingElement instanceof HTMLElement)\n    ) {\n      return undefined;\n    }\n    return siblingElement;\n  }\n  return undefined;\n};\n\n/**\n * Convert hex color to rgb format\n *\n * @param hex color in hex code format\n * @returns color in rgb format rgb(_, _, _)\n */\nexport const convertHexToRGB = (hex: string) => {\n  hex = hex.replace(/^#/, '');\n\n  const red = parseInt(hex.substring(0, 2), 16);\n  const green = parseInt(hex.substring(2, 4), 16);\n  const blue = parseInt(hex.substring(4, 6), 16);\n\n  return `rgb(${red}, ${green}, ${blue})`;\n};\n\nexport const SpacingDefaults = {\n  gap: '4',\n  padding: '4',\n  paddingBlockEnd: undefined,\n  paddingBlockStart: undefined,\n  paddingInline: undefined,\n  paddingInlineEnd: undefined,\n  paddingInlineStart: undefined,\n} as const;\n\nexport const getSpacing = (\n  spacing: Spacing | undefined,\n  property: keyof typeof SpacingDefaults,\n) => {\n  return spacing\n    ? tokens.space[spacing || SpacingDefaults[property]]\n    : undefined;\n};\n\nexport const RadiusDefaults = {\n  borderRadius: undefined,\n};\n\nexport const getRadius = (\n  spacing: Radius | undefined,\n  property: keyof typeof RadiusDefaults,\n) => {\n  return spacing\n    ? tokens.borderRadius[spacing || RadiusDefaults[property]]\n    : undefined;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/_common/utils.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 */\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n  type MouseEvent,\n  type TouchEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport type { Radius, Spacing } from './types';\n\nexport const removeNewlines = (input: string) =>\n  input.replace(/(\\r\\n|\\n|\\r)/gm, '');\n\n/** Remove extra spaces from sting */\nexport const removeSpaces = (input: string) =>\n  input.replace(/\\s+/g, ' ').trim();\n\nexport const needleWarningMessage = (message: string) =>\n  console.warn(`[🪡 Needle]:  ${message}`);\n\nconst getScrollbarSize = (doc: Document): number => {\n  // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes\n  const documentWidth = doc.documentElement.clientWidth;\n  const scrollBarSize = Math.abs(window.innerWidth - documentWidth);\n  // Firefox with 110% and 120% zoom level return 1px even if there is no scrollbar\n  return scrollBarSize > 1 ? scrollBarSize : 0;\n};\n\nconst getPaddingRight = (element: Element): number =>\n  parseInt(window.getComputedStyle(element).paddingRight, 10) || 0;\n\n/**\n * Toggles scroll on the provided document.\n * Useful for disabling scroll when a popup is open (ie ContextMenu/Modal)\n */\nexport const useDocumentScrollToggle = () => {\n  const bodyPadding = useRef<number>(0);\n\n  return useCallback((disable: boolean, doc: Document = document) => {\n    if (disable) {\n      const existingPaddingRight = getPaddingRight(doc.body);\n      bodyPadding.current = existingPaddingRight;\n      const newPaddingRight = existingPaddingRight + getScrollbarSize(doc);\n      doc.body.style.overflow = 'hidden';\n      doc.body.style.paddingRight = `${newPaddingRight}px`;\n    } else {\n      doc.body.style.overflow = '';\n      doc.body.style.paddingRight = `${bodyPadding.current}px`;\n    }\n  }, []);\n};\n\n/**\n * Detect if there is a click event outside\n * of the provided element\n * Source:\n * https://hashnode.com/post/useonclickoutside-custom-hook-to-detect-the-mouse-click-on-outside-typescript-ckrejmy3h0k5r91s18iu42t28\n */\nexport const useOnClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T>,\n  handler: (event: MouseEvent | TouchEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const el = ref?.current;\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return;\n      }\n\n      handler(event); // Call the handler only if the click is outside of the element passed.\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    document.addEventListener('mousedown', listener as any);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    document.addEventListener('touchstart', listener as any);\n\n    return () => {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      document.removeEventListener('mousedown', listener as any);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      document.removeEventListener('touchstart', listener as any);\n    };\n  }, [ref, handler]); // Reload only if ref or handler changes\n};\n\n/**\n *  X - char long pseudo-random string\n */\nexport const randomId = (length: number) =>\n  Math.random()\n    .toString(36)\n    .slice(2, length + 2);\n\n// Utility / Type-Guard if the object is a ref\nexport function isRefObject<T>(\n  obj: React.RefObject<T> | T,\n): obj is React.RefObject<T> {\n  return obj && typeof obj === 'object' && 'current' in obj;\n}\n\n/**\n * Equivalent to prevUntil/nextUntil in jQuery\n * https://api.jquery.com/prevUntil/\n * https://api.jquery.com/nextUntil/\n *\n * Additional functionality is added to circle back\n * to the beginning of a list of siblings if it reaches the end\n * or vice versa.\n */\nexport function findUntil(\n  direction: 'next' | 'prev',\n  el: Element | ChildNode,\n  matchSelector: string,\n): Element | null {\n  const element: ChildNode = el;\n\n  if (!element.parentElement) {\n    return null;\n  }\n\n  const allSiblings = [...element.parentElement.children].filter((sibling) =>\n    sibling.matches(matchSelector),\n  );\n\n  const index = allSiblings.findIndex((sibling) =>\n    sibling.isEqualNode(element),\n  );\n\n  if (index === -1) {\n    return null;\n  }\n\n  const newIndex =\n    direction === 'next'\n      ? (index + 1) % allSiblings.length\n      : (index - 1 + allSiblings.length) % allSiblings.length;\n\n  return allSiblings[newIndex];\n}\n\n/**\n * Find all html elements that are focusable given a parent element\n * @param parentElement the parent element\n * @returns an array of HTML elements\n */\nexport const findFocusableChildren = (parentElement: HTMLElement) => {\n  const focusableElements =\n    'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex=\"-1\"])';\n\n  const focusable = Array.from(\n    parentElement.querySelectorAll(focusableElements),\n  ).filter((element) => {\n    if (element instanceof HTMLElement) {\n      return true;\n    }\n\n    return false;\n  });\n  return focusable;\n};\n\n/**\n * Using the element that currently has focus, finds the previous sibling of the currently focused element that is focusable\n * @param parentRef the parent element\n * @returns the previous focusable element\n */\nexport const findFocusableSibling = (\n  parentRef: React.RefObject<HTMLElement | null>,\n  direction: 'prev' | 'next',\n): HTMLElement | undefined => {\n  const { current } = parentRef;\n  const { activeElement } = document;\n\n  if (current === null || activeElement === null) {\n    return undefined;\n  }\n\n  const focusable = findFocusableChildren(current);\n  const index = focusable.indexOf(activeElement);\n  if (index > -1) {\n    const siblingElement = focusable[index + (direction === 'next' ? 1 : -1)];\n    if (\n      siblingElement === undefined ||\n      !(siblingElement instanceof HTMLElement)\n    ) {\n      return undefined;\n    }\n    return siblingElement;\n  }\n  return undefined;\n};\n\n/**\n * Convert hex color to rgb format\n *\n * @param hex color in hex code format\n * @returns color in rgb format rgb(_, _, _)\n */\nexport const convertHexToRGB = (hex: string) => {\n  hex = hex.replace(/^#/, '');\n\n  const red = parseInt(hex.substring(0, 2), 16);\n  const green = parseInt(hex.substring(2, 4), 16);\n  const blue = parseInt(hex.substring(4, 6), 16);\n\n  return `rgb(${red}, ${green}, ${blue})`;\n};\n\nexport const SpacingDefaults = {\n  gap: '4',\n  padding: '4',\n  paddingBlockEnd: undefined,\n  paddingBlockStart: undefined,\n  paddingInline: undefined,\n  paddingInlineEnd: undefined,\n  paddingInlineStart: undefined,\n} as const;\n\nexport const getSpacing = (\n  spacing: Spacing | undefined,\n  property: keyof typeof SpacingDefaults,\n) => {\n  return spacing\n    ? tokens.space[spacing || SpacingDefaults[property]]\n    : undefined;\n};\n\nexport const RadiusDefaults = {\n  borderRadius: undefined,\n};\n\nexport const getRadius = (\n  spacing: Radius | undefined,\n  property: keyof typeof RadiusDefaults,\n) => {\n  return spacing\n    ? tokens.borderRadius[spacing || RadiusDefaults[property]]\n    : undefined;\n};\n\nexport const parseRgbString = (rgbString: string): [number, number, number] => {\n  const match = rgbString.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n  if (!match) {\n    throw new Error(`Unable to parse RGB color: ${rgbString}`);\n  }\n  return [Number(match[1]), Number(match[2]), Number(match[3])];\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"]}