@neo4j-ndl/react 4.25.2 → 4.25.3

package/lib/esm/accordion/Accordion.js

@@ -185,8 +185,8 @@ const BaseAccordionItem = ({ itemId, children, title, className = '', arrowPosit
         'ndl-accordion-item-content-leading': arrowPosition === 'leading',
     });
     return (_jsxs(Component, Object.assign({ className: classes, style: style, id: itemElementId }, htmlAttributes, { children: [_jsxs("div", { className: headerClasses, id: headerElementId, children: [_jsx(Typography, { as: `h${headingLevel}`, variant: titleTypographyVariant, className: "ndl-accordion-item-heading", children: _jsx("button", { type: "button", id: buttonElementId, onClick: handleOnClick, className: buttonClasses, "aria-expanded": isExpanded, "aria-disabled": isDisabled, "aria-controls": panelElementId, disabled: isDisabled, children: _jsxs("span", { className: iconClasses, children: [_jsx("span", { className: titleClasses, children: title }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-accordion-item-header-icon', {
-                                            '-n-rotate-180': isExpanded,
-                                        }) })] }) }) }), trailingContent && (_jsx(Typography, { as: "div", variant: "body-medium", children: trailingContent }))] }), _jsx("div", { id: panelElementId, ref: contentRef, className: contentClasses, "aria-hidden": !isExpanded, "aria-labelledby": buttonElementId, role: "region", children: _jsx("div", { ref: innerContentRef, className: "ndl-accordion-item-content-inner", onKeyDown: (event) => event.stopPropagation(), children: _jsx(Typography, { variant: "body-medium", className: "n-text-neutral-text-weak", as: "div", children: children }) }) }), hasDivider && _jsx(Divider, {})] })));
+                                            'ndl-expanded': isExpanded,
+                                        }) })] }) }) }), trailingContent && (_jsx(Typography, { as: "div", variant: "body-medium", children: trailingContent }))] }), _jsx("div", { id: panelElementId, ref: contentRef, className: contentClasses, "aria-hidden": !isExpanded, "aria-labelledby": buttonElementId, role: "region", children: _jsx("div", { ref: innerContentRef, className: "ndl-accordion-item-content-inner", onKeyDown: (event) => event.stopPropagation(), children: _jsx(Typography, { variant: "body-medium", className: "ndl-accordion-item-content-text", as: "div", children: children }) }) }), hasDivider && _jsx(Divider, {})] })));
 };
 /**
  * @remarks

package/lib/esm/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n  type AccordionItemId,\n  type AccordionItemProps,\n  type AccordionProps,\n  type ClassicItemProps,\n  type IsMultiple,\n  type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n  Item = '.ndl-accordion-item',\n  ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n  accordionElement: Element,\n  selector: string,\n  direction: 'next' | 'prev' = 'next',\n): Element | null => {\n  const itemParent = accordionElement.closest(AccordionSelector.Item);\n  if (!itemParent) {\n    return null;\n  }\n\n  return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  children,\n  as,\n  isMultiple,\n  onChange,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n  const accordionRef = useRef<U>(null);\n\n  useImperativeHandle(ref, () => accordionRef.current!);\n\n  const Component: React.ElementType = as || 'div';\n\n  // The following function includes code needed to be\n  // able to navigate with the arrow keys (not tab).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const accordionElement = accordionRef.current;\n    if (!accordionElement) {\n      return;\n    }\n    const activeElement = document.activeElement as HTMLElement;\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'next',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'prev',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      activeElement.click();\n    }\n  };\n\n  const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n    const accordionButton = accordionHtmlElement\n      .getElementsByClassName('ndl-accordion-item-header-button')\n      .item(0);\n\n    if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n      accordionButton.focus();\n    }\n  };\n\n  const classes = classNames('ndl-accordion', className);\n\n  // Destructure and omit keys from DOM spread\n  const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n    restProps as Record<string, unknown> as {\n      expandedItemIds?: T[];\n      expandedItemId?: T | null;\n      [key: string]: unknown;\n    };\n\n  const contextValue = isMultiple\n    ? ({\n        expandedItemIds,\n        isMultiple,\n        onChange,\n      } as IsMultiple<T>)\n    : ({\n        expandedItemId,\n        isMultiple,\n        onChange,\n      } as IsNotMultiple<T>);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={accordionRef}\n      onKeyDown={handleKeyDown}\n      role=\"presentation\"\n      {...restAccordionProps}\n      {...htmlAttributes}\n    >\n      <AccordionContext.Provider value={contextValue}>\n        {children}\n      </AccordionContext.Provider>\n    </Component>\n  );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n  `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  itemId,\n  children,\n  title,\n  className = '',\n  arrowPosition = 'leading',\n  isDisabled = false,\n  onExpandedChange,\n  htmlAttributes,\n  style,\n  as,\n  titleTypographyVariant = 'subheading-medium',\n  hasDivider = true,\n  trailingContent,\n  headingLevel = 2,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const innerContentRef = useRef<HTMLDivElement>(null);\n  const itemElementId = createItemId('item', itemId);\n  const headerElementId = createItemId('header', itemId);\n  const buttonElementId = createItemId('button', itemId);\n  const panelElementId = createItemId('panel', itemId);\n  const Component: React.ElementType = as || 'div';\n\n  const context = useAccordionContext();\n  const { isMultiple } = context;\n\n  const isExpanded = isMultiple\n    ? context.expandedItemIds.includes(itemId)\n    : context.expandedItemId === itemId;\n\n  const handleOnClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    // Custom callback to call.\n    if (onExpandedChange !== undefined) {\n      onExpandedChange(!isExpanded);\n    }\n\n    if (isMultiple) {\n      const { expandedItemIds, onChange }: IsMultiple<T> = context;\n      // Multiple expanded.\n      if (isExpanded) {\n        // Remove from list.\n        const newArray: T[] = expandedItemIds.filter(\n          (activeId) => activeId !== itemId,\n        );\n        onChange(newArray);\n      } else if (!isExpanded) {\n        // Add to list.\n        const newArray = [...expandedItemIds];\n        newArray.push(itemId);\n        onChange(newArray);\n      }\n    } else {\n      const { onChange }: IsNotMultiple<T> = context;\n      // Single expanded.\n      if (isExpanded) {\n        // Set null.\n        onChange(null);\n      } else if (!isExpanded) {\n        // Set to id.\n        onChange(itemId);\n      }\n    }\n\n    // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n    document.activeElement?.parentElement?.focus();\n  }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n  const classes = classNames('ndl-accordion-item', className, {\n    'ndl-accordion-item-disabled': isDisabled,\n    'ndl-accordion-item-expanded': isExpanded,\n  });\n\n  const headerClasses = classNames('ndl-accordion-item-header', {\n    'ndl-accordion-item-header-disabled': isDisabled,\n  });\n\n  const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n    'ndl-accordion-item-header-icon-wrapper-leading':\n      arrowPosition === 'leading',\n  });\n\n  const buttonClasses = classNames('ndl-accordion-item-header-button', {\n    'ndl-accordion-item-header-button-disabled': isDisabled,\n  });\n\n  const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n    'ndl-accordion-item-header-button-title': isDisabled,\n    'ndl-accordion-item-header-button-title-leading':\n      arrowPosition === 'leading',\n  });\n\n  const contentClasses = classNames('ndl-accordion-item-content', {\n    'ndl-accordion-item-content-expanded': isExpanded,\n    'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n  });\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      id={itemElementId}\n      {...htmlAttributes}\n    >\n      <div className={headerClasses} id={headerElementId}>\n        <Typography\n          as={`h${headingLevel}`}\n          variant={titleTypographyVariant}\n          className=\"ndl-accordion-item-heading\"\n        >\n          <button\n            type=\"button\"\n            id={buttonElementId}\n            onClick={handleOnClick}\n            className={buttonClasses}\n            aria-expanded={isExpanded}\n            aria-disabled={isDisabled}\n            aria-controls={panelElementId}\n            disabled={isDisabled}\n          >\n            <span className={iconClasses}>\n              <span className={titleClasses}>{title}</span>\n\n              <ChevronDownIconOutline\n                className={classNames('ndl-accordion-item-header-icon', {\n                  '-n-rotate-180': isExpanded,\n                })}\n              />\n            </span>\n          </button>\n        </Typography>\n        {trailingContent && (\n          <Typography as=\"div\" variant=\"body-medium\">\n            {trailingContent}\n          </Typography>\n        )}\n      </div>\n\n      <div\n        id={panelElementId}\n        ref={contentRef}\n        className={contentClasses}\n        aria-hidden={!isExpanded}\n        aria-labelledby={buttonElementId}\n        role=\"region\"\n      >\n        {/* The <div> element has a child <button> element that allows keyboard interaction */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={innerContentRef}\n          className=\"ndl-accordion-item-content-inner\"\n          onKeyDown={(event) => event.stopPropagation()}\n        >\n          <Typography\n            variant=\"body-medium\"\n            className=\"n-text-neutral-text-weak\"\n            as=\"div\"\n          >\n            {children}\n          </Typography>\n        </div>\n      </div>\n      {hasDivider && <Divider />}\n    </Component>\n  );\n};\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n *\n * `TypographyVariants` is of the type `'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading-large' | 'subheading-medium' | 'subheading-small' | 'body-large' | 'body-medium' | 'body-small' | 'code' | 'label'`.\n */\nconst AccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-classic', className);\n\n  return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n */\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n  AccordionItemProps<T>,\n  'hasDivider'\n>;\n\nconst CleanItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-clean', className);\n\n  return (\n    <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n  );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n  CleanItem: CleanItem,\n  Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n  type AccordionItemId,\n  type AccordionItemProps,\n  type AccordionProps,\n  type ClassicItemProps,\n  type IsMultiple,\n  type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n  Item = '.ndl-accordion-item',\n  ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n  accordionElement: Element,\n  selector: string,\n  direction: 'next' | 'prev' = 'next',\n): Element | null => {\n  const itemParent = accordionElement.closest(AccordionSelector.Item);\n  if (!itemParent) {\n    return null;\n  }\n\n  return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  children,\n  as,\n  isMultiple,\n  onChange,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n  const accordionRef = useRef<U>(null);\n\n  useImperativeHandle(ref, () => accordionRef.current!);\n\n  const Component: React.ElementType = as || 'div';\n\n  // The following function includes code needed to be\n  // able to navigate with the arrow keys (not tab).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const accordionElement = accordionRef.current;\n    if (!accordionElement) {\n      return;\n    }\n    const activeElement = document.activeElement as HTMLElement;\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'next',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'prev',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      activeElement.click();\n    }\n  };\n\n  const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n    const accordionButton = accordionHtmlElement\n      .getElementsByClassName('ndl-accordion-item-header-button')\n      .item(0);\n\n    if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n      accordionButton.focus();\n    }\n  };\n\n  const classes = classNames('ndl-accordion', className);\n\n  // Destructure and omit keys from DOM spread\n  const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n    restProps as Record<string, unknown> as {\n      expandedItemIds?: T[];\n      expandedItemId?: T | null;\n      [key: string]: unknown;\n    };\n\n  const contextValue = isMultiple\n    ? ({\n        expandedItemIds,\n        isMultiple,\n        onChange,\n      } as IsMultiple<T>)\n    : ({\n        expandedItemId,\n        isMultiple,\n        onChange,\n      } as IsNotMultiple<T>);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={accordionRef}\n      onKeyDown={handleKeyDown}\n      role=\"presentation\"\n      {...restAccordionProps}\n      {...htmlAttributes}\n    >\n      <AccordionContext.Provider value={contextValue}>\n        {children}\n      </AccordionContext.Provider>\n    </Component>\n  );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n  `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  itemId,\n  children,\n  title,\n  className = '',\n  arrowPosition = 'leading',\n  isDisabled = false,\n  onExpandedChange,\n  htmlAttributes,\n  style,\n  as,\n  titleTypographyVariant = 'subheading-medium',\n  hasDivider = true,\n  trailingContent,\n  headingLevel = 2,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const innerContentRef = useRef<HTMLDivElement>(null);\n  const itemElementId = createItemId('item', itemId);\n  const headerElementId = createItemId('header', itemId);\n  const buttonElementId = createItemId('button', itemId);\n  const panelElementId = createItemId('panel', itemId);\n  const Component: React.ElementType = as || 'div';\n\n  const context = useAccordionContext();\n  const { isMultiple } = context;\n\n  const isExpanded = isMultiple\n    ? context.expandedItemIds.includes(itemId)\n    : context.expandedItemId === itemId;\n\n  const handleOnClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    // Custom callback to call.\n    if (onExpandedChange !== undefined) {\n      onExpandedChange(!isExpanded);\n    }\n\n    if (isMultiple) {\n      const { expandedItemIds, onChange }: IsMultiple<T> = context;\n      // Multiple expanded.\n      if (isExpanded) {\n        // Remove from list.\n        const newArray: T[] = expandedItemIds.filter(\n          (activeId) => activeId !== itemId,\n        );\n        onChange(newArray);\n      } else if (!isExpanded) {\n        // Add to list.\n        const newArray = [...expandedItemIds];\n        newArray.push(itemId);\n        onChange(newArray);\n      }\n    } else {\n      const { onChange }: IsNotMultiple<T> = context;\n      // Single expanded.\n      if (isExpanded) {\n        // Set null.\n        onChange(null);\n      } else if (!isExpanded) {\n        // Set to id.\n        onChange(itemId);\n      }\n    }\n\n    // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n    document.activeElement?.parentElement?.focus();\n  }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n  const classes = classNames('ndl-accordion-item', className, {\n    'ndl-accordion-item-disabled': isDisabled,\n    'ndl-accordion-item-expanded': isExpanded,\n  });\n\n  const headerClasses = classNames('ndl-accordion-item-header', {\n    'ndl-accordion-item-header-disabled': isDisabled,\n  });\n\n  const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n    'ndl-accordion-item-header-icon-wrapper-leading':\n      arrowPosition === 'leading',\n  });\n\n  const buttonClasses = classNames('ndl-accordion-item-header-button', {\n    'ndl-accordion-item-header-button-disabled': isDisabled,\n  });\n\n  const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n    'ndl-accordion-item-header-button-title': isDisabled,\n    'ndl-accordion-item-header-button-title-leading':\n      arrowPosition === 'leading',\n  });\n\n  const contentClasses = classNames('ndl-accordion-item-content', {\n    'ndl-accordion-item-content-expanded': isExpanded,\n    'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n  });\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      id={itemElementId}\n      {...htmlAttributes}\n    >\n      <div className={headerClasses} id={headerElementId}>\n        <Typography\n          as={`h${headingLevel}`}\n          variant={titleTypographyVariant}\n          className=\"ndl-accordion-item-heading\"\n        >\n          <button\n            type=\"button\"\n            id={buttonElementId}\n            onClick={handleOnClick}\n            className={buttonClasses}\n            aria-expanded={isExpanded}\n            aria-disabled={isDisabled}\n            aria-controls={panelElementId}\n            disabled={isDisabled}\n          >\n            <span className={iconClasses}>\n              <span className={titleClasses}>{title}</span>\n\n              <ChevronDownIconOutline\n                className={classNames('ndl-accordion-item-header-icon', {\n                  'ndl-expanded': isExpanded,\n                })}\n              />\n            </span>\n          </button>\n        </Typography>\n        {trailingContent && (\n          <Typography as=\"div\" variant=\"body-medium\">\n            {trailingContent}\n          </Typography>\n        )}\n      </div>\n\n      <div\n        id={panelElementId}\n        ref={contentRef}\n        className={contentClasses}\n        aria-hidden={!isExpanded}\n        aria-labelledby={buttonElementId}\n        role=\"region\"\n      >\n        {/* The <div> element has a child <button> element that allows keyboard interaction */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={innerContentRef}\n          className=\"ndl-accordion-item-content-inner\"\n          onKeyDown={(event) => event.stopPropagation()}\n        >\n          <Typography\n            variant=\"body-medium\"\n            className=\"ndl-accordion-item-content-text\"\n            as=\"div\"\n          >\n            {children}\n          </Typography>\n        </div>\n      </div>\n      {hasDivider && <Divider />}\n    </Component>\n  );\n};\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n *\n * `TypographyVariants` is of the type `'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading-large' | 'subheading-medium' | 'subheading-small' | 'body-large' | 'body-medium' | 'body-small' | 'code' | 'label'`.\n */\nconst AccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-classic', className);\n\n  return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n */\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n  AccordionItemProps<T>,\n  'hasDivider'\n>;\n\nconst CleanItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-clean', className);\n\n  return (\n    <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n  );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n  CleanItem: CleanItem,\n  Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}

