@neo4j-ndl/react 4.2.3 → 4.2.5

package/lib/cjs/graph-label/GraphLabel.js

@@ -52,7 +52,7 @@ const HexagonEnd = ({ direction = 'left', color, htmlAttributes, height = 24, })
         'ndl-left': direction === 'left',
         'ndl-right': direction === 'right',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("svg", { className: "ndl-hexagon-end-inner", width: "9", height: height, viewBox: "0 0 9 24", preserveAspectRatio: "none", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }), (0, jsx_runtime_1.jsx)("svg", { className: "ndl-hexagon-end-active", width: "13", height: height + 6, viewBox: "0 0 13 30", preserveAspectRatio: "none", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z" }) })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, className: "ndl-hexagon-end-inner", fill: "none", height: height, preserveAspectRatio: "none", viewBox: "0 0 9 24", width: "9", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }), (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, className: "ndl-hexagon-end-active", fill: "none", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 13 30", width: "13", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z" }) })] })));
 };
 const SquareEnd = ({ direction = 'left', color, height = 24, htmlAttributes, }) => {
     const classes = (0, classnames_1.default)('ndl-square-end', {

package/lib/cjs/graph-label/GraphLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.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 { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n  getDisabledTextColor,\n  getHoverColor,\n  getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n  /**  The type of label */\n  type:\n    | 'node'\n    | 'relationship'\n    | 'propertyKey'\n    | 'relationshipLeft'\n    | 'relationshipRight';\n  /** Callback function that is called when the label is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional styles to apply to the label */\n  style?: React.CSSProperties;\n  /** Content displayed inside the label */\n  children?: React.ReactNode;\n  /** The background color of the label */\n  color?: string;\n  /** Whether the label is disabled */\n  isDisabled?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Whether the label is selected */\n  isSelected?: boolean;\n  /** Whether the label should expand to full available width */\n  isFluid?: boolean;\n  /** The size of the label */\n  size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n  /** The direction of the hexagon end */\n  direction: 'left' | 'right';\n  /** The color of the hexagon end */\n  color?: string;\n  /** The height of the hexagon end in pixels */\n  height?: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n  height = 24,\n}: HexagonEndProps) => {\n  const classes = classNames('ndl-hexagon-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <svg\n        className=\"ndl-hexagon-end-inner\"\n        width=\"9\"\n        height={height}\n        viewBox=\"0 0 9 24\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* triangle */}\n        <path\n          style={{ fill: color }}\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n        />\n      </svg>\n      <svg\n        className=\"ndl-hexagon-end-active\"\n        width=\"13\"\n        height={height + 6}\n        viewBox=\"0 0 13 30\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype SquareEndProps = {\n  /** The direction of the square end (where it's rounded and has the active state) */\n  direction: 'left' | 'right';\n  /** The color of the square end */\n  color: string;\n  /** The height of the square end in pixels */\n  height: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n  direction = 'left',\n  color,\n  height = 24,\n  htmlAttributes,\n}: SquareEndProps) => {\n  const classes = classNames('ndl-square-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <div\n        className=\"ndl-square-end-inner\"\n        style={{ backgroundColor: color }}\n      />\n      <svg\n        className=\"ndl-square-end-active\"\n        width=\"7\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 7 30\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype HorizontalLinesProps = {\n  height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={height + 6}\n      preserveAspectRatio=\"none\"\n      viewBox=\"0 0 37 30\"\n      fill=\"none\"\n      className=\"ndl-relationship-label-lines\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n      />\n    </svg>\n  );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n  type = 'node',\n  color,\n  isDisabled = false,\n  isSelected = false,\n  as,\n  onClick,\n  className,\n  style,\n  children,\n  htmlAttributes,\n  isFluid = false,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n  const [isHover, setIsHover] = useState(false);\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(true);\n\n    if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n      htmlAttributes.onMouseEnter(event);\n    }\n  };\n\n  const handleMouseLeave = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(false);\n\n    htmlAttributes?.onMouseLeave?.(event);\n  };\n\n  const Component: React.ElementType = as ?? 'button';\n  const isButton = Component === 'button';\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    // By default, a <button /> element with disabled set to true will not get its\n    // on click handler called. To support the same behavior on <a /> tags we\n    // swallow the event here when disabled, since the <a /> tag with disabled set to\n    // true will have its onClick handler called\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  let backgroundColor = useMemo(() => {\n    if (color === undefined) {\n      switch (type) {\n        case 'node':\n          return tokens.graph['1'];\n        case 'relationship':\n        case 'relationshipLeft':\n        case 'relationshipRight':\n          return tokens.theme.light.color.neutral.bg.strong;\n        default:\n          return tokens.theme.light.color.neutral.bg.strongest;\n      }\n    }\n    return color;\n  }, [color, type]);\n\n  const hoverColor = useMemo(\n    () =>\n      getHoverColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const textColor = useMemo(\n    () =>\n      getTextColorFromBackground(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const disabledTextColor = useMemo(\n    () =>\n      getDisabledTextColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n\n  if (isHover && !isDisabled) {\n    backgroundColor = hoverColor;\n  }\n\n  const commonClasses = classNames('ndl-graph-label', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-interactable': isButton,\n    'ndl-selected': isSelected,\n    'ndl-small': size === 'small',\n  });\n\n  if (type === 'node') {\n    const classes = classNames('ndl-node-label', commonClasses);\n\n    return (\n      <Component\n        className={classes}\n        ref={ref}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-node-label-content\">{children}</div>\n      </Component>\n    );\n  } else if (\n    type === 'relationship' ||\n    type === 'relationshipLeft' ||\n    type === 'relationshipRight'\n  ) {\n    const classes = classNames('ndl-relationship-label', commonClasses);\n    const height = size === 'small' ? 20 : 24;\n\n    return (\n      <Component\n        style={{\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n          color: isDisabled ? disabledTextColor : textColor,\n        }}\n        className={classes}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {type === 'relationshipLeft' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"left\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n        )}\n        <div\n          className=\"ndl-relationship-label-container\"\n          style={{\n            backgroundColor: backgroundColor,\n          }}\n        >\n          <div className=\"ndl-relationship-label-content\">{children}</div>\n          <HorizontalLines height={height} />\n        </div>\n        {type === 'relationshipRight' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        )}\n      </Component>\n    );\n  } else {\n    const classes = classNames('ndl-property-key-label', commonClasses);\n\n    return (\n      <Component\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        className={classes}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        ref={ref}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-property-key-label-content\">{children}</div>\n      </Component>\n    );\n  }\n};\n"]}
+{"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.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 { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n  getDisabledTextColor,\n  getHoverColor,\n  getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n  /**  The type of label */\n  type:\n    | 'node'\n    | 'relationship'\n    | 'propertyKey'\n    | 'relationshipLeft'\n    | 'relationshipRight';\n  /** Callback function that is called when the label is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional styles to apply to the label */\n  style?: React.CSSProperties;\n  /** Content displayed inside the label */\n  children?: React.ReactNode;\n  /** The background color of the label */\n  color?: string;\n  /** Whether the label is disabled */\n  isDisabled?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Whether the label is selected */\n  isSelected?: boolean;\n  /** Whether the label should expand to full available width */\n  isFluid?: boolean;\n  /** The size of the label */\n  size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n  /** The direction of the hexagon end */\n  direction: 'left' | 'right';\n  /** The color of the hexagon end */\n  color?: string;\n  /** The height of the hexagon end in pixels */\n  height?: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n  height = 24,\n}: HexagonEndProps) => {\n  const classes = classNames('ndl-hexagon-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-inner\"\n        fill=\"none\"\n        height={height}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 9 24\"\n        width=\"9\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* triangle */}\n        <path\n          style={{ fill: color }}\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n        />\n      </svg>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-active\"\n        fill=\"none\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 13 30\"\n        width=\"13\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype SquareEndProps = {\n  /** The direction of the square end (where it's rounded and has the active state) */\n  direction: 'left' | 'right';\n  /** The color of the square end */\n  color: string;\n  /** The height of the square end in pixels */\n  height: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n  direction = 'left',\n  color,\n  height = 24,\n  htmlAttributes,\n}: SquareEndProps) => {\n  const classes = classNames('ndl-square-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <div\n        className=\"ndl-square-end-inner\"\n        style={{ backgroundColor: color }}\n      />\n      <svg\n        className=\"ndl-square-end-active\"\n        width=\"7\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 7 30\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype HorizontalLinesProps = {\n  height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={height + 6}\n      preserveAspectRatio=\"none\"\n      viewBox=\"0 0 37 30\"\n      fill=\"none\"\n      className=\"ndl-relationship-label-lines\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n      />\n    </svg>\n  );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n  type = 'node',\n  color,\n  isDisabled = false,\n  isSelected = false,\n  as,\n  onClick,\n  className,\n  style,\n  children,\n  htmlAttributes,\n  isFluid = false,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n  const [isHover, setIsHover] = useState(false);\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(true);\n\n    if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n      htmlAttributes.onMouseEnter(event);\n    }\n  };\n\n  const handleMouseLeave = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(false);\n\n    htmlAttributes?.onMouseLeave?.(event);\n  };\n\n  const Component: React.ElementType = as ?? 'button';\n  const isButton = Component === 'button';\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    // By default, a <button /> element with disabled set to true will not get its\n    // on click handler called. To support the same behavior on <a /> tags we\n    // swallow the event here when disabled, since the <a /> tag with disabled set to\n    // true will have its onClick handler called\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  let backgroundColor = useMemo(() => {\n    if (color === undefined) {\n      switch (type) {\n        case 'node':\n          return tokens.graph['1'];\n        case 'relationship':\n        case 'relationshipLeft':\n        case 'relationshipRight':\n          return tokens.theme.light.color.neutral.bg.strong;\n        default:\n          return tokens.theme.light.color.neutral.bg.strongest;\n      }\n    }\n    return color;\n  }, [color, type]);\n\n  const hoverColor = useMemo(\n    () =>\n      getHoverColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const textColor = useMemo(\n    () =>\n      getTextColorFromBackground(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const disabledTextColor = useMemo(\n    () =>\n      getDisabledTextColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n\n  if (isHover && !isDisabled) {\n    backgroundColor = hoverColor;\n  }\n\n  const commonClasses = classNames('ndl-graph-label', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-interactable': isButton,\n    'ndl-selected': isSelected,\n    'ndl-small': size === 'small',\n  });\n\n  if (type === 'node') {\n    const classes = classNames('ndl-node-label', commonClasses);\n\n    return (\n      <Component\n        className={classes}\n        ref={ref}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-node-label-content\">{children}</div>\n      </Component>\n    );\n  } else if (\n    type === 'relationship' ||\n    type === 'relationshipLeft' ||\n    type === 'relationshipRight'\n  ) {\n    const classes = classNames('ndl-relationship-label', commonClasses);\n    const height = size === 'small' ? 20 : 24;\n\n    return (\n      <Component\n        style={{\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n          color: isDisabled ? disabledTextColor : textColor,\n        }}\n        className={classes}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {type === 'relationshipLeft' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"left\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n        )}\n        <div\n          className=\"ndl-relationship-label-container\"\n          style={{\n            backgroundColor: backgroundColor,\n          }}\n        >\n          <div className=\"ndl-relationship-label-content\">{children}</div>\n          <HorizontalLines height={height} />\n        </div>\n        {type === 'relationshipRight' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        )}\n      </Component>\n    );\n  } else {\n    const classes = classNames('ndl-property-key-label', commonClasses);\n\n    return (\n      <Component\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        className={classes}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        ref={ref}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-property-key-label-content\">{children}</div>\n      </Component>\n    );\n  }\n};\n"]}

