@neo4j-ndl/react 4.5.4 → 4.5.6

package/lib/cjs/accordion/Accordion.js

@@ -101,8 +101,8 @@ const AccordionComponent = function AccordionComponent(_a) {
         }
     };
     const classes = (0, classnames_1.default)('ndl-accordion', className);
-    const { expandedItemIds } = restProps;
-    const { expandedItemId } = restProps;
+    // Destructure and omit keys from DOM spread
+    const _b = restProps, { expandedItemIds, expandedItemId } = _b, restAccordionProps = __rest(_b, ["expandedItemIds", "expandedItemId"]);
     const contextValue = isMultiple
         ? {
             expandedItemIds,
@@ -114,7 +114,7 @@ const AccordionComponent = function AccordionComponent(_a) {
             isMultiple,
             onChange,
         };
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, ref: accordionRef, onKeyDown: handleKeyDown, role: "presentation" }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(accordion_context_1.AccordionContext.Provider, { value: contextValue, children: children }) })));
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, ref: accordionRef, onKeyDown: handleKeyDown, role: "presentation" }, restAccordionProps, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(accordion_context_1.AccordionContext.Provider, { value: contextValue, children: children }) })));
 };
 const createItemId = (type, id) => `ndl-accordionitem${type}id-${id}`;
 const BaseAccordionItem = ({ itemId, children, title, className = '', arrowPosition = 'leading', isDisabled = false, onExpandedChange, htmlAttributes, style, as, titleTypographyVariant = 'subheading-medium', hasDivider = true, trailingContent, }) => {

package/lib/cjs/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';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n  type AccordionIsMultiple,\n  type AccordionIsNotMultiple,\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  const { expandedItemIds } = restProps as AccordionIsMultiple<T>;\n  const { expandedItemId } = restProps as AccordionIsNotMultiple<T>;\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      {...restProps}\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}: 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        <button\n          id={buttonElementId}\n          onClick={handleOnClick}\n          className={buttonClasses}\n          aria-expanded={isExpanded}\n          aria-disabled={isDisabled}\n          aria-label={title}\n          aria-controls={panelElementId}\n          disabled={isDisabled}\n        >\n          <span className={iconClasses}>\n            <Typography\n              variant={titleTypographyVariant}\n              className={titleClasses}\n              htmlAttributes={{\n                'aria-level': 2,\n                role: 'heading',\n              }}\n            >\n              {title}\n            </Typography>\n\n            <ChevronDownIconOutline\n              className={classNames('ndl-accordion-item-header-icon', {\n                '-n-rotate-180': isExpanded,\n              })}\n            />\n          </span>\n        </button>\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\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\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';\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}: 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        <button\n          id={buttonElementId}\n          onClick={handleOnClick}\n          className={buttonClasses}\n          aria-expanded={isExpanded}\n          aria-disabled={isDisabled}\n          aria-label={title}\n          aria-controls={panelElementId}\n          disabled={isDisabled}\n        >\n          <span className={iconClasses}>\n            <Typography\n              variant={titleTypographyVariant}\n              className={titleClasses}\n              htmlAttributes={{\n                'aria-level': 2,\n                role: 'heading',\n              }}\n            >\n              {title}\n            </Typography>\n\n            <ChevronDownIconOutline\n              className={classNames('ndl-accordion-item-header-icon', {\n                '-n-rotate-180': isExpanded,\n              })}\n            />\n          </span>\n        </button>\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\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\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/cjs/dialog/Dialog.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -37,7 +70,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const clean_icon_button_1 = require("../clean-icon-button");
 const filled_button_1 = require("../filled-button");
 const icons_1 = require("../icons");
@@ -61,7 +94,10 @@ const typeIcons = {
     warning: ((0, jsx_runtime_1.jsx)(icons_1.ExclamationTriangleIconOutline, { htmlAttributes: { strokeWidth: 3 } })),
 };
 const DialogComponent = (_a) => {
+    var _b;
     var { isOpen, onClose, children, variant, size, container, rootProps, hasDisabledCloseButton = false, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["isOpen", "onClose", "children", "variant", "size", "container", "rootProps", "hasDisabledCloseButton", "htmlAttributes", "className", "style", "ref"]);
+    const id = (0, react_1.useId)();
+    const [headerId, setHeaderId] = (0, react_1.useState)(id);
     const handleCloseClick = (e) => {
         e.preventDefault();
         onClose === null || onClose === void 0 ? void 0 : onClose(e, dialog_types_1.DialogCloseReason.CLOSE_BUTTON_CLICK);
@@ -71,16 +107,28 @@ const DialogComponent = (_a) => {
         if (reason === modal_1.ModalCloseReason.BACKDROP_CLICK) {
             return;
         }
-        onClose === null || onClose === void 0 ? void 0 : onClose(e, reason ? convertCloseReason(reason) : undefined);
+        onClose === null || onClose === void 0 ? void 0 : onClose(e, reason !== undefined ? convertCloseReason(reason) : undefined);
     };
+    const hasHeaderChild = react_1.default.useMemo(() => {
+        const childrenArray = react_1.default.Children.toArray(children);
+        return childrenArray.some((child) => react_1.default.isValidElement(child) && child.type === Header);
+    }, [children]);
+    const ariaLabelledBy = (_b = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes['aria-labelledby']) !== null && _b !== void 0 ? _b : (hasHeaderChild ? headerId : undefined);
     if (!isOpen) {
         return null;
     }
+    if ((htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes['aria-label']) === undefined && !ariaLabelledBy) {
+        console.warn('The Dialog is missing aria-label and Header. Please add one of them for accessibility.');
+    }
     const classes = (0, classnames_1.default)('ndl-dialog', className, {
         'ndl-with-close-button': !hasDisabledCloseButton,
         'ndl-with-icon': !!variant,
     });
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, Object.assign({ isOpen: isOpen, onClose: handleClose, container: container, rootProps: rootProps, size: size, htmlAttributes: htmlAttributes, className: classes, style: style, ref: ref }, restProps, { children: (0, jsx_runtime_1.jsxs)(dialog_context_1.DialogContext.Provider, { value: { variant }, children: [!hasDisabledCloseButton && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { size: "medium", className: "ndl-dialog-close", onClick: handleCloseClick, description: "Close", htmlAttributes: {
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, Object.assign({ isOpen: isOpen, onClose: handleClose, container: container, rootProps: rootProps, size: size, htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { 'aria-labelledby': ariaLabelledBy }), className: classes, style: style, ref: ref }, restProps, { children: (0, jsx_runtime_1.jsxs)(dialog_context_1.DialogContext.Provider, { value: {
+                headerId,
+                setHeaderId,
+                variant,
+            }, children: [!hasDisabledCloseButton && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { size: "medium", className: "ndl-dialog-close", onClick: handleCloseClick, description: "Close", htmlAttributes: {
                         'data-testid': 'ndl-dialog-close',
                         role: 'button',
                     }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dialog-content-wrapper", children: [variant && ((0, jsx_runtime_1.jsx)("div", { className: `ndl-dialog-type-icon ndl-${variant}`, "data-testid": "ndl-dialog-type-icon", children: typeIcons[variant] })), (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-flex-1 n-w-full", children: children })] })] }) })));
@@ -113,9 +161,15 @@ const Actions = (_a) => {
 };
 const Header = (_a) => {
     var { as, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "children", "className", "style", "htmlAttributes", "ref"]);
+    const { headerId, setHeaderId } = (0, dialog_context_1.useDialogContext)();
     const classes = (0, classnames_1.default)('ndl-dialog-header', className);
     const Component = as !== null && as !== void 0 ? as : 'span';
-    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, variant: "title-2", className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: children })));
+    (0, react_1.useEffect)(() => {
+        if (Boolean(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id) === true) {
+            setHeaderId === null || setHeaderId === void 0 ? void 0 : setHeaderId(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id);
+        }
+    }, [htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id, setHeaderId]);
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "title-2" }, restProps, { htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { id: headerId }), children: children })));
 };
 const Subtitle = (_a) => {
     var { as, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "children", "className", "style", "htmlAttributes", "ref"]);

