@neo4j-ndl/react 4.1.5 → 4.1.7

package/lib/cjs/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}: 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              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  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"]}

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

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -27,7 +38,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 const classnames_1 = __importDefault(require("classnames"));
 const icons_1 = require("../icons");
-const TextLink = ({ children, href, type = 'internal', as, className, target, style, htmlAttributes, ref, }) => {
+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';
     const classes = (0, classnames_1.default)('ndl-text-link', className, {
@@ -35,7 +47,7 @@ const TextLink = ({ children, href, type = 'internal', as, className, target, st
         '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 }), 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 }, (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" }))] })));
 };
 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,EAC1D,QAAQ,EACR,IAAI,EACJ,IAAI,GAAG,UAAU,EACjB,EAAE,EACF,SAAS,EACT,MAAM,EACN,KAAK,EACL,cAAc,EACd,GAAG,GACsC,EAAE,EAAE;IAC7C,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,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?: 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}: 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      {...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,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"]}

package/lib/cjs/text-overflow/TextOverflow.js

@@ -87,8 +87,9 @@ const TextOverflow = (_a) => {
             return characterTruncatedContent !== null;
         }
         const element = textElementRef.current;
-        if (element === null)
+        if (element === null) {
             return false;
+        }
         // Regular multiline truncation
         if (lines !== undefined && lines > 1) {
             return element.scrollHeight > element.clientHeight;

package/lib/cjs/text-overflow/TextOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextOverflow.js","sourceRoot":"","sources":["../../../src/text-overflow/TextOverflow.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport type {\n  PolymorphicCommonProps,\n  TooltipObjectProps,\n} from '../_common/types';\nimport { TextLink } from '../text-link';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { COLLAPSE_BUTTON_TEXT, ELLIPSIS_CHAR } from './constants';\nimport {\n  getTextContent,\n  truncateReactNodeByCharacters,\n} from './text-overflow-utils';\nimport { useTruncateWithButton } from './use-truncate-with-button';\n\ntype TextOverflowProps = {\n  /** The content to be truncated. Can be text, Typography components, or complex JSX. */\n  children: React.ReactNode;\n\n  /**\n   * Controls the expand/collapse UI.\n   * - string: show expand/collapse button with custom text (e.g., \"View more\")\n   * - undefined: content is not expandable, only truncated with ellipsis\n   * @default undefined\n   */\n  expandButton?: 'view-more' | 'ellipsis';\n\n  /**\n   * Maximum number of characters to display. Takes precedence over line-based truncation when set.\n   */\n  maxCharacters?: number;\n\n  /**\n   * Number of lines to show before truncation.\n   * Uses CSS line-clamp for non-expandable content.\n   * Uses DOM measurement for expandable content.\n   * **Note**: Ignored if `maxCharacters` is explicitly set to a custom value.\n   */\n  lines?: number;\n\n  /**\n   * Whether to show tooltip with full text on hover when content is truncated.\n   * @default true\n   */\n  shouldShowTooltip?: boolean;\n\n  /** Props to pass to tooltip component */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Callback function called when content is expanded or collapsed */\n  onExpandedToggle?: (isExpanded: boolean) => void;\n\n  /**\n   * The typography variant to use for the text.\n   * @default 'body-medium'\n   */\n  typographyVariant?: React.ComponentProps<typeof Typography>['variant'];\n};\n\nconst expandButtonTexts = {\n  ellipsis: ELLIPSIS_CHAR,\n  'view-more': 'View more',\n};\n\nexport const TextOverflow = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  htmlAttributes,\n  lines,\n  tooltipProps,\n  onExpandedToggle,\n  expandButton,\n  maxCharacters,\n  shouldShowTooltip = true,\n  typographyVariant = 'body-medium',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TextOverflowProps>) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const textElementRef = useRef<HTMLSpanElement>(null);\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  // Use truncate with button hook when expandButton is provided\n  const shouldUseTruncateWithButton = expandButton !== undefined;\n  const truncateWithButtonResult = useTruncateWithButton({\n    button: expandButtonTexts[expandButton!] || 'View more',\n    buttonType: expandButton,\n    closeTooltip: () => setIsTooltipOpen(false),\n    content: children,\n    // Disable expensive calculations when no expand button is needed\n    isDisabled: !shouldUseTruncateWithButton,\n    lineClamp: lines ?? 1,\n    maxCharacters,\n    onExpandedToggle,\n  });\n\n  // Handle character-based truncation when no expand button is used\n  const characterTruncatedContent = useMemo(() => {\n    if (maxCharacters !== undefined && expandButton === undefined) {\n      const result = truncateReactNodeByCharacters(children, maxCharacters);\n      return result.needsTruncation ? result.truncatedContent : null;\n    }\n    return null;\n  }, [maxCharacters, expandButton, children]);\n\n  // Memoize text content extraction to avoid repeated traversals\n  const textContent = useMemo(() => getTextContent(children), [children]);\n\n  // Memoize tooltip truncation detection logic\n  const checkTruncationForTooltip = useCallback(() => {\n    if (shouldUseTruncateWithButton) {\n      return truncateWithButtonResult.isTruncated;\n    }\n\n    // Character based truncation\n    if (maxCharacters !== undefined) {\n      return characterTruncatedContent !== null;\n    }\n\n    const element = textElementRef.current;\n    if (element === null) return false;\n\n    // Regular multiline truncation\n    if (lines !== undefined && lines > 1) {\n      return element.scrollHeight > element.clientHeight;\n    }\n\n    // Regular single line truncation\n    return element.scrollWidth > element.clientWidth;\n  }, [\n    shouldUseTruncateWithButton,\n    truncateWithButtonResult.isTruncated,\n    maxCharacters,\n    characterTruncatedContent,\n    lines,\n  ]);\n\n  const renderContent = () => {\n    const isMultiline = typeof lines === 'number' && lines > 1;\n\n    const textStyle = {\n      '--ndl-line-clamp': isMultiline ? lines.toString() : undefined,\n    } as React.CSSProperties;\n\n    const textClasses = classNames({\n      'ndl-text-overflow-multi-line': isMultiline,\n      'ndl-text-overflow-single-line':\n        !isMultiline && maxCharacters === undefined,\n    });\n\n    if (shouldUseTruncateWithButton) {\n      return (\n        <div ref={truncateWithButtonResult.containerRef}>\n          <div\n            className={truncateWithButtonResult.isExpanded ? '' : textClasses}\n            style={textStyle}\n          >\n            {truncateWithButtonResult.contentToRender}\n            {truncateWithButtonResult.isTruncated && (\n              <TextLink\n                as=\"button\"\n                className={classNames('ndl-text-overflow-toggle', {\n                  'ndl-text-overflow-toggle-margin-left':\n                    expandButton !== 'ellipsis' ||\n                    truncateWithButtonResult.isExpanded,\n                })}\n                htmlAttributes={{\n                  onClick: truncateWithButtonResult.toggleExpand,\n                }}\n              >\n                {truncateWithButtonResult.isExpanded\n                  ? COLLAPSE_BUTTON_TEXT\n                  : expandButtonTexts[expandButton!]}\n              </TextLink>\n            )}\n          </div>\n          <div\n            ref={truncateWithButtonResult.measureRef}\n            style={{\n              position: 'absolute',\n              top: '-9999px',\n              visibility: 'hidden',\n            }}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <span ref={textElementRef} className={textClasses} style={textStyle}>\n        {characterTruncatedContent ?? children}\n      </span>\n    );\n  };\n\n  const isTooltipDisabled =\n    !shouldShowTooltip ||\n    (expandButton !== undefined && truncateWithButtonResult.isExpanded);\n\n  return (\n    <Tooltip\n      {...tooltipProps?.root}\n      type=\"simple\"\n      isDisabled={isTooltipDisabled}\n      isOpen={isTooltipOpen}\n      onOpenChange={(open) => {\n        if (open) {\n          setIsTooltipOpen(checkTruncationForTooltip());\n        } else {\n          setIsTooltipOpen(false);\n        }\n      }}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Typography\n          as={as ?? 'div'}\n          ref={ref}\n          variant={typographyVariant}\n          className={classNames('ndl-text-overflow', className)}\n          htmlAttributes={{\n            ...htmlAttributes,\n          }}\n          {...restProps}\n          {...(!isTooltipDisabled &&\n            expandButton === undefined && {\n              tabIndex: 0,\n            })}\n        >\n          <div className=\"ndl-text-overflow-content\" ref={contentRef}>\n            {renderContent()}\n          </div>\n        </Typography>\n      </Tooltip.Trigger>\n      <Tooltip.Content\n        className={classNames(\n          'ndl-text-overflow-tooltip-content',\n          tooltipProps?.content?.className,\n        )}\n        {...tooltipProps?.content}\n      >\n        {textContent}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}
+{"version":3,"file":"TextOverflow.js","sourceRoot":"","sources":["../../../src/text-overflow/TextOverflow.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport type {\n  PolymorphicCommonProps,\n  TooltipObjectProps,\n} from '../_common/types';\nimport { TextLink } from '../text-link';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { COLLAPSE_BUTTON_TEXT, ELLIPSIS_CHAR } from './constants';\nimport {\n  getTextContent,\n  truncateReactNodeByCharacters,\n} from './text-overflow-utils';\nimport { useTruncateWithButton } from './use-truncate-with-button';\n\ntype TextOverflowProps = {\n  /** The content to be truncated. Can be text, Typography components, or complex JSX. */\n  children: React.ReactNode;\n\n  /**\n   * Controls the expand/collapse UI.\n   * - string: show expand/collapse button with custom text (e.g., \"View more\")\n   * - undefined: content is not expandable, only truncated with ellipsis\n   * @default undefined\n   */\n  expandButton?: 'view-more' | 'ellipsis';\n\n  /**\n   * Maximum number of characters to display. Takes precedence over line-based truncation when set.\n   */\n  maxCharacters?: number;\n\n  /**\n   * Number of lines to show before truncation.\n   * Uses CSS line-clamp for non-expandable content.\n   * Uses DOM measurement for expandable content.\n   * **Note**: Ignored if `maxCharacters` is explicitly set to a custom value.\n   */\n  lines?: number;\n\n  /**\n   * Whether to show tooltip with full text on hover when content is truncated.\n   * @default true\n   */\n  shouldShowTooltip?: boolean;\n\n  /** Props to pass to tooltip component */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Callback function called when content is expanded or collapsed */\n  onExpandedToggle?: (isExpanded: boolean) => void;\n\n  /**\n   * The typography variant to use for the text.\n   * @default 'body-medium'\n   */\n  typographyVariant?: React.ComponentProps<typeof Typography>['variant'];\n};\n\nconst expandButtonTexts = {\n  ellipsis: ELLIPSIS_CHAR,\n  'view-more': 'View more',\n};\n\nexport const TextOverflow = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  htmlAttributes,\n  lines,\n  tooltipProps,\n  onExpandedToggle,\n  expandButton,\n  maxCharacters,\n  shouldShowTooltip = true,\n  typographyVariant = 'body-medium',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TextOverflowProps>) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const textElementRef = useRef<HTMLSpanElement>(null);\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  // Use truncate with button hook when expandButton is provided\n  const shouldUseTruncateWithButton = expandButton !== undefined;\n  const truncateWithButtonResult = useTruncateWithButton({\n    button: expandButtonTexts[expandButton!] || 'View more',\n    buttonType: expandButton,\n    closeTooltip: () => setIsTooltipOpen(false),\n    content: children,\n    // Disable expensive calculations when no expand button is needed\n    isDisabled: !shouldUseTruncateWithButton,\n    lineClamp: lines ?? 1,\n    maxCharacters,\n    onExpandedToggle,\n  });\n\n  // Handle character-based truncation when no expand button is used\n  const characterTruncatedContent = useMemo(() => {\n    if (maxCharacters !== undefined && expandButton === undefined) {\n      const result = truncateReactNodeByCharacters(children, maxCharacters);\n      return result.needsTruncation ? result.truncatedContent : null;\n    }\n    return null;\n  }, [maxCharacters, expandButton, children]);\n\n  // Memoize text content extraction to avoid repeated traversals\n  const textContent = useMemo(() => getTextContent(children), [children]);\n\n  // Memoize tooltip truncation detection logic\n  const checkTruncationForTooltip = useCallback(() => {\n    if (shouldUseTruncateWithButton) {\n      return truncateWithButtonResult.isTruncated;\n    }\n\n    // Character based truncation\n    if (maxCharacters !== undefined) {\n      return characterTruncatedContent !== null;\n    }\n\n    const element = textElementRef.current;\n    if (element === null) {\n      return false;\n    }\n\n    // Regular multiline truncation\n    if (lines !== undefined && lines > 1) {\n      return element.scrollHeight > element.clientHeight;\n    }\n\n    // Regular single line truncation\n    return element.scrollWidth > element.clientWidth;\n  }, [\n    shouldUseTruncateWithButton,\n    truncateWithButtonResult.isTruncated,\n    maxCharacters,\n    characterTruncatedContent,\n    lines,\n  ]);\n\n  const renderContent = () => {\n    const isMultiline = typeof lines === 'number' && lines > 1;\n\n    const textStyle = {\n      '--ndl-line-clamp': isMultiline ? lines.toString() : undefined,\n    } as React.CSSProperties;\n\n    const textClasses = classNames({\n      'ndl-text-overflow-multi-line': isMultiline,\n      'ndl-text-overflow-single-line':\n        !isMultiline && maxCharacters === undefined,\n    });\n\n    if (shouldUseTruncateWithButton) {\n      return (\n        <div ref={truncateWithButtonResult.containerRef}>\n          <div\n            className={truncateWithButtonResult.isExpanded ? '' : textClasses}\n            style={textStyle}\n          >\n            {truncateWithButtonResult.contentToRender}\n            {truncateWithButtonResult.isTruncated && (\n              <TextLink\n                as=\"button\"\n                className={classNames('ndl-text-overflow-toggle', {\n                  'ndl-text-overflow-toggle-margin-left':\n                    expandButton !== 'ellipsis' ||\n                    truncateWithButtonResult.isExpanded,\n                })}\n                htmlAttributes={{\n                  onClick: truncateWithButtonResult.toggleExpand,\n                }}\n              >\n                {truncateWithButtonResult.isExpanded\n                  ? COLLAPSE_BUTTON_TEXT\n                  : expandButtonTexts[expandButton!]}\n              </TextLink>\n            )}\n          </div>\n          <div\n            ref={truncateWithButtonResult.measureRef}\n            style={{\n              position: 'absolute',\n              top: '-9999px',\n              visibility: 'hidden',\n            }}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <span ref={textElementRef} className={textClasses} style={textStyle}>\n        {characterTruncatedContent ?? children}\n      </span>\n    );\n  };\n\n  const isTooltipDisabled =\n    !shouldShowTooltip ||\n    (expandButton !== undefined && truncateWithButtonResult.isExpanded);\n\n  return (\n    <Tooltip\n      {...tooltipProps?.root}\n      type=\"simple\"\n      isDisabled={isTooltipDisabled}\n      isOpen={isTooltipOpen}\n      onOpenChange={(open) => {\n        if (open) {\n          setIsTooltipOpen(checkTruncationForTooltip());\n        } else {\n          setIsTooltipOpen(false);\n        }\n      }}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Typography\n          as={as ?? 'div'}\n          ref={ref}\n          variant={typographyVariant}\n          className={classNames('ndl-text-overflow', className)}\n          htmlAttributes={{\n            ...htmlAttributes,\n          }}\n          {...restProps}\n          {...(!isTooltipDisabled &&\n            expandButton === undefined && {\n              tabIndex: 0,\n            })}\n        >\n          <div className=\"ndl-text-overflow-content\" ref={contentRef}>\n            {renderContent()}\n          </div>\n        </Typography>\n      </Tooltip.Trigger>\n      <Tooltip.Content\n        className={classNames(\n          'ndl-text-overflow-tooltip-content',\n          tooltipProps?.content?.className,\n        )}\n        {...tooltipProps?.content}\n      >\n        {textContent}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}

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

@@ -23,7 +23,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextOverflow_1 = require("../TextOverflow");
-const _1 = require("./");
+const _1 = require(".");
 const componentMeta = {
     component: TextOverflow_1.TextOverflow,
     id: 'components-text-overflow',

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

@@ -1 +1 @@
-{"version":3,"file":"text-overflow.stories.js","sourceRoot":"","sources":["../../../../src/text-overflow/stories/text-overflow.stories.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,gCAAgC;AAChC;;;;;;;;;;;;;;;;;;;GAmBG;;AAIH,kDAA+C;AAC/C,yBAWY;AAEZ,MAAM,aAAa,GAA8B;IAC/C,SAAS,EAAE,2BAAY;IACvB,EAAE,EAAE,0BAA0B;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,yBAAyB;CACjC,CAAC;AAEF,kBAAe,aAAa,CAAC;AAG7B,aAAa;AACb,MAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAiB;gBACvB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,6BAA0B;CACnC,CAAC;AAEF,aAAa;AACb,MAAM,qBAAqB,GAAU;IACnC,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,oCAAiC;CAC1C,CAAC;AAEF,aAAa;AACb,MAAM,SAAS,GAAU;IACvB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,eAAY;gBAClB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,wBAAqB;CAC9B,CAAC;AAEF,aAAa;AACb,MAAM,YAAY,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,kBAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,2BAAwB;CACjC,CAAC;AAEF,aAAa;AACb,MAAM,oBAAoB,GAAU;IAClC,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,mCAAgC;CACzC,CAAC;AAEF,2DAA2D;AAC3D,WAAW;AACX,oBAAoB;AACpB,2BAA2B;AAC3B,eAAe;AACf,kBAAkB;AAClB,0BAA0B;AAC1B,KAAK","sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// oxlint-disable no-unused-vars\n/**\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 { TextOverflow } from '../TextOverflow';\nimport {\n  CharacterLimitSrc,\n  ExpandCollapseButtonsSrc,\n  LineClampSrc,\n  MixedContentSrc,\n  TextOverflowCharacterLimit,\n  TextOverflowExpandCollapseButtons,\n  TextOverflowLineClamp,\n  TextOverflowMixedContent,\n  TextOverflowWidthBasedTruncation,\n  WidthBasedTruncationSrc,\n} from './';\n\nconst componentMeta: Meta<typeof TextOverflow> = {\n  component: TextOverflow,\n  id: 'components-text-overflow',\n  parameters: {\n    controls: { disable: true },\n  },\n  tags: ['docsPage'],\n  title: 'Components/TextOverflow',\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\n// @ts-ignore\nconst CharacterLimit: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: CharacterLimitSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowCharacterLimit,\n};\n\n// @ts-ignore\nconst ExpandCollapseButtons: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: ExpandCollapseButtonsSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowExpandCollapseButtons,\n};\n\n// @ts-ignore\nconst LineClamp: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: LineClampSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowLineClamp,\n};\n\n// @ts-ignore\nconst MixedContent: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: MixedContentSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowMixedContent,\n};\n\n// @ts-ignore\nconst WidthBasedTruncation: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: WidthBasedTruncationSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowWidthBasedTruncation,\n};\n\n// TODO: don't export until we want to release TextOverflow\n// export {\n//   CharacterLimit,\n//   ExpandCollapseButtons,\n//   LineClamp,\n//   MixedContent,\n//   WidthBasedTruncation,\n// };\n"]}
+{"version":3,"file":"text-overflow.stories.js","sourceRoot":"","sources":["../../../../src/text-overflow/stories/text-overflow.stories.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,gCAAgC;AAChC;;;;;;;;;;;;;;;;;;;GAmBG;;AAIH,kDAA+C;AAC/C,wBAWW;AAEX,MAAM,aAAa,GAA8B;IAC/C,SAAS,EAAE,2BAAY;IACvB,EAAE,EAAE,0BAA0B;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,yBAAyB;CACjC,CAAC;AAEF,kBAAe,aAAa,CAAC;AAG7B,aAAa;AACb,MAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAiB;gBACvB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,6BAA0B;CACnC,CAAC;AAEF,aAAa;AACb,MAAM,qBAAqB,GAAU;IACnC,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,oCAAiC;CAC1C,CAAC;AAEF,aAAa;AACb,MAAM,SAAS,GAAU;IACvB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,eAAY;gBAClB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,wBAAqB;CAC9B,CAAC;AAEF,aAAa;AACb,MAAM,YAAY,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,kBAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,2BAAwB;CACjC,CAAC;AAEF,aAAa;AACb,MAAM,oBAAoB,GAAU;IAClC,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,mCAAgC;CACzC,CAAC;AAEF,2DAA2D;AAC3D,WAAW;AACX,oBAAoB;AACpB,2BAA2B;AAC3B,eAAe;AACf,kBAAkB;AAClB,0BAA0B;AAC1B,KAAK","sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// oxlint-disable no-unused-vars\n/**\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 { TextOverflow } from '../TextOverflow';\nimport {\n  CharacterLimitSrc,\n  ExpandCollapseButtonsSrc,\n  LineClampSrc,\n  MixedContentSrc,\n  TextOverflowCharacterLimit,\n  TextOverflowExpandCollapseButtons,\n  TextOverflowLineClamp,\n  TextOverflowMixedContent,\n  TextOverflowWidthBasedTruncation,\n  WidthBasedTruncationSrc,\n} from '.';\n\nconst componentMeta: Meta<typeof TextOverflow> = {\n  component: TextOverflow,\n  id: 'components-text-overflow',\n  parameters: {\n    controls: { disable: true },\n  },\n  tags: ['docsPage'],\n  title: 'Components/TextOverflow',\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\n// @ts-ignore\nconst CharacterLimit: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: CharacterLimitSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowCharacterLimit,\n};\n\n// @ts-ignore\nconst ExpandCollapseButtons: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: ExpandCollapseButtonsSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowExpandCollapseButtons,\n};\n\n// @ts-ignore\nconst LineClamp: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: LineClampSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowLineClamp,\n};\n\n// @ts-ignore\nconst MixedContent: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: MixedContentSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowMixedContent,\n};\n\n// @ts-ignore\nconst WidthBasedTruncation: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: WidthBasedTruncationSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: TextOverflowWidthBasedTruncation,\n};\n\n// TODO: don't export until we want to release TextOverflow\n// export {\n//   CharacterLimit,\n//   ExpandCollapseButtons,\n//   LineClamp,\n//   MixedContent,\n//   WidthBasedTruncation,\n// };\n"]}

package/lib/cjs/text-overflow/text-overflow-utils.js

@@ -30,10 +30,12 @@ const constants_1 = require("./constants");
  * Recursively extracts plain text from React nodes
  */
 const getTextContent = (node) => {
-    if (typeof node === 'string')
+    if (typeof node === 'string') {
         return node;
-    if (typeof node === 'number')
+    }
+    if (typeof node === 'number') {
         return node.toString();
+    }
     if (react_1.default.isValidElement(node)) {
         // Type assertion to access props safely
         const element = node;
@@ -113,12 +115,14 @@ const truncateReactNodeByCharacters = (node, maxCharacters, shouldAddEllipsis =
             return currentNode;
         }
         const { children } = currentNode.props;
-        if (children == null)
+        if (children === null || children === undefined) {
             return currentNode;
+        }
         if (typeof children === 'string') {
             const truncatedChild = truncateNode(children);
-            if (truncatedChild === null)
+            if (truncatedChild === null) {
                 return null;
+            }
             return react_1.default.cloneElement(currentNode, {}, truncatedChild);
         }
         if (Array.isArray(children)) {
@@ -132,14 +136,16 @@ const truncateReactNodeByCharacters = (node, maxCharacters, shouldAddEllipsis =
                     truncatedChildren.push(truncatedChild);
                 }
             }
-            if (truncatedChildren.length === 0)
+            if (truncatedChildren.length === 0) {
                 return null;
+            }
             return react_1.default.cloneElement(currentNode, {}, ...truncatedChildren);
         }
         // Single React element child
         const truncatedChild = truncateNode(children);
-        if (truncatedChild === null)
+        if (truncatedChild === null) {
             return null;
+        }
         return react_1.default.cloneElement(currentNode, {}, truncatedChild);
     };
     const truncatedResult = truncateNode(normalizedNode);

package/lib/cjs/text-overflow/text-overflow-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-overflow-utils.js","sourceRoot":"","sources":["../../../src/text-overflow/text-overflow-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 React, { type ReactNode } from 'react';\n\nimport { ELLIPSIS_CHAR, ESTIMATION_FACTORS } from './constants';\n\ntype ReactNodeTruncationResult = {\n  needsTruncation: boolean;\n  truncatedContent: React.ReactNode | null;\n};\n\n/**\n * Recursively extracts plain text from React nodes\n */\nexport const getTextContent = (node: React.ReactNode): string => {\n  if (typeof node === 'string') return node;\n  if (typeof node === 'number') return node.toString();\n  if (React.isValidElement(node)) {\n    // Type assertion to access props safely\n    const element = node as React.ReactElement<{ children?: ReactNode }>;\n    return getTextContent(element.props.children);\n  }\n  if (Array.isArray(node)) {\n    return node.map(getTextContent).join('');\n  }\n  return '';\n};\n\n/**\n * Truncates React node content by character count while preserving element structure.\n */\nexport const truncateReactNodeByCharacters = (\n  node: React.ReactNode,\n  maxCharacters: number,\n  shouldAddEllipsis = true,\n): ReactNodeTruncationResult => {\n  // Handle the case where node is an array (React children)\n  const normalizedNode = Array.isArray(node)\n    ? React.createElement(React.Fragment, null, ...node)\n    : node;\n\n  // Get the total character count first to determine if truncation is needed\n  const totalLength = getTextContent(normalizedNode).length;\n\n  if (totalLength <= maxCharacters) {\n    return { needsTruncation: false, truncatedContent: null };\n  }\n\n  let charCount = 0;\n  let hasReachedLimit = false;\n\n  const truncateNode = (currentNode: React.ReactNode): React.ReactNode => {\n    // Stop processing if character limit is reached\n    if (hasReachedLimit || charCount >= maxCharacters) {\n      hasReachedLimit = true;\n      return null;\n    }\n\n    // Handle arrays of children (mixed content case)\n    if (Array.isArray(currentNode)) {\n      const truncatedChildren: React.ReactNode[] = [];\n\n      for (const child of currentNode) {\n        if (hasReachedLimit || charCount >= maxCharacters) {\n          break;\n        }\n\n        const truncatedChild = truncateNode(child);\n        if (truncatedChild !== null) {\n          truncatedChildren.push(truncatedChild);\n        }\n      }\n\n      return truncatedChildren.length > 0 ? truncatedChildren : null;\n    }\n\n    if (typeof currentNode === 'string') {\n      const availableChars = maxCharacters - charCount;\n\n      if (currentNode.length <= availableChars) {\n        charCount += currentNode.length;\n        return currentNode;\n      }\n\n      // Truncate at character limit, preferring word boundaries\n      let truncated = currentNode.substring(0, availableChars);\n      const lastSpaceIndex = truncated.lastIndexOf(' ');\n\n      if (lastSpaceIndex > availableChars * ESTIMATION_FACTORS.WORD_BOUNDARY) {\n        truncated = truncated.substring(0, lastSpaceIndex);\n      }\n\n      truncated = truncated.trim();\n      charCount += truncated.length;\n      hasReachedLimit = true;\n      return truncated;\n    }\n\n    if (typeof currentNode === 'number') {\n      const str = currentNode.toString();\n      const availableChars = maxCharacters - charCount;\n\n      if (str.length <= availableChars) {\n        charCount += str.length;\n        return currentNode;\n      }\n\n      const truncated = str.substring(0, availableChars);\n      charCount += truncated.length;\n      hasReachedLimit = true;\n      return truncated;\n    }\n\n    if (!React.isValidElement(currentNode)) {\n      return currentNode;\n    }\n\n    const { children } = currentNode.props as { children?: ReactNode };\n    if (children == null) return currentNode;\n\n    if (typeof children === 'string') {\n      const truncatedChild = truncateNode(children);\n      if (truncatedChild === null) return null;\n      return React.cloneElement(currentNode, {}, truncatedChild);\n    }\n\n    if (Array.isArray(children)) {\n      const truncatedChildren: React.ReactNode[] = [];\n      for (const child of children) {\n        if (hasReachedLimit || charCount >= maxCharacters) {\n          break;\n        }\n\n        const truncatedChild = truncateNode(child);\n        if (truncatedChild !== null) {\n          truncatedChildren.push(truncatedChild);\n        }\n      }\n\n      if (truncatedChildren.length === 0) return null;\n      return React.cloneElement(currentNode, {}, ...truncatedChildren);\n    }\n\n    // Single React element child\n    const truncatedChild = truncateNode(children);\n    if (truncatedChild === null) return null;\n    return React.cloneElement(currentNode, {}, truncatedChild);\n  };\n\n  const truncatedResult = truncateNode(normalizedNode);\n\n  // Convert array results to proper React elements\n  const finalResult = Array.isArray(truncatedResult)\n    ? React.createElement(React.Fragment, null, ...truncatedResult)\n    : truncatedResult;\n\n  // Add ellipsis if needed\n  if (shouldAddEllipsis && finalResult !== null) {\n    const withEllipsis = React.createElement(\n      React.Fragment,\n      null,\n      finalResult,\n      ELLIPSIS_CHAR,\n    );\n    return { needsTruncation: true, truncatedContent: withEllipsis };\n  }\n\n  return {\n    needsTruncation: true,\n    truncatedContent: finalResult,\n  };\n};\n"]}
+{"version":3,"file":"text-overflow-utils.js","sourceRoot":"","sources":["../../../src/text-overflow/text-overflow-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 React, { type ReactNode } from 'react';\n\nimport { ELLIPSIS_CHAR, ESTIMATION_FACTORS } from './constants';\n\ntype ReactNodeTruncationResult = {\n  needsTruncation: boolean;\n  truncatedContent: React.ReactNode | null;\n};\n\n/**\n * Recursively extracts plain text from React nodes\n */\nexport const getTextContent = (node: React.ReactNode): string => {\n  if (typeof node === 'string') {\n    return node;\n  }\n  if (typeof node === 'number') {\n    return node.toString();\n  }\n  if (React.isValidElement(node)) {\n    // Type assertion to access props safely\n    const element = node as React.ReactElement<{ children?: ReactNode }>;\n    return getTextContent(element.props.children);\n  }\n  if (Array.isArray(node)) {\n    return node.map(getTextContent).join('');\n  }\n  return '';\n};\n\n/**\n * Truncates React node content by character count while preserving element structure.\n */\nexport const truncateReactNodeByCharacters = (\n  node: React.ReactNode,\n  maxCharacters: number,\n  shouldAddEllipsis = true,\n): ReactNodeTruncationResult => {\n  // Handle the case where node is an array (React children)\n  const normalizedNode = Array.isArray(node)\n    ? React.createElement(React.Fragment, null, ...node)\n    : node;\n\n  // Get the total character count first to determine if truncation is needed\n  const totalLength = getTextContent(normalizedNode).length;\n\n  if (totalLength <= maxCharacters) {\n    return { needsTruncation: false, truncatedContent: null };\n  }\n\n  let charCount = 0;\n  let hasReachedLimit = false;\n\n  const truncateNode = (currentNode: React.ReactNode): React.ReactNode => {\n    // Stop processing if character limit is reached\n    if (hasReachedLimit || charCount >= maxCharacters) {\n      hasReachedLimit = true;\n      return null;\n    }\n\n    // Handle arrays of children (mixed content case)\n    if (Array.isArray(currentNode)) {\n      const truncatedChildren: React.ReactNode[] = [];\n\n      for (const child of currentNode) {\n        if (hasReachedLimit || charCount >= maxCharacters) {\n          break;\n        }\n\n        const truncatedChild = truncateNode(child);\n        if (truncatedChild !== null) {\n          truncatedChildren.push(truncatedChild);\n        }\n      }\n\n      return truncatedChildren.length > 0 ? truncatedChildren : null;\n    }\n\n    if (typeof currentNode === 'string') {\n      const availableChars = maxCharacters - charCount;\n\n      if (currentNode.length <= availableChars) {\n        charCount += currentNode.length;\n        return currentNode;\n      }\n\n      // Truncate at character limit, preferring word boundaries\n      let truncated = currentNode.substring(0, availableChars);\n      const lastSpaceIndex = truncated.lastIndexOf(' ');\n\n      if (lastSpaceIndex > availableChars * ESTIMATION_FACTORS.WORD_BOUNDARY) {\n        truncated = truncated.substring(0, lastSpaceIndex);\n      }\n\n      truncated = truncated.trim();\n      charCount += truncated.length;\n      hasReachedLimit = true;\n      return truncated;\n    }\n\n    if (typeof currentNode === 'number') {\n      const str = currentNode.toString();\n      const availableChars = maxCharacters - charCount;\n\n      if (str.length <= availableChars) {\n        charCount += str.length;\n        return currentNode;\n      }\n\n      const truncated = str.substring(0, availableChars);\n      charCount += truncated.length;\n      hasReachedLimit = true;\n      return truncated;\n    }\n\n    if (!React.isValidElement(currentNode)) {\n      return currentNode;\n    }\n\n    const { children } = currentNode.props as { children?: ReactNode };\n    if (children === null || children === undefined) {\n      return currentNode;\n    }\n\n    if (typeof children === 'string') {\n      const truncatedChild = truncateNode(children);\n      if (truncatedChild === null) {\n        return null;\n      }\n      return React.cloneElement(currentNode, {}, truncatedChild);\n    }\n\n    if (Array.isArray(children)) {\n      const truncatedChildren: React.ReactNode[] = [];\n      for (const child of children) {\n        if (hasReachedLimit || charCount >= maxCharacters) {\n          break;\n        }\n\n        const truncatedChild = truncateNode(child);\n        if (truncatedChild !== null) {\n          truncatedChildren.push(truncatedChild);\n        }\n      }\n\n      if (truncatedChildren.length === 0) {\n        return null;\n      }\n      return React.cloneElement(currentNode, {}, ...truncatedChildren);\n    }\n\n    // Single React element child\n    const truncatedChild = truncateNode(children);\n    if (truncatedChild === null) {\n      return null;\n    }\n    return React.cloneElement(currentNode, {}, truncatedChild);\n  };\n\n  const truncatedResult = truncateNode(normalizedNode);\n\n  // Convert array results to proper React elements\n  const finalResult = Array.isArray(truncatedResult)\n    ? React.createElement(React.Fragment, null, ...truncatedResult)\n    : truncatedResult;\n\n  // Add ellipsis if needed\n  if (shouldAddEllipsis && finalResult !== null) {\n    const withEllipsis = React.createElement(\n      React.Fragment,\n      null,\n      finalResult,\n      ELLIPSIS_CHAR,\n    );\n    return { needsTruncation: true, truncatedContent: withEllipsis };\n  }\n\n  return {\n    needsTruncation: true,\n    truncatedContent: finalResult,\n  };\n};\n"]}

package/lib/cjs/text-overflow/use-ellipsis-observer.js

@@ -29,8 +29,9 @@ function useEllipsisObserver(options = {}) {
     const [isEllipsized, setIsEllipsized] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         const el = ref.current;
-        if (!el)
+        if (!el) {
             return;
+        }
         const checkEllipsis = () => {
             let hasEllipsis = false;
             if (lineClamp > 1) {

package/lib/cjs/text-overflow/use-ellipsis-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-ellipsis-observer.js","sourceRoot":"","sources":["../../../src/text-overflow/use-ellipsis-observer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;AAWH,kDAiDC;AA1DD,iCAAoE;AAEpE,kDAA+C;AAO/C,SAAgB,mBAAmB,CACjC,UAAsC,EAAE;IAExC,MAAM,EAAE,SAAS,GAAG,CAAC,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACpD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAW,IAAI,CAAC,CAAC;IACnC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;gBAClB,uCAAuC;gBACvC,qDAAqD;gBACrD,WAAW,GAAG,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,qDAAqD;gBACrD,mDAAmD;gBACnD,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;YAChD,CAAC;YAED,eAAe,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAE3D,gBAAgB;QAChB,aAAa,EAAE,CAAC;QAEhB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC,CAAC;QAC1D,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAE3B,kEAAkE;QAClE,IAAI,EAAE,CAAC,aAAa,EAAE,CAAC;YACrB,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;YAC5B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AAC7B,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 RefObject, useEffect, useRef, useState } from 'react';\n\nimport { debounce } from '../helpers/debounce';\n\ninterface UseEllipsisObserverOptions {\n  lineClamp?: number;\n  debounceMs?: number;\n}\n\nexport function useEllipsisObserver<T extends Element = Element>(\n  options: UseEllipsisObserverOptions = {},\n): [RefObject<T | null>, boolean] {\n  const { lineClamp = 1, debounceMs = 100 } = options;\n  const ref = useRef<T | null>(null);\n  const [isEllipsized, setIsEllipsized] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const checkEllipsis = () => {\n      let hasEllipsis = false;\n\n      if (lineClamp > 1) {\n        // For multi-line ellipsis (line-clamp)\n        // Check if scrollHeight is greater than clientHeight\n        hasEllipsis = el.scrollHeight > el.clientHeight;\n      } else {\n        // For single-line ellipsis (text-overflow: ellipsis)\n        // Check if scrollWidth is greater than clientWidth\n        hasEllipsis = el.scrollWidth > el.clientWidth;\n      }\n\n      setIsEllipsized(hasEllipsis);\n    };\n\n    const debouncedCheck = debounce(checkEllipsis, debounceMs);\n\n    // Initial check\n    checkEllipsis();\n\n    const resizeObserver = new ResizeObserver(debouncedCheck);\n    resizeObserver.observe(el);\n\n    // Also observe the parent element to catch container size changes\n    if (el.parentElement) {\n      resizeObserver.observe(el.parentElement);\n    }\n\n    window.addEventListener('resize', debouncedCheck);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', debouncedCheck);\n    };\n  }, [lineClamp, debounceMs]);\n\n  return [ref, isEllipsized];\n}\n"]}
+{"version":3,"file":"use-ellipsis-observer.js","sourceRoot":"","sources":["../../../src/text-overflow/use-ellipsis-observer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;AAWH,kDAmDC;AA5DD,iCAAoE;AAEpE,kDAA+C;AAO/C,SAAgB,mBAAmB,CACjC,UAAsC,EAAE;IAExC,MAAM,EAAE,SAAS,GAAG,CAAC,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACpD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAW,IAAI,CAAC,CAAC;IACnC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;gBAClB,uCAAuC;gBACvC,qDAAqD;gBACrD,WAAW,GAAG,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,qDAAqD;gBACrD,mDAAmD;gBACnD,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;YAChD,CAAC;YAED,eAAe,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAE3D,gBAAgB;QAChB,aAAa,EAAE,CAAC;QAEhB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC,CAAC;QAC1D,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAE3B,kEAAkE;QAClE,IAAI,EAAE,CAAC,aAAa,EAAE,CAAC;YACrB,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;YAC5B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AAC7B,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 RefObject, useEffect, useRef, useState } from 'react';\n\nimport { debounce } from '../helpers/debounce';\n\ninterface UseEllipsisObserverOptions {\n  lineClamp?: number;\n  debounceMs?: number;\n}\n\nexport function useEllipsisObserver<T extends Element = Element>(\n  options: UseEllipsisObserverOptions = {},\n): [RefObject<T | null>, boolean] {\n  const { lineClamp = 1, debounceMs = 100 } = options;\n  const ref = useRef<T | null>(null);\n  const [isEllipsized, setIsEllipsized] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) {\n      return;\n    }\n\n    const checkEllipsis = () => {\n      let hasEllipsis = false;\n\n      if (lineClamp > 1) {\n        // For multi-line ellipsis (line-clamp)\n        // Check if scrollHeight is greater than clientHeight\n        hasEllipsis = el.scrollHeight > el.clientHeight;\n      } else {\n        // For single-line ellipsis (text-overflow: ellipsis)\n        // Check if scrollWidth is greater than clientWidth\n        hasEllipsis = el.scrollWidth > el.clientWidth;\n      }\n\n      setIsEllipsized(hasEllipsis);\n    };\n\n    const debouncedCheck = debounce(checkEllipsis, debounceMs);\n\n    // Initial check\n    checkEllipsis();\n\n    const resizeObserver = new ResizeObserver(debouncedCheck);\n    resizeObserver.observe(el);\n\n    // Also observe the parent element to catch container size changes\n    if (el.parentElement) {\n      resizeObserver.observe(el.parentElement);\n    }\n\n    window.addEventListener('resize', debouncedCheck);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', debouncedCheck);\n    };\n  }, [lineClamp, debounceMs]);\n\n  return [ref, isEllipsized];\n}\n"]}

package/lib/cjs/text-overflow/use-truncate-with-button.js

@@ -119,8 +119,9 @@ function useTruncateWithButton({ content, lineClamp, button, onExpandedToggle, m
             return;
         }
         // Fallback to line-based truncation
-        if (!measureRef.current || !containerRef.current)
+        if (!measureRef.current || !containerRef.current) {
             return;
+        }
         const measure = measureRef.current;
         const container = containerRef.current;
         copyStylesForMeasurement(measure, container);
@@ -169,8 +170,9 @@ function useTruncateWithButton({ content, lineClamp, button, onExpandedToggle, m
         recalculateTruncation();
         // Set up resize observer for container size changes
         const container = containerRef.current;
-        if (!container)
+        if (!container) {
             return;
+        }
         const resizeObserver = new ResizeObserver(() => {
             debouncedRecalculateTruncation();
         });

package/lib/cjs/text-overflow/use-truncate-with-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-truncate-with-button.js","sourceRoot":"","sources":["../../../src/text-overflow/use-truncate-with-button.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;AAmHH,sDAoKC;AArRD,0CAAyC;AACzC,iCAOe;AAEf,oCAA+C;AAC/C,+DAG+B;AAE/B,qEAAqE;AACrE,MAAM,UAAU,GAAG,IAAI,OAAO,EAAoC,CAAC;AAEnE,0DAA0D;AAC1D,MAAM,wBAAwB,GAAG,CAC/B,cAA2B,EAC3B,aAA0B,EAC1B,EAAE;IACF,iCAAiC;IACjC,IAAI,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACjD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QAC/B,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACtD,UAAU,CAAC,GAAG,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC9C,CAAC;IAED,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC3C,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC3C,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC;IACrC,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;IACtC,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;IAChD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC;IAC1D,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC,QAAQ,CAAC;IACtD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC;IAC1D,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC;IAC1D,cAAc,CAAC,KAAK,CAAC,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IAChE,cAAc,CAAC,KAAK,CAAC,WAAW,GAAG,YAAY,CAAC,WAAW,CAAC;IAC5D,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;AAChD,CAAC,CAAC;AAEF,qFAAqF;AACrF,MAAM,mBAAmB,GAAG,CAC1B,OAAkB,EAClB,OAAe,EACf,cAA2B,EAC3B,SAAiB,EACjB,MAAiB,EACjB,UAAqC,EACrC,EAAE;IACF,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC;IAC1B,IAAI,cAAc,GAAc,IAAI,CAAC;IAErC,gEAAgE;IAChE,MAAM,UAAU,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IACrE,MAAM,YAAY,GAAG,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,aAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEvE,0DAA0D;IAC1D,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;IACvC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC;IAExC,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAEvC,cAAc,CAAC,SAAS,GAAG,EAAE,CAAC;QAE9B,sBAAsB;QACtB,QAAQ,CAAC,WAAW;YAClB,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC;QAC7D,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAErC,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;QACjC,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAEpC,IAAI,cAAc,CAAC,YAAY,IAAI,SAAS,EAAE,CAAC;YAC7C,cAAc,GAAG,IAAA,mDAA6B,EAC5C,OAAO,EACP,GAAG,EACH,UAAU,KAAK,UAAU,CAC1B,CAAC,gBAAgB,CAAC;YACnB,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;QAChB,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAiBF,SAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAU,GACS;IACnB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAY,OAAO,CAAC,CAAC;IAE7E,oDAAoD;IACpD,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,oCAAc,EAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEtE,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACpC,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,CAAC,UAAU,CAAC;QACjC,aAAa,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,EAAE,CAAC;YACjB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,IAAI,CAAC,CAAC;YACzB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7D,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC7C,8CAA8C;QAC9C,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACxB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,mBAAmB,CAAC,OAAO,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,8CAA8C;QAC9C,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE,CAAC;YACtC,MAAM,MAAM,GAAG,IAAA,mDAA6B,EAAC,OAAO,EAAE,aAAa,CAAC,CAAC;YACrE,cAAc,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YACvC,mBAAmB,CACjB,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAC3D,CAAC;YACF,OAAO;QACT,CAAC;QAED,oCAAoC;QACpC,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAEzD,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,wBAAwB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC7C,MAAM,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,UAAU,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC1D,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;QAEzC,MAAM,OAAO,GAAG,WAAW,CAAC;QAE5B,gCAAgC;QAChC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,mBAAmB,CAAC,OAAO,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,8CAA8C;QAC9C,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;QACvB,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,YAAY,CAAC,WAAW,GAAG,OAAO,CAAC;QACnC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAElC,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;QAE5D,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,mBAAmB,CAAC,OAAO,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,qCAAqC;QACrC,MAAM,cAAc,GAAG,mBAAmB,CACxC,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,MAAM,EACN,UAAU,CACX,CAAC;QAEF,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACtC,CAAC,EAAE;QACD,OAAO;QACP,MAAM;QACN,SAAS;QACT,aAAa;QACb,UAAU;QACV,UAAU;QACV,WAAW;KACZ,CAAC,CAAC;IAEH,sEAAsE;IACtE,MAAM,8BAA8B,GAAG,IAAA,2BAAmB,EACxD,qBAAqB,EACrB,GAAG,CACJ,CAAC;IAEF,0CAA0C;IAC1C,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,6DAA6D;QAC7D,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,qBAAqB,EAAE,CAAC;QAExB,oDAAoD;QACpD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,8BAA8B,EAAE,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAElC,8DAA8D;QAC9D,IAAI,SAAS,CAAC,aAAa,EAAE,CAAC;YAC5B,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QAClD,CAAC;QAED,8BAA8B;QAC9B,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,8BAA8B,EAAE,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;YAC5B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,8BAA8B,EAAE,UAAU,CAAC,CAAC,CAAC;IAExE,8DAA8D;IAC9D,MAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAEhE,OAAO;QACL,YAAY;QACZ,eAAe;QACf,UAAU;QACV,WAAW;QACX,UAAU;QACV,YAAY;KACb,CAAC;AACJ,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 { tokens } from '@neo4j-ndl/base';\nimport {\n  type ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useDebounceCallback } from '../hooks';\nimport {\n  getTextContent,\n  truncateReactNodeByCharacters,\n} from './text-overflow-utils';\n\n// Cache for computed styles to avoid repeated getComputedStyle calls\nconst styleCache = new WeakMap<HTMLElement, CSSStyleDeclaration>();\n\n// Helper function to copy relevant styles for measurement\nconst copyStylesForMeasurement = (\n  measureElement: HTMLElement,\n  sourceElement: HTMLElement,\n) => {\n  // Use cached styles if available\n  let sourceStyles = styleCache.get(sourceElement);\n  if (sourceStyles === undefined) {\n    sourceStyles = window.getComputedStyle(sourceElement);\n    styleCache.set(sourceElement, sourceStyles);\n  }\n\n  measureElement.style.position = 'absolute';\n  measureElement.style.visibility = 'hidden';\n  measureElement.style.top = '-9999px';\n  measureElement.style.left = '-9999px';\n  measureElement.style.width = sourceStyles.width;\n  measureElement.style.fontFamily = sourceStyles.fontFamily;\n  measureElement.style.fontSize = sourceStyles.fontSize;\n  measureElement.style.fontWeight = sourceStyles.fontWeight;\n  measureElement.style.lineHeight = sourceStyles.lineHeight;\n  measureElement.style.letterSpacing = sourceStyles.letterSpacing;\n  measureElement.style.wordSpacing = sourceStyles.wordSpacing;\n  measureElement.style.overflow = 'hidden';\n  measureElement.style.wordBreak = 'break-word';\n};\n\n// Helper function to find the optimal truncation point using optimized binary search\nconst findTruncationPoint = (\n  content: ReactNode,\n  allText: string,\n  measureElement: HTMLElement,\n  maxHeight: number,\n  button: ReactNode,\n  buttonType?: 'view-more' | 'ellipsis',\n) => {\n  let low = 0;\n  let high = allText.length;\n  let bestFitContent: ReactNode = null;\n\n  // Pre-calculate button text to avoid repeated string operations\n  const buttonText = typeof button === 'string' ? button : 'View more';\n  const buttonMargin = buttonType !== 'ellipsis' ? tokens.space[4] : '0';\n\n  // Create reusable DOM elements to avoid repeated creation\n  const tempSpan = document.createElement('span');\n  const btnSpan = document.createElement('span');\n  btnSpan.style.display = 'inline-block';\n  btnSpan.style.marginLeft = buttonMargin;\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const testText = allText.slice(0, mid);\n\n    measureElement.innerHTML = '';\n\n    // Reuse span elements\n    tempSpan.textContent =\n      buttonType === 'ellipsis' ? testText : `${testText}\\u2026`;\n    measureElement.appendChild(tempSpan);\n\n    btnSpan.textContent = buttonText;\n    measureElement.appendChild(btnSpan);\n\n    if (measureElement.scrollHeight <= maxHeight) {\n      bestFitContent = truncateReactNodeByCharacters(\n        content,\n        mid,\n        buttonType !== 'ellipsis',\n      ).truncatedContent;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestFitContent;\n};\n\ninterface UseTruncateOptions {\n  button: ReactNode;\n  content: ReactNode;\n  lineClamp: number;\n  onExpandedToggle?: (isExpanded: boolean) => void;\n  maxCharacters?: number;\n  buttonType?: 'view-more' | 'ellipsis';\n  closeTooltip?: () => void;\n  /**\n   * When true, skips all expensive DOM calculations and measurements.\n   * Useful for performance optimization when the hook functionality isn't needed.\n   */\n  isDisabled?: boolean;\n}\n\nexport function useTruncateWithButton({\n  content,\n  lineClamp,\n  button,\n  onExpandedToggle,\n  maxCharacters,\n  buttonType,\n  closeTooltip,\n  isDisabled,\n}: UseTruncateOptions) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const measureRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [truncatedContent, setTruncatedContent] = useState<ReactNode>(content);\n\n  // Memoize text content to avoid repeated traversals\n  const textContent = useMemo(() => getTextContent(content), [content]);\n\n  const toggleExpand = useCallback(() => {\n    if (isDisabled === true) {\n      return;\n    }\n\n    const shouldExpand = !isExpanded;\n    setIsExpanded(shouldExpand);\n\n    if (shouldExpand) {\n      onExpandedToggle?.(true);\n      closeTooltip?.();\n    } else {\n      onExpandedToggle?.(false);\n    }\n  }, [isExpanded, onExpandedToggle, closeTooltip, isDisabled]);\n\n  const recalculateTruncation = useCallback(() => {\n    // If disabled, don't perform any calculations\n    if (isDisabled === true) {\n      setIsTruncated(false);\n      setTruncatedContent(content);\n      return;\n    }\n\n    // Character-based truncation takes precedence\n    if (typeof maxCharacters === 'number') {\n      const result = truncateReactNodeByCharacters(content, maxCharacters);\n      setIsTruncated(result.needsTruncation);\n      setTruncatedContent(\n        result.needsTruncation ? result.truncatedContent : content,\n      );\n      return;\n    }\n\n    // Fallback to line-based truncation\n    if (!measureRef.current || !containerRef.current) return;\n\n    const measure = measureRef.current;\n    const container = containerRef.current;\n\n    copyStylesForMeasurement(measure, container);\n    const containerStyles = window.getComputedStyle(container);\n    const lineHeight = parseFloat(containerStyles.lineHeight);\n    const maxHeight = lineHeight * lineClamp;\n\n    const allText = textContent;\n\n    // Early exit if no text content\n    if (allText.length === 0) {\n      setIsTruncated(false);\n      setTruncatedContent(content);\n      return;\n    }\n\n    // First, check if truncation is needed at all\n    measure.innerHTML = '';\n    const fullTextSpan = document.createElement('span');\n    fullTextSpan.textContent = allText;\n    measure.appendChild(fullTextSpan);\n\n    const isTruncationNeeded = measure.scrollHeight > maxHeight;\n\n    if (!isTruncationNeeded) {\n      setIsTruncated(false);\n      setTruncatedContent(content);\n      return;\n    }\n\n    // Binary search for truncation point\n    const bestFitContent = findTruncationPoint(\n      content,\n      allText,\n      measure,\n      maxHeight,\n      button,\n      buttonType,\n    );\n\n    setIsTruncated(true);\n    setTruncatedContent(bestFitContent);\n  }, [\n    content,\n    button,\n    lineClamp,\n    maxCharacters,\n    buttonType,\n    isDisabled,\n    textContent,\n  ]);\n\n  // Create debounced version of recalculateTruncation for resize events\n  const debouncedRecalculateTruncation = useDebounceCallback(\n    recalculateTruncation,\n    100,\n  );\n\n  // Initial calculation and resize handling\n  useLayoutEffect(() => {\n    // If disabled, don't set up any observers or event listeners\n    if (isDisabled === true) {\n      return;\n    }\n\n    recalculateTruncation();\n\n    // Set up resize observer for container size changes\n    const container = containerRef.current;\n    if (!container) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      debouncedRecalculateTruncation();\n    });\n\n    resizeObserver.observe(container);\n\n    // Also observe parent element to catch container size changes\n    if (container.parentElement) {\n      resizeObserver.observe(container.parentElement);\n    }\n\n    // Handle window resize events\n    const handleWindowResize = () => {\n      debouncedRecalculateTruncation();\n    };\n\n    window.addEventListener('resize', handleWindowResize);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', handleWindowResize);\n    };\n  }, [recalculateTruncation, debouncedRecalculateTruncation, isDisabled]);\n\n  // Compute the final content to render based on expanded state\n  const contentToRender = isExpanded ? content : truncatedContent;\n\n  return {\n    containerRef,\n    contentToRender,\n    isExpanded,\n    isTruncated,\n    measureRef,\n    toggleExpand,\n  };\n}\n"]}
+{"version":3,"file":"use-truncate-with-button.js","sourceRoot":"","sources":["../../../src/text-overflow/use-truncate-with-button.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 { tokens } from '@neo4j-ndl/base';\nimport {\n  type ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useDebounceCallback } from '../hooks';\nimport {\n  getTextContent,\n  truncateReactNodeByCharacters,\n} from './text-overflow-utils';\n\n// Cache for computed styles to avoid repeated getComputedStyle calls\nconst styleCache = new WeakMap<HTMLElement, CSSStyleDeclaration>();\n\n// Helper function to copy relevant styles for measurement\nconst copyStylesForMeasurement = (\n  measureElement: HTMLElement,\n  sourceElement: HTMLElement,\n) => {\n  // Use cached styles if available\n  let sourceStyles = styleCache.get(sourceElement);\n  if (sourceStyles === undefined) {\n    sourceStyles = window.getComputedStyle(sourceElement);\n    styleCache.set(sourceElement, sourceStyles);\n  }\n\n  measureElement.style.position = 'absolute';\n  measureElement.style.visibility = 'hidden';\n  measureElement.style.top = '-9999px';\n  measureElement.style.left = '-9999px';\n  measureElement.style.width = sourceStyles.width;\n  measureElement.style.fontFamily = sourceStyles.fontFamily;\n  measureElement.style.fontSize = sourceStyles.fontSize;\n  measureElement.style.fontWeight = sourceStyles.fontWeight;\n  measureElement.style.lineHeight = sourceStyles.lineHeight;\n  measureElement.style.letterSpacing = sourceStyles.letterSpacing;\n  measureElement.style.wordSpacing = sourceStyles.wordSpacing;\n  measureElement.style.overflow = 'hidden';\n  measureElement.style.wordBreak = 'break-word';\n};\n\n// Helper function to find the optimal truncation point using optimized binary search\nconst findTruncationPoint = (\n  content: ReactNode,\n  allText: string,\n  measureElement: HTMLElement,\n  maxHeight: number,\n  button: ReactNode,\n  buttonType?: 'view-more' | 'ellipsis',\n) => {\n  let low = 0;\n  let high = allText.length;\n  let bestFitContent: ReactNode = null;\n\n  // Pre-calculate button text to avoid repeated string operations\n  const buttonText = typeof button === 'string' ? button : 'View more';\n  const buttonMargin = buttonType !== 'ellipsis' ? tokens.space[4] : '0';\n\n  // Create reusable DOM elements to avoid repeated creation\n  const tempSpan = document.createElement('span');\n  const btnSpan = document.createElement('span');\n  btnSpan.style.display = 'inline-block';\n  btnSpan.style.marginLeft = buttonMargin;\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const testText = allText.slice(0, mid);\n\n    measureElement.innerHTML = '';\n\n    // Reuse span elements\n    tempSpan.textContent =\n      buttonType === 'ellipsis' ? testText : `${testText}\\u2026`;\n    measureElement.appendChild(tempSpan);\n\n    btnSpan.textContent = buttonText;\n    measureElement.appendChild(btnSpan);\n\n    if (measureElement.scrollHeight <= maxHeight) {\n      bestFitContent = truncateReactNodeByCharacters(\n        content,\n        mid,\n        buttonType !== 'ellipsis',\n      ).truncatedContent;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestFitContent;\n};\n\ninterface UseTruncateOptions {\n  button: ReactNode;\n  content: ReactNode;\n  lineClamp: number;\n  onExpandedToggle?: (isExpanded: boolean) => void;\n  maxCharacters?: number;\n  buttonType?: 'view-more' | 'ellipsis';\n  closeTooltip?: () => void;\n  /**\n   * When true, skips all expensive DOM calculations and measurements.\n   * Useful for performance optimization when the hook functionality isn't needed.\n   */\n  isDisabled?: boolean;\n}\n\nexport function useTruncateWithButton({\n  content,\n  lineClamp,\n  button,\n  onExpandedToggle,\n  maxCharacters,\n  buttonType,\n  closeTooltip,\n  isDisabled,\n}: UseTruncateOptions) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const measureRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [truncatedContent, setTruncatedContent] = useState<ReactNode>(content);\n\n  // Memoize text content to avoid repeated traversals\n  const textContent = useMemo(() => getTextContent(content), [content]);\n\n  const toggleExpand = useCallback(() => {\n    if (isDisabled === true) {\n      return;\n    }\n\n    const shouldExpand = !isExpanded;\n    setIsExpanded(shouldExpand);\n\n    if (shouldExpand) {\n      onExpandedToggle?.(true);\n      closeTooltip?.();\n    } else {\n      onExpandedToggle?.(false);\n    }\n  }, [isExpanded, onExpandedToggle, closeTooltip, isDisabled]);\n\n  const recalculateTruncation = useCallback(() => {\n    // If disabled, don't perform any calculations\n    if (isDisabled === true) {\n      setIsTruncated(false);\n      setTruncatedContent(content);\n      return;\n    }\n\n    // Character-based truncation takes precedence\n    if (typeof maxCharacters === 'number') {\n      const result = truncateReactNodeByCharacters(content, maxCharacters);\n      setIsTruncated(result.needsTruncation);\n      setTruncatedContent(\n        result.needsTruncation ? result.truncatedContent : content,\n      );\n      return;\n    }\n\n    // Fallback to line-based truncation\n    if (!measureRef.current || !containerRef.current) {\n      return;\n    }\n\n    const measure = measureRef.current;\n    const container = containerRef.current;\n\n    copyStylesForMeasurement(measure, container);\n    const containerStyles = window.getComputedStyle(container);\n    const lineHeight = parseFloat(containerStyles.lineHeight);\n    const maxHeight = lineHeight * lineClamp;\n\n    const allText = textContent;\n\n    // Early exit if no text content\n    if (allText.length === 0) {\n      setIsTruncated(false);\n      setTruncatedContent(content);\n      return;\n    }\n\n    // First, check if truncation is needed at all\n    measure.innerHTML = '';\n    const fullTextSpan = document.createElement('span');\n    fullTextSpan.textContent = allText;\n    measure.appendChild(fullTextSpan);\n\n    const isTruncationNeeded = measure.scrollHeight > maxHeight;\n\n    if (!isTruncationNeeded) {\n      setIsTruncated(false);\n      setTruncatedContent(content);\n      return;\n    }\n\n    // Binary search for truncation point\n    const bestFitContent = findTruncationPoint(\n      content,\n      allText,\n      measure,\n      maxHeight,\n      button,\n      buttonType,\n    );\n\n    setIsTruncated(true);\n    setTruncatedContent(bestFitContent);\n  }, [\n    content,\n    button,\n    lineClamp,\n    maxCharacters,\n    buttonType,\n    isDisabled,\n    textContent,\n  ]);\n\n  // Create debounced version of recalculateTruncation for resize events\n  const debouncedRecalculateTruncation = useDebounceCallback(\n    recalculateTruncation,\n    100,\n  );\n\n  // Initial calculation and resize handling\n  useLayoutEffect(() => {\n    // If disabled, don't set up any observers or event listeners\n    if (isDisabled === true) {\n      return;\n    }\n\n    recalculateTruncation();\n\n    // Set up resize observer for container size changes\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(() => {\n      debouncedRecalculateTruncation();\n    });\n\n    resizeObserver.observe(container);\n\n    // Also observe parent element to catch container size changes\n    if (container.parentElement) {\n      resizeObserver.observe(container.parentElement);\n    }\n\n    // Handle window resize events\n    const handleWindowResize = () => {\n      debouncedRecalculateTruncation();\n    };\n\n    window.addEventListener('resize', handleWindowResize);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', handleWindowResize);\n    };\n  }, [recalculateTruncation, debouncedRecalculateTruncation, isDisabled]);\n\n  // Compute the final content to render based on expanded state\n  const contentToRender = isExpanded ? content : truncatedContent;\n\n  return {\n    containerRef,\n    contentToRender,\n    isExpanded,\n    isTruncated,\n    measureRef,\n    toggleExpand,\n  };\n}\n"]}

package/lib/cjs/theme/ThemeProvider.js

@@ -83,8 +83,9 @@ const useNeedleTheme = () => {
      * inside a `NeedleThemeProvider` .
      * Defaults to `light` theme.
      */
-    if (theme === undefined)
+    if (theme === undefined) {
         theme = 'light';
+    }
     const tokens = (0, react_1.useContext)(exports.TokensContext);
     return {
         theme,

package/lib/cjs/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,+CAMe;AAGF,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,SAAS,CACV,CAAC;AAOW,QAAA,aAAa,GAAG,IAAA,qBAAa,EACxC,SAAS,CACV,CAAC;AAYF;;GAEG;AACI,MAAM,cAAc,GAAoB,GAAG,EAAE;IAClD,IAAI,KAAK,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,IAAI,KAAK,KAAK,SAAS;QAAE,KAAK,GAAG,OAAO,CAAC;IAEzC,MAAM,MAAM,GAAG,IAAA,kBAAU,EAAC,qBAAa,CAAC,CAAC;IAEzC,OAAO;QACL,KAAK;QACL,cAAc,EAAE,aAAa,KAAK,EAAE;QACpC,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB;AAmBK,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,GAAG,OAAO,EACf,MAAM,EACN,QAAQ,EACR,YAAY,GACa,EAAE,EAAE;IAC7B,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,MAAM,KACJ,YAAY,IAAI,EAAE,EADd,EAAE,kBAAkB,EAAE,SAAS,OACjB,EADsB,gBAAgB,cAApD,mCAAsD,CACxC,CAAC;QACrB,MAAM,KAAK,mCACN,gBAAgB,KACnB,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,aAAa,KAAK,EAAE,CAAC,GACvD,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE,CAAC;YAChC,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5C,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,kCAC1B,KAAK,KACR,SAAS,EAAE,IAAA,oBAAU,EAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAC7D,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,OAAO,CACL,iDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,YAE1D,QAAQ,IACJ,CACR,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,uBAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,uBAAC,qBAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAClC,cAAc,GACQ,GACH,CACzB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,mBAAmB,uBAwC9B","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 React, {\n  createContext,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n} from 'react';\ntype ThemeContextType = 'light' | 'dark';\n\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\n  undefined,\n);\n\ntype TokensContextType = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n};\n\nexport const TokensContext = createContext<TokensContextType | undefined>(\n  undefined,\n);\n\ntype NeedleThemeHook = () => {\n  theme: ThemeContextType;\n  /**\n   * A classname that can be used to scope\n   * elements that are portal-ed like\n   * Modals, Popovers, etc.\n   */\n  themeClassName: string;\n  tokens?: TokensContextType;\n};\n/**\n * Hook to access the current theme effortlessly\n */\nexport const useNeedleTheme: NeedleThemeHook = () => {\n  let theme = useContext(ThemeContext);\n  /**\n   * If the theme is undefined, we are not\n   * inside a `NeedleThemeProvider` .\n   * Defaults to `light` theme.\n   */\n  if (theme === undefined) theme = 'light';\n\n  const tokens = useContext(TokensContext);\n\n  return {\n    theme,\n    themeClassName: `ndl-theme-${theme}`,\n    tokens,\n  };\n};\n\ninterface NeedleThemeProviderProps extends PropsWithChildren {\n  theme?: 'dark' | 'light';\n  tokens?: TokensContextType;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  children: any;\n  /**\n   * Nested theme providers will receive a wrapping `span` tag\n   * in order to set correctly the default text `color` that all nested\n   * children will inherit by adding the respective class `ndl-theme-{theme}`.\n   *\n   * If an extra wrapper is not desired, pass `{ isWrappingChildren : false }`.\n   * This requires child components accept and consumer className prop.\n   *\n   */\n  wrapperProps?: HTMLAttributes<HTMLElement> & { isWrappingChildren?: boolean };\n}\n\nexport const NeedleThemeProvider = ({\n  theme = 'light',\n  tokens,\n  children,\n  wrapperProps,\n}: NeedleThemeProviderProps) => {\n  const clonedChildren = useMemo(() => {\n    const { isWrappingChildren, className, ...restWrapperProps } =\n      wrapperProps || {};\n    const props = {\n      ...restWrapperProps,\n      className: classNames(className, `ndl-theme-${theme}`),\n    };\n\n    if (isWrappingChildren !== true) {\n      return React.Children.map(children, (child) => {\n        return React.cloneElement(child, {\n          ...props,\n          className: classNames(child.props.className, props.className),\n        });\n      });\n    } else {\n      return (\n        <span\n          {...props}\n          className={classNames('ndl-theme-wrapper', props.className)}\n        >\n          {children}\n        </span>\n      );\n    }\n  }, [wrapperProps, theme, children]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <TokensContext.Provider value={tokens}>\n        {clonedChildren}\n      </TokensContext.Provider>\n    </ThemeContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,+CAMe;AAGF,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,SAAS,CACV,CAAC;AAOW,QAAA,aAAa,GAAG,IAAA,qBAAa,EACxC,SAAS,CACV,CAAC;AAYF;;GAEG;AACI,MAAM,cAAc,GAAoB,GAAG,EAAE;IAClD,IAAI,KAAK,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,KAAK,GAAG,OAAO,CAAC;IAClB,CAAC;IAED,MAAM,MAAM,GAAG,IAAA,kBAAU,EAAC,qBAAa,CAAC,CAAC;IAEzC,OAAO;QACL,KAAK;QACL,cAAc,EAAE,aAAa,KAAK,EAAE;QACpC,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,cAAc,kBAkBzB;AAmBK,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,GAAG,OAAO,EACf,MAAM,EACN,QAAQ,EACR,YAAY,GACa,EAAE,EAAE;IAC7B,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,MAAM,KACJ,YAAY,IAAI,EAAE,EADd,EAAE,kBAAkB,EAAE,SAAS,OACjB,EADsB,gBAAgB,cAApD,mCAAsD,CACxC,CAAC;QACrB,MAAM,KAAK,mCACN,gBAAgB,KACnB,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,aAAa,KAAK,EAAE,CAAC,GACvD,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE,CAAC;YAChC,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5C,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,kCAC1B,KAAK,KACR,SAAS,EAAE,IAAA,oBAAU,EAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAC7D,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,OAAO,CACL,iDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,YAE1D,QAAQ,IACJ,CACR,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,uBAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,uBAAC,qBAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAClC,cAAc,GACQ,GACH,CACzB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,mBAAmB,uBAwC9B","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 React, {\n  createContext,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n} from 'react';\ntype ThemeContextType = 'light' | 'dark';\n\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\n  undefined,\n);\n\ntype TokensContextType = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n};\n\nexport const TokensContext = createContext<TokensContextType | undefined>(\n  undefined,\n);\n\ntype NeedleThemeHook = () => {\n  theme: ThemeContextType;\n  /**\n   * A classname that can be used to scope\n   * elements that are portal-ed like\n   * Modals, Popovers, etc.\n   */\n  themeClassName: string;\n  tokens?: TokensContextType;\n};\n/**\n * Hook to access the current theme effortlessly\n */\nexport const useNeedleTheme: NeedleThemeHook = () => {\n  let theme = useContext(ThemeContext);\n  /**\n   * If the theme is undefined, we are not\n   * inside a `NeedleThemeProvider` .\n   * Defaults to `light` theme.\n   */\n  if (theme === undefined) {\n    theme = 'light';\n  }\n\n  const tokens = useContext(TokensContext);\n\n  return {\n    theme,\n    themeClassName: `ndl-theme-${theme}`,\n    tokens,\n  };\n};\n\ninterface NeedleThemeProviderProps extends PropsWithChildren {\n  theme?: 'dark' | 'light';\n  tokens?: TokensContextType;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  children: any;\n  /**\n   * Nested theme providers will receive a wrapping `span` tag\n   * in order to set correctly the default text `color` that all nested\n   * children will inherit by adding the respective class `ndl-theme-{theme}`.\n   *\n   * If an extra wrapper is not desired, pass `{ isWrappingChildren : false }`.\n   * This requires child components accept and consumer className prop.\n   *\n   */\n  wrapperProps?: HTMLAttributes<HTMLElement> & { isWrappingChildren?: boolean };\n}\n\nexport const NeedleThemeProvider = ({\n  theme = 'light',\n  tokens,\n  children,\n  wrapperProps,\n}: NeedleThemeProviderProps) => {\n  const clonedChildren = useMemo(() => {\n    const { isWrappingChildren, className, ...restWrapperProps } =\n      wrapperProps || {};\n    const props = {\n      ...restWrapperProps,\n      className: classNames(className, `ndl-theme-${theme}`),\n    };\n\n    if (isWrappingChildren !== true) {\n      return React.Children.map(children, (child) => {\n        return React.cloneElement(child, {\n          ...props,\n          className: classNames(child.props.className, props.className),\n        });\n      });\n    } else {\n      return (\n        <span\n          {...props}\n          className={classNames('ndl-theme-wrapper', props.className)}\n        >\n          {children}\n        </span>\n      );\n    }\n  }, [wrapperProps, theme, children]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <TokensContext.Provider value={tokens}>\n        {clonedChildren}\n      </TokensContext.Provider>\n    </ThemeContext.Provider>\n  );\n};\n"]}