package/lib/esm/ai/code-preview/CodePreview.js

@@ -80,6 +80,8 @@ export const CodePreview = (_a) => {
                         // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong
                         // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402
                         // wrapLongLines
-                        codeTagProps: { className: 'n-ai-code-preview' }, showLineNumbers: false, children: code }) }) }))] })));
+                        showLineNumbers: false, 
+                        // Any value on codeTagProps replaces the library default, which would inline the theme's code styles
+                        codeTagProps: {}, children: code }) }) }))] })));
 };
 //# sourceMappingURL=CodePreview.js.map

package/lib/esm/ai/code-preview/CodePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodePreview.js","sourceRoot":"","sources":["../../../../src/ai/code-preview/CodePreview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\n\ntype CodePreviewProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small CleanIconButton components. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n};\n\n/**\n * The component is used to display code that is generated by an LLM.\n *\n * @alpha - Changes to this component may be breaking.\n * @deprecated - Use `<Preview />` with `<Preview.Code />` instead.\n */\nexport const CodePreview = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', CodePreviewProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    CodePreviewProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-code-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* Header */}\n      <div className=\"ndl-ai-code-preview-header\">\n        <div className=\"ndl-ai-code-preview-title\">\n          {isLoading ? (\n            <>\n              <LoadingSpinner size=\"medium\" />\n              <Typography variant=\"code\">\n                WRITING {language.toUpperCase()}\n              </Typography>\n            </>\n          ) : (\n            <>\n              <Typography variant=\"code\">\n                {language.toUpperCase()}{' '}\n                {language.toLowerCase() === 'cypher' ? 'QUERY' : ''}\n              </Typography>\n              {label && (\n                <StatusLabel\n                  variant={label === 'write' ? 'warning' : 'info'}\n                  size=\"small\"\n                  fill=\"semi-filled\"\n                >\n                  {label}\n                </StatusLabel>\n              )}\n            </>\n          )}\n        </div>\n\n        {!isLoading && (\n          <div className=\"ndl-ai-code-preview-actions\">\n            <ClipboardButton\n              textToCopy={code}\n              type=\"clean-icon-button\"\n              size=\"small\"\n            />\n            {headerActions}\n          </div>\n        )}\n      </div>\n\n      {!isLoading && (\n        <div className=\"ndl-ai-code-preview-content\">\n          <div className=\"ndl-code-content-container\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              codeTagProps={{ className: 'n-ai-code-preview' }}\n              showLineNumbers={false}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"CodePreview.js","sourceRoot":"","sources":["../../../../src/ai/code-preview/CodePreview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\n\ntype CodePreviewProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small CleanIconButton components. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n};\n\n/**\n * The component is used to display code that is generated by an LLM.\n *\n * @alpha - Changes to this component may be breaking.\n * @deprecated - Use `<Preview />` with `<Preview.Code />` instead.\n */\nexport const CodePreview = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', CodePreviewProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    CodePreviewProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-code-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* Header */}\n      <div className=\"ndl-ai-code-preview-header\">\n        <div className=\"ndl-ai-code-preview-title\">\n          {isLoading ? (\n            <>\n              <LoadingSpinner size=\"medium\" />\n              <Typography variant=\"code\">\n                WRITING {language.toUpperCase()}\n              </Typography>\n            </>\n          ) : (\n            <>\n              <Typography variant=\"code\">\n                {language.toUpperCase()}{' '}\n                {language.toLowerCase() === 'cypher' ? 'QUERY' : ''}\n              </Typography>\n              {label && (\n                <StatusLabel\n                  variant={label === 'write' ? 'warning' : 'info'}\n                  size=\"small\"\n                  fill=\"semi-filled\"\n                >\n                  {label}\n                </StatusLabel>\n              )}\n            </>\n          )}\n        </div>\n\n        {!isLoading && (\n          <div className=\"ndl-ai-code-preview-actions\">\n            <ClipboardButton\n              textToCopy={code}\n              type=\"clean-icon-button\"\n              size=\"small\"\n            />\n            {headerActions}\n          </div>\n        )}\n      </div>\n\n      {!isLoading && (\n        <div className=\"ndl-ai-code-preview-content\">\n          <div className=\"ndl-code-content-container\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={false}\n              // Any value on codeTagProps replaces the library default, which would inline the theme's code styles\n              codeTagProps={{}}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/ai/preview/Preview.js

@@ -97,7 +97,9 @@ const PreviewCode = (_a) => {
                             // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong
                             // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402
                             // wrapLongLines
-                            codeTagProps: { className: 'n-ai-preview-code' }, showLineNumbers: false, children: code }) })] }))] })));
+                            showLineNumbers: false, 
+                            // Any value on codeTagProps replaces the library default, which would inline the theme's code styles
+                            codeTagProps: {}, children: code }) })] }))] })));
 };
 const PreviewContent = (_a) => {
     var { children, ref, style, className, htmlAttributes } = _a, restProps = __rest(_a, ["children", "ref", "style", "className", "htmlAttributes"]);

package/lib/esm/ai/preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../../src/ai/preview/Preview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { TruncatedTextWithTooltip } from '../../_common/TruncatedTextWithTooltip';\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype PreviewProps = {\n  children: React.ReactNode;\n};\n\n/**\n * Component to use for previewing certain content in AI chat applications.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PreviewComponent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype PreviewHeaderProps = {\n  /** The content to display in the header. When a plain string is passed, it truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  children?: React.ReactNode;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  actions?: React.ReactNode;\n};\n\nconst PreviewHeader = ({\n  children,\n  actions,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewHeaderProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-header', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"code\"\n        as=\"div\"\n        className=\"ndl-ai-preview-header-leading-content\"\n      >\n        {typeof children === 'string' ? (\n          <TruncatedTextWithTooltip text={children} />\n        ) : (\n          children\n        )}\n      </Typography>\n\n      {actions && (\n        <div className=\"ndl-ai-preview-header-actions\">{actions}</div>\n      )}\n    </div>\n  );\n};\n\ntype PreviewConfirmationProps = {\n  /** The content to display in the confirmation */\n  children?: React.ReactNode;\n  /** The actions to display in the confirmation, usually two buttons; one for confirming and one for rejecting. */\n  actions: React.ReactNode;\n  /** Whether the confirmation is used as a footer */\n  isFooter?: boolean;\n  /** The status of the confirmation */\n  status?: 'pending' | 'confirmed' | 'rejected';\n  /** The text to display for the confirmed status */\n  confirmedActionText?: string;\n  /** The text to display for the rejected status */\n  rejectedActionText?: string;\n};\n\nconst PreviewConfirmation = ({\n  children,\n  actions,\n  isFooter = false,\n  status = 'pending',\n  confirmedActionText = 'Action confirmed',\n  rejectedActionText = 'Action rejected',\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewConfirmationProps>) => {\n  const classes = classNames('ndl-ai-preview-confirmation', className, {\n    'ndl-ai-preview-confirmation-footer': isFooter,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {!(isFooter && status !== 'pending') && (\n        <Typography\n          as=\"div\"\n          variant={isFooter ? 'subheading-small' : 'body-medium'}\n          className=\"ndl-ai-preview-confirmation-content\"\n        >\n          {children}\n        </Typography>\n      )}\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"ndl-ai-preview-confirmation-actions\"\n      >\n        {status === 'pending' && actions}\n        {status === 'confirmed' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <CheckIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {confirmedActionText}\n          </div>\n        )}\n        {status === 'rejected' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <XMarkIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {rejectedActionText}\n          </div>\n        )}\n      </Typography>\n    </div>\n  );\n};\n\ntype PreviewCodeProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block\n   * @deprecated - The query should be described in the heading property instead.\n   */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n  /** The heading to display in the header. If not provided, the language will be displayed. Truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  heading?: string;\n};\n\nconst PreviewCode = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  heading,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewCodeProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    PreviewCodeProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-code', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isLoading && (\n        <div className=\"ndl-ai-preview-code-loading\">\n          <LoadingSpinner size=\"medium\" />\n          <Typography variant=\"code\">\n            WRITING {language.toUpperCase()}\n          </Typography>\n        </div>\n      )}\n      {!isLoading && (\n        <>\n          <PreviewHeader\n            className=\"ndl-ai-preview-code-header\"\n            actions={\n              <>\n                <ClipboardButton\n                  textToCopy={code}\n                  type=\"clean-icon-button\"\n                  size=\"small\"\n                />\n                {headerActions}\n              </>\n            }\n          >\n            <TruncatedTextWithTooltip\n              className=\"ndl-ai-preview-code-header-heading\"\n              text={\n                heading ??\n                `${language}${language.toLowerCase() === 'cypher' ? ' QUERY' : ''}`\n              }\n            />\n            {label && (\n              <StatusLabel\n                variant={label === 'write' ? 'warning' : 'info'}\n                size=\"small\"\n                fill=\"semi-filled\"\n              >\n                {label.toUpperCase()}\n              </StatusLabel>\n            )}\n          </PreviewHeader>\n          <div className=\"ndl-ai-preview-code-content\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              codeTagProps={{ className: 'n-ai-preview-code' }}\n              showLineNumbers={false}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\ntype PreviewContentProps = {\n  children?: React.ReactNode;\n};\n\nconst PreviewContent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewContentProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-content', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const Preview = Object.assign(PreviewComponent, {\n  Code: PreviewCode,\n  Confirmation: PreviewConfirmation,\n  Content: PreviewContent,\n  Header: PreviewHeader,\n});\n"]}
+{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../../src/ai/preview/Preview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { TruncatedTextWithTooltip } from '../../_common/TruncatedTextWithTooltip';\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype PreviewProps = {\n  children: React.ReactNode;\n};\n\n/**\n * Component to use for previewing certain content in AI chat applications.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PreviewComponent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype PreviewHeaderProps = {\n  /** The content to display in the header. When a plain string is passed, it truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  children?: React.ReactNode;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  actions?: React.ReactNode;\n};\n\nconst PreviewHeader = ({\n  children,\n  actions,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewHeaderProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-header', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"code\"\n        as=\"div\"\n        className=\"ndl-ai-preview-header-leading-content\"\n      >\n        {typeof children === 'string' ? (\n          <TruncatedTextWithTooltip text={children} />\n        ) : (\n          children\n        )}\n      </Typography>\n\n      {actions && (\n        <div className=\"ndl-ai-preview-header-actions\">{actions}</div>\n      )}\n    </div>\n  );\n};\n\ntype PreviewConfirmationProps = {\n  /** The content to display in the confirmation */\n  children?: React.ReactNode;\n  /** The actions to display in the confirmation, usually two buttons; one for confirming and one for rejecting. */\n  actions: React.ReactNode;\n  /** Whether the confirmation is used as a footer */\n  isFooter?: boolean;\n  /** The status of the confirmation */\n  status?: 'pending' | 'confirmed' | 'rejected';\n  /** The text to display for the confirmed status */\n  confirmedActionText?: string;\n  /** The text to display for the rejected status */\n  rejectedActionText?: string;\n};\n\nconst PreviewConfirmation = ({\n  children,\n  actions,\n  isFooter = false,\n  status = 'pending',\n  confirmedActionText = 'Action confirmed',\n  rejectedActionText = 'Action rejected',\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewConfirmationProps>) => {\n  const classes = classNames('ndl-ai-preview-confirmation', className, {\n    'ndl-ai-preview-confirmation-footer': isFooter,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {!(isFooter && status !== 'pending') && (\n        <Typography\n          as=\"div\"\n          variant={isFooter ? 'subheading-small' : 'body-medium'}\n          className=\"ndl-ai-preview-confirmation-content\"\n        >\n          {children}\n        </Typography>\n      )}\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"ndl-ai-preview-confirmation-actions\"\n      >\n        {status === 'pending' && actions}\n        {status === 'confirmed' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <CheckIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {confirmedActionText}\n          </div>\n        )}\n        {status === 'rejected' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <XMarkIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {rejectedActionText}\n          </div>\n        )}\n      </Typography>\n    </div>\n  );\n};\n\ntype PreviewCodeProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block\n   * @deprecated - The query should be described in the heading property instead.\n   */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n  /** The heading to display in the header. If not provided, the language will be displayed. Truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  heading?: string;\n};\n\nconst PreviewCode = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  heading,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewCodeProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    PreviewCodeProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-code', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isLoading && (\n        <div className=\"ndl-ai-preview-code-loading\">\n          <LoadingSpinner size=\"medium\" />\n          <Typography variant=\"code\">\n            WRITING {language.toUpperCase()}\n          </Typography>\n        </div>\n      )}\n      {!isLoading && (\n        <>\n          <PreviewHeader\n            className=\"ndl-ai-preview-code-header\"\n            actions={\n              <>\n                <ClipboardButton\n                  textToCopy={code}\n                  type=\"clean-icon-button\"\n                  size=\"small\"\n                />\n                {headerActions}\n              </>\n            }\n          >\n            <TruncatedTextWithTooltip\n              className=\"ndl-ai-preview-code-header-heading\"\n              text={\n                heading ??\n                `${language}${language.toLowerCase() === 'cypher' ? ' QUERY' : ''}`\n              }\n            />\n            {label && (\n              <StatusLabel\n                variant={label === 'write' ? 'warning' : 'info'}\n                size=\"small\"\n                fill=\"semi-filled\"\n              >\n                {label.toUpperCase()}\n              </StatusLabel>\n            )}\n          </PreviewHeader>\n          <div className=\"ndl-ai-preview-code-content\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={false}\n              // Any value on codeTagProps replaces the library default, which would inline the theme's code styles\n              codeTagProps={{}}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\ntype PreviewContentProps = {\n  children?: React.ReactNode;\n};\n\nconst PreviewContent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewContentProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-content', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const Preview = Object.assign(PreviewComponent, {\n  Code: PreviewCode,\n  Confirmation: PreviewConfirmation,\n  Content: PreviewContent,\n  Header: PreviewHeader,\n});\n"]}

package/lib/esm/ai/thinking/Thinking.js

@@ -31,6 +31,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
+import { Typography } from '../../typography';
 import { Presence } from '../presence';
 import { formatThinkingDuration } from './thinking-duration-formatter';
 /**
@@ -42,9 +43,9 @@ import { formatThinkingDuration } from './thinking-duration-formatter';
  */
 const Thinking = (_a) => {
     var { className, isThinking = true, style, htmlAttributes, ref, thinkingMs = 1000 } = _a, restProps = __rest(_a, ["className", "isThinking", "style", "htmlAttributes", "ref", "thinkingMs"]);
-    const classes = classNames('n-flex n-flex-col n-items-start n-gap-token-12', className);
+    const classes = classNames('ndl-ai-thinking', className);
     const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);
-    return (_jsx("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: isThinking === true ? (_jsxs(_Fragment, { children: [_jsx(Presence, { isThinking: isThinking, className: "n-size-token-32" }), _jsx("span", { className: "n-subheading-small n-text-neutral-text-default", children: "Thinking" })] })) : (_jsxs("span", { className: "n-subheading-small n-text-neutral-text-weak", children: ["Thought", ' ', _jsxs("span", { className: "n-font-normal", children: ["for ", thinkingDuration, " ", unit] })] })) })));
+    return (_jsx("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: isThinking === true ? (_jsxs(_Fragment, { children: [_jsx(Presence, { isThinking: isThinking, className: "ndl-ai-thinking-presence" }), _jsx(Typography, { variant: "subheading-small", className: "ndl-ai-thinking-label", children: "Thinking" })] })) : (_jsxs(Typography, { variant: "subheading-small", className: "ndl-ai-thinking-done", children: ["Thought", ' ', _jsxs("span", { className: "ndl-ai-thinking-duration", children: ["for ", thinkingDuration, " ", unit] })] })) })));
 };
 export { Thinking };
 //# sourceMappingURL=Thinking.js.map

package/lib/esm/ai/thinking/Thinking.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thinking.js","sourceRoot":"","sources":["../../../../src/ai/thinking/Thinking.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAYvE;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQkB,EAAE,EAAE;QARtB,EAChB,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,cAAc,EACd,GAAG,EACH,UAAU,GAAG,IAAI,OAEiB,EAD/B,SAAS,cAPI,2EAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CACxB,gDAAgD,EAChD,SAAS,CACV,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAE7E,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAEjB,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAC,iBAAiB,GAAG,EAChE,eAAM,SAAS,EAAC,gDAAgD,yBAEzD,IACN,CACJ,CAAC,CAAC,CAAC,CACF,gBAAM,SAAS,EAAC,6CAA6C,wBACnD,GAAG,EACX,gBAAM,SAAS,EAAC,eAAe,qBACxB,gBAAgB,OAAG,IAAI,IACvB,IACF,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport classNames from 'classnames';\n\nimport type { CommonProps } from '../../_common/types';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from './thinking-duration-formatter';\n\ntype ThinkingProps = {\n  /** Whether the AI is thinking.\n   * If true, will render a thinking presence icon and the text \"Thinking\".\n   * If false, will render the duration of the thinking.\n   */\n  isThinking?: boolean;\n  /** The duration of the thinking in milliseconds */\n  thinkingMs?: number;\n};\n\n/**\n * The component is used to display the thinking state of an LLM.\n * If the `isThinking` prop is true, it will render a thinking presence icon and the text \"Thinking\".\n * If the `isThinking` prop is false, it will render the duration of the thinking.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst Thinking = ({\n  className,\n  isThinking = true,\n  style,\n  htmlAttributes,\n  ref,\n  thinkingMs = 1000,\n  ...restProps\n}: CommonProps<'div', ThinkingProps>) => {\n  const classes = classNames(\n    'n-flex n-flex-col n-items-start n-gap-token-12',\n    className,\n  );\n\n  const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isThinking === true ? (\n        <>\n          <Presence isThinking={isThinking} className=\"n-size-token-32\" />\n          <span className=\"n-subheading-small n-text-neutral-text-default\">\n            Thinking\n          </span>\n        </>\n      ) : (\n        <span className=\"n-subheading-small n-text-neutral-text-weak\">\n          Thought{' '}\n          <span className=\"n-font-normal\">\n            for {thinkingDuration} {unit}\n          </span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport { Thinking };\n"]}
+{"version":3,"file":"Thinking.js","sourceRoot":"","sources":["../../../../src/ai/thinking/Thinking.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAYvE;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQkB,EAAE,EAAE;QARtB,EAChB,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,cAAc,EACd,GAAG,EACH,UAAU,GAAG,IAAI,OAEiB,EAD/B,SAAS,cAPI,2EAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAE7E,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAEjB,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,QAAQ,IACP,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,0BAA0B,GACpC,EACF,KAAC,UAAU,IACT,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAC,uBAAuB,yBAGtB,IACZ,CACJ,CAAC,CAAC,CAAC,CACF,MAAC,UAAU,IAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAC,sBAAsB,wBAC7D,GAAG,EACX,gBAAM,SAAS,EAAC,0BAA0B,qBACnC,gBAAgB,OAAG,IAAI,IACvB,IACI,CACd,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport classNames from 'classnames';\n\nimport type { CommonProps } from '../../_common/types';\nimport { Typography } from '../../typography';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from './thinking-duration-formatter';\n\ntype ThinkingProps = {\n  /** Whether the AI is thinking.\n   * If true, will render a thinking presence icon and the text \"Thinking\".\n   * If false, will render the duration of the thinking.\n   */\n  isThinking?: boolean;\n  /** The duration of the thinking in milliseconds */\n  thinkingMs?: number;\n};\n\n/**\n * The component is used to display the thinking state of an LLM.\n * If the `isThinking` prop is true, it will render a thinking presence icon and the text \"Thinking\".\n * If the `isThinking` prop is false, it will render the duration of the thinking.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst Thinking = ({\n  className,\n  isThinking = true,\n  style,\n  htmlAttributes,\n  ref,\n  thinkingMs = 1000,\n  ...restProps\n}: CommonProps<'div', ThinkingProps>) => {\n  const classes = classNames('ndl-ai-thinking', className);\n\n  const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isThinking === true ? (\n        <>\n          <Presence\n            isThinking={isThinking}\n            className=\"ndl-ai-thinking-presence\"\n          />\n          <Typography\n            variant=\"subheading-small\"\n            className=\"ndl-ai-thinking-label\"\n          >\n            Thinking\n          </Typography>\n        </>\n      ) : (\n        <Typography variant=\"subheading-small\" className=\"ndl-ai-thinking-done\">\n          Thought{' '}\n          <span className=\"ndl-ai-thinking-duration\">\n            for {thinkingDuration} {unit}\n          </span>\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport { Thinking };\n"]}

package/lib/esm/ai/tool-call/ToolCall.js

@@ -42,8 +42,8 @@ import { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutli
  */
 const ToolCall = (_a) => {
     var { children, isDone = false, ref, className, style, htmlAttributes } = _a, restProps = __rest(_a, ["children", "isDone", "ref", "className", "style", "htmlAttributes"]);
-    const classes = classNames('ndl-ai-tool n-inline-flex n-items-center n-gap-token-12 n-flex-row', className);
-    return (_jsxs(Typography, Object.assign({ variant: "body-medium", ref: ref, className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: [_jsx("span", { className: "n-text-neutral-text-weak n-capitalize n-inline-flex n-items-center n-gap-token-6 n-flex-row", children: isDone ? (_jsxs(_Fragment, { children: [_jsx(CheckIconOutline, { className: "n-size-token-16 n-text-neutral-text-weaker" }), "Ran"] })) : ('Using') }), _jsx(Code, { isRunnable: false, children: children })] })));
+    const classes = classNames('ndl-ai-tool', className);
+    return (_jsxs(Typography, Object.assign({ variant: "body-medium", ref: ref, className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: [_jsx("span", { className: "ndl-ai-tool-status", children: isDone ? (_jsxs(_Fragment, { children: [_jsx(CheckIconOutline, { className: "ndl-ai-tool-icon" }), "Ran"] })) : ('Using') }), _jsx(Code, { isRunnable: false, children: children })] })));
 };
 export { ToolCall };
 //# sourceMappingURL=ToolCall.js.map

package/lib/esm/ai/tool-call/ToolCall.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.js","sourceRoot":"","sources":["../../../../src/ai/tool-call/ToolCall.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AASpF;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQmB,EAAE,EAAE;QARvB,EAChB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,GAAG,EACH,SAAS,EACT,KAAK,EACL,cAAc,OAEqB,EADhC,SAAS,cAPI,qEAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CACxB,oEAAoE,EACpE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,kBACT,OAAO,EAAC,aAAa,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,IAC1B,SAAS,eAEb,eAAM,SAAS,EAAC,6FAA6F,YAC1G,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,KAAC,gBAAgB,IAAC,SAAS,EAAC,4CAA4C,GAAG,WAE1E,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACI,EACP,KAAC,IAAI,IAAC,UAAU,EAAE,KAAK,YAAG,QAAQ,GAAQ,KAC/B,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Code, Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type CommonProps } from '../../_common/types';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\n\ntype ToolCallProps = {\n  /** The content of the suggestion */\n  children?: React.ReactNode;\n  /** Whether the AI is done with using the tool */\n  isDone?: boolean;\n};\n\n/**\n * The component is used to display that an LLM is using a tool.\n * Per default, the component will display the text \"Using\".\n * If the `isDone` prop is true, the component will display the check icon and the text \"Ran\".\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ToolCall = ({\n  children,\n  isDone = false,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'span', ToolCallProps>) => {\n  const classes = classNames(\n    'ndl-ai-tool n-inline-flex n-items-center n-gap-token-12 n-flex-row',\n    className,\n  );\n\n  return (\n    <Typography\n      variant=\"body-medium\"\n      ref={ref}\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      <span className=\"n-text-neutral-text-weak n-capitalize n-inline-flex n-items-center n-gap-token-6 n-flex-row\">\n        {isDone ? (\n          <>\n            <CheckIconOutline className=\"n-size-token-16 n-text-neutral-text-weaker\" />\n            Ran\n          </>\n        ) : (\n          'Using'\n        )}\n      </span>\n      <Code isRunnable={false}>{children}</Code>\n    </Typography>\n  );\n};\n\nexport { ToolCall };\n"]}
+{"version":3,"file":"ToolCall.js","sourceRoot":"","sources":["../../../../src/ai/tool-call/ToolCall.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AASpF;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQmB,EAAE,EAAE;QARvB,EAChB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,GAAG,EACH,SAAS,EACT,KAAK,EACL,cAAc,OAEqB,EADhC,SAAS,cAPI,qEAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,UAAU,kBACT,OAAO,EAAC,aAAa,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,IAC1B,SAAS,eAEb,eAAM,SAAS,EAAC,oBAAoB,YACjC,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,KAAC,gBAAgB,IAAC,SAAS,EAAC,kBAAkB,GAAG,WAEhD,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACI,EACP,KAAC,IAAI,IAAC,UAAU,EAAE,KAAK,YAAG,QAAQ,GAAQ,KAC/B,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Code, Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type CommonProps } from '../../_common/types';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\n\ntype ToolCallProps = {\n  /** The content of the suggestion */\n  children?: React.ReactNode;\n  /** Whether the AI is done with using the tool */\n  isDone?: boolean;\n};\n\n/**\n * The component is used to display that an LLM is using a tool.\n * Per default, the component will display the text \"Using\".\n * If the `isDone` prop is true, the component will display the check icon and the text \"Ran\".\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ToolCall = ({\n  children,\n  isDone = false,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'span', ToolCallProps>) => {\n  const classes = classNames('ndl-ai-tool', className);\n\n  return (\n    <Typography\n      variant=\"body-medium\"\n      ref={ref}\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      <span className=\"ndl-ai-tool-status\">\n        {isDone ? (\n          <>\n            <CheckIconOutline className=\"ndl-ai-tool-icon\" />\n            Ran\n          </>\n        ) : (\n          'Using'\n        )}\n      </span>\n      <Code isRunnable={false}>{children}</Code>\n    </Typography>\n  );\n};\n\nexport { ToolCall };\n"]}

package/lib/esm/clipboard-button/ClipboardButton.js

@@ -148,6 +148,6 @@ export const ClipboardButton = ({ textToCopy, descriptionKbdProps, isDisabled, s
                 },
                 type: 'clean-icon-button',
             };
-    return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKbdProps: descriptionKbdProps }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
+    return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKbdProps: descriptionKbdProps }, props, { tooltipProps: tooltipProps, icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
 };
 //# sourceMappingURL=ClipboardButton.js.map

package/lib/esm/clipboard-button/ClipboardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.js","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.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 React from 'react';\n\nimport { type ButtonSizes } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useCopyToClipboard } from '../hooks';\nimport { IconButton } from '../icon-button';\nimport { Square2StackIconOutline } from '../icons/generated/heroIcons/Square2StackIconOutline';\nimport { Kbd } from '../kbd';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  actionFeedbackText: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  onClick?: React.ComponentPropsWithoutRef<'button'>['onClick'];\n  children: React.ReactNode;\n  className?: string;\n  icon: React.ReactNode;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n} & (\n  | {\n      type: 'clean-icon-button';\n      cleanIconButtonProps?: Omit<\n        React.ComponentProps<typeof CleanIconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'icon-button';\n      iconButtonProps?: Omit<\n        React.ComponentProps<typeof IconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'outlined-button';\n      outlinedButtonProps?: Omit<\n        React.ComponentProps<typeof OutlinedButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n);\n\nconst ConfirmationButton = ({\n  descriptionKbdProps,\n  description,\n  actionFeedbackText,\n  icon,\n  children,\n  onClick,\n  htmlAttributes,\n  tooltipProps,\n  type = 'clean-icon-button',\n  ...restProps\n}: ConfirmationButtonProps) => {\n  const [timeoutId, setTimeoutId] = React.useState<number | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const handleClick = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    const newTimeoutId = window.setTimeout(() => {\n      setTimeoutId(null);\n    }, 2000);\n\n    setTimeoutId(newTimeoutId);\n  };\n\n  const handleCloseTooltip = () => {\n    setIsOpen(false);\n  };\n\n  const handleOpenTooltip = () => {\n    setIsOpen(true);\n  };\n\n  const content = timeoutId === null ? description : actionFeedbackText;\n  /* Controlling the tip to make it disappear in a timely manner */\n\n  if (type === 'clean-icon-button') {\n    return (\n      <CleanIconButton\n        {...(\n          restProps as {\n            cleanIconButtonProps: React.ComponentProps<typeof CleanIconButton>;\n          }\n        ).cleanIconButtonProps}\n        description={content}\n        descriptionKbdProps={descriptionKbdProps}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </CleanIconButton>\n    );\n  } else if (type === 'icon-button') {\n    return (\n      <IconButton\n        {...(\n          restProps as {\n            iconButtonProps: React.ComponentProps<typeof IconButton>;\n          }\n        ).iconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </IconButton>\n    );\n  } else if (type === 'outlined-button') {\n    return (\n      <Tooltip\n        type=\"simple\"\n        isOpen={isOpen || timeoutId !== null}\n        {...tooltipProps}\n        onOpenChange={(open) => {\n          if (open) {\n            handleOpenTooltip();\n          } else {\n            handleCloseTooltip();\n          }\n          tooltipProps?.onOpenChange?.(open);\n        }}\n      >\n        <Tooltip.Trigger\n          hasButtonWrapper\n          htmlAttributes={{\n            'aria-label': content,\n            onBlur: handleCloseTooltip,\n            onFocus: handleOpenTooltip,\n            onMouseEnter: handleOpenTooltip,\n            onMouseLeave: handleCloseTooltip,\n          }}\n        >\n          <OutlinedButton\n            variant=\"neutral\"\n            {...(\n              restProps as {\n                buttonProps: React.ComponentProps<typeof OutlinedButton>;\n              }\n            ).buttonProps}\n            onClick={(event) => {\n              if (onClick) {\n                onClick(event);\n              }\n              handleClick();\n            }}\n            leadingVisual={icon}\n            className={restProps.className}\n            htmlAttributes={htmlAttributes}\n          >\n            {children}\n          </OutlinedButton>\n        </Tooltip.Trigger>\n        <Tooltip.Content>\n          {content}\n          {descriptionKbdProps && <Kbd {...descriptionKbdProps} />}\n        </Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\n/**\n * @remarks\n * For more information of the `TooltipProps` type, see the Tooltip component documentation.\n */\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  isDisabled?: boolean;\n  size?: ButtonSizes;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n  type?: 'outlined-button' | 'clean-icon-button' | 'icon-button';\n}\n\nexport const ClipboardButton = ({\n  textToCopy,\n  descriptionKbdProps,\n  isDisabled,\n  size,\n  tooltipProps,\n  htmlAttributes,\n  type,\n}: ClipboardButtonProps) => {\n  const [, copyFunction] = useCopyToClipboard();\n\n  const isOutlinedButton = type === 'outlined-button';\n  const isIconButton = type === 'icon-button';\n\n  const props = isOutlinedButton\n    ? {\n        outlinedButtonProps: {\n          isDisabled,\n          size,\n        },\n        type: 'outlined-button' as const,\n      }\n    : isIconButton\n      ? {\n          iconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'icon-button' as const,\n        }\n      : {\n          cleanIconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'clean-icon-button' as const,\n        };\n\n  return (\n    <ConfirmationButton\n      onClick={() => copyFunction(textToCopy)}\n      description=\"Copy to clipboard\"\n      actionFeedbackText=\"Copied\"\n      descriptionKbdProps={descriptionKbdProps}\n      {...props}\n      tooltipProps={tooltipProps}\n      className=\"n-gap-token-8\"\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={{\n        'aria-live': 'polite',\n        ...htmlAttributes,\n      }}\n    >\n      {type === 'outlined-button' && 'Copy'}\n    </ConfirmationButton>\n  );\n};\n"]}
+{"version":3,"file":"ClipboardButton.js","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.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 React from 'react';\n\nimport { type ButtonSizes } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useCopyToClipboard } from '../hooks';\nimport { IconButton } from '../icon-button';\nimport { Square2StackIconOutline } from '../icons/generated/heroIcons/Square2StackIconOutline';\nimport { Kbd } from '../kbd';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  actionFeedbackText: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  onClick?: React.ComponentPropsWithoutRef<'button'>['onClick'];\n  children: React.ReactNode;\n  className?: string;\n  icon: React.ReactNode;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n} & (\n  | {\n      type: 'clean-icon-button';\n      cleanIconButtonProps?: Omit<\n        React.ComponentProps<typeof CleanIconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'icon-button';\n      iconButtonProps?: Omit<\n        React.ComponentProps<typeof IconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'outlined-button';\n      outlinedButtonProps?: Omit<\n        React.ComponentProps<typeof OutlinedButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n);\n\nconst ConfirmationButton = ({\n  descriptionKbdProps,\n  description,\n  actionFeedbackText,\n  icon,\n  children,\n  onClick,\n  htmlAttributes,\n  tooltipProps,\n  type = 'clean-icon-button',\n  ...restProps\n}: ConfirmationButtonProps) => {\n  const [timeoutId, setTimeoutId] = React.useState<number | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const handleClick = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    const newTimeoutId = window.setTimeout(() => {\n      setTimeoutId(null);\n    }, 2000);\n\n    setTimeoutId(newTimeoutId);\n  };\n\n  const handleCloseTooltip = () => {\n    setIsOpen(false);\n  };\n\n  const handleOpenTooltip = () => {\n    setIsOpen(true);\n  };\n\n  const content = timeoutId === null ? description : actionFeedbackText;\n  /* Controlling the tip to make it disappear in a timely manner */\n\n  if (type === 'clean-icon-button') {\n    return (\n      <CleanIconButton\n        {...(\n          restProps as {\n            cleanIconButtonProps: React.ComponentProps<typeof CleanIconButton>;\n          }\n        ).cleanIconButtonProps}\n        description={content}\n        descriptionKbdProps={descriptionKbdProps}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </CleanIconButton>\n    );\n  } else if (type === 'icon-button') {\n    return (\n      <IconButton\n        {...(\n          restProps as {\n            iconButtonProps: React.ComponentProps<typeof IconButton>;\n          }\n        ).iconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </IconButton>\n    );\n  } else if (type === 'outlined-button') {\n    return (\n      <Tooltip\n        type=\"simple\"\n        isOpen={isOpen || timeoutId !== null}\n        {...tooltipProps}\n        onOpenChange={(open) => {\n          if (open) {\n            handleOpenTooltip();\n          } else {\n            handleCloseTooltip();\n          }\n          tooltipProps?.onOpenChange?.(open);\n        }}\n      >\n        <Tooltip.Trigger\n          hasButtonWrapper\n          htmlAttributes={{\n            'aria-label': content,\n            onBlur: handleCloseTooltip,\n            onFocus: handleOpenTooltip,\n            onMouseEnter: handleOpenTooltip,\n            onMouseLeave: handleCloseTooltip,\n          }}\n        >\n          <OutlinedButton\n            variant=\"neutral\"\n            {...(\n              restProps as {\n                buttonProps: React.ComponentProps<typeof OutlinedButton>;\n              }\n            ).buttonProps}\n            onClick={(event) => {\n              if (onClick) {\n                onClick(event);\n              }\n              handleClick();\n            }}\n            leadingVisual={icon}\n            className={restProps.className}\n            htmlAttributes={htmlAttributes}\n          >\n            {children}\n          </OutlinedButton>\n        </Tooltip.Trigger>\n        <Tooltip.Content>\n          {content}\n          {descriptionKbdProps && <Kbd {...descriptionKbdProps} />}\n        </Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\n/**\n * @remarks\n * For more information of the `TooltipProps` type, see the Tooltip component documentation.\n */\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  isDisabled?: boolean;\n  size?: ButtonSizes;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n  type?: 'outlined-button' | 'clean-icon-button' | 'icon-button';\n}\n\nexport const ClipboardButton = ({\n  textToCopy,\n  descriptionKbdProps,\n  isDisabled,\n  size,\n  tooltipProps,\n  htmlAttributes,\n  type,\n}: ClipboardButtonProps) => {\n  const [, copyFunction] = useCopyToClipboard();\n\n  const isOutlinedButton = type === 'outlined-button';\n  const isIconButton = type === 'icon-button';\n\n  const props = isOutlinedButton\n    ? {\n        outlinedButtonProps: {\n          isDisabled,\n          size,\n        },\n        type: 'outlined-button' as const,\n      }\n    : isIconButton\n      ? {\n          iconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'icon-button' as const,\n        }\n      : {\n          cleanIconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'clean-icon-button' as const,\n        };\n\n  return (\n    <ConfirmationButton\n      onClick={() => copyFunction(textToCopy)}\n      description=\"Copy to clipboard\"\n      actionFeedbackText=\"Copied\"\n      descriptionKbdProps={descriptionKbdProps}\n      {...props}\n      tooltipProps={tooltipProps}\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={{\n        'aria-live': 'polite',\n        ...htmlAttributes,\n      }}\n    >\n      {type === 'outlined-button' && 'Copy'}\n    </ConfirmationButton>\n  );\n};\n"]}

package/lib/esm/code-block/CodeBlock.js

@@ -55,7 +55,7 @@ export const CodeBlock = (_a) => {
     const rightPadding = hasHeading
         ? 0
         : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;
-    return (_jsxs(Component, Object.assign({ ref: ref, className: classNames('ndl-code-block-container', className), style: Object.assign({ height: containerHeight }, style) }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "n-flex n-flex-col n-h-full", children: [hasHeading && (_jsx("div", { className: classNames('ndl-code-block-title', {
+    return (_jsxs(Component, Object.assign({ ref: ref, className: classNames('ndl-code-block-container', className), style: Object.assign({ height: containerHeight }, style) }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-code-block-layout", children: [hasHeading && (_jsx("div", { className: classNames('ndl-code-block-title', {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             maxWidth: `calc(100% - ${((_c = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _c !== void 0 ? _c : 0) * 36 + 20}px)`,

package/lib/esm/code-block/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { type IconButton } from '../icon-button';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIconOutline';\nimport { type LanguageProp } from './code-languages';\nimport { type CodeTheme } from './code-themes';\nimport { useCodeLanguage } from './hooks/use-code-language';\nimport { useCodeTheme } from './hooks/use-code-theme';\nimport { useExpandable } from './hooks/use-expandable';\n\ninterface CodeBlockProps {\n  code: string;\n  isDisabled?: boolean;\n  maxHeight?: number;\n  language: LanguageProp | 'text';\n  shouldShowLineNumbers?: boolean;\n  theme?: CodeTheme;\n  heading?: React.ReactNode;\n  actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n  as,\n  maxHeight,\n  code,\n  language,\n  shouldShowLineNumbers,\n  theme,\n  heading,\n  actions,\n  isDisabled,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n  // TODO: Should not be polymorphic (at least not defaulting to a button)\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n  const Component: React.ElementType = as ?? defaultElement;\n\n  const {\n    containerHeight,\n    isExpanded,\n    toggleExpand,\n    hasOverflowingContent,\n    ref: syntaxHighlighterWrapperRef,\n  } = useExpandable(maxHeight, code);\n  const codeTheme = useCodeTheme(theme);\n  const codeLanguage = useCodeLanguage(language);\n\n  const hasMaxHeight = maxHeight !== undefined;\n  const hasHeading = Boolean(heading);\n  const numberOfActions = actions?.length ?? 0;\n\n  const shouldShowExpandButton = hasMaxHeight && hasOverflowingContent;\n  const rightPadding = hasHeading\n    ? 0\n    : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;\n\n  return (\n    <Component\n      ref={ref}\n      className={classNames('ndl-code-block-container', className)}\n      style={{ height: containerHeight, ...style }}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"n-flex n-flex-col n-h-full\">\n        {hasHeading && (\n          <div\n            className={classNames('ndl-code-block-title', {\n              'ndl-disabled': isDisabled,\n            })}\n            style={{\n              maxWidth: `calc(100% - ${(actions?.length ?? 0) * 36 + 20}px)`,\n            }}\n            data-testid=\"ndl-code-block-title\"\n          >\n            {heading}\n          </div>\n        )}\n        <div\n          className={classNames('ndl-code-content-container', {\n            'ndl-disabled': isDisabled,\n          })}\n          style={{\n            height: hasHeading ? 'calc(100% - 24px - 12px)' : '100%',\n          }}\n        >\n          <div\n            ref={syntaxHighlighterWrapperRef}\n            className=\"ndl-highlight-wrapper\"\n            tabIndex={0}\n            role=\"region\"\n            aria-label={`Code content ${isDisabled ? '(disabled)' : ''}`}\n          >\n            <SyntaxHighlighter\n              language={codeLanguage}\n              style={{\n                ...codeTheme,\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  padding: `0 ${rightPadding}px 0.75em 0.75em`,\n                  width: 'fit-content',\n                },\n              }}\n              codeTagProps={{ className: 'n-code' }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={shouldShowLineNumbers}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      </div>\n      <div\n        className={classNames('ndl-code-block-actions', {\n          'ndl-disabled': isDisabled,\n        })}\n      >\n        {actions?.map((iconButtonProps, index) => (\n          <CleanIconButton\n            key={index}\n            isDisabled={isDisabled}\n            {...iconButtonProps}\n            description={`${iconButtonProps.description ?? 'CodeBlock Action'}`}\n            htmlAttributes={{\n              'data-testid': `ndl-action-button-${index}`,\n              ...iconButtonProps.htmlAttributes,\n            }}\n          />\n        ))}\n      </div>\n      {shouldShowExpandButton && (\n        <div className=\"ndl-code-block-expand-button\">\n          <CleanIconButton\n            description={isExpanded ? 'Collapse' : 'Expand'}\n            tooltipProps={{\n              root: {\n                shouldCloseOnReferenceClick: true,\n              },\n            }}\n            onClick={toggleExpand}\n          >\n            {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n          </CleanIconButton>\n        </div>\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qDAAqD,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AAGzF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAavD,MAAM,cAAc,GAAG,KAAK,CAAC;AAE7B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAyC,EAgBtB,EAAE,EAAE;;QAhBkB,EAChE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,qBAAqB,EACrB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAGuC,EAFvC,SAAS,cAdoD,4JAgBjE,CAFa;IACZ,wEAAwE;;IAExE,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,cAAc,CAAC;IAE1D,MAAM,EACJ,eAAe,EACf,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,GAAG,EAAE,2BAA2B,GACjC,GAAG,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACnC,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,CAAC;IAC7C,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACpC,MAAM,eAAe,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,CAAC,CAAC;IAE7C,MAAM,sBAAsB,GAAG,YAAY,IAAI,qBAAqB,CAAC;IACrE,MAAM,YAAY,GAAG,UAAU;QAC7B,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,EAAE,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IAE9E,OAAO,CACL,MAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,SAAS,CAAC,EAC5D,KAAK,kBAAI,MAAM,EAAE,eAAe,IAAK,KAAK,KACtC,SAAS,EACT,cAAc,eAElB,eAAK,SAAS,EAAC,uBAAuB,aACnC,UAAU,IAAI,CACb,cACE,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE;4BAC5C,cAAc,EAAE,UAAU;yBAC3B,CAAC,EACF,KAAK,EAAE;4BACL,QAAQ,EAAE,eAAe,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK;yBAC/D,iBACW,sBAAsB,YAEjC,OAAO,GACJ,CACP,EACD,cACE,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE;4BAClD,cAAc,EAAE,UAAU;yBAC3B,CAAC,EACF,KAAK,EAAE;4BACL,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,MAAM;yBACzD,YAED,cACE,GAAG,EAAE,2BAA2B,EAChC,SAAS,EAAC,uBAAuB,EACjC,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,gBAAgB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,YAE5D,KAAC,iBAAiB,IAChB,QAAQ,EAAE,YAAY,EACtB,KAAK,kCACA,SAAS,KACZ,yBAAyB,EAAE;wCACzB,MAAM,EAAE,CAAC;wCACT,KAAK,EAAE,yCAAyC;wCAChD,UAAU,EAAE,GAAG;wCACf,OAAO,EAAE,KAAK,YAAY,kBAAkB;wCAC5C,KAAK,EAAE,aAAa;qCACrB,KAEH,YAAY,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;gCACrC,2FAA2F;gCAC3F,kFAAkF;gCAClF,gBAAgB;gCAChB,eAAe,EAAE,qBAAqB,YAErC,IAAI,GACa,GAChB,GACF,IACF,EACN,cACE,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE;oBAC9C,cAAc,EAAE,UAAU;iBAC3B,CAAC,YAED,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE;;oBAAC,OAAA,CACxC,KAAC,eAAe,kBAEd,UAAU,EAAE,UAAU,IAClB,eAAe,IACnB,WAAW,EAAE,GAAG,MAAA,eAAe,CAAC,WAAW,mCAAI,kBAAkB,EAAE,EACnE,cAAc,kBACZ,aAAa,EAAE,qBAAqB,KAAK,EAAE,IACxC,eAAe,CAAC,cAAc,MAN9B,KAAK,CAQV,CACH,CAAA;iBAAA,CAAC,GACE,EACL,sBAAsB,IAAI,CACzB,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,eAAe,IACd,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAC/C,YAAY,EAAE;wBACZ,IAAI,EAAE;4BACJ,2BAA2B,EAAE,IAAI;yBAClC;qBACF,EACD,OAAO,EAAE,YAAY,YAEpB,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC,CAAC,KAAC,sBAAsB,KAAG,GACnD,GACd,CACP,KACS,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { type IconButton } from '../icon-button';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIconOutline';\nimport { type LanguageProp } from './code-languages';\nimport { type CodeTheme } from './code-themes';\nimport { useCodeLanguage } from './hooks/use-code-language';\nimport { useCodeTheme } from './hooks/use-code-theme';\nimport { useExpandable } from './hooks/use-expandable';\n\ninterface CodeBlockProps {\n  code: string;\n  isDisabled?: boolean;\n  maxHeight?: number;\n  language: LanguageProp | 'text';\n  shouldShowLineNumbers?: boolean;\n  theme?: CodeTheme;\n  heading?: React.ReactNode;\n  actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n  as,\n  maxHeight,\n  code,\n  language,\n  shouldShowLineNumbers,\n  theme,\n  heading,\n  actions,\n  isDisabled,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n  // TODO: Should not be polymorphic (at least not defaulting to a button)\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n  const Component: React.ElementType = as ?? defaultElement;\n\n  const {\n    containerHeight,\n    isExpanded,\n    toggleExpand,\n    hasOverflowingContent,\n    ref: syntaxHighlighterWrapperRef,\n  } = useExpandable(maxHeight, code);\n  const codeTheme = useCodeTheme(theme);\n  const codeLanguage = useCodeLanguage(language);\n\n  const hasMaxHeight = maxHeight !== undefined;\n  const hasHeading = Boolean(heading);\n  const numberOfActions = actions?.length ?? 0;\n\n  const shouldShowExpandButton = hasMaxHeight && hasOverflowingContent;\n  const rightPadding = hasHeading\n    ? 0\n    : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;\n\n  return (\n    <Component\n      ref={ref}\n      className={classNames('ndl-code-block-container', className)}\n      style={{ height: containerHeight, ...style }}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-code-block-layout\">\n        {hasHeading && (\n          <div\n            className={classNames('ndl-code-block-title', {\n              'ndl-disabled': isDisabled,\n            })}\n            style={{\n              maxWidth: `calc(100% - ${(actions?.length ?? 0) * 36 + 20}px)`,\n            }}\n            data-testid=\"ndl-code-block-title\"\n          >\n            {heading}\n          </div>\n        )}\n        <div\n          className={classNames('ndl-code-content-container', {\n            'ndl-disabled': isDisabled,\n          })}\n          style={{\n            height: hasHeading ? 'calc(100% - 24px - 12px)' : '100%',\n          }}\n        >\n          <div\n            ref={syntaxHighlighterWrapperRef}\n            className=\"ndl-highlight-wrapper\"\n            tabIndex={0}\n            role=\"region\"\n            aria-label={`Code content ${isDisabled ? '(disabled)' : ''}`}\n          >\n            <SyntaxHighlighter\n              language={codeLanguage}\n              style={{\n                ...codeTheme,\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  padding: `0 ${rightPadding}px 0.75em 0.75em`,\n                  width: 'fit-content',\n                },\n              }}\n              codeTagProps={{ className: 'n-code' }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={shouldShowLineNumbers}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      </div>\n      <div\n        className={classNames('ndl-code-block-actions', {\n          'ndl-disabled': isDisabled,\n        })}\n      >\n        {actions?.map((iconButtonProps, index) => (\n          <CleanIconButton\n            key={index}\n            isDisabled={isDisabled}\n            {...iconButtonProps}\n            description={`${iconButtonProps.description ?? 'CodeBlock Action'}`}\n            htmlAttributes={{\n              'data-testid': `ndl-action-button-${index}`,\n              ...iconButtonProps.htmlAttributes,\n            }}\n          />\n        ))}\n      </div>\n      {shouldShowExpandButton && (\n        <div className=\"ndl-code-block-expand-button\">\n          <CleanIconButton\n            description={isExpanded ? 'Collapse' : 'Expand'}\n            tooltipProps={{\n              root: {\n                shouldCloseOnReferenceClick: true,\n              },\n            }}\n            onClick={toggleExpand}\n          >\n            {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n          </CleanIconButton>\n        </div>\n      )}\n    </Component>\n  );\n};\n"]}

package/lib/esm/data-grid/Components.js

@@ -322,7 +322,7 @@ const TableResults = (_a) => {
     if (isSmallNavigation) {
         return null;
     }
-    return (_jsx(Skeleton, Object.assign({ as: "span", onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsx("span", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-results', className) }, restProps, htmlAttributes, { children: children || (_jsxs("span", { children: ["Showing", ' ', _jsx("span", { className: "n-font-bold", children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), ' ', "of ", _jsx("span", { className: "n-font-bold", children: totalRows }), " ", resultsLabel] })) })) })));
+    return (_jsx(Skeleton, Object.assign({ as: "span", onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsx("span", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-results', className) }, restProps, htmlAttributes, { children: children || (_jsxs("span", { children: ["Showing", ' ', _jsx("span", { className: "ndl-data-grid-results-count", children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), ' ', "of ", _jsx("span", { className: "ndl-data-grid-results-count", children: totalRows }), ' ', resultsLabel] })) })) })));
 };
 const RowsPerPage = (_a) => {
     var { portalTarget: portalTargetProp, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["portalTarget", "children", "className", "style", "htmlAttributes", "ref"]);
@@ -486,7 +486,7 @@ const DropDownCell = (_a) => {
 };
 const NoDataIcon = (_a) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const classes = classNames('n-size-token-64', className);
+    const classes = classNames('ndl-data-grid-no-data-icon', className);
     return _jsx(DataGridCrossIcon, Object.assign({ className: classes }, restProps));
 };
 export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, ActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIcon, LoadingPlaceholder, Scrollable, };