package/lib/cjs/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.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 React from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { type ButtonBase } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { FilledButton } from '../filled-button';\nimport {\n  ExclamationCircleIconOutline,\n  ExclamationTriangleIconOutline,\n  InformationCircleIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { Modal, ModalCloseReason } from '../modal';\nimport { OutlinedButton } from '../outlined-button';\nimport { TextButton } from '../text-button';\nimport { Typography } from '../typography';\nimport { DialogContext, useDialogContext } from './dialog-context';\nimport {\n  type DialogActionsProps,\n  DialogCloseReason,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogHeaderProps,\n  type DialogImageProps,\n  type DialogProps,\n  type DialogSubtitleProps,\n} from './dialog-types';\n\nconst convertCloseReason = (reason: ModalCloseReason): DialogCloseReason => {\n  const dialogReason = reason as unknown as DialogCloseReason;\n  if (Object.values(DialogCloseReason).includes(dialogReason)) {\n    return dialogReason;\n  }\n\n  throw new Error(`Unknown reason '${reason}' received from popup`);\n};\n/* Stroke width on regular icons is 1.5px */\nconst typeIcons: Record<\n  NonNullable<React.ComponentProps<typeof Dialog>['variant']>,\n  React.ReactNode\n> = {\n  danger: <ExclamationCircleIconOutline htmlAttributes={{ strokeWidth: 3 }} />,\n  info: <InformationCircleIconOutline htmlAttributes={{ strokeWidth: 3 }} />,\n  warning: (\n    <ExclamationTriangleIconOutline htmlAttributes={{ strokeWidth: 3 }} />\n  ),\n};\n\nconst DialogComponent = ({\n  isOpen,\n  onClose,\n  children,\n  variant,\n  size,\n  container,\n  rootProps,\n  hasDisabledCloseButton = false,\n  htmlAttributes,\n  className,\n  style,\n  ref,\n  ...restProps\n}: CommonProps<'div', DialogProps>) => {\n  const handleCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    onClose?.(e, DialogCloseReason.CLOSE_BUTTON_CLICK);\n  };\n\n  const handleClose = (\n    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    reason?: ModalCloseReason,\n  ) => {\n    // Dialog should not be closed when backdrop is clicked\n    if (reason === ModalCloseReason.BACKDROP_CLICK) {\n      return;\n    }\n\n    onClose?.(e, reason ? convertCloseReason(reason) : undefined);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const classes = classNames('ndl-dialog', className, {\n    'ndl-with-close-button': !hasDisabledCloseButton,\n    'ndl-with-icon': !!variant,\n  });\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={handleClose}\n      container={container}\n      rootProps={rootProps}\n      size={size}\n      htmlAttributes={htmlAttributes}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n    >\n      <DialogContext.Provider value={{ variant }}>\n        {!hasDisabledCloseButton && (\n          <CleanIconButton\n            size=\"medium\"\n            className=\"ndl-dialog-close\"\n            onClick={handleCloseClick}\n            description=\"Close\"\n            htmlAttributes={{\n              'data-testid': 'ndl-dialog-close',\n              role: 'button',\n            }}\n          >\n            <XMarkIconOutline />\n          </CleanIconButton>\n        )}\n        <div className=\"ndl-dialog-content-wrapper\">\n          {variant && (\n            <div\n              className={`ndl-dialog-type-icon ndl-${variant}`}\n              data-testid=\"ndl-dialog-type-icon\"\n            >\n              {typeIcons[variant]}\n            </div>\n          )}\n          <div className=\"n-flex n-flex-col n-flex-1 n-w-full\">{children}</div>\n        </div>\n      </DialogContext.Provider>\n    </Modal>\n  );\n};\n\nconst Actions = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogActionsProps>) => {\n  const { variant } = useDialogContext();\n  const classes = classNames('ndl-dialog-actions', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  let childrenToRender = children;\n\n  // For danger dialogs, we want to convert primary buttons to danger buttons by default\n  if (variant === 'danger') {\n    childrenToRender = React.Children.map(children, (element) => {\n      if (!React.isValidElement(element)) {\n        return;\n      }\n      if (\n        element.type === OutlinedButton ||\n        element.type === FilledButton ||\n        element.type === TextButton\n      ) {\n        const buttonElement = element as React.ReactElement<\n          React.ComponentProps<typeof ButtonBase>\n        >;\n\n        if (\n          buttonElement.props.variant === 'primary' ||\n          buttonElement.props.variant === undefined\n        ) {\n          return React.cloneElement(buttonElement, {\n            ...buttonElement.props,\n            variant: 'danger',\n          });\n        }\n      }\n      return element;\n    });\n  }\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {childrenToRender}\n    </Component>\n  );\n};\n\nconst Header = <T extends React.ElementType = 'span'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogHeaderProps>) => {\n  const classes = classNames('ndl-dialog-header', className);\n  const Component: React.ElementType = as ?? 'span';\n\n  return (\n    <Typography\n      as={Component}\n      variant=\"title-2\"\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Subtitle = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogSubtitleProps>) => {\n  const classes = classNames('ndl-dialog-subtitle', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Description = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogDescriptionProps>) => {\n  const classes = classNames('ndl-dialog-description', className);\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Content = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogContentProps>) => {\n  const classes = classNames('ndl-dialog-content', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Image = ({\n  src,\n  alt,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'img', DialogImageProps>) => {\n  const classes = classNames('ndl-dialog-image', className);\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    />\n  );\n};\n\nconst Dialog = Object.assign(DialogComponent, {\n  Actions,\n  Content,\n  Description,\n  Header,\n  Image,\n  Subtitle,\n});\n\nexport { Dialog };\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.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 React, { useEffect, useId, useState } from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { type ButtonBase } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { FilledButton } from '../filled-button';\nimport {\n  ExclamationCircleIconOutline,\n  ExclamationTriangleIconOutline,\n  InformationCircleIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { Modal, ModalCloseReason } from '../modal';\nimport { OutlinedButton } from '../outlined-button';\nimport { TextButton } from '../text-button';\nimport { Typography } from '../typography';\nimport { DialogContext, useDialogContext } from './dialog-context';\nimport {\n  type DialogActionsProps,\n  DialogCloseReason,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogHeaderProps,\n  type DialogImageProps,\n  type DialogProps,\n  type DialogSubtitleProps,\n} from './dialog-types';\n\nconst convertCloseReason = (reason: ModalCloseReason): DialogCloseReason => {\n  const dialogReason = reason as unknown as DialogCloseReason;\n  if (Object.values(DialogCloseReason).includes(dialogReason)) {\n    return dialogReason;\n  }\n\n  throw new Error(`Unknown reason '${reason}' received from popup`);\n};\n/* Stroke width on regular icons is 1.5px */\nconst typeIcons: Record<\n  NonNullable<React.ComponentProps<typeof Dialog>['variant']>,\n  React.ReactNode\n> = {\n  danger: <ExclamationCircleIconOutline htmlAttributes={{ strokeWidth: 3 }} />,\n  info: <InformationCircleIconOutline htmlAttributes={{ strokeWidth: 3 }} />,\n  warning: (\n    <ExclamationTriangleIconOutline htmlAttributes={{ strokeWidth: 3 }} />\n  ),\n};\n\nconst DialogComponent = ({\n  isOpen,\n  onClose,\n  children,\n  variant,\n  size,\n  container,\n  rootProps,\n  hasDisabledCloseButton = false,\n  htmlAttributes,\n  className,\n  style,\n  ref,\n  ...restProps\n}: CommonProps<'div', DialogProps>) => {\n  const id = useId();\n  const [headerId, setHeaderId] = useState<string | undefined>(id);\n\n  const handleCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    onClose?.(e, DialogCloseReason.CLOSE_BUTTON_CLICK);\n  };\n\n  const handleClose = (\n    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    reason?: ModalCloseReason,\n  ) => {\n    // Dialog should not be closed when backdrop is clicked\n    if (reason === ModalCloseReason.BACKDROP_CLICK) {\n      return;\n    }\n\n    onClose?.(e, reason !== undefined ? convertCloseReason(reason) : undefined);\n  };\n\n  const hasHeaderChild = React.useMemo(() => {\n    const childrenArray = React.Children.toArray(children);\n    return childrenArray.some(\n      (child) => React.isValidElement(child) && child.type === Header,\n    );\n  }, [children]);\n\n  const ariaLabelledBy =\n    htmlAttributes?.['aria-labelledby'] ??\n    (hasHeaderChild ? headerId : undefined);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  if (htmlAttributes?.['aria-label'] === undefined && !ariaLabelledBy) {\n    console.warn(\n      'The Dialog is missing aria-label and Header. Please add one of them for accessibility.',\n    );\n  }\n\n  const classes = classNames('ndl-dialog', className, {\n    'ndl-with-close-button': !hasDisabledCloseButton,\n    'ndl-with-icon': !!variant,\n  });\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={handleClose}\n      container={container}\n      rootProps={rootProps}\n      size={size}\n      htmlAttributes={{\n        ...htmlAttributes,\n        'aria-labelledby': ariaLabelledBy,\n      }}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n    >\n      <DialogContext.Provider\n        value={{\n          headerId,\n          setHeaderId,\n          variant,\n        }}\n      >\n        {!hasDisabledCloseButton && (\n          <CleanIconButton\n            size=\"medium\"\n            className=\"ndl-dialog-close\"\n            onClick={handleCloseClick}\n            description=\"Close\"\n            htmlAttributes={{\n              'data-testid': 'ndl-dialog-close',\n              role: 'button',\n            }}\n          >\n            <XMarkIconOutline />\n          </CleanIconButton>\n        )}\n        <div className=\"ndl-dialog-content-wrapper\">\n          {variant && (\n            <div\n              className={`ndl-dialog-type-icon ndl-${variant}`}\n              data-testid=\"ndl-dialog-type-icon\"\n            >\n              {typeIcons[variant]}\n            </div>\n          )}\n          <div className=\"n-flex n-flex-col n-flex-1 n-w-full\">{children}</div>\n        </div>\n      </DialogContext.Provider>\n    </Modal>\n  );\n};\n\nconst Actions = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogActionsProps>) => {\n  const { variant } = useDialogContext();\n  const classes = classNames('ndl-dialog-actions', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  let childrenToRender = children;\n\n  // For danger dialogs, we want to convert primary buttons to danger buttons by default\n  if (variant === 'danger') {\n    childrenToRender = React.Children.map(children, (element) => {\n      if (!React.isValidElement(element)) {\n        return;\n      }\n      if (\n        element.type === OutlinedButton ||\n        element.type === FilledButton ||\n        element.type === TextButton\n      ) {\n        const buttonElement = element as React.ReactElement<\n          React.ComponentProps<typeof ButtonBase>\n        >;\n\n        if (\n          buttonElement.props.variant === 'primary' ||\n          buttonElement.props.variant === undefined\n        ) {\n          return React.cloneElement(buttonElement, {\n            ...buttonElement.props,\n            variant: 'danger',\n          });\n        }\n      }\n      return element;\n    });\n  }\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {childrenToRender}\n    </Component>\n  );\n};\n\nconst Header = <T extends React.ElementType = 'span'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogHeaderProps>) => {\n  const { headerId, setHeaderId } = useDialogContext();\n  const classes = classNames('ndl-dialog-header', className);\n  const Component: React.ElementType = as ?? 'span';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setHeaderId?.(htmlAttributes?.id);\n    }\n  }, [htmlAttributes?.id, setHeaderId]);\n\n  return (\n    <Typography\n      as={Component}\n      className={classes}\n      ref={ref}\n      style={style}\n      variant=\"title-2\"\n      {...restProps}\n      htmlAttributes={{ ...htmlAttributes, id: headerId }}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Subtitle = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogSubtitleProps>) => {\n  const classes = classNames('ndl-dialog-subtitle', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Description = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogDescriptionProps>) => {\n  const classes = classNames('ndl-dialog-description', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Content = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogContentProps>) => {\n  const classes = classNames('ndl-dialog-content', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Image = ({\n  src,\n  alt,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'img', DialogImageProps>) => {\n  const classes = classNames('ndl-dialog-image', className);\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    />\n  );\n};\n\nconst Dialog = Object.assign(DialogComponent, {\n  Actions,\n  Content,\n  Description,\n  Header,\n  Image,\n  Subtitle,\n});\n\nexport { Dialog };\n"]}

package/lib/cjs/dialog/dialog-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-types.js","sourceRoot":"","sources":["../../../src/dialog/dialog-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AASH,iCAAiC;AACjC,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,sDAAiC,CAAA;IACjC,4DAAuC,CAAA;AACzC,CAAC,EAHW,iBAAiB,iCAAjB,iBAAiB,QAG5B","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport type { ModalProps } from '../modal';\n\nexport interface DialogBaseProps {\n  /** The content to display within the dialog component. */\n  children?: React.ReactNode;\n}\n\n// Should extend ModalCloseReason\nexport enum DialogCloseReason {\n  ESCAPE_KEY_DOWN = 'escapeKeyDown',\n  CLOSE_BUTTON_CLICK = 'closeButtonClick',\n}\n\nexport interface DialogProps extends Omit<ModalProps, 'onClose'> {\n  /** Controls whether the dialog is open or closed. */\n  isOpen: boolean;\n  /** Type of dialog, which determines the icon and styling. */\n  variant?: 'info' | 'warning' | 'danger';\n  /** Whether to disable the close button in the top-right corner. */\n  hasDisabledCloseButton?: boolean;\n  /** Callback function called when the dialog is closed. */\n  onClose?: (\n    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    reason?: DialogCloseReason,\n  ) => void;\n}\n\nexport interface DialogContextType {\n  variant?: DialogProps['variant'];\n}\n\nexport type DialogActionsProps = DialogBaseProps;\n\nexport type DialogHeaderProps = DialogBaseProps;\n\nexport type DialogSubtitleProps = DialogBaseProps;\n\nexport type DialogDescriptionProps = DialogBaseProps;\n\nexport type DialogContentProps = DialogBaseProps;\n\nexport type DialogImageProps = {\n  /** Source URL of the image */\n  src: string;\n  /** Alternative text for the image */\n  alt: string;\n};\n"]}
+{"version":3,"file":"dialog-types.js","sourceRoot":"","sources":["../../../src/dialog/dialog-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AASH,iCAAiC;AACjC,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,sDAAiC,CAAA;IACjC,4DAAuC,CAAA;AACzC,CAAC,EAHW,iBAAiB,iCAAjB,iBAAiB,QAG5B","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport type { ModalProps } from '../modal';\n\nexport interface DialogBaseProps {\n  /** The content to display within the dialog component. */\n  children?: React.ReactNode;\n}\n\n// Should extend ModalCloseReason\nexport enum DialogCloseReason {\n  ESCAPE_KEY_DOWN = 'escapeKeyDown',\n  CLOSE_BUTTON_CLICK = 'closeButtonClick',\n}\n\nexport interface DialogProps extends Omit<ModalProps, 'onClose'> {\n  /** Controls whether the dialog is open or closed. */\n  isOpen: boolean;\n  /** Type of dialog, which determines the icon and styling. */\n  variant?: 'info' | 'warning' | 'danger';\n  /** Whether to disable the close button in the top-right corner. */\n  hasDisabledCloseButton?: boolean;\n  /** Callback function called when the dialog is closed. */\n  onClose?: (\n    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    reason?: DialogCloseReason,\n  ) => void;\n}\n\nexport interface DialogContextType {\n  headerId?: string;\n  setHeaderId?: (id: string) => void;\n  variant?: DialogProps['variant'];\n}\n\nexport type DialogActionsProps = DialogBaseProps;\n\nexport type DialogHeaderProps = DialogBaseProps;\n\nexport type DialogSubtitleProps = DialogBaseProps;\n\nexport type DialogDescriptionProps = DialogBaseProps;\n\nexport type DialogContentProps = DialogBaseProps;\n\nexport type DialogImageProps = {\n  /** Source URL of the image */\n  src: string;\n  /** Alternative text for the image */\n  alt: string;\n};\n"]}

package/lib/cjs/spotlight/Spotlight.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -38,25 +71,45 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 const react_1 = require("@floating-ui/react");
 const classnames_1 = __importDefault(require("classnames"));
-const react_2 = require("react");
+const react_2 = __importStar(require("react"));
 const popover_1 = require("../popover");
 const status_label_1 = require("../status-label");
 const theme_1 = require("../theme");
 const typography_1 = require("../typography");
 const SpotlightProvider_1 = require("./SpotlightProvider");
+const SpotlightInstanceContext = (0, react_2.createContext)(null);
+const useSpotlightInstance = () => {
+    const ctx = (0, react_2.useContext)(SpotlightInstanceContext);
+    if (ctx === null) {
+        throw new Error('Spotlight subcomponents must be used within <Spotlight />');
+    }
+    return ctx;
+};
 const use_spotlight_1 = require("./use-spotlight");
 const SpotlightHeader = (_a) => {
     var { children, className, as, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "as", "style", "htmlAttributes", "ref"]);
-    (0, SpotlightProvider_1.useSpotlightContext)();
     const classes = (0, classnames_1.default)('ndl-spotlight-header', className);
-    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ variant: "title-4", ref: ref, as: as !== null && as !== void 0 ? as : 'div', className: classes, style: style }, restProps, htmlAttributes, { children: children })));
+    const { headerId, setHeaderId } = useSpotlightInstance();
+    const Component = as !== null && as !== void 0 ? as : 'div';
+    (0, react_2.useEffect)(() => {
+        if (Boolean(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id) === true) {
+            setHeaderId === null || setHeaderId === void 0 ? void 0 : setHeaderId(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id);
+        }
+    }, [setHeaderId, htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id]);
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "title-4" }, restProps, { htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { id: headerId }), children: children })));
 };
 SpotlightHeader.displayName = 'Spotlight.Header';
 const SpotlightBody = (_a) => {
     var { children, className, as, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "as", "style", "htmlAttributes", "ref"]);
-    (0, SpotlightProvider_1.useSpotlightContext)();
     const classes = (0, classnames_1.default)('ndl-spotlight-body', className);
-    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ variant: "body-medium", className: classes, as: as !== null && as !== void 0 ? as : 'div', style: style, ref: ref }, restProps, htmlAttributes, { children: children })));
+    const { descriptionId, setDescriptionId } = useSpotlightInstance();
+    const Component = as !== null && as !== void 0 ? as : 'div';
+    (0, react_2.useEffect)(() => {
+        if (Boolean(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id) === true) {
+            setDescriptionId === null || setDescriptionId === void 0 ? void 0 : setDescriptionId(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id);
+        }
+    }, [setDescriptionId, htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id]);
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "body-medium" }, restProps, { htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { id: descriptionId }), children: children })));
 };
 SpotlightBody.displayName = 'Spotlight.Body';
 const SpotlightLabel = (_a) => {
@@ -82,10 +135,27 @@ const SpotlightIconWrapper = (_a) => {
 };
 SpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';
 const SpotlightComponent = (_a) => {
+    var _b, _c;
     var { target, beforeActions, actions, initialFocus, onClose, placement, children, className, style, htmlAttributes, closeOnClickOutside = false, onOpen, ref } = _a, restProps = __rest(_a, ["target", "beforeActions", "actions", "initialFocus", "onClose", "placement", "children", "className", "style", "htmlAttributes", "closeOnClickOutside", "onOpen", "ref"]);
+    const generatedHeaderId = (0, react_2.useId)();
+    const generatedDescriptionId = (0, react_2.useId)();
     const [targetElement, setTargetElement] = (0, react_2.useState)(null);
     const actionsRef = (0, react_2.useRef)(null);
-    const { isActiveSpotlight, isOpen, setActiveSpotlight, setIsOpen, registeredTargets, hasOverlay, } = (0, SpotlightProvider_1.useSpotlightContext)();
+    const { hasOverlay, isActiveSpotlight, isOpen, registeredTargets, setActiveSpotlight, setIsOpen, } = (0, SpotlightProvider_1.useSpotlightContext)();
+    const [headerId, setHeaderId] = (0, react_2.useState)(generatedHeaderId);
+    const [descriptionId, setDescriptionId] = (0, react_2.useState)(generatedDescriptionId);
+    // Determine if a Header child exists
+    const hasHeaderChild = react_2.default.useMemo(() => {
+        const childrenArray = react_2.default.Children.toArray(children);
+        return childrenArray.some((child) => react_2.default.isValidElement(child) && child.type === SpotlightHeader);
+    }, [children]);
+    // Source ARIA from htmlAttributes
+    const ariaLabel = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes['aria-label'];
+    const ariaLabelledBy = (_b = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes['aria-labelledby']) !== null && _b !== void 0 ? _b : (hasHeaderChild ? headerId : undefined);
+    const ariaDescribedBy = (_c = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes['aria-describedby']) !== null && _c !== void 0 ? _c : descriptionId;
+    if (ariaLabel === undefined && !ariaLabelledBy) {
+        console.warn('The Spotlight is missing aria-label and Header. Please add one of them for accessibility.');
+    }
     const onOpenChange = (isOpen, event) => {
         if (!isOpen) {
             if (event instanceof PointerEvent) {
@@ -131,13 +201,18 @@ const SpotlightComponent = (_a) => {
     if (!spotlight.context.open) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: spotlight.context, modal: true, initialFocus: findInitialFocus(), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasOverlay === true && ((0, jsx_runtime_1.jsx)(react_1.FloatingOverlay, { className: "ndl-spotlight-overlay ndl-spotlight-overlay-top", onPointerDown: (e) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: spotlight.context, modal: true, initialFocus: findInitialFocus(), children: (0, jsx_runtime_1.jsxs)(SpotlightInstanceContext.Provider, { value: {
+                    descriptionId,
+                    headerId,
+                    setDescriptionId,
+                    setHeaderId,
+                }, children: [hasOverlay === true && ((0, jsx_runtime_1.jsx)(react_1.FloatingOverlay, { className: "ndl-spotlight-overlay ndl-spotlight-overlay-top", onPointerDown: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
                         }, onTouchStart: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
-                        } })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: mergedRef, className: classes, style: Object.assign(Object.assign(Object.assign({}, spotlight.floatingStyles), spotlight.transitionStyles), style) }, spotlight.getFloatingProps(Object.assign({}, htmlAttributes)), restProps, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (Boolean(beforeActions) || Boolean(actions)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-spotlight-footer", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: beforeActions }), Boolean(actions) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-spotlight-actions", ref: actionsRef, children: actions }))] }))] }))] }) }) }));
+                        } })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: mergedRef, className: classes, style: Object.assign(Object.assign(Object.assign({}, spotlight.floatingStyles), spotlight.transitionStyles), style) }, spotlight.getFloatingProps(Object.assign(Object.assign({}, htmlAttributes), { 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-modal': 'true' })), restProps, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (Boolean(beforeActions) || Boolean(actions)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-spotlight-footer", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: beforeActions }), Boolean(actions) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-spotlight-actions", ref: actionsRef, children: actions }))] }))] }))] }) }) }));
 };
 SpotlightComponent.displayName = 'Spotlight';
 const Spotlight = Object.assign(SpotlightComponent, {

package/lib/cjs/spotlight/Spotlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.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  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { placementTranslation, type Popover } from '../popover';\nimport { StatusLabel } from '../status-label';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { useSpotlightContext } from './SpotlightProvider';\nimport { useSpotlight } from './use-spotlight';\n\ntype SpotlightHeaderProps = {\n  /** The spotlight header content */\n  children?: React.ReactNode;\n};\n\nconst SpotlightHeader = <T extends React.ElementType = 'div'>({\n  children,\n  className,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightHeaderProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-header', className);\n\n  return (\n    <Typography\n      variant=\"title-4\"\n      ref={ref}\n      as={as ?? 'div'}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nSpotlightHeader.displayName = 'Spotlight.Header';\n\ntype SpotlightBodyProps = {\n  /** The spotlight body content */\n  children?: React.ReactNode;\n};\n\nconst SpotlightBody = <T extends React.ElementType = 'div'>({\n  children,\n  className,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightBodyProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-body', className);\n\n  return (\n    <Typography\n      variant=\"body-medium\"\n      className={classes}\n      as={as ?? 'div'}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nSpotlightBody.displayName = 'Spotlight.Body';\n\ntype SpotlightLabelProps = Omit<\n  React.ComponentProps<typeof StatusLabel>,\n  'color' | 'fill'\n>;\n\nconst SpotlightLabel = <T extends React.ElementType = 'div'>({\n  className,\n  children,\n  hasIcon,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightLabelProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-label', className);\n\n  return (\n    <StatusLabel\n      fill=\"semi-filled\"\n      variant=\"discovery\"\n      hasIcon={hasIcon}\n      ref={ref}\n      as={as}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </StatusLabel>\n  );\n};\n\nSpotlightLabel.displayName = 'Spotlight.Label';\n\ntype SpotlightImageProps = {\n  /** A string that represents the URL of the image */\n  src: string;\n  /** A string that represents the alt text of the image */\n  alt: string;\n};\n\nconst SpotlightImage = ({\n  src,\n  alt,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'img', SpotlightImageProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-image n-body-medium', className);\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    />\n  );\n};\n\nSpotlightImage.displayName = 'Spotlight.Image';\n\ntype SpotlightIconWrapperProps = {\n  /** Content displayed in the icon wrapper */\n  children?: React.ReactNode;\n};\n\nconst SpotlightIconWrapper = <T extends React.ElementType = 'div'>({\n  children,\n  className,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightIconWrapperProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-icon-wrapper', className);\n  const Component = as ?? 'div';\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nSpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';\n\nexport type SpotlightCloseAction = 'clickOutside' | 'escapeKeyDown';\n\nexport type SpotlightProps = {\n  /** The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to */\n  target: string;\n  /** The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. */\n  actions?: React.ReactNode;\n  /** A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour */\n  beforeActions?: React.ReactNode;\n  /** A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either \"clickOutside\" or \"escapeKeyDown\") */\n  onClose?: (action: SpotlightCloseAction) => void;\n  /** Callback function called when the spotlight is opened */\n  onOpen?: () => void;\n  /** Children should be Spotlight subcomponents */\n  children?: React.ReactNode;\n} & Pick<\n  React.ComponentProps<typeof Popover>,\n  'placement' | 'initialFocus' | 'closeOnClickOutside'\n>;\n\nconst SpotlightComponent = ({\n  target,\n  beforeActions,\n  actions,\n  initialFocus,\n  onClose,\n  placement,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  closeOnClickOutside = false,\n  onOpen,\n  ref,\n  ...restProps\n}: CommonProps<'div', SpotlightProps>) => {\n  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n  const actionsRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    isActiveSpotlight,\n    isOpen,\n    setActiveSpotlight,\n    setIsOpen,\n    registeredTargets,\n    hasOverlay,\n  } = useSpotlightContext();\n\n  const onOpenChange = (isOpen: boolean, event?: Event) => {\n    if (!isOpen) {\n      if (event instanceof PointerEvent) {\n        onClose?.('clickOutside');\n      } else if (event instanceof KeyboardEvent) {\n        onClose?.('escapeKeyDown');\n      }\n      setActiveSpotlight(null);\n      setIsOpen(false);\n    }\n  };\n\n  const spotlight = useSpotlight({\n    anchorElement: targetElement,\n    closeOnClickOutside,\n    initialFocus,\n    isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n    onOpenChange,\n    placement: placement ? placementTranslation[placement] : undefined,\n  });\n\n  const mergedRef = useMergeRefs([spotlight.refs.setFloating, ref]);\n\n  const { themeClassName } = useNeedleTheme();\n  const classes = classNames('ndl-spotlight', themeClassName, className);\n\n  useEffect(() => {\n    setTargetElement(registeredTargets[target]?.current);\n  }, [target, registeredTargets]);\n\n  useEffect(() => {\n    if (isOpen && isActiveSpotlight(target)) {\n      onOpen?.();\n    }\n  }, [isOpen, onOpen, isActiveSpotlight, target]);\n\n  const findInitialFocus = () => {\n    if (spotlight.initialFocus !== undefined) {\n      return spotlight.initialFocus;\n    }\n    if (!actionsRef.current) {\n      return undefined;\n    }\n    const focusableEls = actionsRef.current.querySelectorAll(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    return focusableEls.length - 1;\n  };\n\n  if (!spotlight.context.open) {\n    return null;\n  }\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager\n        context={spotlight.context}\n        modal={true}\n        initialFocus={findInitialFocus()}\n      >\n        <>\n          {hasOverlay === true && (\n            <FloatingOverlay\n              className=\"ndl-spotlight-overlay ndl-spotlight-overlay-top\"\n              onPointerDown={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n              onTouchStart={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            />\n          )}\n          <div\n            ref={mergedRef}\n            className={classes}\n            style={{\n              ...spotlight.floatingStyles,\n              ...spotlight.transitionStyles,\n              ...style,\n            }}\n            {...spotlight.getFloatingProps({ ...htmlAttributes })}\n            {...restProps}\n          >\n            <div>{children}</div>\n            {(Boolean(beforeActions) || Boolean(actions)) && (\n              <div className=\"ndl-spotlight-footer\">\n                <Typography variant=\"body-medium\">{beforeActions}</Typography>\n                {Boolean(actions) && (\n                  <div className=\"ndl-spotlight-actions\" ref={actionsRef}>\n                    {actions}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        </>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n};\n\nSpotlightComponent.displayName = 'Spotlight';\n\nconst Spotlight = Object.assign(SpotlightComponent, {\n  Body: SpotlightBody,\n  Header: SpotlightHeader,\n  IconWrapper: SpotlightIconWrapper,\n  Image: SpotlightImage,\n  Label: SpotlightLabel,\n});\n\nexport { Spotlight };\n"]}
+{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.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  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { placementTranslation, type Popover } from '../popover';\nimport { StatusLabel } from '../status-label';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { useSpotlightContext } from './SpotlightProvider';\n\n// Local instance context to pass stable ARIA ids to subcomponents\ntype SpotlightInstanceContextType = {\n  headerId?: string;\n  descriptionId?: string;\n  setHeaderId?: (id: string | undefined) => void;\n  setDescriptionId?: (id: string | undefined) => void;\n};\n\nconst SpotlightInstanceContext =\n  createContext<SpotlightInstanceContextType | null>(null);\n\nconst useSpotlightInstance = (): SpotlightInstanceContextType => {\n  const ctx = useContext(SpotlightInstanceContext);\n  if (ctx === null) {\n    throw new Error(\n      'Spotlight subcomponents must be used within <Spotlight />',\n    );\n  }\n  return ctx;\n};\nimport { useSpotlight } from './use-spotlight';\n\ntype SpotlightHeaderProps = {\n  /** The spotlight header content */\n  children?: React.ReactNode;\n};\n\nconst SpotlightHeader = <T extends React.ElementType = 'div'>({\n  children,\n  className,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightHeaderProps>) => {\n  const classes = classNames('ndl-spotlight-header', className);\n  const { headerId, setHeaderId } = useSpotlightInstance();\n  const Component: React.ElementType = as ?? 'div';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setHeaderId?.(htmlAttributes?.id);\n    }\n  }, [setHeaderId, htmlAttributes?.id]);\n\n  return (\n    <Typography\n      as={Component}\n      className={classes}\n      ref={ref}\n      style={style}\n      variant=\"title-4\"\n      {...restProps}\n      htmlAttributes={{ ...htmlAttributes, id: headerId }}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nSpotlightHeader.displayName = 'Spotlight.Header';\n\ntype SpotlightBodyProps = {\n  /** The spotlight body content */\n  children?: React.ReactNode;\n};\n\nconst SpotlightBody = <T extends React.ElementType = 'div'>({\n  children,\n  className,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightBodyProps>) => {\n  const classes = classNames('ndl-spotlight-body', className);\n  const { descriptionId, setDescriptionId } = useSpotlightInstance();\n  const Component: React.ElementType = as ?? 'div';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setDescriptionId?.(htmlAttributes?.id);\n    }\n  }, [setDescriptionId, htmlAttributes?.id]);\n\n  return (\n    <Typography\n      as={Component}\n      className={classes}\n      ref={ref}\n      style={style}\n      variant=\"body-medium\"\n      {...restProps}\n      htmlAttributes={{ ...htmlAttributes, id: descriptionId }}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nSpotlightBody.displayName = 'Spotlight.Body';\n\ntype SpotlightLabelProps = Omit<\n  React.ComponentProps<typeof StatusLabel>,\n  'color' | 'fill'\n>;\n\nconst SpotlightLabel = <T extends React.ElementType = 'div'>({\n  className,\n  children,\n  hasIcon,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightLabelProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-label', className);\n\n  return (\n    <StatusLabel\n      fill=\"semi-filled\"\n      variant=\"discovery\"\n      hasIcon={hasIcon}\n      ref={ref}\n      as={as}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </StatusLabel>\n  );\n};\n\nSpotlightLabel.displayName = 'Spotlight.Label';\n\ntype SpotlightImageProps = {\n  /** A string that represents the URL of the image */\n  src: string;\n  /** A string that represents the alt text of the image */\n  alt: string;\n};\n\nconst SpotlightImage = ({\n  src,\n  alt,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'img', SpotlightImageProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-image n-body-medium', className);\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    />\n  );\n};\n\nSpotlightImage.displayName = 'Spotlight.Image';\n\ntype SpotlightIconWrapperProps = {\n  /** Content displayed in the icon wrapper */\n  children?: React.ReactNode;\n};\n\nconst SpotlightIconWrapper = <T extends React.ElementType = 'div'>({\n  children,\n  className,\n  as,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SpotlightIconWrapperProps>) => {\n  useSpotlightContext();\n  const classes = classNames('ndl-spotlight-icon-wrapper', className);\n  const Component = as ?? 'div';\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nSpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';\n\nexport type SpotlightCloseAction = 'clickOutside' | 'escapeKeyDown';\n\nexport type SpotlightProps = {\n  /** The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to */\n  target: string;\n  /** The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. */\n  actions?: React.ReactNode;\n  /** A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour */\n  beforeActions?: React.ReactNode;\n  /** A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either \"clickOutside\" or \"escapeKeyDown\") */\n  onClose?: (action: SpotlightCloseAction) => void;\n  /** Callback function called when the spotlight is opened */\n  onOpen?: () => void;\n  /** Children should be Spotlight subcomponents */\n  children?: React.ReactNode;\n} & Pick<\n  React.ComponentProps<typeof Popover>,\n  'placement' | 'initialFocus' | 'closeOnClickOutside'\n>;\n\nconst SpotlightComponent = ({\n  target,\n  beforeActions,\n  actions,\n  initialFocus,\n  onClose,\n  placement,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  closeOnClickOutside = false,\n  onOpen,\n  ref,\n  ...restProps\n}: CommonProps<'div', SpotlightProps>) => {\n  const generatedHeaderId = useId();\n  const generatedDescriptionId = useId();\n  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n  const actionsRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    hasOverlay,\n    isActiveSpotlight,\n    isOpen,\n    registeredTargets,\n    setActiveSpotlight,\n    setIsOpen,\n  } = useSpotlightContext();\n\n  const [headerId, setHeaderId] = useState<string | undefined>(\n    generatedHeaderId,\n  );\n  const [descriptionId, setDescriptionId] = useState<string | undefined>(\n    generatedDescriptionId,\n  );\n\n  // Determine if a Header child exists\n  const hasHeaderChild = React.useMemo(() => {\n    const childrenArray = React.Children.toArray(children);\n    return childrenArray.some(\n      (child) => React.isValidElement(child) && child.type === SpotlightHeader,\n    );\n  }, [children]);\n\n  // Source ARIA from htmlAttributes\n  const ariaLabel = htmlAttributes?.['aria-label'];\n  const ariaLabelledBy =\n    htmlAttributes?.['aria-labelledby'] ??\n    (hasHeaderChild ? headerId : undefined);\n  const ariaDescribedBy = htmlAttributes?.['aria-describedby'] ?? descriptionId;\n\n  if (ariaLabel === undefined && !ariaLabelledBy) {\n    console.warn(\n      'The Spotlight is missing aria-label and Header. Please add one of them for accessibility.',\n    );\n  }\n\n  const onOpenChange = (isOpen: boolean, event?: Event) => {\n    if (!isOpen) {\n      if (event instanceof PointerEvent) {\n        onClose?.('clickOutside');\n      } else if (event instanceof KeyboardEvent) {\n        onClose?.('escapeKeyDown');\n      }\n      setActiveSpotlight(null);\n      setIsOpen(false);\n    }\n  };\n\n  const spotlight = useSpotlight({\n    anchorElement: targetElement,\n    closeOnClickOutside,\n    initialFocus,\n    isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n    onOpenChange,\n    placement: placement ? placementTranslation[placement] : undefined,\n  });\n\n  const mergedRef = useMergeRefs([spotlight.refs.setFloating, ref]);\n\n  const { themeClassName } = useNeedleTheme();\n  const classes = classNames('ndl-spotlight', themeClassName, className);\n\n  useEffect(() => {\n    setTargetElement(registeredTargets[target]?.current);\n  }, [target, registeredTargets]);\n\n  useEffect(() => {\n    if (isOpen && isActiveSpotlight(target)) {\n      onOpen?.();\n    }\n  }, [isOpen, onOpen, isActiveSpotlight, target]);\n\n  const findInitialFocus = () => {\n    if (spotlight.initialFocus !== undefined) {\n      return spotlight.initialFocus;\n    }\n    if (!actionsRef.current) {\n      return undefined;\n    }\n    const focusableEls = actionsRef.current.querySelectorAll(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    return focusableEls.length - 1;\n  };\n\n  if (!spotlight.context.open) {\n    return null;\n  }\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager\n        context={spotlight.context}\n        modal={true}\n        initialFocus={findInitialFocus()}\n      >\n        <SpotlightInstanceContext.Provider\n          value={{\n            descriptionId,\n            headerId,\n            setDescriptionId,\n            setHeaderId,\n          }}\n        >\n          {hasOverlay === true && (\n            <FloatingOverlay\n              className=\"ndl-spotlight-overlay ndl-spotlight-overlay-top\"\n              onPointerDown={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n              onTouchStart={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            />\n          )}\n          <div\n            ref={mergedRef}\n            className={classes}\n            style={{\n              ...spotlight.floatingStyles,\n              ...spotlight.transitionStyles,\n              ...style,\n            }}\n            {...spotlight.getFloatingProps({\n              ...htmlAttributes,\n              'aria-describedby': ariaDescribedBy,\n              'aria-label': ariaLabel,\n              'aria-labelledby': ariaLabelledBy,\n              'aria-modal': 'true',\n            })}\n            {...restProps}\n          >\n            <div>{children}</div>\n            {(Boolean(beforeActions) || Boolean(actions)) && (\n              <div className=\"ndl-spotlight-footer\">\n                <Typography variant=\"body-medium\">{beforeActions}</Typography>\n                {Boolean(actions) && (\n                  <div className=\"ndl-spotlight-actions\" ref={actionsRef}>\n                    {actions}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        </SpotlightInstanceContext.Provider>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n};\n\nSpotlightComponent.displayName = 'Spotlight';\n\nconst Spotlight = Object.assign(SpotlightComponent, {\n  Body: SpotlightBody,\n  Header: SpotlightHeader,\n  IconWrapper: SpotlightIconWrapper,\n  Image: SpotlightImage,\n  Label: SpotlightLabel,\n});\n\nexport { Spotlight };\n"]}

package/lib/cjs/spotlight/stories/spotlight-in-dialog.story.js

@@ -35,7 +35,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), "aria-label": "Dialog", className: themeClassName, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Using Spotlight inside a dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Content, { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["Spotlight and SpotlightTarget should behave automatically correct when used inside a dialog. If positioning is not on top of everything, you might want to override the", (0, jsx_runtime_1.jsx)("code", { children: "--spotlight-z-index" }), " css variable."] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), className: themeClassName, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Using Spotlight inside a dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Content, { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["Spotlight and SpotlightTarget should behave automatically correct when used inside a dialog. If positioning is not on top of everything, you might want to override the", (0, jsx_runtime_1.jsx)("code", { children: "--spotlight-z-index" }), " css variable."] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
                                 setIsOpen(false);
                                 setActiveSpotlight(null);
                             }, children: "Close" }), children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] })] }));

