@neo4j-ndl/react 4.25.10 → 5.0.0-alpha.0.b2b2481

package/lib/cjs/spotlight/SpotlightTarget.js

@@ -76,11 +76,11 @@ const conditional_wrap_1 = require("../conditional-wrap");
 const SpotlightProvider_1 = require("./SpotlightProvider");
 const use_indicator_1 = require("./use-indicator");
 const SpotlightTarget = (_a) => {
-    var { id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', borderRadius, shouldFitToChildren = false, children, className, htmlAttributes, style, as, ref, asChild } = _a, restProps = __rest(_a, ["id", "hasPulse", "indicatorVariant", "indicatorPlacement", "borderRadius", "shouldFitToChildren", "children", "className", "htmlAttributes", "style", "as", "ref", "asChild"]);
+    var { id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', borderRadius, shouldFitToChildren = false, children, className, htmlAttributes, style, as, ref, shouldRenderAsChild } = _a, restProps = __rest(_a, ["id", "hasPulse", "indicatorVariant", "indicatorPlacement", "borderRadius", "shouldFitToChildren", "children", "className", "htmlAttributes", "style", "as", "ref", "shouldRenderAsChild"]);
     const Component = as !== null && as !== void 0 ? as : 'div';
     const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, setActiveSpotlight, } = (0, SpotlightProvider_1.useSpotlightContext)();
     const internalRef = react_2.default.useRef(null);
-    const childRef = asChild && react_2.default.isValidElement(children)
+    const childRef = shouldRenderAsChild && react_2.default.isValidElement(children)
         ? children.ref
         : undefined;
     const mergedRefs = (0, react_1.useMergeRefs)([
@@ -102,7 +102,7 @@ const SpotlightTarget = (_a) => {
         isOpen: isActive,
         targetRef: internalRef,
     });
-    if (asChild === true && react_2.default.isValidElement(children)) {
+    if (shouldRenderAsChild === true && react_2.default.isValidElement(children)) {
         const child = children;
         const onClick = (event) => {
             var _a, _b;

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

@@ -1 +1 @@
-{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.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 { FloatingPortal, useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useSpotlightContext } from './SpotlightProvider';\nimport {\n  type IndicatorPlacement,\n  type IndicatorVariant,\n  useIndicator,\n} from './use-indicator';\n\ntype SpotlightTargetProps = {\n  /** The id of the wrapper. This should match a `target` prop in a `Spotlight`, to indicate that this is where it should be rendered when open */\n  id: string;\n  /** A boolean that controls if the pulse animation should be used or not */\n  hasPulse?: boolean;\n  /** A string that controls the style of the indicator. It can be either \"point\" or \"border\" */\n  indicatorVariant?: IndicatorVariant;\n  /** A string that controls the placement of the indicator. A combination of \"middle\", \"top\", \"right\", \"bottom\" and \"left\" separated by a dash, e.g. \"top-right\" */\n  indicatorPlacement?: IndicatorPlacement;\n  /** An inline style CSS property to control the border radius of the wrapper */\n  borderRadius?: React.CSSProperties['borderRadius'];\n  /** The content to wrap */\n  children?: React.ReactNode;\n  /** Fit the target size to the children. */\n  shouldFitToChildren?: boolean;\n  /**\n   * When true, merges the spotlight target props directly with the child element instead of wrapping it in a div.\n   *\n   * This is useful for applying spotlight functionality to existing interactive elements (buttons, links, etc.)\n   * while preserving their original behavior, styling, and accessibility attributes.\n   *\n   * @remarks\n   * - **Warning:** Only use with interactive elements that can receive focus and handle click events.\n   * - **Warning:** The child element's `id` will be overridden with the target's `id`.\n   *\n   * @example\n   * ```tsx\n   * <SpotlightTarget id=\"my-button\" asChild>\n   *   <FilledButton>Click me</FilledButton>\n   * </SpotlightTarget>\n   * ```\n   */\n  // TODO v5: decide if this naming is okay, don't see how to follow the rule without a name that is tooo long\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  asChild?: boolean;\n};\n\nexport const SpotlightTarget = ({\n  id,\n  hasPulse = true,\n  indicatorVariant = 'border',\n  indicatorPlacement = 'top-right',\n  borderRadius,\n  shouldFitToChildren = false,\n  children,\n  className,\n  htmlAttributes,\n  style,\n  as,\n  ref,\n  asChild,\n  ...restProps\n}: PolymorphicCommonProps<'div', SpotlightTargetProps>) => {\n  const Component = as ?? 'div';\n\n  const {\n    isActiveSpotlight,\n    isOpen,\n    setIsOpen,\n    registerTarget,\n    unregisterTarget,\n    setActiveSpotlight,\n  } = useSpotlightContext();\n\n  const internalRef = React.useRef<HTMLElement>(null);\n  const childRef =\n    asChild && React.isValidElement(children)\n      ? (\n          children as React.ReactElement<unknown> & {\n            ref?: React.Ref<HTMLElement>;\n          }\n        ).ref\n      : undefined;\n  const mergedRefs = useMergeRefs<HTMLElement>([\n    ref as React.RefObject<HTMLElement>,\n    internalRef as React.RefObject<HTMLElement>,\n    childRef as React.Ref<HTMLElement> | undefined,\n  ]);\n  useEffect(() => {\n    if (internalRef.current !== null) {\n      registerTarget(id, internalRef as React.RefObject<HTMLElement>);\n    }\n    return () => unregisterTarget(id);\n  }, [id, registerTarget, unregisterTarget]);\n\n  const isActive = isActiveSpotlight(id);\n  const indicator = useIndicator({\n    hasPulse,\n    indicatorPlacement,\n    indicatorVariant,\n    isOpen: isActive,\n    targetRef: internalRef,\n  });\n\n  if (asChild === true && React.isValidElement(children)) {\n    const child = children as React.ReactElement<{\n      className?: string;\n      style?: React.CSSProperties;\n      onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n    }>;\n\n    const onClick = (event: React.MouseEvent<HTMLElement>) => {\n      if (isActive) {\n        // When spotlight is active, always prevent the child's click handler\n        event.preventDefault();\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n        // Don't call child.props?.onClick when spotlight is active\n        return;\n      }\n\n      // Only call the child's click handler when spotlight is not active\n      child.props?.onClick?.(event);\n    };\n\n    const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n      if (\n        isActive &&\n        !isOpen &&\n        (event.code === 'Enter' || event.code === 'Space')\n      ) {\n        event.preventDefault();\n        setIsOpen(true);\n        return;\n      }\n\n      if (isActive && event.code === 'Escape') {\n        event.preventDefault();\n        setActiveSpotlight(null);\n        return;\n      }\n\n      child.props?.onKeyDown?.(event);\n    };\n\n    // IMPORTANT: do NOT force role/tabIndex here; preserves Composite semantics for the SideNavigation\n    const mergedProps = {\n      id,\n      onClick,\n      onKeyDown,\n      ref: mergedRefs,\n      style: {\n        ...style,\n        ...child.props.style,\n      },\n      // Avoid overriding the child's own role/tabIndex with any passed htmlAttributes\n      ...(htmlAttributes\n        ? { ...htmlAttributes, role: undefined, tabIndex: undefined }\n        : {}),\n    };\n\n    return (\n      <>\n        {React.cloneElement(child, mergedProps as Record<string, unknown>)}\n        <ConditionalWrap\n          shouldWrap={isActive && isOpen}\n          wrap={(wrapChildren) => (\n            <FloatingPortal>{wrapChildren}</FloatingPortal>\n          )}\n        >\n          {indicator.context.open && (\n            <div\n              className={indicator.indicatorClasses}\n              ref={indicator.context.refs.setFloating}\n              style={{ ...indicator.floatingStyles, ...indicator.style }}\n            />\n          )}\n        </ConditionalWrap>\n      </>\n    );\n  }\n\n  const classes = classNames(\n    'ndl-spotlight-target',\n    {\n      'ndl-spotlight-target-fit-to-children': shouldFitToChildren,\n      'ndl-spotlight-target-open': isOpen && isActive,\n    },\n    className,\n  );\n\n  const inertClasses = classNames(\n    'ndl-spotlight-target-inert',\n    {\n      'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,\n    },\n    className,\n  );\n\n  return (\n    <>\n      <Component\n        role={isActive ? 'button' : undefined}\n        id={id}\n        ref={mergedRefs}\n        className={classes}\n        onClick={(event) => {\n          if (isActive) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (!isOpen) {\n              setIsOpen(true);\n            }\n          }\n        }}\n        style={{ borderRadius, ...style }}\n        onKeyDown={(event) => {\n          if (\n            isActive &&\n            !isOpen &&\n            (event.code === 'Enter' || event.code === 'Space')\n          ) {\n            setIsOpen(true);\n            event.preventDefault();\n          } else if (event.code === 'Escape' && isActive) {\n            setActiveSpotlight(null);\n          }\n        }}\n        tabIndex={isActive ? 0 : undefined}\n        {...(isActive && { 'aria-label': 'Open spotlight' })}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        <ConditionalWrap\n          shouldWrap={isActive}\n          wrap={(children) => (\n            <div inert aria-disabled className={inertClasses}>\n              {children}\n            </div>\n          )}\n        >\n          {children}\n        </ConditionalWrap>\n      </Component>\n      <ConditionalWrap\n        shouldWrap={isActive && isOpen}\n        wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n      >\n        {indicator.context.open && (\n          <div\n            className={indicator.indicatorClasses}\n            ref={indicator.context.refs.setFloating}\n            style={{ ...indicator.floatingStyles, ...indicator.style }}\n          />\n        )}\n      </ConditionalWrap>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.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 { FloatingPortal, useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useSpotlightContext } from './SpotlightProvider';\nimport {\n  type IndicatorPlacement,\n  type IndicatorVariant,\n  useIndicator,\n} from './use-indicator';\n\ntype SpotlightTargetProps = {\n  /** The id of the wrapper. This should match a `target` prop in a `Spotlight`, to indicate that this is where it should be rendered when open */\n  id: string;\n  /** A boolean that controls if the pulse animation should be used or not */\n  hasPulse?: boolean;\n  /** A string that controls the style of the indicator. It can be either \"point\" or \"border\" */\n  indicatorVariant?: IndicatorVariant;\n  /** A string that controls the placement of the indicator. A combination of \"middle\", \"top\", \"right\", \"bottom\" and \"left\" separated by a dash, e.g. \"top-right\" */\n  indicatorPlacement?: IndicatorPlacement;\n  /** An inline style CSS property to control the border radius of the wrapper */\n  borderRadius?: React.CSSProperties['borderRadius'];\n  /** The content to wrap */\n  children?: React.ReactNode;\n  /** Fit the target size to the children. */\n  shouldFitToChildren?: boolean;\n  /**\n   * When true, merges the spotlight target props directly with the child element instead of wrapping it in a div.\n   *\n   * This is useful for applying spotlight functionality to existing interactive elements (buttons, links, etc.)\n   * while preserving their original behavior, styling, and accessibility attributes.\n   *\n   * @remarks\n   * - **Warning:** Only use with interactive elements that can receive focus and handle click events.\n   * - **Warning:** The child element's `id` will be overridden with the target's `id`.\n   *\n   * @example\n   * ```tsx\n   * <SpotlightTarget id=\"my-button\" shouldRenderAsChild>\n   *   <FilledButton>Click me</FilledButton>\n   * </SpotlightTarget>\n   * ```\n   */\n  shouldRenderAsChild?: boolean;\n};\n\nexport const SpotlightTarget = ({\n  id,\n  hasPulse = true,\n  indicatorVariant = 'border',\n  indicatorPlacement = 'top-right',\n  borderRadius,\n  shouldFitToChildren = false,\n  children,\n  className,\n  htmlAttributes,\n  style,\n  as,\n  ref,\n  shouldRenderAsChild,\n  ...restProps\n}: PolymorphicCommonProps<'div', SpotlightTargetProps>) => {\n  const Component = as ?? 'div';\n\n  const {\n    isActiveSpotlight,\n    isOpen,\n    setIsOpen,\n    registerTarget,\n    unregisterTarget,\n    setActiveSpotlight,\n  } = useSpotlightContext();\n\n  const internalRef = React.useRef<HTMLElement>(null);\n  const childRef =\n    shouldRenderAsChild && React.isValidElement(children)\n      ? (\n          children as React.ReactElement<unknown> & {\n            ref?: React.Ref<HTMLElement>;\n          }\n        ).ref\n      : undefined;\n  const mergedRefs = useMergeRefs<HTMLElement>([\n    ref as React.RefObject<HTMLElement>,\n    internalRef as React.RefObject<HTMLElement>,\n    childRef as React.Ref<HTMLElement> | undefined,\n  ]);\n  useEffect(() => {\n    if (internalRef.current !== null) {\n      registerTarget(id, internalRef as React.RefObject<HTMLElement>);\n    }\n    return () => unregisterTarget(id);\n  }, [id, registerTarget, unregisterTarget]);\n\n  const isActive = isActiveSpotlight(id);\n  const indicator = useIndicator({\n    hasPulse,\n    indicatorPlacement,\n    indicatorVariant,\n    isOpen: isActive,\n    targetRef: internalRef,\n  });\n\n  if (shouldRenderAsChild === true && React.isValidElement(children)) {\n    const child = children as React.ReactElement<{\n      className?: string;\n      style?: React.CSSProperties;\n      onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n    }>;\n\n    const onClick = (event: React.MouseEvent<HTMLElement>) => {\n      if (isActive) {\n        // When spotlight is active, always prevent the child's click handler\n        event.preventDefault();\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n        // Don't call child.props?.onClick when spotlight is active\n        return;\n      }\n\n      // Only call the child's click handler when spotlight is not active\n      child.props?.onClick?.(event);\n    };\n\n    const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n      if (\n        isActive &&\n        !isOpen &&\n        (event.code === 'Enter' || event.code === 'Space')\n      ) {\n        event.preventDefault();\n        setIsOpen(true);\n        return;\n      }\n\n      if (isActive && event.code === 'Escape') {\n        event.preventDefault();\n        setActiveSpotlight(null);\n        return;\n      }\n\n      child.props?.onKeyDown?.(event);\n    };\n\n    // IMPORTANT: do NOT force role/tabIndex here; preserves Composite semantics for the SideNavigation\n    const mergedProps = {\n      id,\n      onClick,\n      onKeyDown,\n      ref: mergedRefs,\n      style: {\n        ...style,\n        ...child.props.style,\n      },\n      // Avoid overriding the child's own role/tabIndex with any passed htmlAttributes\n      ...(htmlAttributes\n        ? { ...htmlAttributes, role: undefined, tabIndex: undefined }\n        : {}),\n    };\n\n    return (\n      <>\n        {React.cloneElement(child, mergedProps as Record<string, unknown>)}\n        <ConditionalWrap\n          shouldWrap={isActive && isOpen}\n          wrap={(wrapChildren) => (\n            <FloatingPortal>{wrapChildren}</FloatingPortal>\n          )}\n        >\n          {indicator.context.open && (\n            <div\n              className={indicator.indicatorClasses}\n              ref={indicator.context.refs.setFloating}\n              style={{ ...indicator.floatingStyles, ...indicator.style }}\n            />\n          )}\n        </ConditionalWrap>\n      </>\n    );\n  }\n\n  const classes = classNames(\n    'ndl-spotlight-target',\n    {\n      'ndl-spotlight-target-fit-to-children': shouldFitToChildren,\n      'ndl-spotlight-target-open': isOpen && isActive,\n    },\n    className,\n  );\n\n  const inertClasses = classNames(\n    'ndl-spotlight-target-inert',\n    {\n      'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,\n    },\n    className,\n  );\n\n  return (\n    <>\n      <Component\n        role={isActive ? 'button' : undefined}\n        id={id}\n        ref={mergedRefs}\n        className={classes}\n        onClick={(event) => {\n          if (isActive) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (!isOpen) {\n              setIsOpen(true);\n            }\n          }\n        }}\n        style={{ borderRadius, ...style }}\n        onKeyDown={(event) => {\n          if (\n            isActive &&\n            !isOpen &&\n            (event.code === 'Enter' || event.code === 'Space')\n          ) {\n            setIsOpen(true);\n            event.preventDefault();\n          } else if (event.code === 'Escape' && isActive) {\n            setActiveSpotlight(null);\n          }\n        }}\n        tabIndex={isActive ? 0 : undefined}\n        {...(isActive && { 'aria-label': 'Open spotlight' })}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        <ConditionalWrap\n          shouldWrap={isActive}\n          wrap={(children) => (\n            <div inert aria-disabled className={inertClasses}>\n              {children}\n            </div>\n          )}\n        >\n          {children}\n        </ConditionalWrap>\n      </Component>\n      <ConditionalWrap\n        shouldWrap={isActive && isOpen}\n        wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n      >\n        {indicator.context.open && (\n          <div\n            className={indicator.indicatorClasses}\n            ref={indicator.context.refs.setFloating}\n            style={{ ...indicator.floatingStyles, ...indicator.style }}\n          />\n        )}\n      </ConditionalWrap>\n    </>\n  );\n};\n"]}

package/lib/cjs/spotlight/stories/spotlight-fixed-positioning.story.js

@@ -34,7 +34,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64 n-h-[100px]", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)("div", { className: "n-left-[auto] n-top-[110px] n-fixed", children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", indicatorPlacement: "middle-middle", 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: "flex justify-center gap-token-64 h-[100px]", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)("div", { className: "left-[auto] top-[110px] fixed", children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, shouldRenderAsChild: true, indicatorVariant: "border", indicatorPlacement: "middle-middle", 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-fixed-positioning.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,oDAAoD,aACjE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,gCAAK,SAAS,EAAC,qCAAqC,YAClD,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64 n-h-[100px]\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div className=\"n-left-[auto] n-top-[110px] n-fixed\">\n        <SpotlightTarget\n          id={targetId}\n          hasPulse={!props.isChromatic}\n          asChild\n          indicatorVariant=\"border\"\n          indicatorPlacement=\"middle-middle\"\n        >\n          <FilledButton onClick={() => alert('Target button clicked')}>\n            Target\n          </FilledButton>\n        </SpotlightTarget>\n      </div>\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    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,4CAA4C,aACzD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,gCAAK,SAAS,EAAC,+BAA+B,YAC5C,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,mBAAmB,QACnB,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64 h-[100px]\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div className=\"left-[auto] top-[110px] fixed\">\n        <SpotlightTarget\n          id={targetId}\n          hasPulse={!props.isChromatic}\n          shouldRenderAsChild\n          indicatorVariant=\"border\"\n          indicatorPlacement=\"middle-middle\"\n        >\n          <FilledButton onClick={() => alert('Target button clicked')}>\n            Target\n          </FilledButton>\n        </SpotlightTarget>\n      </div>\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    </div>\n  );\n};\n\nexport default Component;\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), 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: "flex justify-center 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: "flex flex-col 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: "flex justify-center 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, shouldRenderAsChild: 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,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"]}
+{"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,kCAAkC,aAC/C,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,4BAA4B,aACpD,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,mEAAgC,sBACrB,EACb,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,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,mBAAmB,QACnB,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=\"flex justify-center 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=\"flex flex-col 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=\"flex justify-center gap-token-64\">\n            <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n              Activate Spotlight\n            </FilledButton>\n            <SpotlightTarget\n              id={targetId}\n              hasPulse={!props.isChromatic}\n              shouldRenderAsChild\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"]}

package/lib/cjs/spotlight/stories/spotlight-in-side-nav.story.js

@@ -38,7 +38,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[500px] n-flex", children: [(0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: true, ariaLabel: "Main side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "AuraDB" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-instances'), isActive: isSelected === 'aura-db-instances', label: "Instances" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-connect'), isActive: isSelected === 'aura-db-connect', label: "Connect" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-python'), isActive: isSelected === 'aura-db-python', label: "Python" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, indicatorVariant: "point", indicatorPlacement: "top-right", asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-javascript'), isActive: isSelected === 'aura-db-javascript', label: "JavaScript" }) }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "AuraDS" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-instances'), isActive: isSelected === 'aura-ds-instances', label: "Instances" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-getting-started'), isActive: isSelected === 'aura-ds-getting-started', label: "Getting Started" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-h-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "top-end-top-start", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[500px] flex", children: [(0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: true, ariaLabel: "Main side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "AuraDB" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-instances'), isActive: isSelected === 'aura-db-instances', label: "Instances" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-connect'), isActive: isSelected === 'aura-db-connect', label: "Connect" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-python'), isActive: isSelected === 'aura-db-python', label: "Python" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, indicatorVariant: "point", indicatorPlacement: "top-right", shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-javascript'), isActive: isSelected === 'aura-db-javascript', label: "JavaScript" }) }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "AuraDS" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-instances'), isActive: isSelected === 'aura-ds-instances', label: "Instances" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-getting-started'), isActive: isSelected === 'aura-ds-getting-started', label: "Getting Started" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-full flex flex-col items-center justify-center rounded-md p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "top-end-top-start", 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-side-nav.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-in-side-nav.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-side-nav.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  SideNavigation,\n  Spotlight,\n  SpotlightTarget,\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 { setActiveSpotlight, setIsOpen } = useSpotlightContext();\n\n  const [isSelected, setIsSelected] = useState<string | null>(\n    'aura-db-instances',\n  );\n  const targetId = `test-target-${themeClassName}`;\n\n  const handleClick = (item: string) => {\n    setIsSelected(item);\n  };\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-h-[500px] n-flex\">\n      <SideNavigation isExpanded={true} ariaLabel=\"Main side navigation\">\n        <SideNavigation.CategoryHeader>AuraDB</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-instances')}\n            isActive={isSelected === 'aura-db-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-connect')}\n            isActive={isSelected === 'aura-db-connect'}\n            label=\"Connect\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-python')}\n            isActive={isSelected === 'aura-db-python'}\n            label=\"Python\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={!props.isChromatic}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n            indicatorPlacement=\"top-right\"\n            asChild\n          >\n            <SideNavigation.NavItem\n              onClick={() => handleClick('aura-db-javascript')}\n              isActive={isSelected === 'aura-db-javascript'}\n              label=\"JavaScript\"\n            />\n          </SpotlightTarget>\n        </SideNavigation.ListItem>\n        <SideNavigation.CategoryHeader>AuraDS</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-instances')}\n            isActive={isSelected === 'aura-ds-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-getting-started')}\n            isActive={isSelected === 'aura-ds-getting-started'}\n            label=\"Getting Started\"\n          />\n        </SideNavigation.ListItem>\n      </SideNavigation>\n      <div className=\"n-w-full n-h-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16\">\n        <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n          Activate Spotlight\n        </FilledButton>\n      </div>\n      <Spotlight\n        placement=\"top-end-top-start\"\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    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-in-side-nav.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-side-nav.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  SideNavigation,\n  Spotlight,\n  SpotlightTarget,\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 { setActiveSpotlight, setIsOpen } = useSpotlightContext();\n\n  const [isSelected, setIsSelected] = useState<string | null>(\n    'aura-db-instances',\n  );\n  const targetId = `test-target-${themeClassName}`;\n\n  const handleClick = (item: string) => {\n    setIsSelected(item);\n  };\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"h-[500px] flex\">\n      <SideNavigation isExpanded={true} ariaLabel=\"Main side navigation\">\n        <SideNavigation.CategoryHeader>AuraDB</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-instances')}\n            isActive={isSelected === 'aura-db-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-connect')}\n            isActive={isSelected === 'aura-db-connect'}\n            label=\"Connect\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-python')}\n            isActive={isSelected === 'aura-db-python'}\n            label=\"Python\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={!props.isChromatic}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n            indicatorPlacement=\"top-right\"\n            shouldRenderAsChild\n          >\n            <SideNavigation.NavItem\n              onClick={() => handleClick('aura-db-javascript')}\n              isActive={isSelected === 'aura-db-javascript'}\n              label=\"JavaScript\"\n            />\n          </SpotlightTarget>\n        </SideNavigation.ListItem>\n        <SideNavigation.CategoryHeader>AuraDS</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-instances')}\n            isActive={isSelected === 'aura-ds-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-getting-started')}\n            isActive={isSelected === 'aura-ds-getting-started'}\n            label=\"Getting Started\"\n          />\n        </SideNavigation.ListItem>\n      </SideNavigation>\n      <div className=\"w-full h-full flex flex-col items-center justify-center rounded-md p-token-16\">\n        <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n          Activate Spotlight\n        </FilledButton>\n      </div>\n      <Spotlight\n        placement=\"top-end-top-start\"\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    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-on-tabs.story.js

