npm - @neo4j-ndl/react - Versions diffs - 4.25.8 → 5.0.0-alpha.0.3d763f7 - Mend

@neo4j-ndl/react 4.25.8 → 5.0.0-alpha.0.3d763f7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1176) hide show

package/lib/esm/spotlight/SpotlightTarget.js CHANGED Viewed

@@ -37,11 +37,11 @@ import { ConditionalWrap } from '../conditional-wrap';
 import { useSpotlightContext } from './SpotlightProvider';
 import { useIndicator, } from './use-indicator';
 export 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, } = useSpotlightContext();
     const internalRef = React.useRef(null);
-    const childRef = asChild && React.isValidElement(children)
+    const childRef = shouldRenderAsChild && React.isValidElement(children)
         ? children.ref
         : undefined;
     const mergedRefs = useMergeRefs([
@@ -63,7 +63,7 @@ export const SpotlightTarget = (_a) => {
         isOpen: isActive,
         targetRef: internalRef,
     });
-    if (asChild === true && React.isValidElement(children)) {
+    if (shouldRenderAsChild === true && React.isValidElement(children)) {
         const child = children;
         const onClick = (event) => {
             var _a, _b;

package/lib/esm/spotlight/SpotlightTarget.js.map CHANGED Viewed

	@@ -1 +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"]}
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\" 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/esm/spotlight/stories/spotlight-fixed-positioning.story.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64 n-h-[100px]", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx("div", { className: "n-left-[auto] n-top-[110px] n-fixed", children: _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", indicatorPlacement: "middle-middle", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-64 h-[100px]", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx("div", { className: "left-[auto] top-[110px] fixed", children: _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, shouldRenderAsChild: true, indicatorVariant: "border", indicatorPlacement: "middle-middle", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                         setIsOpen(false);
                         setActiveSpotlight(null);
                     }, children: "Close" }), children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));

package/lib/esm/spotlight/stories/spotlight-fixed-positioning.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~oDAAoD~~,~~aACjE~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,cAAK,SAAS,EAAC,~~qCAAqC~~,~~YAClD,~~KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,~~OAAO~~,~~QACP~~,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,4CAA4C,aACzD,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,cAAK,SAAS,EAAC,+BAA+B,YAC5C,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,mBAAmB,QACnB,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-in-dialog.story.js CHANGED Viewed

@@ -33,7 +33,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Dialog" }), _jsxs(Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), className: themeClassName, children: [_jsx(Dialog.Header, { children: "Using Spotlight inside a dialog" }), _jsxs(Dialog.Content, { className: "n-flex n-flex-col n-gap-token-32", children: [_jsxs(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", _jsx("code", { children: "--spotlight-z-index" }), " css variable."] }), _jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Dialog" }), _jsxs(Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), className: themeClassName, children: [_jsx(Dialog.Header, { children: "Using Spotlight inside a dialog" }), _jsxs(Dialog.Content, { className: "flex flex-col gap-token-32", children: [_jsxs(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", _jsx("code", { children: "--spotlight-z-index" }), " css variable."] }), _jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, shouldRenderAsChild: true, indicatorVariant: "border", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                                 setIsOpen(false);
                                 setActiveSpotlight(null);
                             }, children: "Close" }), children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] })] }));

package/lib/esm/spotlight/stories/spotlight-in-dialog.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAElC,EACf,MAAC,MAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACpC,SAAS,EAAE,cAAc,aAEzB,KAAC,MAAM,CAAC,MAAM,kDAAgD,EAC9D,MAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,~~kCAAkC~~,~~aAC1D~~,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,iDAAgC,sBACrB,EACb,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,~~OAAO~~,~~QACP~~,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACS,EACjB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;gCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-dialog.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAElC,EACf,MAAC,MAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACpC,SAAS,EAAE,cAAc,aAEzB,KAAC,MAAM,CAAC,MAAM,kDAAgD,EAC9D,MAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,4BAA4B,aACpD,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,iDAAgC,sBACrB,EACb,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,mBAAmB,QACnB,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACS,EACjB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;gCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-in-side-nav.story.js CHANGED Viewed

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

package/lib/esm/spotlight/stories/spotlight-in-side-nav.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spotlight-in-side-nav.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-side-nav.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,mBAAmB,CACpB,CAAC;IACF,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;QACnC,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~oBAAoB~~,~~aACjC~~,MAAC,cAAc,IAAC,UAAU,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,aAChE,KAAC,cAAc,CAAC,cAAc,yBAAuC,EACrE,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC/C,QAAQ,EAAE,UAAU,KAAK,mBAAmB,EAC5C,KAAK,EAAC,WAAW,GACjB,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAC7C,QAAQ,EAAE,UAAU,KAAK,iBAAiB,EAC1C,KAAK,EAAC,SAAS,GACf,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC5C,QAAQ,EAAE,UAAU,KAAK,gBAAgB,EACzC,KAAK,EAAC,QAAQ,GACd,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,EACxB,kBAAkB,EAAC,WAAW,EAC9B,~~OAAO~~,~~kBAEP~~,KAAC,cAAc,CAAC,OAAO,IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAChD,QAAQ,EAAE,UAAU,KAAK,oBAAoB,EAC7C,KAAK,EAAC,YAAY,GAClB,GACc,GACM,EAC1B,KAAC,cAAc,CAAC,cAAc,yBAAuC,EACrE,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC/C,QAAQ,EAAE,UAAU,KAAK,mBAAmB,EAC5C,KAAK,EAAC,WAAW,GACjB,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,yBAAyB,CAAC,EACrD,QAAQ,EAAE,UAAU,KAAK,yBAAyB,EAClD,KAAK,EAAC,iBAAiB,GACvB,GACsB,IACX,EACjB,cAAK,SAAS,EAAC,+~~FAA~~+F,~~YAC5G~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,GACX,EACN,MAAC,SAAS,IACR,SAAS,EAAC,mBAAmB,EAC7B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 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"]}
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=\"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/esm/spotlight/stories/spotlight-on-tabs.story.js CHANGED Viewed

@@ -27,7 +27,7 @@ const Component = ({ hasPulse = true }) => {
     const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
     const [tabsValue, setTabsValue] = useState('0');
     const targetId = `test-target-${themeClassName}`;
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsxs("div", { children: [_jsxs(Tabs, { value: tabsValue, onChange: setTabsValue, children: [_jsx(SpotlightTarget, { id: targetId, hasPulse: hasPulse, borderRadius: 4, indicatorVariant: "point", children: _jsx(Tabs.Tab, { id: "0", children: "Tab 1" }) }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "0", children: _jsx(Typography, { variant: "body-medium", children: "Tab 1 content" }) }), _jsx(Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "1", children: _jsx(Typography, { variant: "body-medium", children: "Tab 2 content" }) }), _jsx(Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "2", children: _jsx(Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-10", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsxs("div", { children: [_jsxs(Tabs, { value: tabsValue, onChange: setTabsValue, children: [_jsx(SpotlightTarget, { id: targetId, hasPulse: hasPulse, borderRadius: 4, indicatorVariant: "point", children: _jsx(Tabs.Tab, { id: "0", children: "Tab 1" }) }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { className: "p-token-4", value: tabsValue, tabId: "0", children: _jsx(Typography, { variant: "body-medium", children: "Tab 1 content" }) }), _jsx(Tabs.TabPanel, { className: "p-token-4", value: tabsValue, tabId: "1", children: _jsx(Typography, { variant: "body-medium", children: "Tab 2 content" }) }), _jsx(Tabs.TabPanel, { className: "p-token-4", value: tabsValue, tabId: "2", children: _jsx(Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                         setIsOpen(false);
                         setActiveSpotlight(null);
                     }, children: "Close" }), children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));

package/lib/esm/spotlight/stories/spotlight-on-tabs.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,IAAI,EACJ,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,OAAO,CACL,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,0BACE,MAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,aAC5C,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,YAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,GACjB,EAClB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,~~aAAa~~,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,~~YAChE~~,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,~~aAAa~~,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,~~YAChE~~,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,~~aAAa~~,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,~~YAChE~~,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,EACN,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-on-tabs.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-on-tabs.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,IAAI,EACJ,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,0BACE,MAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,aAC5C,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,YAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,GACjB,EAClB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,EACN,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-tour.story.js CHANGED Viewed

@@ -25,7 +25,7 @@ import { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';
 const Component = () => {
     const { themeClassName } = useNeedleTheme();
     const { setActiveSpotlight } = useSpotlightContext();
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), _jsx(SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, asChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), _jsx(SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, asChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), _jsx(SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, asChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), _jsx(SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
+    return (_jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), _jsx(SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, shouldRenderAsChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), _jsx(SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, shouldRenderAsChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), _jsx(SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, shouldRenderAsChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), _jsx(SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
                     {
                         children: (_jsxs(_Fragment, { children: [_jsx(Spotlight.Label, { children: "NEW" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })),
                         target: `test-target-1-${themeClassName}`,

package/lib/esm/spotlight/stories/spotlight-tour.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spotlight-tour.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-tour.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,aAAa,EACb,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAErD,OAAO,CACL,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,KAAC,eAAe,~~IAAC~~,EAAE,EAAE,iBAAiB,cAAc,EAAE,~~EAAE~~,QAAQ,~~QAAC~~,~~OAAO~~,~~kBACtE~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,~~IAAC~~,EAAE,EAAE,iBAAiB,cAAc,EAAE,~~EAAE~~,QAAQ,~~QAAC~~,~~OAAO~~,~~kBACtE~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,~~IAAC~~,EAAE,EAAE,iBAAiB,cAAc,EAAE,~~EAAE~~,QAAQ,~~QAAC~~,~~OAAO~~,~~kBACtE~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,aAAa,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,8BACE,KAAC,SAAS,CAAC,KAAK,sBAAsB,EACtC,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,CAAC,WAAW,cACpB,KAAC,sBAAsB,KAAG,GACJ,EACxB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-tour.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-tour.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,aAAa,EACb,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAErD,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,mBAAmB,kBAEnB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,mBAAmB,kBAEnB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,mBAAmB,kBAEnB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,aAAa,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,8BACE,KAAC,SAAS,CAAC,KAAK,sBAAsB,EACtC,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,CAAC,WAAW,cACpB,KAAC,sBAAsB,KAAG,GACJ,EACxB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-with-icon.story.js CHANGED Viewed

@@ -33,7 +33,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", shouldRenderAsChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                         setIsOpen(false);
                         setActiveSpotlight(null);
                     }, children: "Close" }), children: [_jsx(Spotlight.IconWrapper, { children: _jsx(FingerPrintIconOutline, {}) }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));

package/lib/esm/spotlight/stories/spotlight-with-icon.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,~~OAAO~~,~~kBAEP~~,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,WAAW,cACpB,KAAC,sBAAsB,KAAG,GACJ,EACxB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-with-icon.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-icon.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,mBAAmB,kBAEnB,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,WAAW,cACpB,KAAC,sBAAsB,KAAG,GACJ,EACxB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-with-image.story.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, shouldRenderAsChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                         setIsOpen(false);
                         setActiveSpotlight(null);
                     }, children: "Close" }), children: [_jsx(Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));

package/lib/esm/spotlight/stories/spotlight-with-image.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,~~IAAC~~,EAAE,EAAE,QAAQ,~~EAAE~~,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,~~EAAE~~,~~OAAO~~,~~kBAClE~~,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-with-image.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-image.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,mBAAmB,kBAEnB,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-with-label.story.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", shouldRenderAsChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                         setIsOpen(false);
                         setActiveSpotlight(null);
                     }, children: "Close" }), children: [_jsx(Spotlight.Label, { children: "NEW" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));

package/lib/esm/spotlight/stories/spotlight-with-label.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,~~OAAO~~,~~kBAEP~~,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,KAAK,sBAAsB,EACtC,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-with-label.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-label.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,mBAAmB,kBAEnB,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,KAAK,sBAAsB,EACtC,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/stories/spotlight-with-pointer.story.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex justify-center gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, shouldRenderAsChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
                         setIsOpen(false);
                         setActiveSpotlight(null);
                     }, children: "Close" }), children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));

package/lib/esm/spotlight/stories/spotlight-with-pointer.story.js.map CHANGED Viewed

	@@ -1 +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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,~~wCAAwC~~,~~aACrD~~,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,~~OAAO~~,~~QACP~~,gBAAgB,EAAC,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"spotlight-with-pointer.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-pointer.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,mBAAmB,QACnB,gBAAgB,EAAC,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/spotlight/use-spotlight.js CHANGED Viewed

@@ -21,7 +21,7 @@
 import { autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole, useTransitionStyles, } from '@floating-ui/react';
 import { tokens } from '@neo4j-ndl/base';
 import { useMemo, useState } from 'react';
-export function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy = 'absolute', } = {}) {
+export function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, hasAnchorElementAsPortalAnchor, initialFocus, shouldCloseOnClickOutside, strategy = 'absolute', } = {}) {
     var _a;
     const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);
     const [labelId, setLabelId] = useState();
@@ -55,7 +55,7 @@ export function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOp
         enabled: controlledOpen === undefined,
     });
     const dismiss = useDismiss(context, {
-        outsidePress: closeOnClickOutside,
+        outsidePress: shouldCloseOnClickOutside,
     });
     const role = useRole(context, {
         role: 'dialog',
@@ -65,8 +65,8 @@ export function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOp
         duration: (_a = Number.parseInt(tokens.motion.duration.quick)) !== null && _a !== void 0 ? _a : 0,
     });
     return useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
-        setIsOpen }, interactions), data), { anchorElementAsPortalAnchor,
-        descriptionId,
+        setIsOpen }, interactions), data), { descriptionId,
+        hasAnchorElementAsPortalAnchor,
         initialFocus,
         labelId,
         setDescriptionId,
@@ -78,7 +78,7 @@ export function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOp
         data,
         transitionStyles,
         labelId,
-        anchorElementAsPortalAnchor,
+        hasAnchorElementAsPortalAnchor,
         descriptionId,
         initialFocus,
     ]);

package/lib/esm/spotlight/use-spotlight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-spotlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,UAAU,EACV,IAAI,EACJ,MAAM,EAEN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,eAAe,EAEf,OAAO,EACP,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AA6B1C~~,MAAM,UAAU,YAAY,CAAC,EAC3B,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,QAAQ,EACpB,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,iBAAiB,EAC/B,aAAa,EACb,~~2BAA2B~~,~~EAC3B~~,YAAY,EACZ,~~mBAAmB~~,~~EACnB~~,QAAQ,GAAG,UAAU,MACD,EAAE;;IACtB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAC7D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzE,MAAM,MAAM,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,kBAAkB,CAAC;IACpD,MAAM,SAAS,GAAG,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,qBAAqB,CAAC;IAC7D,MAAM,IAAI,GAAG,WAAW,CAAC;QACvB,QAAQ,EAAE;YACR,SAAS,EAAE,aAAa;SACzB;QACD,UAAU,EAAE;YACV,MAAM,CAAC,EAAE,CAAC;YACV,IAAI,CAAC;gBACH,SAAS,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC;gBAClC,yBAAyB,EAAE,KAAK;gBAChC,OAAO,EAAE,CAAC;aACX,CAAC;YACF,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;SACtB;QACD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,IAAI,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,SAAS;QACpB,QAAQ;QACR,oBAAoB,EAAE,UAAU;KACjC,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAE7B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE;QAC9B,OAAO,EAAE,cAAc,KAAK,SAAS;KACtC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE;QAClC,YAAY,EAAE,~~mBAAmB~~;~~KAClC~~,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE;QAC5B,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAE7D,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,OAAO,EAAE;QAChE,QAAQ,EAAE,MAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,mCAAI,CAAC;KAC7D,CAAC,CAAC;IAEH,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,6CACJ,MAAM;QACN,SAAS,IACN,YAAY,GACZ,IAAI,KACP,~~2BAA2B;QAC3B,~~aAAa;QACb,YAAY;QACZ,OAAO;QACP,gBAAgB;QAChB,UAAU;QACV,gBAAgB,IAChB,EACF;QACE,MAAM;QACN,SAAS;QACT,YAAY;QACZ,IAAI;QACJ,gBAAgB;QAChB,OAAO;QACP,~~2BAA2B~~;~~QAC3B~~,aAAa;QACb,YAAY;KACb,CACF,CAAC;AACJ,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\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"]}
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 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"]}

package/lib/esm/status-indicator/stories/status-indicator-variants.story.js CHANGED Viewed

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { StatusIndicator, Typography } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsxs("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [_jsx(StatusIndicator, { variant: "unknown" }), _jsx(Typography, { variant: "label", children: "Unknown" })] }), _jsxs("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [_jsx(StatusIndicator, { variant: "success" }), _jsx(Typography, { variant: "label", children: "Success" })] }), _jsxs("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [_jsx(StatusIndicator, { variant: "info" }), _jsx(Typography, { variant: "label", children: "Info" })] }), _jsxs("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [_jsx(StatusIndicator, { variant: "warning" }), _jsx(Typography, { variant: "label", children: "Warning" })] }), _jsxs("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [_jsx(StatusIndicator, { variant: "danger" }), _jsx(Typography, { variant: "label", children: "Danger" })] })] }));
+    return (_jsxs("div", { className: "flex gap-token-16", children: [_jsxs("div", { className: "flex flex-col items-center gap-token-8", children: [_jsx(StatusIndicator, { variant: "unknown" }), _jsx(Typography, { variant: "label", children: "Unknown" })] }), _jsxs("div", { className: "flex flex-col items-center gap-token-8", children: [_jsx(StatusIndicator, { variant: "success" }), _jsx(Typography, { variant: "label", children: "Success" })] }), _jsxs("div", { className: "flex flex-col items-center gap-token-8", children: [_jsx(StatusIndicator, { variant: "info" }), _jsx(Typography, { variant: "label", children: "Info" })] }), _jsxs("div", { className: "flex flex-col items-center gap-token-8", children: [_jsx(StatusIndicator, { variant: "warning" }), _jsx(Typography, { variant: "label", children: "Warning" })] }), _jsxs("div", { className: "flex flex-col items-center gap-token-8", children: [_jsx(StatusIndicator, { variant: "danger" }), _jsx(Typography, { variant: "label", children: "Danger" })] })] }));
 };
 export default Component;
 //# sourceMappingURL=status-indicator-variants.story.js.map