package/lib/cjs/spotlight/stories/spotlight-in-dialog.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAS0B;AAC1B,iCAA4C;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC;YACrC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAElC,EACf,wBAAC,cAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,gBACzB,QAAQ,EACnB,SAAS,EAAE,cAAc,aAEzB,uBAAC,cAAM,CAAC,MAAM,kDAAgD,EAC9D,wBAAC,cAAM,CAAC,OAAO,IAAC,SAAS,EAAC,kCAAkC,aAC1D,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,mEAAgC,sBACrB,EACb,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,YAEzB,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACS,EACjB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;gCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Dialog,\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  Typography,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const [isModalOpen, setIsModalOpen] = useState<boolean>(props.isChromatic);\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic && isModalOpen) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setIsModalOpen(true)}>\n        Open Dialog\n      </FilledButton>\n      <Dialog\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        aria-label=\"Dialog\"\n        className={themeClassName}\n      >\n        <Dialog.Header>Using Spotlight inside a dialog</Dialog.Header>\n        <Dialog.Content className=\"n-flex n-flex-col n-gap-token-32\">\n          <Typography variant=\"body-medium\">\n            Spotlight and SpotlightTarget should behave automatically correct\n            when used inside a dialog. If positioning is not on top of\n            everything, you might want to override the\n            <code>--spotlight-z-index</code> css variable.\n          </Typography>\n          <div className=\"n-flex n-justify-center n-gap-token-64\">\n            <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n              Activate Spotlight\n            </FilledButton>\n            <SpotlightTarget\n              id={targetId}\n              hasPulse={!props.isChromatic}\n              asChild\n              indicatorVariant=\"border\"\n            >\n              <FilledButton onClick={() => alert('Target button clicked')}>\n                Target\n              </FilledButton>\n            </SpotlightTarget>\n          </div>\n        </Dialog.Content>\n        <Spotlight\n          placement=\"bottom-end-top-end\"\n          target={targetId}\n          actions={\n            <OutlinedButton\n              onClick={() => {\n                setIsOpen(false);\n                setActiveSpotlight(null);\n              }}\n            >\n              Close\n            </OutlinedButton>\n          }\n        >\n          <Spotlight.Header>This is a header</Spotlight.Header>\n          <Spotlight.Body>This is content</Spotlight.Body>\n        </Spotlight>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAS0B;AAC1B,iCAA4C;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC;YACrC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAElC,EACf,wBAAC,cAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACpC,SAAS,EAAE,cAAc,aAEzB,uBAAC,cAAM,CAAC,MAAM,kDAAgD,EAC9D,wBAAC,cAAM,CAAC,OAAO,IAAC,SAAS,EAAC,kCAAkC,aAC1D,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,mEAAgC,sBACrB,EACb,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,YAEzB,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACS,EACjB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;gCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Dialog,\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  Typography,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const [isModalOpen, setIsModalOpen] = useState<boolean>(props.isChromatic);\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic && isModalOpen) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setIsModalOpen(true)}>\n        Open Dialog\n      </FilledButton>\n      <Dialog\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        className={themeClassName}\n      >\n        <Dialog.Header>Using Spotlight inside a dialog</Dialog.Header>\n        <Dialog.Content className=\"n-flex n-flex-col n-gap-token-32\">\n          <Typography variant=\"body-medium\">\n            Spotlight and SpotlightTarget should behave automatically correct\n            when used inside a dialog. If positioning is not on top of\n            everything, you might want to override the\n            <code>--spotlight-z-index</code> css variable.\n          </Typography>\n          <div className=\"n-flex n-justify-center n-gap-token-64\">\n            <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n              Activate Spotlight\n            </FilledButton>\n            <SpotlightTarget\n              id={targetId}\n              hasPulse={!props.isChromatic}\n              asChild\n              indicatorVariant=\"border\"\n            >\n              <FilledButton onClick={() => alert('Target button clicked')}>\n                Target\n              </FilledButton>\n            </SpotlightTarget>\n          </div>\n        </Dialog.Content>\n        <Spotlight\n          placement=\"bottom-end-top-end\"\n          target={targetId}\n          actions={\n            <OutlinedButton\n              onClick={() => {\n                setIsOpen(false);\n                setActiveSpotlight(null);\n              }}\n            >\n              Close\n            </OutlinedButton>\n          }\n        >\n          <Spotlight.Header>This is a header</Spotlight.Header>\n          <Spotlight.Body>This is content</Spotlight.Body>\n        </Spotlight>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}