@@ -29,7 +29,7 @@ const Component = ({ hasPulse = true }) => {
     const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
     const [tabsValue, setTabsValue] = (0, react_2.useState)('0');
     const targetId = `test-target-${themeClassName}`;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: tabsValue, onChange: setTabsValue, children: [(0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: hasPulse, borderRadius: 4, indicatorVariant: "point", children: (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }), (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: "flex justify-center gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: tabsValue, onChange: setTabsValue, children: [(0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: hasPulse, borderRadius: 4, indicatorVariant: "point", children: (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "p-token-4", value: tabsValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "p-token-4", value: tabsValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "p-token-4", value: tabsValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }), (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-on-tabs.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-on-tabs.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-on-tabs.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAS0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,aAC5C,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,YAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,GACjB,EAClB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  Tabs,\n  Typography,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = ({ hasPulse = true }: { hasPulse?: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n  const [tabsValue, setTabsValue] = useState('0');\n\n  const targetId = `test-target-${themeClassName}`;\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-10\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div>\n        <Tabs value={tabsValue} onChange={setTabsValue}>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={hasPulse}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          </SpotlightTarget>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel className=\"n-p-token-4\" value={tabsValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Tab 1 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"n-p-token-4\" value={tabsValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Tab 2 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"n-p-token-4\" value={tabsValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Tab 3 content</Typography>\n        </Tabs.TabPanel>\n      </div>\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    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-on-tabs.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-on-tabs.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAS0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,aAC5C,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,YAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,GACjB,EAClB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  Tabs,\n  Typography,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = ({ hasPulse = true }: { hasPulse?: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n  const [tabsValue, setTabsValue] = useState('0');\n\n  const targetId = `test-target-${themeClassName}`;\n\n  return (\n    <div className=\"flex justify-center gap-token-10\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div>\n        <Tabs value={tabsValue} onChange={setTabsValue}>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={hasPulse}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          </SpotlightTarget>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel className=\"p-token-4\" value={tabsValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Tab 1 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"p-token-4\" value={tabsValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Tab 2 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"p-token-4\" value={tabsValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Tab 3 content</Typography>\n        </Tabs.TabPanel>\n      </div>\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    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-tour.story.js

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
     const { themeClassName } = (0, react_1.useNeedleTheme)();
     const { setActiveSpotlight } = (0, react_1.useSpotlightContext)();
-    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.OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
                     {
                         children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Label, { children: "NEW" }), (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" })] })),
                         target: `test-target-1-${themeClassName}`,

package/lib/cjs/spotlight/stories/spotlight-tour.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-tour.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-tour.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAErD,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,uBAAC,uBAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,qBAAa,IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAC3B,OAAO,CAAC,IAAI,CAAC,UAAU,MAAM,+BAA+B,MAAM,EAAE,CAAC,EAEvE,UAAU,EAAE;oBACV;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  SpotlightTour,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  const { themeClassName } = useNeedleTheme();\n  const { setActiveSpotlight } = useSpotlightContext();\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <OutlinedButton\n        onClick={() => setActiveSpotlight(`test-target-1-${themeClassName}`)}\n      >\n        Start tour\n      </OutlinedButton>\n      <SpotlightTarget id={`test-target-1-${themeClassName}`} hasPulse asChild>\n        <FilledButton onClick={() => alert('Target 1 clicked')}>\n          Target 1\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget id={`test-target-2-${themeClassName}`} hasPulse asChild>\n        <FilledButton onClick={() => alert('Target 2 clicked')}>\n          Target 2\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget id={`test-target-3-${themeClassName}`} hasPulse asChild>\n        <FilledButton onClick={() => alert('Target 3 clicked')}>\n          Target 3\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTour\n        onAction={(target, action) =>\n          console.info(`Action ${action} was performed in spotlight ${target}`)\n        }\n        spotlights={[\n          {\n            children: (\n              <>\n                <Spotlight.Label>NEW</Spotlight.Label>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-1-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.IconWrapper>\n                  <FingerPrintIconOutline />\n                </Spotlight.IconWrapper>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-2-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.Image\n                  src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n                  alt=\"example image\"\n                />\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-3-${themeClassName}`,\n          },\n        ]}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-tour.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-tour.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAErD,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,mBAAmB,kBAEnB,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,mBAAmB,kBAEnB,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,mBAAmB,kBAEnB,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,qBAAa,IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAC3B,OAAO,CAAC,IAAI,CAAC,UAAU,MAAM,+BAA+B,MAAM,EAAE,CAAC,EAEvE,UAAU,EAAE;oBACV;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  SpotlightTour,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  const { themeClassName } = useNeedleTheme();\n  const { setActiveSpotlight } = useSpotlightContext();\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <OutlinedButton\n        onClick={() => setActiveSpotlight(`test-target-1-${themeClassName}`)}\n      >\n        Start tour\n      </OutlinedButton>\n      <SpotlightTarget\n        id={`test-target-1-${themeClassName}`}\n        hasPulse\n        shouldRenderAsChild\n      >\n        <FilledButton onClick={() => alert('Target 1 clicked')}>\n          Target 1\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget\n        id={`test-target-2-${themeClassName}`}\n        hasPulse\n        shouldRenderAsChild\n      >\n        <FilledButton onClick={() => alert('Target 2 clicked')}>\n          Target 2\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget\n        id={`test-target-3-${themeClassName}`}\n        hasPulse\n        shouldRenderAsChild\n      >\n        <FilledButton onClick={() => alert('Target 3 clicked')}>\n          Target 3\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTour\n        onAction={(target, action) =>\n          console.info(`Action ${action} was performed in spotlight ${target}`)\n        }\n        spotlights={[\n          {\n            children: (\n              <>\n                <Spotlight.Label>NEW</Spotlight.Label>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-1-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.IconWrapper>\n                  <FingerPrintIconOutline />\n                </Spotlight.IconWrapper>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-2-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.Image\n                  src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n                  alt=\"example image\"\n                />\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-3-${themeClassName}`,\n          },\n        ]}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-with-icon.story.js

@@ -35,7 +35,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [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: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { 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: "flex justify-center 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, indicatorVariant: "border", shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { 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.IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.FingerPrintIconOutline, {}) }), (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-with-icon.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-with-icon.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAChE,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,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,gBAAgB,EAAC,QAAQ,EACzB,OAAO,kBAEP,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\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        indicatorVariant=\"border\"\n        asChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\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.IconWrapper>\n          <FingerPrintIconOutline />\n        </Spotlight.IconWrapper>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-icon.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAChE,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,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,gBAAgB,EAAC,QAAQ,EACzB,mBAAmB,kBAEnB,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        indicatorVariant=\"border\"\n        shouldRenderAsChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\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.IconWrapper>\n          <FingerPrintIconOutline />\n        </Spotlight.IconWrapper>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-with-image.story.js

@@ -34,7 +34,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [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: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { 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: "flex justify-center 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, shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { 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.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), (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-with-image.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-with-image.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-image.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,kBAClE,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget id={targetId} hasPulse={!props.isChromatic} asChild>\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\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.Image\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n          alt=\"example image\"\n        />\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-image.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-image.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,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,mBAAmB,kBAEnB,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        shouldRenderAsChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\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.Image\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n          alt=\"example image\"\n        />\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-with-label.story.js

@@ -34,7 +34,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [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: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { 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: "flex justify-center 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, indicatorVariant: "border", shouldRenderAsChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { 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.Label, { children: "NEW" }), (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-with-label.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-with-label.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,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,gBAAgB,EAAC,QAAQ,EACzB,OAAO,kBAEP,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\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        indicatorVariant=\"border\"\n        asChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\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.Label>NEW</Spotlight.Label>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-label.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,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,gBAAgB,EAAC,QAAQ,EACzB,mBAAmB,kBAEnB,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        indicatorVariant=\"border\"\n        shouldRenderAsChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\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.Label>NEW</Spotlight.Label>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-with-pointer.story.js

@@ -34,7 +34,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [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: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", 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: "flex justify-center 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, shouldRenderAsChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", 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-with-pointer.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight-with-pointer.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-pointer.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,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,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\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=\"point\"\n        indicatorPlacement=\"top-right\"\n      >\n        <FilledButton onClick={() => alert('Target button clicked')}>\n          Target\n        </FilledButton>\n      </SpotlightTarget>\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    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-pointer.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-pointer.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,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,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,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,mBAAmB,QACnB,gBAAgB,EAAC,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,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  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        shouldRenderAsChild\n        indicatorVariant=\"point\"\n        indicatorPlacement=\"top-right\"\n      >\n        <FilledButton onClick={() => alert('Target button clicked')}>\n          Target\n        </FilledButton>\n      </SpotlightTarget>\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    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/use-spotlight.js

@@ -24,7 +24,7 @@ exports.useSpotlight = useSpotlight;
 const react_1 = require("@floating-ui/react");
 const base_1 = require("@neo4j-ndl/base");
 const react_2 = require("react");
-function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy = 'absolute', } = {}) {
+function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, hasAnchorElementAsPortalAnchor, initialFocus, shouldCloseOnClickOutside, strategy = 'absolute', } = {}) {
     var _a;
     const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, react_2.useState)(isInitialOpen);
     const [labelId, setLabelId] = (0, react_2.useState)();
@@ -58,7 +58,7 @@ function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: con
         enabled: controlledOpen === undefined,
     });
     const dismiss = (0, react_1.useDismiss)(context, {
-        outsidePress: closeOnClickOutside,
+        outsidePress: shouldCloseOnClickOutside,
     });
     const role = (0, react_1.useRole)(context, {
         role: 'dialog',
@@ -68,8 +68,8 @@ function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: con
         duration: (_a = Number.parseInt(base_1.tokens.motion.duration.quick)) !== null && _a !== void 0 ? _a : 0,
     });
     return (0, react_2.useMemo)(() => (Object.assign(Object.assign(Object.assign({ isOpen,
-        setIsOpen }, interactions), data), { anchorElementAsPortalAnchor,
-        descriptionId,
+        setIsOpen }, interactions), data), { descriptionId,
+        hasAnchorElementAsPortalAnchor,
         initialFocus,
         labelId,
         setDescriptionId,
@@ -81,7 +81,7 @@ function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: con
         data,
         transitionStyles,
         labelId,
-        anchorElementAsPortalAnchor,
+        hasAnchorElementAsPortalAnchor,
         descriptionId,
         initialFocus,
     ]);

package/lib/cjs/spotlight/use-spotlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-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  autoUpdate,\n  flip,\n  offset,\n  type Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  type UseInteractionsReturn,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface SpotlightOptions {\n  isInitialOpen?: boolean;\n  placement?: Placement;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean, event?: Event) => void;\n  anchorElement?: Element | null;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  anchorElementAsPortalAnchor?: boolean;\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  closeOnClickOutside?: boolean;\n  strategy?: 'fixed' | 'absolute';\n}\n\nexport interface UseSpotlightReturn\n  extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  labelId: string | undefined;\n  transitionStyles: React.CSSProperties;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  anchorElementAsPortalAnchor: boolean | undefined;\n  initialFocus: number | React.MutableRefObject<HTMLElement | null> | undefined;\n}\n\nexport function useSpotlight({\n  isInitialOpen = false,\n  placement = 'bottom',\n  isOpen: controlledOpen,\n  onOpenChange: setControlledOpen,\n  anchorElement,\n  anchorElementAsPortalAnchor,\n  initialFocus,\n  closeOnClickOutside,\n  strategy = 'absolute',\n}: SpotlightOptions = {}): UseSpotlightReturn {\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n  const isOpen = controlledOpen ?? isOpenUncontrolled;\n  const setIsOpen = setControlledOpen ?? setIsOpenUncontrolled;\n  const data = useFloating({\n    elements: {\n      reference: anchorElement,\n    },\n    middleware: [\n      offset(10),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'end',\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n    ],\n    onOpenChange: (open, event) => {\n      setIsOpen(open);\n      setControlledOpen?.(open, event);\n    },\n    open: isOpen,\n    placement: placement,\n    strategy,\n    whileElementsMounted: autoUpdate,\n  });\n  const context = data.context;\n\n  const click = useClick(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  const dismiss = useDismiss(context, {\n    outsidePress: closeOnClickOutside,\n  });\n  const role = useRole(context, {\n    role: 'dialog',\n  });\n\n  const interactions = useInteractions([click, dismiss, role]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n  });\n\n  return useMemo(\n    () => ({\n      isOpen,\n      setIsOpen,\n      ...interactions,\n      ...data,\n      anchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n      labelId,\n      setDescriptionId,\n      setLabelId,\n      transitionStyles,\n    }),\n    [\n      isOpen,\n      setIsOpen,\n      interactions,\n      data,\n      transitionStyles,\n      labelId,\n      anchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n    ],\n  );\n}\n"]}
+{"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-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  autoUpdate,\n  flip,\n  offset,\n  type Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  type UseInteractionsReturn,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface SpotlightOptions {\n  isInitialOpen?: boolean;\n  placement?: Placement;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean, event?: Event) => void;\n  anchorElement?: Element | null;\n  hasAnchorElementAsPortalAnchor?: boolean;\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;\n  shouldCloseOnClickOutside?: boolean;\n  strategy?: 'fixed' | 'absolute';\n}\n\nexport interface UseSpotlightReturn\n  extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  labelId: string | undefined;\n  transitionStyles: React.CSSProperties;\n  hasAnchorElementAsPortalAnchor: boolean | undefined;\n  initialFocus: number | React.MutableRefObject<HTMLElement | null> | undefined;\n}\n\nexport function useSpotlight({\n  isInitialOpen = false,\n  placement = 'bottom',\n  isOpen: controlledOpen,\n  onOpenChange: setControlledOpen,\n  anchorElement,\n  hasAnchorElementAsPortalAnchor,\n  initialFocus,\n  shouldCloseOnClickOutside,\n  strategy = 'absolute',\n}: SpotlightOptions = {}): UseSpotlightReturn {\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n  const isOpen = controlledOpen ?? isOpenUncontrolled;\n  const setIsOpen = setControlledOpen ?? setIsOpenUncontrolled;\n  const data = useFloating({\n    elements: {\n      reference: anchorElement,\n    },\n    middleware: [\n      offset(10),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'end',\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n    ],\n    onOpenChange: (open, event) => {\n      setIsOpen(open);\n      setControlledOpen?.(open, event);\n    },\n    open: isOpen,\n    placement: placement,\n    strategy,\n    whileElementsMounted: autoUpdate,\n  });\n  const context = data.context;\n\n  const click = useClick(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  const dismiss = useDismiss(context, {\n    outsidePress: shouldCloseOnClickOutside,\n  });\n  const role = useRole(context, {\n    role: 'dialog',\n  });\n\n  const interactions = useInteractions([click, dismiss, role]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n  });\n\n  return useMemo(\n    () => ({\n      isOpen,\n      setIsOpen,\n      ...interactions,\n      ...data,\n      descriptionId,\n      hasAnchorElementAsPortalAnchor,\n      initialFocus,\n      labelId,\n      setDescriptionId,\n      setLabelId,\n      transitionStyles,\n    }),\n    [\n      isOpen,\n      setIsOpen,\n      interactions,\n      data,\n      transitionStyles,\n      labelId,\n      hasAnchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n    ],\n  );\n}\n"]}