package/lib/cjs/tabs/Tabs.js

@@ -112,13 +112,32 @@ const TabsComponent = (_a) => {
     const containerRef = (0, react_2.useRef)(null);
     const scrollContainerRef = (0, react_2.useRef)(null);
     const mergedRef = (0, react_1.useMergeRefs)([containerRef, ref]);
+    const [firstTabId, setFirstTabId] = (0, react_2.useState)(null);
+    const [isValuePresent, setIsValuePresent] = (0, react_2.useState)(false);
+    const valueRef = (0, react_2.useRef)(value);
     // Use the custom hook for scroll overflow behavior
     const { scrollState, scrollToNextItem, checkOverflow } = (0, use_tabs_scroll_overflow_1.useTabsScrollOverflow)(scrollContainerRef);
+    (0, react_2.useEffect)(() => {
+        valueRef.current = value;
+        setIsValuePresent(tabRefs.current.has(value));
+    }, [value]);
     const registerTab = (0, react_2.useCallback)((tabId, tabRef) => {
+        var _a;
         tabRefs.current.set(tabId, tabRef);
+        const first = (_a = tabRefs.current.keys().next().value) !== null && _a !== void 0 ? _a : null;
+        setFirstTabId((prev) => (prev === first ? prev : first));
+        if (tabId === valueRef.current) {
+            setIsValuePresent(true);
+        }
     }, []);
     const unregisterTab = (0, react_2.useCallback)((tabId) => {
+        var _a;
         tabRefs.current.delete(tabId);
+        const first = (_a = tabRefs.current.keys().next().value) !== null && _a !== void 0 ? _a : null;
+        setFirstTabId((prev) => (prev === first ? prev : first));
+        if (tabId === valueRef.current) {
+            setIsValuePresent(false);
+        }
     }, []);
     // Check overflow when children change
     (0, react_2.useEffect)(() => {
@@ -155,12 +174,18 @@ const TabsComponent = (_a) => {
                 break;
             }
         }
-        // If no tab is focused, focus the active tab
+        // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.
         if (currentIndex === -1) {
             const activeTabRef = tabRefs.current.get(value);
             if (activeTabRef === null || activeTabRef === void 0 ? void 0 : activeTabRef.current) {
                 activeTabRef.current.focus();
             }
+            else if (!isValuePresent && firstTabId !== null) {
+                const firstTabRef = tabRefs.current.get(firstTabId);
+                if (firstTabRef === null || firstTabRef === void 0 ? void 0 : firstTabRef.current) {
+                    firstTabRef.current.focus();
+                }
+            }
             return;
         }
         let nextIndex;
@@ -176,11 +201,13 @@ const TabsComponent = (_a) => {
             nextTabRef.current.focus();
             scrollTabIntoView(nextTabId);
         }
-    }, [value, scrollTabIntoView]);
+    }, [value, scrollTabIntoView, firstTabId, isValuePresent]);
     const classes = (0, classnames_1.default)('ndl-tabs', getGeneralTabClasses(size, fill), className);
     const Component = as !== null && as !== void 0 ? as : 'div';
     return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, ref: mergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(ScrollButton, { direction: "left", isVisible: scrollState.isLeftVisible, onClick: () => scrollToNextItem('left'), onBackground: onBackground }), (0, jsx_runtime_1.jsx)(ScrollButton, { direction: "right", isVisible: scrollState.isRightVisible, onClick: () => scrollToNextItem('right'), onBackground: onBackground }), (0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: {
                     fill,
+                    firstTabId,
+                    isValuePresent,
                     onChange,
                     registerTab,
                     scrollTabIntoView,
@@ -192,7 +219,7 @@ const TabsComponent = (_a) => {
 TabsComponent.displayName = 'Tabs';
 const TabsTab = (_a) => {
     var { children, id: tabId, isDisabled = false, className, description, tooltipProps, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "description", "tooltipProps", "style", "as", "htmlAttributes", "ref"]);
-    const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, } = useTabsContext();
+    const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, firstTabId, isValuePresent, } = useTabsContext();
     const internalRef = (0, react_2.useRef)(null);
     // Create a merged ref that handles both ref objects and ref functions
     const mergedRef = (0, react_1.useMergeRefs)([
@@ -211,7 +238,7 @@ const TabsTab = (_a) => {
     const classes = (0, classnames_1.default)('ndl-tab', baseClasses, className);
     // Only the active tab should be in the tab sequence initially
     // Other tabs can be focused via arrow keys but are not in tab sequence
-    const tabIndex = value === tabId ? 0 : -1;
+    const tabIndex = value === tabId || (!isValuePresent && tabId === firstTabId) ? 0 : -1;
     return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { isDisabled: description === undefined, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, onClick: () => {
                         if (!isDisabled) {
                             onChange(tabId);

package/lib/cjs/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.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 { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useCallback, useContext, useEffect, useRef } from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport {\n  ArrowLeftCircleIconOutline,\n  ArrowRightCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n  direction,\n  isVisible,\n  onClick,\n  onBackground,\n}: {\n  direction: 'left' | 'right';\n  isVisible: boolean;\n  onClick: () => void;\n  onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n  const Icon =\n    direction === 'left'\n      ? ArrowLeftCircleIconOutline\n      : ArrowRightCircleIconOutline;\n  const positionClass =\n    direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n  return (\n    <div\n      className={classNames('ndl-scroll-item', positionClass, {\n        'ndl-scroll-item-hidden': !isVisible,\n        'ndl-scroll-item-on-background-default': onBackground === 'default',\n        'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n      })}\n    >\n      <button\n        tabIndex={-1}\n        className=\"ndl-scroll-icon-wrapper\"\n        onClick={onClick}\n        aria-hidden=\"true\"\n      >\n        <Icon className=\"ndl-scroll-icon\" />\n      </button>\n    </div>\n  );\n};\n\ntype TabId = string;\ntype Size = 'small' | 'large';\ntype Fill = 'underline' | 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n  /** The currently active tabId */\n  value: T;\n  /** Callback function triggered when a new tab is selected */\n  onChange: (e: T) => void;\n  /** The content dislayed in the tabs */\n  children: React.ReactNode | string;\n  /** The fill type of the tabs */\n  fill?: Fill;\n  /**  The size of the tabs */\n  size?: Size;\n  /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */\n  onBackground?: 'weak' | 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n  Pick<BaseTabsProps<T>, 'fill' | 'size' | 'onChange' | 'value'>\n> & {\n  registerTab: (tabId: T, ref: React.RefObject<HTMLElement | null>) => void;\n  unregisterTab: (tabId: T) => void;\n  scrollTabIntoView: (tabId: T) => void;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n\n  if (context === null) {\n    throw new Error('Tab used without context');\n  }\n\n  return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n  return {\n    'ndl-filled-tab': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-small': size === 'small',\n    'ndl-underline-tab': fill === 'underline',\n  };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n  children,\n  size = 'large',\n  fill = 'underline',\n  onChange,\n  value,\n  onBackground = 'weak',\n  className,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n  const tabRefs = useRef<Map<U, React.RefObject<HTMLElement | null>>>(\n    new Map(),\n  );\n  const containerRef = useRef<HTMLElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs([containerRef, ref]);\n\n  // Use the custom hook for scroll overflow behavior\n  const { scrollState, scrollToNextItem, checkOverflow } =\n    useTabsScrollOverflow(scrollContainerRef);\n\n  const registerTab = useCallback(\n    (tabId: U, tabRef: React.RefObject<HTMLElement | null>) => {\n      tabRefs.current.set(tabId, tabRef);\n    },\n    [],\n  );\n\n  const unregisterTab = useCallback((tabId: U) => {\n    tabRefs.current.delete(tabId);\n  }, []);\n\n  // Check overflow when children change\n  useEffect(() => {\n    checkOverflow();\n  }, [checkOverflow, children]);\n\n  const scrollTabIntoView = useCallback((tabId: U) => {\n    const tabRef = tabRefs.current.get(tabId);\n    const scrollContainer = scrollContainerRef.current;\n\n    if (tabRef?.current && scrollContainer) {\n      const tabRect = tabRef.current.getBoundingClientRect();\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      const targetScrollLeft =\n        scrollContainer.scrollLeft +\n        (tabRect.left - containerCenter + tabRect.width / 2);\n\n      scrollContainer.scrollTo({\n        behavior: 'smooth',\n        left: targetScrollLeft,\n      });\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n\n      event.preventDefault();\n\n      const tabIds = Array.from(tabRefs.current.keys());\n      const focusedElement = document.activeElement;\n\n      // Find the currently focused tab\n      let currentIndex = -1;\n      for (let i = 0; i < tabIds.length; i++) {\n        const tabRef = tabRefs.current.get(tabIds[i]);\n        if (tabRef?.current === focusedElement) {\n          currentIndex = i;\n          break;\n        }\n      }\n\n      // If no tab is focused, focus the active tab\n      if (currentIndex === -1) {\n        const activeTabRef = tabRefs.current.get(value);\n        if (activeTabRef?.current) {\n          activeTabRef.current.focus();\n        }\n        return;\n      }\n\n      let nextIndex: number;\n\n      if (event.key === 'ArrowRight') {\n        nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n      } else {\n        nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n      }\n\n      const nextTabId = tabIds[nextIndex];\n      const nextTabRef = tabRefs.current.get(nextTabId);\n\n      if (nextTabRef?.current) {\n        nextTabRef.current.focus();\n        scrollTabIntoView(nextTabId);\n      }\n    },\n    [value, scrollTabIntoView],\n  );\n\n  const classes = classNames(\n    'ndl-tabs',\n    getGeneralTabClasses(size, fill),\n    className,\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      onKeyDown={handleKeyDown}\n      ref={mergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ScrollButton\n        direction=\"left\"\n        isVisible={scrollState.isLeftVisible}\n        onClick={() => scrollToNextItem('left')}\n        onBackground={onBackground}\n      />\n      <ScrollButton\n        direction=\"right\"\n        isVisible={scrollState.isRightVisible}\n        onClick={() => scrollToNextItem('right')}\n        onBackground={onBackground}\n      />\n      <TabsContext.Provider\n        value={{\n          fill,\n          onChange,\n          registerTab,\n          scrollTabIntoView,\n          size,\n          unregisterTab,\n          value,\n        }}\n      >\n        <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n          {children}\n        </div>\n      </TabsContext.Provider>\n    </Component>\n  );\n};\n\nTabsComponent.displayName = 'Tabs';\n\ntype TabProps<T extends TabId> = {\n  /** The id of the tab */\n  id: T;\n  /** The content of the tab */\n  children: React.ReactNode | string;\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description?: string;\n  /** Props for the tooltip component. */\n  tooltipProps?: TooltipObjectProps;\n  /** Additional class name */\n  className?: string;\n  /** Whether the tab is disabled */\n  isDisabled?: boolean;\n};\n\nconst TabsTab = <\n  U extends TabId = TabId,\n  T extends React.ElementType = 'button',\n>({\n  children,\n  id: tabId,\n  isDisabled = false,\n  className,\n  description,\n  tooltipProps,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n  const {\n    size,\n    fill,\n    value,\n    onChange,\n    registerTab,\n    unregisterTab,\n    scrollTabIntoView,\n  } = useTabsContext();\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Create a merged ref that handles both ref objects and ref functions\n  const mergedRef = useMergeRefs([\n    internalRef as React.RefObject<HTMLElement>,\n    ref as React.RefObject<HTMLElement>,\n  ]);\n\n  // Register/unregister tab for keyboard navigation\n  useEffect(() => {\n    registerTab(tabId, internalRef);\n\n    return () => {\n      unregisterTab(tabId);\n    };\n  }, [tabId, registerTab, unregisterTab]);\n\n  const baseClasses = classNames({\n    ...getGeneralTabClasses(size, fill),\n    'ndl-disabled': isDisabled,\n    'ndl-selected': value === tabId,\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  const classes = classNames('ndl-tab', baseClasses, className);\n\n  // Only the active tab should be in the tab sequence initially\n  // Other tabs can be focused via arrow keys but are not in tab sequence\n  const tabIndex = value === tabId ? 0 : -1;\n\n  return (\n    <Tooltip\n      type=\"simple\"\n      {...tooltipProps?.root}\n      isDisabled={description === undefined}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          className={classes}\n          style={style}\n          onClick={() => {\n            if (!isDisabled) {\n              onChange(tabId);\n              scrollTabIntoView(tabId);\n            }\n          }}\n          role=\"tab\"\n          id={tabId}\n          aria-disabled={isDisabled}\n          aria-label={description}\n          aria-selected={value === tabId}\n          aria-controls={getTabPanelId(tabId)}\n          tabIndex={tabIndex}\n          ref={mergedRef}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n  /** The content displayed in the tab panel */\n  children: React.ReactNode;\n  /** The currently selected tabId. The tab is visible if the value is equal to the tabId */\n  value: TabId;\n  /** The id of the tab panel */\n  tabId: TabId;\n  /** Additional class name */\n  className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  value,\n  tabId,\n  style,\n  className,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <>\n      {value === tabId ? (\n        <Component\n          role=\"tabpanel\"\n          id={getTabPanelId(tabId)}\n          aria-labelledby={tabId}\n          style={style}\n          className={classNames(className)}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n        </Component>\n      ) : null}\n    </>\n  );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n  /** The content of the badge */\n  children: React.ReactNode;\n};\n\nconst TabBadge = ({\n  children,\n  ref,\n  htmlAttributes,\n  style,\n  className,\n  ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n  const classes = classNames('ndl-tab-badge', className);\n  return (\n    <Typography\n      ref={ref}\n      variant=\"subheading-small\"\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n  Badge: TabBadge,\n  Tab: TabsTab,\n  TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.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 { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport {\n  ArrowLeftCircleIconOutline,\n  ArrowRightCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n  direction,\n  isVisible,\n  onClick,\n  onBackground,\n}: {\n  direction: 'left' | 'right';\n  isVisible: boolean;\n  onClick: () => void;\n  onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n  const Icon =\n    direction === 'left'\n      ? ArrowLeftCircleIconOutline\n      : ArrowRightCircleIconOutline;\n  const positionClass =\n    direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n  return (\n    <div\n      className={classNames('ndl-scroll-item', positionClass, {\n        'ndl-scroll-item-hidden': !isVisible,\n        'ndl-scroll-item-on-background-default': onBackground === 'default',\n        'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n      })}\n    >\n      <button\n        tabIndex={-1}\n        className=\"ndl-scroll-icon-wrapper\"\n        onClick={onClick}\n        aria-hidden=\"true\"\n      >\n        <Icon className=\"ndl-scroll-icon\" />\n      </button>\n    </div>\n  );\n};\n\ntype TabId = string;\ntype Size = 'small' | 'large';\ntype Fill = 'underline' | 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n  /** The currently active tabId */\n  value: T;\n  /** Callback function triggered when a new tab is selected */\n  onChange: (e: T) => void;\n  /** The content dislayed in the tabs */\n  children: React.ReactNode | string;\n  /** The fill type of the tabs */\n  fill?: Fill;\n  /**  The size of the tabs */\n  size?: Size;\n  /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */\n  onBackground?: 'weak' | 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n  Pick<BaseTabsProps<T>, 'fill' | 'size' | 'onChange' | 'value'>\n> & {\n  registerTab: (tabId: T, ref: React.RefObject<HTMLElement | null>) => void;\n  unregisterTab: (tabId: T) => void;\n  scrollTabIntoView: (tabId: T) => void;\n  firstTabId: T | null;\n  isValuePresent: boolean;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n\n  if (context === null) {\n    throw new Error('Tab used without context');\n  }\n\n  return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n  return {\n    'ndl-filled-tab': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-small': size === 'small',\n    'ndl-underline-tab': fill === 'underline',\n  };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n  children,\n  size = 'large',\n  fill = 'underline',\n  onChange,\n  value,\n  onBackground = 'weak',\n  className,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n  const tabRefs = useRef<Map<U, React.RefObject<HTMLElement | null>>>(\n    new Map(),\n  );\n  const containerRef = useRef<HTMLElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs([containerRef, ref]);\n  const [firstTabId, setFirstTabId] = useState<U | null>(null);\n  const [isValuePresent, setIsValuePresent] = useState(false);\n  const valueRef = useRef(value);\n\n  // Use the custom hook for scroll overflow behavior\n  const { scrollState, scrollToNextItem, checkOverflow } =\n    useTabsScrollOverflow(scrollContainerRef);\n\n  useEffect(() => {\n    valueRef.current = value;\n    setIsValuePresent(tabRefs.current.has(value));\n  }, [value]);\n\n  const registerTab = useCallback(\n    (tabId: U, tabRef: React.RefObject<HTMLElement | null>) => {\n      tabRefs.current.set(tabId, tabRef);\n      const first = tabRefs.current.keys().next().value ?? null;\n      setFirstTabId((prev) => (prev === first ? prev : first));\n\n      if (tabId === valueRef.current) {\n        setIsValuePresent(true);\n      }\n    },\n    [],\n  );\n\n  const unregisterTab = useCallback((tabId: U) => {\n    tabRefs.current.delete(tabId);\n    const first = tabRefs.current.keys().next().value ?? null;\n    setFirstTabId((prev) => (prev === first ? prev : first));\n\n    if (tabId === valueRef.current) {\n      setIsValuePresent(false);\n    }\n  }, []);\n\n  // Check overflow when children change\n  useEffect(() => {\n    checkOverflow();\n  }, [checkOverflow, children]);\n\n  const scrollTabIntoView = useCallback((tabId: U) => {\n    const tabRef = tabRefs.current.get(tabId);\n    const scrollContainer = scrollContainerRef.current;\n\n    if (tabRef?.current && scrollContainer) {\n      const tabRect = tabRef.current.getBoundingClientRect();\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      const targetScrollLeft =\n        scrollContainer.scrollLeft +\n        (tabRect.left - containerCenter + tabRect.width / 2);\n\n      scrollContainer.scrollTo({\n        behavior: 'smooth',\n        left: targetScrollLeft,\n      });\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n\n      event.preventDefault();\n\n      const tabIds = Array.from(tabRefs.current.keys());\n      const focusedElement = document.activeElement;\n\n      // Find the currently focused tab\n      let currentIndex = -1;\n      for (let i = 0; i < tabIds.length; i++) {\n        const tabRef = tabRefs.current.get(tabIds[i]);\n        if (tabRef?.current === focusedElement) {\n          currentIndex = i;\n          break;\n        }\n      }\n\n      // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n      if (currentIndex === -1) {\n        const activeTabRef = tabRefs.current.get(value);\n        if (activeTabRef?.current) {\n          activeTabRef.current.focus();\n        } else if (!isValuePresent && firstTabId !== null) {\n          const firstTabRef = tabRefs.current.get(firstTabId);\n          if (firstTabRef?.current) {\n            firstTabRef.current.focus();\n          }\n        }\n        return;\n      }\n\n      let nextIndex: number;\n\n      if (event.key === 'ArrowRight') {\n        nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n      } else {\n        nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n      }\n\n      const nextTabId = tabIds[nextIndex];\n      const nextTabRef = tabRefs.current.get(nextTabId);\n\n      if (nextTabRef?.current) {\n        nextTabRef.current.focus();\n        scrollTabIntoView(nextTabId);\n      }\n    },\n    [value, scrollTabIntoView, firstTabId, isValuePresent],\n  );\n\n  const classes = classNames(\n    'ndl-tabs',\n    getGeneralTabClasses(size, fill),\n    className,\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      onKeyDown={handleKeyDown}\n      ref={mergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ScrollButton\n        direction=\"left\"\n        isVisible={scrollState.isLeftVisible}\n        onClick={() => scrollToNextItem('left')}\n        onBackground={onBackground}\n      />\n      <ScrollButton\n        direction=\"right\"\n        isVisible={scrollState.isRightVisible}\n        onClick={() => scrollToNextItem('right')}\n        onBackground={onBackground}\n      />\n      <TabsContext.Provider\n        value={{\n          fill,\n          firstTabId,\n          isValuePresent,\n          onChange,\n          registerTab,\n          scrollTabIntoView,\n          size,\n          unregisterTab,\n          value,\n        }}\n      >\n        <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n          {children}\n        </div>\n      </TabsContext.Provider>\n    </Component>\n  );\n};\n\nTabsComponent.displayName = 'Tabs';\n\ntype TabProps<T extends TabId> = {\n  /** The id of the tab */\n  id: T;\n  /** The content of the tab */\n  children: React.ReactNode | string;\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description?: string;\n  /** Props for the tooltip component. */\n  tooltipProps?: TooltipObjectProps;\n  /** Additional class name */\n  className?: string;\n  /** Whether the tab is disabled */\n  isDisabled?: boolean;\n};\n\nconst TabsTab = <\n  U extends TabId = TabId,\n  T extends React.ElementType = 'button',\n>({\n  children,\n  id: tabId,\n  isDisabled = false,\n  className,\n  description,\n  tooltipProps,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n  const {\n    size,\n    fill,\n    value,\n    onChange,\n    registerTab,\n    unregisterTab,\n    scrollTabIntoView,\n    firstTabId,\n    isValuePresent,\n  } = useTabsContext();\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Create a merged ref that handles both ref objects and ref functions\n  const mergedRef = useMergeRefs([\n    internalRef as React.RefObject<HTMLElement>,\n    ref as React.RefObject<HTMLElement>,\n  ]);\n\n  // Register/unregister tab for keyboard navigation\n  useEffect(() => {\n    registerTab(tabId, internalRef);\n\n    return () => {\n      unregisterTab(tabId);\n    };\n  }, [tabId, registerTab, unregisterTab]);\n\n  const baseClasses = classNames({\n    ...getGeneralTabClasses(size, fill),\n    'ndl-disabled': isDisabled,\n    'ndl-selected': value === tabId,\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  const classes = classNames('ndl-tab', baseClasses, className);\n\n  // Only the active tab should be in the tab sequence initially\n  // Other tabs can be focused via arrow keys but are not in tab sequence\n  const tabIndex =\n    value === tabId || (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n  return (\n    <Tooltip\n      type=\"simple\"\n      {...tooltipProps?.root}\n      isDisabled={description === undefined}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          className={classes}\n          style={style}\n          onClick={() => {\n            if (!isDisabled) {\n              onChange(tabId);\n              scrollTabIntoView(tabId);\n            }\n          }}\n          role=\"tab\"\n          id={tabId}\n          aria-disabled={isDisabled}\n          aria-label={description}\n          aria-selected={value === tabId}\n          aria-controls={getTabPanelId(tabId)}\n          tabIndex={tabIndex}\n          ref={mergedRef}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n  /** The content displayed in the tab panel */\n  children: React.ReactNode;\n  /** The currently selected tabId. The tab is visible if the value is equal to the tabId */\n  value: TabId;\n  /** The id of the tab panel */\n  tabId: TabId;\n  /** Additional class name */\n  className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  value,\n  tabId,\n  style,\n  className,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <>\n      {value === tabId ? (\n        <Component\n          role=\"tabpanel\"\n          id={getTabPanelId(tabId)}\n          aria-labelledby={tabId}\n          style={style}\n          className={classNames(className)}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n        </Component>\n      ) : null}\n    </>\n  );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n  /** The content of the badge */\n  children: React.ReactNode;\n};\n\nconst TabBadge = ({\n  children,\n  ref,\n  htmlAttributes,\n  style,\n  className,\n  ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n  const classes = classNames('ndl-tab-badge', className);\n  return (\n    <Typography\n      ref={ref}\n      variant=\"subheading-small\"\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n  Badge: TabBadge,\n  Tab: TabsTab,\n  TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}

package/lib/esm/graph-label/GraphLabel.js

@@ -46,7 +46,7 @@ const HexagonEnd = ({ direction = 'left', color, htmlAttributes, height = 24, })
         'ndl-left': direction === 'left',
         'ndl-right': direction === 'right',
     });
-    return (_jsxs("div", Object.assign({ className: classes }, htmlAttributes, { children: [_jsx("svg", { className: "ndl-hexagon-end-inner", width: "9", height: height, viewBox: "0 0 9 24", preserveAspectRatio: "none", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }), _jsx("svg", { className: "ndl-hexagon-end-active", width: "13", height: height + 6, viewBox: "0 0 13 30", preserveAspectRatio: "none", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z" }) })] })));
+    return (_jsxs("div", Object.assign({ className: classes }, htmlAttributes, { children: [_jsx("svg", { "aria-hidden": true, className: "ndl-hexagon-end-inner", fill: "none", height: height, preserveAspectRatio: "none", viewBox: "0 0 9 24", width: "9", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }), _jsx("svg", { "aria-hidden": true, className: "ndl-hexagon-end-active", fill: "none", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 13 30", width: "13", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z" }) })] })));
 };
 const SquareEnd = ({ direction = 'left', color, height = 24, htmlAttributes, }) => {
     const classes = classNames('ndl-square-end', {

package/lib/esm/graph-label/GraphLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.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 { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n  getDisabledTextColor,\n  getHoverColor,\n  getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n  /**  The type of label */\n  type:\n    | 'node'\n    | 'relationship'\n    | 'propertyKey'\n    | 'relationshipLeft'\n    | 'relationshipRight';\n  /** Callback function that is called when the label is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional styles to apply to the label */\n  style?: React.CSSProperties;\n  /** Content displayed inside the label */\n  children?: React.ReactNode;\n  /** The background color of the label */\n  color?: string;\n  /** Whether the label is disabled */\n  isDisabled?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Whether the label is selected */\n  isSelected?: boolean;\n  /** Whether the label should expand to full available width */\n  isFluid?: boolean;\n  /** The size of the label */\n  size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n  /** The direction of the hexagon end */\n  direction: 'left' | 'right';\n  /** The color of the hexagon end */\n  color?: string;\n  /** The height of the hexagon end in pixels */\n  height?: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n  height = 24,\n}: HexagonEndProps) => {\n  const classes = classNames('ndl-hexagon-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <svg\n        className=\"ndl-hexagon-end-inner\"\n        width=\"9\"\n        height={height}\n        viewBox=\"0 0 9 24\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* triangle */}\n        <path\n          style={{ fill: color }}\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n        />\n      </svg>\n      <svg\n        className=\"ndl-hexagon-end-active\"\n        width=\"13\"\n        height={height + 6}\n        viewBox=\"0 0 13 30\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype SquareEndProps = {\n  /** The direction of the square end (where it's rounded and has the active state) */\n  direction: 'left' | 'right';\n  /** The color of the square end */\n  color: string;\n  /** The height of the square end in pixels */\n  height: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n  direction = 'left',\n  color,\n  height = 24,\n  htmlAttributes,\n}: SquareEndProps) => {\n  const classes = classNames('ndl-square-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <div\n        className=\"ndl-square-end-inner\"\n        style={{ backgroundColor: color }}\n      />\n      <svg\n        className=\"ndl-square-end-active\"\n        width=\"7\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 7 30\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype HorizontalLinesProps = {\n  height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={height + 6}\n      preserveAspectRatio=\"none\"\n      viewBox=\"0 0 37 30\"\n      fill=\"none\"\n      className=\"ndl-relationship-label-lines\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n      />\n    </svg>\n  );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n  type = 'node',\n  color,\n  isDisabled = false,\n  isSelected = false,\n  as,\n  onClick,\n  className,\n  style,\n  children,\n  htmlAttributes,\n  isFluid = false,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n  const [isHover, setIsHover] = useState(false);\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(true);\n\n    if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n      htmlAttributes.onMouseEnter(event);\n    }\n  };\n\n  const handleMouseLeave = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(false);\n\n    htmlAttributes?.onMouseLeave?.(event);\n  };\n\n  const Component: React.ElementType = as ?? 'button';\n  const isButton = Component === 'button';\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    // By default, a <button /> element with disabled set to true will not get its\n    // on click handler called. To support the same behavior on <a /> tags we\n    // swallow the event here when disabled, since the <a /> tag with disabled set to\n    // true will have its onClick handler called\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  let backgroundColor = useMemo(() => {\n    if (color === undefined) {\n      switch (type) {\n        case 'node':\n          return tokens.graph['1'];\n        case 'relationship':\n        case 'relationshipLeft':\n        case 'relationshipRight':\n          return tokens.theme.light.color.neutral.bg.strong;\n        default:\n          return tokens.theme.light.color.neutral.bg.strongest;\n      }\n    }\n    return color;\n  }, [color, type]);\n\n  const hoverColor = useMemo(\n    () =>\n      getHoverColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const textColor = useMemo(\n    () =>\n      getTextColorFromBackground(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const disabledTextColor = useMemo(\n    () =>\n      getDisabledTextColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n\n  if (isHover && !isDisabled) {\n    backgroundColor = hoverColor;\n  }\n\n  const commonClasses = classNames('ndl-graph-label', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-interactable': isButton,\n    'ndl-selected': isSelected,\n    'ndl-small': size === 'small',\n  });\n\n  if (type === 'node') {\n    const classes = classNames('ndl-node-label', commonClasses);\n\n    return (\n      <Component\n        className={classes}\n        ref={ref}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-node-label-content\">{children}</div>\n      </Component>\n    );\n  } else if (\n    type === 'relationship' ||\n    type === 'relationshipLeft' ||\n    type === 'relationshipRight'\n  ) {\n    const classes = classNames('ndl-relationship-label', commonClasses);\n    const height = size === 'small' ? 20 : 24;\n\n    return (\n      <Component\n        style={{\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n          color: isDisabled ? disabledTextColor : textColor,\n        }}\n        className={classes}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {type === 'relationshipLeft' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"left\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n        )}\n        <div\n          className=\"ndl-relationship-label-container\"\n          style={{\n            backgroundColor: backgroundColor,\n          }}\n        >\n          <div className=\"ndl-relationship-label-content\">{children}</div>\n          <HorizontalLines height={height} />\n        </div>\n        {type === 'relationshipRight' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        )}\n      </Component>\n    );\n  } else {\n    const classes = classNames('ndl-property-key-label', commonClasses);\n\n    return (\n      <Component\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        className={classes}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        ref={ref}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-property-key-label-content\">{children}</div>\n      </Component>\n    );\n  }\n};\n"]}
+{"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.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 { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n  getDisabledTextColor,\n  getHoverColor,\n  getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n  /**  The type of label */\n  type:\n    | 'node'\n    | 'relationship'\n    | 'propertyKey'\n    | 'relationshipLeft'\n    | 'relationshipRight';\n  /** Callback function that is called when the label is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional styles to apply to the label */\n  style?: React.CSSProperties;\n  /** Content displayed inside the label */\n  children?: React.ReactNode;\n  /** The background color of the label */\n  color?: string;\n  /** Whether the label is disabled */\n  isDisabled?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Whether the label is selected */\n  isSelected?: boolean;\n  /** Whether the label should expand to full available width */\n  isFluid?: boolean;\n  /** The size of the label */\n  size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n  /** The direction of the hexagon end */\n  direction: 'left' | 'right';\n  /** The color of the hexagon end */\n  color?: string;\n  /** The height of the hexagon end in pixels */\n  height?: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n  height = 24,\n}: HexagonEndProps) => {\n  const classes = classNames('ndl-hexagon-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-inner\"\n        fill=\"none\"\n        height={height}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 9 24\"\n        width=\"9\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* triangle */}\n        <path\n          style={{ fill: color }}\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n        />\n      </svg>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-active\"\n        fill=\"none\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 13 30\"\n        width=\"13\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype SquareEndProps = {\n  /** The direction of the square end (where it's rounded and has the active state) */\n  direction: 'left' | 'right';\n  /** The color of the square end */\n  color: string;\n  /** The height of the square end in pixels */\n  height: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n  direction = 'left',\n  color,\n  height = 24,\n  htmlAttributes,\n}: SquareEndProps) => {\n  const classes = classNames('ndl-square-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <div\n        className=\"ndl-square-end-inner\"\n        style={{ backgroundColor: color }}\n      />\n      <svg\n        className=\"ndl-square-end-active\"\n        width=\"7\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 7 30\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype HorizontalLinesProps = {\n  height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={height + 6}\n      preserveAspectRatio=\"none\"\n      viewBox=\"0 0 37 30\"\n      fill=\"none\"\n      className=\"ndl-relationship-label-lines\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n      />\n    </svg>\n  );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n  type = 'node',\n  color,\n  isDisabled = false,\n  isSelected = false,\n  as,\n  onClick,\n  className,\n  style,\n  children,\n  htmlAttributes,\n  isFluid = false,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n  const [isHover, setIsHover] = useState(false);\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(true);\n\n    if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n      htmlAttributes.onMouseEnter(event);\n    }\n  };\n\n  const handleMouseLeave = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(false);\n\n    htmlAttributes?.onMouseLeave?.(event);\n  };\n\n  const Component: React.ElementType = as ?? 'button';\n  const isButton = Component === 'button';\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    // By default, a <button /> element with disabled set to true will not get its\n    // on click handler called. To support the same behavior on <a /> tags we\n    // swallow the event here when disabled, since the <a /> tag with disabled set to\n    // true will have its onClick handler called\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  let backgroundColor = useMemo(() => {\n    if (color === undefined) {\n      switch (type) {\n        case 'node':\n          return tokens.graph['1'];\n        case 'relationship':\n        case 'relationshipLeft':\n        case 'relationshipRight':\n          return tokens.theme.light.color.neutral.bg.strong;\n        default:\n          return tokens.theme.light.color.neutral.bg.strongest;\n      }\n    }\n    return color;\n  }, [color, type]);\n\n  const hoverColor = useMemo(\n    () =>\n      getHoverColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const textColor = useMemo(\n    () =>\n      getTextColorFromBackground(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const disabledTextColor = useMemo(\n    () =>\n      getDisabledTextColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n\n  if (isHover && !isDisabled) {\n    backgroundColor = hoverColor;\n  }\n\n  const commonClasses = classNames('ndl-graph-label', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-interactable': isButton,\n    'ndl-selected': isSelected,\n    'ndl-small': size === 'small',\n  });\n\n  if (type === 'node') {\n    const classes = classNames('ndl-node-label', commonClasses);\n\n    return (\n      <Component\n        className={classes}\n        ref={ref}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-node-label-content\">{children}</div>\n      </Component>\n    );\n  } else if (\n    type === 'relationship' ||\n    type === 'relationshipLeft' ||\n    type === 'relationshipRight'\n  ) {\n    const classes = classNames('ndl-relationship-label', commonClasses);\n    const height = size === 'small' ? 20 : 24;\n\n    return (\n      <Component\n        style={{\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n          color: isDisabled ? disabledTextColor : textColor,\n        }}\n        className={classes}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n        })}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {type === 'relationshipLeft' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"left\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n        )}\n        <div\n          className=\"ndl-relationship-label-container\"\n          style={{\n            backgroundColor: backgroundColor,\n          }}\n        >\n          <div className=\"ndl-relationship-label-content\">{children}</div>\n          <HorizontalLines height={height} />\n        </div>\n        {type === 'relationshipRight' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        )}\n      </Component>\n    );\n  } else {\n    const classes = classNames('ndl-property-key-label', commonClasses);\n\n    return (\n      <Component\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        className={classes}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        ref={ref}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-property-key-label-content\">{children}</div>\n      </Component>\n    );\n  }\n};\n"]}

package/lib/esm/tabs/Tabs.js

@@ -32,7 +32,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useMergeRefs } from '@floating-ui/react';
 import classNames from 'classnames';
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { ArrowLeftCircleIconOutline, ArrowRightCircleIconOutline, } from '../icons';
 import { Tooltip } from '../tooltip';
 import { Typography } from '../typography';
@@ -73,13 +73,32 @@ const TabsComponent = (_a) => {
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
     const mergedRef = useMergeRefs([containerRef, ref]);
+    const [firstTabId, setFirstTabId] = useState(null);
+    const [isValuePresent, setIsValuePresent] = useState(false);
+    const valueRef = useRef(value);
     // Use the custom hook for scroll overflow behavior
     const { scrollState, scrollToNextItem, checkOverflow } = useTabsScrollOverflow(scrollContainerRef);
+    useEffect(() => {
+        valueRef.current = value;
+        setIsValuePresent(tabRefs.current.has(value));
+    }, [value]);
     const registerTab = useCallback((tabId, tabRef) => {
+        var _a;
         tabRefs.current.set(tabId, tabRef);
+        const first = (_a = tabRefs.current.keys().next().value) !== null && _a !== void 0 ? _a : null;
+        setFirstTabId((prev) => (prev === first ? prev : first));
+        if (tabId === valueRef.current) {
+            setIsValuePresent(true);
+        }
     }, []);
     const unregisterTab = useCallback((tabId) => {
+        var _a;
         tabRefs.current.delete(tabId);
+        const first = (_a = tabRefs.current.keys().next().value) !== null && _a !== void 0 ? _a : null;
+        setFirstTabId((prev) => (prev === first ? prev : first));
+        if (tabId === valueRef.current) {
+            setIsValuePresent(false);
+        }
     }, []);
     // Check overflow when children change
     useEffect(() => {
@@ -116,12 +135,18 @@ const TabsComponent = (_a) => {
                 break;
             }
         }
-        // If no tab is focused, focus the active tab
+        // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.
         if (currentIndex === -1) {
             const activeTabRef = tabRefs.current.get(value);
             if (activeTabRef === null || activeTabRef === void 0 ? void 0 : activeTabRef.current) {
                 activeTabRef.current.focus();
             }
+            else if (!isValuePresent && firstTabId !== null) {
+                const firstTabRef = tabRefs.current.get(firstTabId);
+                if (firstTabRef === null || firstTabRef === void 0 ? void 0 : firstTabRef.current) {
+                    firstTabRef.current.focus();
+                }
+            }
             return;
         }
         let nextIndex;
@@ -137,11 +162,13 @@ const TabsComponent = (_a) => {
             nextTabRef.current.focus();
             scrollTabIntoView(nextTabId);
         }
-    }, [value, scrollTabIntoView]);
+    }, [value, scrollTabIntoView, firstTabId, isValuePresent]);
     const classes = classNames('ndl-tabs', getGeneralTabClasses(size, fill), className);
     const Component = as !== null && as !== void 0 ? as : 'div';
     return (_jsxs(Component, Object.assign({ className: classes, style: style, role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, ref: mergedRef }, restProps, htmlAttributes, { children: [_jsx(ScrollButton, { direction: "left", isVisible: scrollState.isLeftVisible, onClick: () => scrollToNextItem('left'), onBackground: onBackground }), _jsx(ScrollButton, { direction: "right", isVisible: scrollState.isRightVisible, onClick: () => scrollToNextItem('right'), onBackground: onBackground }), _jsx(TabsContext.Provider, { value: {
                     fill,
+                    firstTabId,
+                    isValuePresent,
                     onChange,
                     registerTab,
                     scrollTabIntoView,
@@ -153,7 +180,7 @@ const TabsComponent = (_a) => {
 TabsComponent.displayName = 'Tabs';
 const TabsTab = (_a) => {
     var { children, id: tabId, isDisabled = false, className, description, tooltipProps, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "description", "tooltipProps", "style", "as", "htmlAttributes", "ref"]);
-    const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, } = useTabsContext();
+    const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, firstTabId, isValuePresent, } = useTabsContext();
     const internalRef = useRef(null);
     // Create a merged ref that handles both ref objects and ref functions
     const mergedRef = useMergeRefs([
@@ -172,7 +199,7 @@ const TabsTab = (_a) => {
     const classes = classNames('ndl-tab', baseClasses, className);
     // Only the active tab should be in the tab sequence initially
     // Other tabs can be focused via arrow keys but are not in tab sequence
-    const tabIndex = value === tabId ? 0 : -1;
+    const tabIndex = value === tabId || (!isValuePresent && tabId === firstTabId) ? 0 : -1;
     return (_jsxs(Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { isDisabled: description === undefined, children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsxs(Component, Object.assign({ className: classes, style: style, onClick: () => {
                         if (!isDisabled) {
                             onChange(tabId);

package/lib/esm/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.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 { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useCallback, useContext, useEffect, useRef } from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport {\n  ArrowLeftCircleIconOutline,\n  ArrowRightCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n  direction,\n  isVisible,\n  onClick,\n  onBackground,\n}: {\n  direction: 'left' | 'right';\n  isVisible: boolean;\n  onClick: () => void;\n  onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n  const Icon =\n    direction === 'left'\n      ? ArrowLeftCircleIconOutline\n      : ArrowRightCircleIconOutline;\n  const positionClass =\n    direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n  return (\n    <div\n      className={classNames('ndl-scroll-item', positionClass, {\n        'ndl-scroll-item-hidden': !isVisible,\n        'ndl-scroll-item-on-background-default': onBackground === 'default',\n        'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n      })}\n    >\n      <button\n        tabIndex={-1}\n        className=\"ndl-scroll-icon-wrapper\"\n        onClick={onClick}\n        aria-hidden=\"true\"\n      >\n        <Icon className=\"ndl-scroll-icon\" />\n      </button>\n    </div>\n  );\n};\n\ntype TabId = string;\ntype Size = 'small' | 'large';\ntype Fill = 'underline' | 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n  /** The currently active tabId */\n  value: T;\n  /** Callback function triggered when a new tab is selected */\n  onChange: (e: T) => void;\n  /** The content dislayed in the tabs */\n  children: React.ReactNode | string;\n  /** The fill type of the tabs */\n  fill?: Fill;\n  /**  The size of the tabs */\n  size?: Size;\n  /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */\n  onBackground?: 'weak' | 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n  Pick<BaseTabsProps<T>, 'fill' | 'size' | 'onChange' | 'value'>\n> & {\n  registerTab: (tabId: T, ref: React.RefObject<HTMLElement | null>) => void;\n  unregisterTab: (tabId: T) => void;\n  scrollTabIntoView: (tabId: T) => void;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n\n  if (context === null) {\n    throw new Error('Tab used without context');\n  }\n\n  return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n  return {\n    'ndl-filled-tab': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-small': size === 'small',\n    'ndl-underline-tab': fill === 'underline',\n  };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n  children,\n  size = 'large',\n  fill = 'underline',\n  onChange,\n  value,\n  onBackground = 'weak',\n  className,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n  const tabRefs = useRef<Map<U, React.RefObject<HTMLElement | null>>>(\n    new Map(),\n  );\n  const containerRef = useRef<HTMLElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs([containerRef, ref]);\n\n  // Use the custom hook for scroll overflow behavior\n  const { scrollState, scrollToNextItem, checkOverflow } =\n    useTabsScrollOverflow(scrollContainerRef);\n\n  const registerTab = useCallback(\n    (tabId: U, tabRef: React.RefObject<HTMLElement | null>) => {\n      tabRefs.current.set(tabId, tabRef);\n    },\n    [],\n  );\n\n  const unregisterTab = useCallback((tabId: U) => {\n    tabRefs.current.delete(tabId);\n  }, []);\n\n  // Check overflow when children change\n  useEffect(() => {\n    checkOverflow();\n  }, [checkOverflow, children]);\n\n  const scrollTabIntoView = useCallback((tabId: U) => {\n    const tabRef = tabRefs.current.get(tabId);\n    const scrollContainer = scrollContainerRef.current;\n\n    if (tabRef?.current && scrollContainer) {\n      const tabRect = tabRef.current.getBoundingClientRect();\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      const targetScrollLeft =\n        scrollContainer.scrollLeft +\n        (tabRect.left - containerCenter + tabRect.width / 2);\n\n      scrollContainer.scrollTo({\n        behavior: 'smooth',\n        left: targetScrollLeft,\n      });\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n\n      event.preventDefault();\n\n      const tabIds = Array.from(tabRefs.current.keys());\n      const focusedElement = document.activeElement;\n\n      // Find the currently focused tab\n      let currentIndex = -1;\n      for (let i = 0; i < tabIds.length; i++) {\n        const tabRef = tabRefs.current.get(tabIds[i]);\n        if (tabRef?.current === focusedElement) {\n          currentIndex = i;\n          break;\n        }\n      }\n\n      // If no tab is focused, focus the active tab\n      if (currentIndex === -1) {\n        const activeTabRef = tabRefs.current.get(value);\n        if (activeTabRef?.current) {\n          activeTabRef.current.focus();\n        }\n        return;\n      }\n\n      let nextIndex: number;\n\n      if (event.key === 'ArrowRight') {\n        nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n      } else {\n        nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n      }\n\n      const nextTabId = tabIds[nextIndex];\n      const nextTabRef = tabRefs.current.get(nextTabId);\n\n      if (nextTabRef?.current) {\n        nextTabRef.current.focus();\n        scrollTabIntoView(nextTabId);\n      }\n    },\n    [value, scrollTabIntoView],\n  );\n\n  const classes = classNames(\n    'ndl-tabs',\n    getGeneralTabClasses(size, fill),\n    className,\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      onKeyDown={handleKeyDown}\n      ref={mergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ScrollButton\n        direction=\"left\"\n        isVisible={scrollState.isLeftVisible}\n        onClick={() => scrollToNextItem('left')}\n        onBackground={onBackground}\n      />\n      <ScrollButton\n        direction=\"right\"\n        isVisible={scrollState.isRightVisible}\n        onClick={() => scrollToNextItem('right')}\n        onBackground={onBackground}\n      />\n      <TabsContext.Provider\n        value={{\n          fill,\n          onChange,\n          registerTab,\n          scrollTabIntoView,\n          size,\n          unregisterTab,\n          value,\n        }}\n      >\n        <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n          {children}\n        </div>\n      </TabsContext.Provider>\n    </Component>\n  );\n};\n\nTabsComponent.displayName = 'Tabs';\n\ntype TabProps<T extends TabId> = {\n  /** The id of the tab */\n  id: T;\n  /** The content of the tab */\n  children: React.ReactNode | string;\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description?: string;\n  /** Props for the tooltip component. */\n  tooltipProps?: TooltipObjectProps;\n  /** Additional class name */\n  className?: string;\n  /** Whether the tab is disabled */\n  isDisabled?: boolean;\n};\n\nconst TabsTab = <\n  U extends TabId = TabId,\n  T extends React.ElementType = 'button',\n>({\n  children,\n  id: tabId,\n  isDisabled = false,\n  className,\n  description,\n  tooltipProps,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n  const {\n    size,\n    fill,\n    value,\n    onChange,\n    registerTab,\n    unregisterTab,\n    scrollTabIntoView,\n  } = useTabsContext();\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Create a merged ref that handles both ref objects and ref functions\n  const mergedRef = useMergeRefs([\n    internalRef as React.RefObject<HTMLElement>,\n    ref as React.RefObject<HTMLElement>,\n  ]);\n\n  // Register/unregister tab for keyboard navigation\n  useEffect(() => {\n    registerTab(tabId, internalRef);\n\n    return () => {\n      unregisterTab(tabId);\n    };\n  }, [tabId, registerTab, unregisterTab]);\n\n  const baseClasses = classNames({\n    ...getGeneralTabClasses(size, fill),\n    'ndl-disabled': isDisabled,\n    'ndl-selected': value === tabId,\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  const classes = classNames('ndl-tab', baseClasses, className);\n\n  // Only the active tab should be in the tab sequence initially\n  // Other tabs can be focused via arrow keys but are not in tab sequence\n  const tabIndex = value === tabId ? 0 : -1;\n\n  return (\n    <Tooltip\n      type=\"simple\"\n      {...tooltipProps?.root}\n      isDisabled={description === undefined}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          className={classes}\n          style={style}\n          onClick={() => {\n            if (!isDisabled) {\n              onChange(tabId);\n              scrollTabIntoView(tabId);\n            }\n          }}\n          role=\"tab\"\n          id={tabId}\n          aria-disabled={isDisabled}\n          aria-label={description}\n          aria-selected={value === tabId}\n          aria-controls={getTabPanelId(tabId)}\n          tabIndex={tabIndex}\n          ref={mergedRef}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n  /** The content displayed in the tab panel */\n  children: React.ReactNode;\n  /** The currently selected tabId. The tab is visible if the value is equal to the tabId */\n  value: TabId;\n  /** The id of the tab panel */\n  tabId: TabId;\n  /** Additional class name */\n  className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  value,\n  tabId,\n  style,\n  className,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <>\n      {value === tabId ? (\n        <Component\n          role=\"tabpanel\"\n          id={getTabPanelId(tabId)}\n          aria-labelledby={tabId}\n          style={style}\n          className={classNames(className)}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n        </Component>\n      ) : null}\n    </>\n  );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n  /** The content of the badge */\n  children: React.ReactNode;\n};\n\nconst TabBadge = ({\n  children,\n  ref,\n  htmlAttributes,\n  style,\n  className,\n  ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n  const classes = classNames('ndl-tab-badge', className);\n  return (\n    <Typography\n      ref={ref}\n      variant=\"subheading-small\"\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n  Badge: TabBadge,\n  Tab: TabsTab,\n  TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.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 { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport {\n  ArrowLeftCircleIconOutline,\n  ArrowRightCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n  direction,\n  isVisible,\n  onClick,\n  onBackground,\n}: {\n  direction: 'left' | 'right';\n  isVisible: boolean;\n  onClick: () => void;\n  onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n  const Icon =\n    direction === 'left'\n      ? ArrowLeftCircleIconOutline\n      : ArrowRightCircleIconOutline;\n  const positionClass =\n    direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n  return (\n    <div\n      className={classNames('ndl-scroll-item', positionClass, {\n        'ndl-scroll-item-hidden': !isVisible,\n        'ndl-scroll-item-on-background-default': onBackground === 'default',\n        'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n      })}\n    >\n      <button\n        tabIndex={-1}\n        className=\"ndl-scroll-icon-wrapper\"\n        onClick={onClick}\n        aria-hidden=\"true\"\n      >\n        <Icon className=\"ndl-scroll-icon\" />\n      </button>\n    </div>\n  );\n};\n\ntype TabId = string;\ntype Size = 'small' | 'large';\ntype Fill = 'underline' | 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n  /** The currently active tabId */\n  value: T;\n  /** Callback function triggered when a new tab is selected */\n  onChange: (e: T) => void;\n  /** The content dislayed in the tabs */\n  children: React.ReactNode | string;\n  /** The fill type of the tabs */\n  fill?: Fill;\n  /**  The size of the tabs */\n  size?: Size;\n  /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */\n  onBackground?: 'weak' | 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n  Pick<BaseTabsProps<T>, 'fill' | 'size' | 'onChange' | 'value'>\n> & {\n  registerTab: (tabId: T, ref: React.RefObject<HTMLElement | null>) => void;\n  unregisterTab: (tabId: T) => void;\n  scrollTabIntoView: (tabId: T) => void;\n  firstTabId: T | null;\n  isValuePresent: boolean;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n\n  if (context === null) {\n    throw new Error('Tab used without context');\n  }\n\n  return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n  return {\n    'ndl-filled-tab': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-small': size === 'small',\n    'ndl-underline-tab': fill === 'underline',\n  };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n  children,\n  size = 'large',\n  fill = 'underline',\n  onChange,\n  value,\n  onBackground = 'weak',\n  className,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n  const tabRefs = useRef<Map<U, React.RefObject<HTMLElement | null>>>(\n    new Map(),\n  );\n  const containerRef = useRef<HTMLElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs([containerRef, ref]);\n  const [firstTabId, setFirstTabId] = useState<U | null>(null);\n  const [isValuePresent, setIsValuePresent] = useState(false);\n  const valueRef = useRef(value);\n\n  // Use the custom hook for scroll overflow behavior\n  const { scrollState, scrollToNextItem, checkOverflow } =\n    useTabsScrollOverflow(scrollContainerRef);\n\n  useEffect(() => {\n    valueRef.current = value;\n    setIsValuePresent(tabRefs.current.has(value));\n  }, [value]);\n\n  const registerTab = useCallback(\n    (tabId: U, tabRef: React.RefObject<HTMLElement | null>) => {\n      tabRefs.current.set(tabId, tabRef);\n      const first = tabRefs.current.keys().next().value ?? null;\n      setFirstTabId((prev) => (prev === first ? prev : first));\n\n      if (tabId === valueRef.current) {\n        setIsValuePresent(true);\n      }\n    },\n    [],\n  );\n\n  const unregisterTab = useCallback((tabId: U) => {\n    tabRefs.current.delete(tabId);\n    const first = tabRefs.current.keys().next().value ?? null;\n    setFirstTabId((prev) => (prev === first ? prev : first));\n\n    if (tabId === valueRef.current) {\n      setIsValuePresent(false);\n    }\n  }, []);\n\n  // Check overflow when children change\n  useEffect(() => {\n    checkOverflow();\n  }, [checkOverflow, children]);\n\n  const scrollTabIntoView = useCallback((tabId: U) => {\n    const tabRef = tabRefs.current.get(tabId);\n    const scrollContainer = scrollContainerRef.current;\n\n    if (tabRef?.current && scrollContainer) {\n      const tabRect = tabRef.current.getBoundingClientRect();\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      const targetScrollLeft =\n        scrollContainer.scrollLeft +\n        (tabRect.left - containerCenter + tabRect.width / 2);\n\n      scrollContainer.scrollTo({\n        behavior: 'smooth',\n        left: targetScrollLeft,\n      });\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n\n      event.preventDefault();\n\n      const tabIds = Array.from(tabRefs.current.keys());\n      const focusedElement = document.activeElement;\n\n      // Find the currently focused tab\n      let currentIndex = -1;\n      for (let i = 0; i < tabIds.length; i++) {\n        const tabRef = tabRefs.current.get(tabIds[i]);\n        if (tabRef?.current === focusedElement) {\n          currentIndex = i;\n          break;\n        }\n      }\n\n      // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n      if (currentIndex === -1) {\n        const activeTabRef = tabRefs.current.get(value);\n        if (activeTabRef?.current) {\n          activeTabRef.current.focus();\n        } else if (!isValuePresent && firstTabId !== null) {\n          const firstTabRef = tabRefs.current.get(firstTabId);\n          if (firstTabRef?.current) {\n            firstTabRef.current.focus();\n          }\n        }\n        return;\n      }\n\n      let nextIndex: number;\n\n      if (event.key === 'ArrowRight') {\n        nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n      } else {\n        nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n      }\n\n      const nextTabId = tabIds[nextIndex];\n      const nextTabRef = tabRefs.current.get(nextTabId);\n\n      if (nextTabRef?.current) {\n        nextTabRef.current.focus();\n        scrollTabIntoView(nextTabId);\n      }\n    },\n    [value, scrollTabIntoView, firstTabId, isValuePresent],\n  );\n\n  const classes = classNames(\n    'ndl-tabs',\n    getGeneralTabClasses(size, fill),\n    className,\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      onKeyDown={handleKeyDown}\n      ref={mergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ScrollButton\n        direction=\"left\"\n        isVisible={scrollState.isLeftVisible}\n        onClick={() => scrollToNextItem('left')}\n        onBackground={onBackground}\n      />\n      <ScrollButton\n        direction=\"right\"\n        isVisible={scrollState.isRightVisible}\n        onClick={() => scrollToNextItem('right')}\n        onBackground={onBackground}\n      />\n      <TabsContext.Provider\n        value={{\n          fill,\n          firstTabId,\n          isValuePresent,\n          onChange,\n          registerTab,\n          scrollTabIntoView,\n          size,\n          unregisterTab,\n          value,\n        }}\n      >\n        <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n          {children}\n        </div>\n      </TabsContext.Provider>\n    </Component>\n  );\n};\n\nTabsComponent.displayName = 'Tabs';\n\ntype TabProps<T extends TabId> = {\n  /** The id of the tab */\n  id: T;\n  /** The content of the tab */\n  children: React.ReactNode | string;\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description?: string;\n  /** Props for the tooltip component. */\n  tooltipProps?: TooltipObjectProps;\n  /** Additional class name */\n  className?: string;\n  /** Whether the tab is disabled */\n  isDisabled?: boolean;\n};\n\nconst TabsTab = <\n  U extends TabId = TabId,\n  T extends React.ElementType = 'button',\n>({\n  children,\n  id: tabId,\n  isDisabled = false,\n  className,\n  description,\n  tooltipProps,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n  const {\n    size,\n    fill,\n    value,\n    onChange,\n    registerTab,\n    unregisterTab,\n    scrollTabIntoView,\n    firstTabId,\n    isValuePresent,\n  } = useTabsContext();\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Create a merged ref that handles both ref objects and ref functions\n  const mergedRef = useMergeRefs([\n    internalRef as React.RefObject<HTMLElement>,\n    ref as React.RefObject<HTMLElement>,\n  ]);\n\n  // Register/unregister tab for keyboard navigation\n  useEffect(() => {\n    registerTab(tabId, internalRef);\n\n    return () => {\n      unregisterTab(tabId);\n    };\n  }, [tabId, registerTab, unregisterTab]);\n\n  const baseClasses = classNames({\n    ...getGeneralTabClasses(size, fill),\n    'ndl-disabled': isDisabled,\n    'ndl-selected': value === tabId,\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  const classes = classNames('ndl-tab', baseClasses, className);\n\n  // Only the active tab should be in the tab sequence initially\n  // Other tabs can be focused via arrow keys but are not in tab sequence\n  const tabIndex =\n    value === tabId || (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n  return (\n    <Tooltip\n      type=\"simple\"\n      {...tooltipProps?.root}\n      isDisabled={description === undefined}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          className={classes}\n          style={style}\n          onClick={() => {\n            if (!isDisabled) {\n              onChange(tabId);\n              scrollTabIntoView(tabId);\n            }\n          }}\n          role=\"tab\"\n          id={tabId}\n          aria-disabled={isDisabled}\n          aria-label={description}\n          aria-selected={value === tabId}\n          aria-controls={getTabPanelId(tabId)}\n          tabIndex={tabIndex}\n          ref={mergedRef}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n  /** The content displayed in the tab panel */\n  children: React.ReactNode;\n  /** The currently selected tabId. The tab is visible if the value is equal to the tabId */\n  value: TabId;\n  /** The id of the tab panel */\n  tabId: TabId;\n  /** Additional class name */\n  className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  value,\n  tabId,\n  style,\n  className,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <>\n      {value === tabId ? (\n        <Component\n          role=\"tabpanel\"\n          id={getTabPanelId(tabId)}\n          aria-labelledby={tabId}\n          style={style}\n          className={classNames(className)}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n        </Component>\n      ) : null}\n    </>\n  );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n  /** The content of the badge */\n  children: React.ReactNode;\n};\n\nconst TabBadge = ({\n  children,\n  ref,\n  htmlAttributes,\n  style,\n  className,\n  ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n  const classes = classNames('ndl-tab-badge', className);\n  return (\n    <Typography\n      ref={ref}\n      variant=\"subheading-small\"\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n  Badge: TabBadge,\n  Tab: TabsTab,\n  TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}

package/lib/types/graph-label/GraphLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLabel.d.ts","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B;;;;;;GAMG;AAEH,KAAK,eAAe,GAAG;IACrB,yBAAyB;IACzB,IAAI,EACA,MAAM,GACN,cAAc,GACd,aAAa,GACb,kBAAkB,GAClB,mBAAmB,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,8CAA8C;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B,CAAC;AA0JF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,oIAehE,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,4CAoM5C,CAAC"}
+{"version":3,"file":"GraphLabel.d.ts","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B;;;;;;GAMG;AAEH,KAAK,eAAe,GAAG;IACrB,yBAAyB;IACzB,IAAI,EACA,MAAM,GACN,cAAc,GACd,aAAa,GACb,kBAAkB,GAClB,mBAAmB,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,8CAA8C;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B,CAAC;AA4JF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,oIAehE,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,4CAoM5C,CAAC"}

package/lib/types/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAgD1B,KAAK,KAAK,GAAG,MAAM,CAAC;AACpB,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAC9B,KAAK,IAAI,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEnC,KAAK,aAAa,CAAC,CAAC,SAAS,KAAK,IAAI;IACpC,iCAAiC;IACjC,KAAK,EAAE,CAAC,CAAC;IACT,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oHAAoH;IACpH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC,CAAC;AAoMF,KAAK,QAAQ,CAAC,CAAC,SAAS,KAAK,IAAI;IAC/B,wBAAwB;IACxB,EAAE,EAAE,CAAC,CAAC;IACN,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,2MAA2M;IAC3M,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAkGF,KAAK,aAAa,GAAG;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,KAAK,EAAE,KAAK,CAAC;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAqCF,KAAK,aAAa,GAAG;IACnB,+BAA+B;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAyBF,QAAA,MAAM,IAAI;KA3Va,CAAC,SAAS,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,4HAahE,sBAAsB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;;;+EA8T3C,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC;;SAzJnC,CAAC,SAAS,KAAK,WACf,CAAC,SAAS,KAAK,CAAC,WAAW,sIAa1B,sBAAsB,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;;;;SA4FnB,CAAC,SAAS,KAAK,CAAC,WAAW,+FAU9C,sBAAsB,CAAC,CAAC,EAAE,aAAa,CAAC;;;CAyDzC,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAgD1B,KAAK,KAAK,GAAG,MAAM,CAAC;AACpB,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAC9B,KAAK,IAAI,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEnC,KAAK,aAAa,CAAC,CAAC,SAAS,KAAK,IAAI;IACpC,iCAAiC;IACjC,KAAK,EAAE,CAAC,CAAC;IACT,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oHAAoH;IACpH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC,CAAC;AAiOF,KAAK,QAAQ,CAAC,CAAC,SAAS,KAAK,IAAI;IAC/B,wBAAwB;IACxB,EAAE,EAAE,CAAC,CAAC;IACN,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,2MAA2M;IAC3M,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAqGF,KAAK,aAAa,GAAG;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,KAAK,EAAE,KAAK,CAAC;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAqCF,KAAK,aAAa,GAAG;IACnB,+BAA+B;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAyBF,QAAA,MAAM,IAAI;KAzXa,CAAC,SAAS,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,4HAahE,sBAAsB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;;;+EA4V3C,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC;;SA5JnC,CAAC,SAAS,KAAK,WACf,CAAC,SAAS,KAAK,CAAC,WAAW,sIAa1B,sBAAsB,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;;;;SA+FnB,CAAC,SAAS,KAAK,CAAC,WAAW,+FAU9C,sBAAsB,CAAC,CAAC,EAAE,aAAa,CAAC;;;CAyDzC,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.2.3",
+  "version": "4.2.5",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [